add animated header

Author: binaryshrey

package-lock.json

@@ -16,12 +16,15 @@
     "@types/node": "^16.18.104",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.3.19",
+    "lucide-react": "^0.417.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "tailwind-merge": "^2.4.0",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

package.json

@@ -1,18 +1,13 @@
 import { ChevronRight } from "lucide-react";
 
-import { cn } from "@/lib/utils";
-import AnimatedGradientText from "@/components/magicui/animated-gradient-text";
-
-const AnimatedHeaderText = () => {
+import { cn } from "../../lib/utils";
+import AnimatedGradientText from "../../lib/animated-gradient-text";
+function AnimatedHeaderText() {
   return (
-    <div className="z-10 flex min-h-[16rem] items-center justify-center">
+    <div className="z-10 flex min-h-[4rem] items-center justify-center">
       <AnimatedGradientText>
-        🎉 <hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />{" "}
-        <span
-          className={cn(
-            `inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
-          )}
-        >
+        🎉 <hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-500" />{" "}
+        <span>
           Introducing Chronos v1.0
         </span>
         <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />

src/components/home/AnimatedHeaderText.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Dialog } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import logo from "../../assets/logo-dark.svg";
+import AnimatedHeaderText from './AnimatedHeaderText';
 
 const navigation = [
   { name: 'Github', href: '#' },
@@ -119,6 +120,7 @@ const HeroSection = () => {
         <div className="relative py-24 sm:py-32 lg:pb-40">
           <div className="mx-auto max-w-7xl px-6 lg:px-8">
             <div className="mx-auto max-w-3xl text-center">
+                <AnimatedHeaderText />
               <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
                 Project management and
               </h1>

src/components/home/HeroSection.jsx

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+
+export default function AnimatedGradientText({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%]  dark:bg-black/10",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

src/lib/animated-gradient-text.tsx

@@ -15,6 +15,16 @@ module.exports = {
         },
         fontFamily: {
         sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+        animation: {
+          gradient: "gradient 8s linear infinite",
+        },
+        keyframes: {
+          gradient: {
+            to: {
+              backgroundPosition: "var(--bg-size) 0",
+            },
+          },
+        },
       },
       },
     },