feat: add animated shiny text and typing animation components; update…

… HeroSection and ChatParams

app/page.tsx

@@ -5,13 +5,15 @@ import Footer from "@/components/ui/Footer";
 import GridPattern from "@/components/ui/GridBackground/grid-pattern";
 import HeroSection from "@/components/ui/Hero/HeroSection";
 import Navbar from "@/components/ui/Navbar";
+import { TheAnimatedShinyText } from "@/components/ui/Animations/TheInterface";
 import { cn } from "@/lib/utils";
 
 export default function Home() {
   return <main className="bg-background">
     <Navbar />
     <div
       className="relative flex h-svh w-full flex-col items-center justify-center overflow-hidden rounded-none  bg-background md:shadow-xl">
+      <TheAnimatedShinyText />
       <HeroSection />
       <GridPattern
         squares={[

components/ChatParams/TheAnimate.tsx

@@ -3,7 +3,7 @@
 import React, { forwardRef, useRef } from "react";
 
 import { cn } from "@/lib/utils";
-import { AnimatedBeam } from "../ui/animated-beam";
+import { AnimatedBeam } from "../ui/Animations/animated-beam";
 
 const Circle = forwardRef<
     HTMLDivElement,

components/ui/Animations/TheInterface.tsx

@@ -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>
+  );
+}

components/ui/Animations/animated-shiny-text.tsx

@@ -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;

components/ui/Animations/typing-animation.tsx

@@ -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>
+  );
+}

components/ui/Hero/HeroSection.tsx

@@ -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">
-            &apos;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.&apos;   
-              </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">
+          &apos;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.&apos;
+        </p>
+      </div>
+    </div>
+  );
+}

package.json

@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3125",
+    "dev": "next dev -p 3126",
     "build": "next build && cp ./node_modules/tiktoken/tiktoken_bg.wasm .next/server/chunks/",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@nextui-org/react": "^2.4.8",
+    "@radix-ui/react-icons": "^1.3.0",
     "@upstash/rag-chat": "^1.6.4",
     "@upstash/redis": "^1.34.0",
     "ai": "^3.4.7",

tailwind.config.ts

@@ -74,11 +74,20 @@ const config: Config = {
   				to: {
   					transform: 'translateY(calc(-100% - var(--gap)))'
   				}
+  			},
+  			'shiny-text': {
+  				'0%, 90%, 100%': {
+  					'background-position': 'calc(-100% - var(--shiny-width)) 0'
+  				},
+  				'30%, 60%': {
+  					'background-position': 'calc(100% + var(--shiny-width)) 0'
+  				}
   			}
   		},
   		animation: {
   			marquee: 'marquee var(--duration) infinite linear',
-  			'marquee-vertical': 'marquee-vertical var(--duration) linear infinite'
+  			'marquee-vertical': 'marquee-vertical var(--duration) linear infinite',
+  			'shiny-text': 'shiny-text 8s infinite'
   		}
   	}
   },