Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -10,7 +10,7 @@ import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarou
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import { Award, Clock, Users } from "lucide-react";
 
@@ -33,21 +33,13 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",
-          id: "#hero",
-        },
+          name: "Home",          id: "#hero"},
         {
-          name: "Catalog",
-          id: "#catalog",
-        },
+          name: "Catalog",          id: "#catalog"},
         {
-          name: "Pricing",
-          id: "#pricing",
-        },
+          name: "Pricing",          id: "#pricing"},
         {
-          name: "FAQ",
-          id: "#faq",
-        },
+          name: "FAQ",          id: "#faq"},
       ]}
       brandName="StreamLine"
     />
@@ -56,35 +48,22 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
       background={{
-        variant: "sparkles-gradient",
-      }}
+        variant: "sparkles-gradient"}}
       title="Endless Entertainment Awaits"
       description="Stream the latest blockbusters, original series, and documentaries on any device, anywhere you go."
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-glowing-screen-table-dark-top-view-copy-space_169016-53598.jpg",
-          imageAlt: "Cinematic Scene 1",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-glowing-screen-table-dark-top-view-copy-space_169016-53598.jpg",          imageAlt: "Cinematic Scene 1"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/metal-texture-grunge-effect_1048-4497.jpg",
-          imageAlt: "Cinematic Scene 2",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/metal-texture-grunge-effect_1048-4497.jpg",          imageAlt: "Cinematic Scene 2"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-colorful-neon-lights-forming-triangular-shapes-perspective_181624-56945.jpg",
-          imageAlt: "Cinematic Scene 3",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-colorful-neon-lights-forming-triangular-shapes-perspective_181624-56945.jpg",          imageAlt: "Cinematic Scene 3"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/trick-treat-sign-halloween_23-2148614351.jpg",
-          imageAlt: "Cinematic Scene 4",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/trick-treat-sign-halloween_23-2148614351.jpg",          imageAlt: "Cinematic Scene 4"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/mythical-video-game-inspired-landscape-with-human-nature_23-2150974274.jpg",
-          imageAlt: "Cinematic Scene 5",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/mythical-video-game-inspired-landscape-with-human-nature_23-2150974274.jpg",          imageAlt: "Cinematic Scene 5"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/wedding-rings-hang-green-branch_1304-5580.jpg",
-          imageAlt: "Cinematic Scene 6",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/wedding-rings-hang-green-branch_1304-5580.jpg",          imageAlt: "Cinematic Scene 6"},
       ]}
     />
   </div>
@@ -96,26 +75,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
-          title: "Ultra HD Streaming",
-          subtitle: "4K Quality",
-          category: "Quality",
-          value: "Crystal clear visuals for your home theater.",
-        },
+          id: "f1",          title: "Ultra HD Streaming",          subtitle: "4K Quality",          category: "Quality",          value: "Crystal clear visuals for your home theater."},
         {
-          id: "f2",
-          title: "Watch Offline",
-          subtitle: "Download Anywhere",
-          category: "Convenience",
-          value: "Download shows to watch without needing data.",
-        },
+          id: "f2",          title: "Watch Offline",          subtitle: "Download Anywhere",          category: "Convenience",          value: "Download shows to watch without needing data."},
         {
-          id: "f3",
-          title: "Multiple Devices",
-          subtitle: "Seamless Sync",
-          category: "Flexibility",
-          value: "Start on your phone, finish on your TV.",
-        },
+          id: "f3",          title: "Multiple Devices",          subtitle: "Seamless Sync",          category: "Flexibility",          value: "Start on your phone, finish on your TV."},
       ]}
       title="Why Stream With Us"
       description="Experience superior quality and convenience with our top-tier features."
