src/components/Layout.tsx

@@ -4,6 +4,40 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
 import { Outlet } from 'react-router-dom';
 import { StyleProvider } from "@/components/ui/StyleProvider";
+import { useState, useEffect } from 'react';
+import { Timer } from 'lucide-react';
+import Button from '@/components/ui/Button';
+
+function FloatingDiscount() {
+  const [timeLeft, setTimeLeft] = useState(300);
+
+  useEffect(() => {
+    if (timeLeft <= 0) return;
+    const timer = setInterval(() => setTimeLeft(t => t - 1), 1000);
+    return () => clearInterval(timer);
+  }, [timeLeft]);
+
+  const mins = Math.floor(timeLeft / 60);
+  const secs = timeLeft % 60;
+
+  if (timeLeft <= 0) return null;
+
+  return (
+    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-in slide-in-from-bottom-10 fade-in duration-500">
+      <div className="bg-primary-cta text-primary-cta-text px-4 py-2 md:px-6 md:py-3 rounded-full shadow-2xl flex items-center gap-3 md:gap-4 border border-white/20 backdrop-blur-md whitespace-nowrap">
+        <div className="flex items-center gap-2 font-medium text-sm md:text-base">
+          <Timer className="w-4 h-4 md:w-5 md:h-5" />
+          <span className="hidden sm:inline">Claim 20% Off Today!</span>
+          <span className="sm:hidden">20% Off!</span>
+        </div>
+        <div className="bg-background/20 px-2 py-1 md:px-3 md:py-1 rounded-md font-mono font-bold tracking-wider text-sm md:text-base">
+          {mins}:{secs.toString().padStart(2, '0')}
+        </div>
+        <Button text="Opt In" variant="secondary" className="!py-1 !px-3 md:!py-1.5 md:!px-4 text-xs md:text-sm" />
+      </div>
+    </div>
+  );
+}
 
 export default function Layout() {
   const navItems = [
@@ -52,6 +86,7 @@ export default function Layout() {
       <main className="flex-grow">
         <Outlet />
       </main>
+      <FloatingDiscount />
       <SectionErrorBoundary name="footer">
         <FooterBasic
       columns={[