feat: add promo banner

ayushsharma82 · Nov 24, 2024 · 8e40e36 · 8e40e36
1 parent 53cd927
commit 8e40e36
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/pages/_document.js b/pages/_document.js
@@ -1,10 +1,49 @@
 import { Head, Html, Main, NextScript } from "next/document";
 
+const promo_banner = [
+  "Black Friday 2024 Sale is Live!",
+  "Flat 33% off on Advantage Bundle",
+  "Upgrade Now at Lowest Price Ever!"
+];
+
 export default function Document() {
   return (
     <Html lang="en">
       <Head />
       <body className="antialiased">
+      {
+          promo_banner && (
+            <div className="relative flex overflow-x-hidden text-zinc-200 font-semibold text-sm uppercase bg-indigo-600">
+              <div className="py-2 animate-marquee whitespace-nowrap">
+                {
+                  [1,2,3].map((_, i) => (
+                    <span key={'pb-'+i} className='mx-6'>
+                      {
+                        promo_banner.map((item, i) => (
+                          <span className="mx-4" key={'pbs-'+i}>{item}</span>
+                        ))
+                      }
+                    </span>
+                  ))
+                }
+              </div>
+
+              <div className="absolute top-0 py-2 animate-marquee2 whitespace-nowrap">
+                {
+                  [1, 2, 3].map((_, i) => (
+                    <span key={'pba-' + i} className='mx-6'>
+                      {
+                        promo_banner.map((item, i) => (
+                          <span className="mx-4" key={'pbas-' + i}>{item}</span>
+                        ))
+                      }
+                    </span>
+                  ))
+                }
+              </div>
+            </div>
+          )
+        }
         <Main />
         <NextScript />
       </body>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -13,6 +13,21 @@ module.exports = {
         background: "var(--background)",
         foreground: "var(--foreground)",
       },
+      animation: {
+        'spin-slow': 'spin 2s linear infinite',
+        marquee: 'marquee 25s linear infinite',
+        marquee2: 'marquee2 25s linear infinite',
+      },
+      keyframes: {
+        marquee: {
+          '0%': { transform: 'translateX(0%)' },
+          '100%': { transform: 'translateX(-100%)' },
+        },
+        marquee2: {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(0%)' },
+        },
+      },
     },
   },
   plugins: [],