@@ -123,51 +87,21 @@ export default function LandingPage() {
   </div>
 
   <div id="catalog" data-section="catalog">
-      <ProductCardOne
+      <ProductCardFour
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
-          name: "Action Hero",
-          price: "Included",
-          imageSrc: "http://img.b2bpic.net/free-photo/illustrated-rendering-twin-avatar_23-2151061375.jpg",
-        },
+          id: "h1",          name: "Hollywood Classics",          price: "100+ Titles",          variant: "Hollywood",          imageSrc: "http://img.b2bpic.net/free-photo/illustrated-rendering-twin-avatar_23-2151061375.jpg"},
         {
-          id: "p2",
-          name: "Space Odyssey",
-          price: "Included",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-putting-headphones-play-videogames-with-teammates_482257-120651.jpg",
-        },
+          id: "b1",          name: "Bollywood Hits",          price: "80+ Titles",          variant: "Bollywood",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-putting-headphones-play-videogames-with-teammates_482257-120651.jpg"},
         {
-          id: "p3",
-          name: "Drama Lane",
-          price: "Included",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-portrait-with-light-effects_23-2151118172.jpg",
-        },
-        {
-          id: "p4",
-          name: "Dark Forest",
-          price: "Included",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-terrifing-clown_23-2150549668.jpg",
-        },
-        {
-          id: "p5",
-          name: "Wild World",
-          price: "Included",
-          imageSrc: "http://img.b2bpic.net/free-photo/hello-november-composition-with-mushroom_23-2149675060.jpg",
-        },
-        {
-          id: "p6",
-          name: "Magic Tale",
-          price: "Included",
-          imageSrc: "http://img.b2bpic.net/free-photo/collage-about-movie-time-with-woman-girl_23-2149946313.jpg",
-        },
+          id: "i1",          name: "Global Cinema",          price: "150+ Titles",          variant: "International",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-portrait-with-light-effects_23-2151118172.jpg"}
       ]}
-      title="Trending Now"
-      description="Discover popular hits everyone is talking about."
+      title="Browse By Category"
+      description="Explore our curated film collections from around the world."
     />
   </div>
 
@@ -178,38 +112,23 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "pl1",
-          badge: "Basic",
-          price: "$9.99/mo",
-          subtitle: "For casual viewers",
-          features: [
-            "HD Streaming",
-            "1 Screen",
-          ],
+          id: "pl1",          badge: "Basic",          price: "$9.99/mo",          subtitle: "For casual viewers",          features: [
+            "HD Streaming",            "1 Screen"],
         },
         {
-          id: "pl2",
-          badge: "Standard",
-          price: "$15.99/mo",
-          subtitle: "For families",
-          features: [
-            "Full HD",
-            "3 Screens",
-            "Offline Downloads",
-          ],
+          id: "pl2",          badge: "Standard",          price: "$15.99/mo",          subtitle: "For families",          features: [
+            "Full HD",            "3 Screens",            "Offline Downloads"],
         },
         {
-          id: "pl3",
-          badge: "Premium",
-          price: "$19.99/mo",
-          subtitle: "For cinephiles",
-          features: [
-            "4K Ultra HD",
-            "4 Screens",
-            "Premium Audio",
-          ],
+          id: "pl3",          badge: "Premium",          price: "$19.99/mo",          subtitle: "For cinephiles",          features: [
+            "4K Ultra HD",            "4 Screens",            "Premium Audio"],
         },
       ]}
+      buttons={[
+        { text: "Select Plan", href: "#contact" },
+        { text: "Select Plan", href: "#contact" },
+        { text: "Select Plan", href: "#contact" }
+      ]}
       title="Simple Pricing"
       description="Choose the plan that suits your viewing habits."
     />
@@ -222,23 +141,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
-          icon: Users,
-          title: "Active Subscribers",
-          value: "50M+",
-        },
+          id: "m1",          icon: Users,
+          title: "Active Subscribers",          value: "50M+"},
         {
-          id: "m2",
-          icon: Clock,
-          title: "Hours Streamed",
-          value: "2B+",
-        },
+          id: "m2",          icon: Clock,
+          title: "Hours Streamed",          value: "2B+"},
         {
-          id: "m3",
-          icon: Award,
-          title: "Awards Won",
-          value: "150+",
-        },
+          id: "m3",          icon: Award,
+          title: "Awards Won",          value: "150+"},
       ]}
       title="Our Impact"
       description="Numbers that define our streaming service."
