src/pages/HomePage.tsx

@@ -14,7 +14,8 @@ import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
 
-{/* webild-stub @2026-06-08T10:52:22.393Z: To the top right of the Our Story section image add a 5 min timer countdown to opt in to a disocunt for today */}
+
+import PromoSection from './HomePage/sections/Promo';{/* webild-stub @2026-06-08T10:52:22.393Z: To the top right of the Our Story section image add a 5 min timer countdown to opt in to a disocunt for today */}
 
 export default function HomePage(): React.JSX.Element {
   return (
@@ -22,6 +23,7 @@ export default function HomePage(): React.JSX.Element {
       <HeroSection />
       <AboutSection />
       <ProductsSection />
+      <PromoSection />
       <HowItWorksSection />
       <MetricsSection />
       <TestimonialsSection />

src/pages/HomePage/sections/Promo.tsx

@@ -0,0 +1,92 @@
+import { useState, useEffect } from "react";
+import { motion } from "motion/react";
+import Button from "@/components/ui/Button";
+
+export default function PromoSection() {
+  const [timeLeft, setTimeLeft] = useState({ hours: 5, minutes: 0, seconds: 0 });
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev.hours === 0 && prev.minutes === 0 && prev.seconds === 0) {
+          clearInterval(timer);
+          return prev;
+        }
+        let newSeconds = prev.seconds - 1;
+        let newMinutes = prev.minutes;
+        let newHours = prev.hours;
+
+        if (newSeconds < 0) {
+          newSeconds = 59;
+          newMinutes -= 1;
+        }
+        if (newMinutes < 0) {
+          newMinutes = 59;
+          newHours -= 1;
+        }
+
+        return { hours: newHours, minutes: newMinutes, seconds: newSeconds };
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <section data-webild-section="promo" id="promo" className="relative w-full py-24 bg-primary-cta text-primary-cta-text overflow-hidden">
+      <div className="max-w-4xl mx-auto px-6 text-center relative z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <span className="inline-block py-1 px-3 rounded-full bg-secondary-cta text-secondary-cta-text text-sm font-medium mb-6">
+            Limited Time Offer
+          </span>
+          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+            Get 20% Off Your First Order
+          </h2>
+          <p className="text-lg md:text-xl mb-10 opacity-90">
+            Experience the taste of freshly baked goodness. Claim your discount before the timer runs out!
+          </p>
+          
+          <div className="flex justify-center gap-4 md:gap-8 mb-10">
+            <div className="flex flex-col items-center">
+              <div className="w-16 h-16 md:w-20 md:h-20 flex items-center justify-center bg-background text-foreground rounded-xl text-2xl md:text-3xl font-bold shadow-lg">
+                {String(timeLeft.hours).padStart(2, '0')}
+              </div>
+              <span className="text-sm mt-3 font-medium opacity-80 uppercase tracking-wider">Hours</span>
+            </div>
+            <div className="text-3xl md:text-4xl font-bold mt-3 opacity-50">:</div>
+            <div className="flex flex-col items-center">
+              <div className="w-16 h-16 md:w-20 md:h-20 flex items-center justify-center bg-background text-foreground rounded-xl text-2xl md:text-3xl font-bold shadow-lg">
+                {String(timeLeft.minutes).padStart(2, '0')}
+              </div>
+              <span className="text-sm mt-3 font-medium opacity-80 uppercase tracking-wider">Mins</span>
+            </div>
+            <div className="text-3xl md:text-4xl font-bold mt-3 opacity-50">:</div>
+            <div className="flex flex-col items-center">
+              <div className="w-16 h-16 md:w-20 md:h-20 flex items-center justify-center bg-background text-foreground rounded-xl text-2xl md:text-3xl font-bold shadow-lg">
+                {String(timeLeft.seconds).padStart(2, '0')}
+              </div>
+              <span className="text-sm mt-3 font-medium opacity-80 uppercase tracking-wider">Secs</span>
+            </div>
+          </div>
+
+          <Button 
+            text="Claim Discount Now" 
+            variant="secondary" 
+            className="text-lg px-8 py-4"
+          />
+        </motion.div>
+      </div>
+      
+      {/* Decorative background elements */}
+      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none opacity-10">
+        <div className="absolute -top-24 -left-24 w-96 h-96 bg-white rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-24 -right-24 w-96 h-96 bg-white rounded-full blur-3xl"></div>
+      </div>
+    </section>
+  );
+}