Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -3,15 +3,14 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureBento from '@/components/sections/feature/FeatureBento';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { Leaf, Shield, Sparkles } from "lucide-react";
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 
 export default function LandingPage() {
   return (
@@ -29,105 +28,75 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleApple
+      <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Our Story",          id: "about"},
-        {
-          name: "Collection",          id: "products"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Features", id: "features" },
+        { name: "Shop", id: "products" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Bloom & Petal"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
-      background={{
-        variant: "rotated-rays-animated"}}
+      <HeroSplitDoubleCarousel
+      background={{ variant: "rotated-rays-animated" }}
       title="Nature’s Beauty, Delivered"
       description="Experience the freshness of hand-picked seasonal flowers designed to brighten your home or surprise someone special."
-      carouselItems={[
-        {
-          id: "1",          imageSrc: "http://img.b2bpic.net/free-photo/flowers-florist-atelier_23-2147760917.jpg",          imageAlt: "fresh flowers bouquet warm light"},
-        {
-          id: "2",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-hello-spring-collage_23-2149319131.jpg",          imageAlt: "elegant flower arrangement minimal"},
-        {
-          id: "3",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-beautiful-colorful-flowers-with-leaves-blue-surface-with-copy-space_141793-13723.jpg",          imageAlt: "vibrant floral bouquet soft background"},
-        {
-          id: "4",          imageSrc: "http://img.b2bpic.net/free-photo/flowers-from-home-garden-vase-white-background_169016-36245.jpg",          imageAlt: "delicate roses bunch floral shop"},
-        {
-          id: "5",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-roses-vase_23-2148387998.jpg",          imageAlt: "nature inspired floral collection"},
-        {
-          id: "6",          imageSrc: "http://img.b2bpic.net/free-photo/flower-composition-plate_23-2147766623.jpg",          imageAlt: "luxury flower shop floral display"},
+      buttons={[{ text: "Shop Fresh Flowers", href: "#products" }]}
+      leftCarouselItems={[
+        { imageSrc: "http://img.b2bpic.net/free-photo/flowers-florist-atelier_23-2147760917.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-hello-spring-collage_23-2149319131.jpg" },
+      ]}
+      rightCarouselItems={[
+        { imageSrc: "http://img.b2bpic.net/free-photo/side-view-beautiful-colorful-flowers-with-leaves-blue-surface-with-copy-space_141793-13723.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/flowers-from-home-garden-vase-white-background_169016-36245.jpg" },
       ]}
-      autoPlay={true}
     />
   </div>
 
   <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="split"
-      useInvertedBackground={false}
+      <MetricSplitMediaAbout
       title="Artfully Curated Florals"
-      description="We believe in the power of flowers to transform spaces and elevate moods. Our team of expert florists carefully curates every bouquet using sustainable, locally sourced blooms to ensure freshness and longevity."
-      bulletPoints={[
-        {
-          title: "Sustainable Sourcing",          description: "We source flowers from local farms."},
-        {
-          title: "Expert Design",          description: "Handcrafted bouquets by professional artists."},
-        {
-          title: "Same-Day Delivery",          description: "Freshness delivered on your schedule."},
+      description="We believe in the power of flowers to transform spaces and elevate moods. Our team of expert florists carefully curates every bouquet using sustainable, locally sourced blooms."
+      metrics={[
+        { value: "500+", title: "Daily Bouquets" },
+        { value: "20", title: "Local Farms" },
+        { value: "15", title: "Expert Florists" },
       ]}
+      useInvertedBackground={false}
       imageSrc="http://img.b2bpic.net/free-photo/florist_23-2148013605.jpg"
-      mediaAnimation="slide-up"
-      imageAlt="florist creating beautiful arrangement"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureBento
+      <FeatureCardThree
       animationType="slide-up"
+      gridVariant="three-columns-all-equal-width"
       textboxLayout="default"
       useInvertedBackground={false}
+      title="Why Choose Our Blooms?"
+      description="Excellence in service and botanical quality, designed to make every moment memorable."
       features={[
-        {
-          title: "Freshness Guarantee",          description: "We ensure your flowers arrive at the peak of their beauty.",          bentoComponent: "reveal-icon",          icon: Shield,
-        },
-        {
-          title: "Seasonal Collections",          description: "Our offerings change with the seasons to reflect nature's best.",          bentoComponent: "reveal-icon",          icon: Leaf,
-        },
-        {
-          title: "Custom Designs",          description: "Need something unique? Our artists love custom commissions.",          bentoComponent: "reveal-icon",          icon: Sparkles,
-        },
+        { title: "Freshness Guarantee", description: "Peak beauty, delivered.", imageSrc: "http://img.b2bpic.net/free-photo/bouquet-fresh-roses-with-green-leaves-decorative-plant_23-2148071792.jpg?_wi=1" },
+        { title: "Seasonal Collections", description: "Nature's best, curated.", imageSrc: "http://img.b2bpic.net/free-photo/watering-can-yellow-spring-flowers_23-2148433003.jpg?_wi=1" },
+        { title: "Eco-Friendly Packaging", description: "Respecting the earth.", imageSrc: "http://img.b2bpic.net/free-photo/bouquet-tulips-white-wooden-background-top-view_169016-29617.jpg?_wi=1" },
       ]}
-      title="Why Choose Us?"
-      description="Excellence in service and botanical quality."
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardOne
+      <ProductCardTwo
+      gridVariant="three-columns-all-equal-width"
       animationType="slide-up"
       textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",          name: "Classic Roses",          price: "$45",          imageSrc: "http://img.b2bpic.net/free-photo/bouquet-fresh-roses-with-green-leaves-decorative-plant_23-2148071792.jpg"},
-        {
-          id: "p2",          name: "Golden Sunflowers",          price: "$38",          imageSrc: "http://img.b2bpic.net/free-photo/watering-can-yellow-spring-flowers_23-2148433003.jpg"},
-        {
-          id: "p3",          name: "Spring Tulips",          price: "$42",          imageSrc: "http://img.b2bpic.net/free-photo/bouquet-tulips-white-wooden-background-top-view_169016-29617.jpg"},
-        {
-          id: "p4",          name: "Lavender Dream",          price: "$35",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-gardening-concept-with-copyspace_23-2148195478.jpg"},
-        {
-          id: "p5",          name: "Elegant Lilies",          price: "$50",          imageSrc: "http://img.b2bpic.net/free-photo/bouquet-flower_74190-430.jpg"},
-        {
-          id: "p6",          name: "Peony Blush",          price: "$55",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-blooming-flowers_23-2148443884.jpg"},
+        { id: "1", brand: "Bloom", name: "Classic Roses", price: "$45", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/bouquet-fresh-roses-with-green-leaves-decorative-plant_23-2148071792.jpg?_wi=2" },
+        { id: "2", brand: "Bloom", name: "Sunflowers", price: "$38", rating: 4, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/watering-can-yellow-spring-flowers_23-2148433003.jpg?_wi=2" },
+        { id: "3", brand: "Bloom", name: "Spring Tulips", price: "$42", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/bouquet-tulips-white-wooden-background-top-view_169016-29617.jpg?_wi=2" },
       ]}
       title="Our Collection"
       description="Hand-picked favorites for every occasion."
@@ -135,82 +104,55 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
+      <TestimonialCardThirteen
+      title="From Our Happy Customers"
+      description="See why our community loves our floral designs."
+      showRating={true}
+      animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",          title: "Great Service",          quote: "The flowers were incredibly fresh and beautiful.",          name: "Alice M.",          role: "Client",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-celebrating-mother-s-day_23-2151207271.jpg"},
-        {
-          id: "2",          title: "Stunning Bouquet",          quote: "Bloom & Petal is my go-to for all gifts.",          name: "Bob R.",          role: "Loyal Customer",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-senior-woman-holding-flowers_23-2148488576.jpg"},
-        {
-          id: "3",          title: "Fast Delivery",          quote: "Perfect timing for our anniversary surprise.",          name: "Carla S.",          role: "Client",          imageSrc: "http://img.b2bpic.net/free-photo/pleased-woman-with-short-hair-looking-surprised-happy-smiling-cheerfully-while-receiving-bouquet-flowers-from-her-boyfriend-celebrating-international-women-s-day-march-8_141793-78802.jpg"},
-        {
-          id: "4",          title: "Exquisite Design",          quote: "The artistry is simply unmatched in this area.",          name: "David W.",          role: "Interior Designer",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-beautiful-blond-hair-gentle-smile-dressed-green-robe-with-belt-is-working-greenhouse_197531-12309.jpg"},
-        {
-          id: "5",          title: "Always Fresh",          quote: "I love how long the arrangements last.",          name: "Emily P.",          role: "Client",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-portrait-blonde-young-female-florist-holding-bouquet-hand-making-ok-gesture_23-2148049427.jpg"},
+        { id: "1", name: "Alice M.", handle: "@alice", testimonial: "The flowers were incredibly fresh and beautiful.", rating: 5 },
+        { id: "2", name: "Bob R.", handle: "@bob", testimonial: "Bloom & Petal is my go-to for all gifts.", rating: 5 },
       ]}
-      title="From Our Happy Customers"
-      description="See why our community loves our floral designs."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
+      <FaqSplitMedia
       faqs={[
-        {
-          id: "q1",          title: "Do you offer same-day delivery?",          content: "Yes, orders placed before 1 PM are eligible for same-day delivery."},
-        {
-          id: "q2",          title: "How long do the bouquets last?",          content: "With proper care, our arrangements can last 5-7 days."},
-        {
-          id: "q3",          title: "Can I request custom colors?",          content: "Absolutely, we specialize in custom floral commissions."},
+        { id: "q1", title: "Do you offer same-day delivery?", content: "Yes, orders placed before 1 PM are eligible for same-day delivery." },
+        { id: "q2", title: "How long do the bouquets last?", content: "With proper care, our arrangements can last 5-7 days." },
       ]}
-      sideTitle="Common Questions"
-      sideDescription="Find answers to our most popular inquiries here."
+      title="Common Questions"
+      description="Find answers to our most popular inquiries here."
       faqsAnimation="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-wrapping-tulips_23-2148488462.jpg"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
       tag="Contact Us"
       title="Let's Get in Touch"
       description="Have questions about our collections? Send us a message."
-      imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-wrapping-tulips_23-2148488462.jpg"
-      mediaAnimation="slide-up"
-      imageAlt="florist creating beautiful arrangement"
+      background={{ variant: "plain" }}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/3d-green-palm-leaves-arrangement_23-2149015447.jpg"
+      <FooterLogoEmphasis
       logoText="Bloom & Petal"
       columns={[
-        {
-          title: "Shop",          items: [
-            {
-              label: "All Flowers",              href: "#products"},
-            {
-              label: "Custom Requests",              href: "#contact"},
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About Us",              href: "#about"},
-            {
-              label: "FAQ",              href: "#faq"},
-          ],
-        },
+        { items: [{ label: "Home", href: "#" }, { label: "Shop", href: "#products" }] },
+        { items: [{ label: "About", href: "#about" }, { label: "FAQ", href: "#faq" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}