@@ -251,45 +161,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
-          title: "Great Library",
-          quote: "I find something new to watch every single day.",
-          name: "Sarah J.",
-          role: "Film Buff",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-red-shirt-black-wall_140725-143454.jpg",
-        },
+          id: "t1",          title: "Great Library",          quote: "I find something new to watch every single day.",          name: "Sarah J.",          role: "Film Buff",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-red-shirt-black-wall_140725-143454.jpg"},
         {
-          id: "t2",
-          title: "Incredible Quality",
-          quote: "The 4K streaming is just unmatched.",
-          name: "Mike D.",
-          role: "Techie",
-          imageSrc: "http://img.b2bpic.net/free-photo/tech-savvy-user-working-his-personal-laptop-test-new-software_482257-119698.jpg",
-        },
+          id: "t2",          title: "Incredible Quality",          quote: "The 4K streaming is just unmatched.",          name: "Mike D.",          role: "Techie",          imageSrc: "http://img.b2bpic.net/free-photo/tech-savvy-user-working-his-personal-laptop-test-new-software_482257-119698.jpg"},
         {
-          id: "t3",
-          title: "Value for Money",
-          quote: "Best streaming service out there.",
-          name: "Elena R.",
-          role: "Student",
-          imageSrc: "http://img.b2bpic.net/free-photo/lets-watch-movie-excited-cute-young-blond-girl-d-glasses-holding-popcorn-smiling-amused-as-en_1258-116458.jpg",
-        },
+          id: "t3",          title: "Value for Money",          quote: "Best streaming service out there.",          name: "Elena R.",          role: "Student",          imageSrc: "http://img.b2bpic.net/free-photo/lets-watch-movie-excited-cute-young-blond-girl-d-glasses-holding-popcorn-smiling-amused-as-en_1258-116458.jpg"},
         {
-          id: "t4",
-          title: "Love the Originals",
-          quote: "The original shows are absolute masterpieces.",
-          name: "David K.",
-          role: "Critic",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-man-watching-tv-eating-popcorn-settee_23-2148020272.jpg",
-        },
+          id: "t4",          title: "Love the Originals",          quote: "The original shows are absolute masterpieces.",          name: "David K.",          role: "Critic",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-man-watching-tv-eating-popcorn-settee_23-2148020272.jpg"},
         {
-          id: "t5",
-          title: "Seamless Experience",
-          quote: "Works flawlessly on my phone and TV.",
-          name: "Anna P.",
-          role: "Commuter",
-          imageSrc: "http://img.b2bpic.net/free-photo/brigadier-general-conducing-anti-terrorism-operations-federal-monitoring-room_482257-110733.jpg",
-        },
+          id: "t5",          title: "Seamless Experience",          quote: "Works flawlessly on my phone and TV.",          name: "Anna P.",          role: "Commuter",          imageSrc: "http://img.b2bpic.net/free-photo/brigadier-general-conducing-anti-terrorism-operations-federal-monitoring-room_482257-110733.jpg"},
       ]}
       title="What Members Say"
       description="See why subscribers love our content library."
@@ -301,20 +181,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",
-          title: "Can I cancel anytime?",
-          content: "Yes, our plans are flexible. Cancel whenever you want.",
-        },
+          id: "q1",          title: "Can I cancel anytime?",          content: "Yes, our plans are flexible. Cancel whenever you want."},
         {
-          id: "q2",
-          title: "Is 4K included?",
-          content: "Yes, 4K streaming is available in our Premium plan.",
-        },
+          id: "q2",          title: "Is 4K included?",          content: "Yes, 4K streaming is available in our Premium plan."},
         {
-          id: "q3",
-          title: "Where can I watch?",
-          content: "On any device, smart TV, tablet, or smartphone.",
-        },
+          id: "q3",          title: "Where can I watch?",          content: "On any device, smart TV, tablet, or smartphone."},
       ]}
       sideTitle="Frequently Asked Questions"
       faqsAnimation="slide-up"
@@ -325,11 +196,10 @@ export default function LandingPage() {
       <ContactSplit
       useInvertedBackground={false}
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       tag="Stay Updated"
       title="Ready to Start Streaming?"
-      description="Sign up today and get your first month on us."
+      description="Sign up in seconds and get your first 30 days free."
       imageSrc="http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301602.jpg"
       mediaAnimation="slide-up"
     />
@@ -341,37 +211,25 @@ export default function LandingPage() {
         {
           items: [
             {
-              label: "About Us",
-              href: "#",
-            },
+              label: "About Us",              href: "#"},
             {
-              label: "Jobs",
-              href: "#",
-            },
+              label: "Jobs",              href: "#"},
           ],
         },
         {
           items: [
             {
-              label: "Terms of Use",
-              href: "#",
-            },
+              label: "Terms of Use",              href: "#"},
             {
-              label: "Privacy",
-              href: "#",
-            },
+              label: "Privacy",              href: "#"},
           ],
         },
         {
           items: [
             {
-              label: "Help Center",
-              href: "#",
-            },
+              label: "Help Center",              href: "#"},
             {
-              label: "Account",
-              href: "#",
-            },
+              label: "Account",              href: "#"},
           ],
         },
       ]}