Update src/app/page.tsx

src/app/layout.tsx

@@ -1264,4 +1264,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -2,14 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Sparkles, Heart, Quote, Star, Mail } from "lucide-react";
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import { Sparkles, Heart, Quote, Star, Mail, TrendingUp } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -42,7 +43,7 @@ export default function LandingPage() {
       </div>
       
       <div id="hero" data-section="hero">
-        <HeroBillboard
+        <HeroBillboardScroll
           title="Welcome to Artisan Bakery"
           description="Handcrafted pastries, fresh-baked breads, and delicious treats made daily with the finest ingredients. Taste the difference tradition makes."
           background={{ variant: "sparkles-gradient" }}
@@ -112,6 +113,28 @@ export default function LandingPage() {
         />
       </div>
       
+      <div id="social-proof" data-section="social-proof">
+        <MetricCardFourteen
+          title="Trusted by thousands of customers who love our fresh-baked goods every single day."
+          tag="Social Proof"
+          metrics={[
+            {
+              id: "1",              value: "15K+",              description: "Happy customers enjoying our fresh-baked pastries and artisan breads every month."
+            },
+            {
+              id: "2",              value: "2K+",              description: "Five-star reviews from satisfied customers across all platforms."
+            },
+            {
+              id: "3",              value: "50+",              description: "Unique artisan products handcrafted fresh daily in our bakery."
+            },
+            {
+              id: "4",              value: "15",              description: "Years of tradition, excellence, and commitment to quality since our founding."
+            }
+          ]}
+          useInvertedBackground="noInvert"
+        />
+      </div>
+      
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardSix
           testimonials={[
@@ -186,4 +209,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}