-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add animated shiny text and typing animation components; update…
… HeroSection and ChatParams
- Loading branch information
Showing
11 changed files
with
159 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { ArrowRightIcon } from "@radix-ui/react-icons"; | ||
import { cn } from "@/lib/utils"; | ||
import AnimatedShinyText from "./animated-shiny-text"; | ||
|
||
export async function TheAnimatedShinyText() { | ||
return ( | ||
<div className="flex items-center justify-center"> | ||
<div | ||
className={cn( | ||
"group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800", | ||
)} | ||
> | ||
<AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400"> | ||
<span>✨ Your User Friendly Ai</span> | ||
<ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" /> | ||
</AnimatedShinyText> | ||
</div> | ||
</div> | ||
); | ||
} |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { CSSProperties, FC, ReactNode } from "react"; | ||
|
||
import { cn } from "@/lib/utils"; | ||
|
||
interface AnimatedShinyTextProps { | ||
children: ReactNode; | ||
className?: string; | ||
shimmerWidth?: number; | ||
} | ||
|
||
const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({ | ||
children, | ||
className, | ||
shimmerWidth = 100, | ||
}) => { | ||
return ( | ||
<p | ||
style={ | ||
{ | ||
"--shiny-width": `${shimmerWidth}px`, | ||
} as CSSProperties | ||
} | ||
className={cn( | ||
"mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70", | ||
|
||
// Shine effect | ||
"animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]", | ||
|
||
// Shine gradient | ||
"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80", | ||
|
||
className, | ||
)} | ||
> | ||
{children} | ||
</p> | ||
); | ||
}; | ||
|
||
export default AnimatedShinyText; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
"use client"; | ||
|
||
import { useEffect, useState } from "react"; | ||
|
||
import { cn } from "@/lib/utils"; | ||
|
||
interface TypingAnimationProps { | ||
text: string; | ||
duration?: number; | ||
className?: string; | ||
} | ||
|
||
export default function TypingAnimation({ | ||
text, | ||
duration = 80, | ||
className, | ||
}: TypingAnimationProps) { | ||
const [displayedText, setDisplayedText] = useState<string>(""); | ||
const [i, setI] = useState<number>(0); | ||
|
||
useEffect(() => { | ||
const typingEffect = setInterval(() => { | ||
if (i < text.length) { | ||
setDisplayedText(text.substring(0, i + 1)); | ||
setI(i + 1); | ||
} else { | ||
clearInterval(typingEffect); | ||
} | ||
}, duration); | ||
|
||
return () => { | ||
clearInterval(typingEffect); | ||
}; | ||
}, [duration, i, text]); | ||
|
||
return ( | ||
<h1 | ||
className={cn( | ||
"font-display text-center text-4xl leading-[5rem] tracking-[-0.02em] drop-shadow-sm", | ||
className, | ||
)} | ||
> | ||
{displayedText ? displayedText : text} | ||
</h1> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,29 +1,32 @@ | ||
'use client'; | ||
|
||
import TypingAnimation from "../Animations/typing-animation"; | ||
|
||
|
||
export default function HeroSection() { | ||
return ( | ||
<div className="max-w-6xl px-4 py-8 mx-auto sm:py-24 sm:px-6 lg:px-8"> | ||
<div className="sm:flex sm:flex-col sm:align-center"> | ||
<h1 className="text-4xl font-extrabold text-white sm:text-center sm:text-6xl"> | ||
Aurora Ai | ||
</h1> | ||
<p className="max-w-2xl m-auto mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl"> | ||
Your One-Stop Gateway to the Ultimate Unified AI Assistant for All Your Needs. | ||
</p> | ||
<div className="mt-12"></div> | ||
<p className="max-w-2xl mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl text-nowrap items-center justify-center flex"> | ||
'Built a smart chatbot application using Retrieval-Augmented Generation (RAG) </p> | ||
<p className="max-w-2xl mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl text-nowrap items-center justify-center flex"> | ||
that dynamically processes any provided URL as input, leveraging advanced natural language | ||
</p> | ||
<p className="max-w-2xl mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl text-nowrap items-center justify-center flex"> | ||
understanding to extract relevant information and deliver accurate, context-aware responses | ||
</p> | ||
<p className="max-w-2xl mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl text-nowrap"> | ||
through an intuitive conversational interface.' | ||
</p> | ||
</div> | ||
</div> | ||
); | ||
} | ||
return ( | ||
<div className="max-w-6xl px-4 py-8 mx-auto sm:py-24 sm:px-6 lg:px-8"> | ||
<div className="sm:flex sm:flex-col sm:align-center"> | ||
<h1 className="text-4xl font-extrabold text-white sm:text-center sm:text-6xl"> | ||
Aurora Ai | ||
</h1> | ||
<TypingAnimation | ||
className=" max-w-2xl m-auto mt-5 text-xl text-blue-300 sm:text-center sm:text-2xl font-semibold" | ||
text="Your One-Stop Gateway to the Ultimate Unified AI Assistant for All Your Needs." | ||
/> | ||
<div className="mt-12"></div> | ||
<p className="max-w-2xl mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl text-nowrap items-center justify-center flex"> | ||
'Built a smart chatbot application using Retrieval-Augmented Generation (RAG) </p> | ||
<p className="max-w-2xl mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl text-nowrap items-center justify-center flex"> | ||
that dynamically processes any provided URL as input, leveraging advanced natural language | ||
</p> | ||
<p className="max-w-2xl mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl text-nowrap items-center justify-center flex"> | ||
understanding to extract relevant information and deliver accurate, context-aware responses | ||
</p> | ||
<p className="max-w-2xl mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl text-nowrap"> | ||
through an intuitive conversational interface.' | ||
</p> | ||
</div> | ||
</div> | ||
); | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters