add: reg closes scrolling banner

pranavvraja · pranavvraja · commit a14126b07632 · 2024-12-12T18:28:57.000+05:30
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import TEDxStarsCanvas from "@/components/ui/stars";
 import Script from "next/script";
 import { ScrollProgressBar } from "@/components/common/scroll-progress";
 import Footer from "@/components/common/footer";
+import ScrollingBanner from "@/components/common/scrolling-banner";
 const inter = Inter({ subsets: ["latin"] });
 export const metadata: Metadata = {
   title: "TEDxSJEC",
@@ -43,6 +44,7 @@ export default function RootLayout({
       </head>
       <body className={(inter.className = "overflow-x-hidden")}>
         <ScrollProgressBar />
+        <ScrollingBanner />
         <TEDxStarsCanvas />
         <Providers>{children} </Providers>
         <Footer />
diff --git a/src/components/common/scrolling-banner.tsx b/src/components/common/scrolling-banner.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export default function ScrollingBanner() {
+  const sentence = "   Registrations close soon   •   ";
+  const repeatCount = 20; // Increase this number to add more repetitions
+
+  return (
+    <div className="bg-gradient-to-b from-transparent from-60% via-redTheme via-75% to-transparent to-90% h-fit text-whiteTheme   overflow-hidden py-2">
+      <motion.div
+        className="whitespace-nowrap inline-block mt-20 pb-4"
+        animate={{
+          x: ["0%", "-50%"],
+        }}
+        transition={{
+          x: {
+            repeat: Infinity,
+            repeatType: "loop",
+            duration: 15, // Reduced from 20 to 15 to speed up the animation
+            ease: "linear",
+          },
+        }}
+      >
+        <span className="text-lg font-semibold px-4">
+          {sentence.repeat(repeatCount)}
+        </span>
+      </motion.div>
+    </div>
+  );
+}
