From b7d2d064c5adc4e5e9dfef95bf6bb69f7af4e123 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 17 Apr 2026 12:07:28 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 475 +++++++++++++----------------------------------
 1 file changed, 124 insertions(+), 351 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a6c0a40..7793867 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,372 +2,145 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import { Smile, Sparkles, Heart, Brain, Star, Mail } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-shift"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="soft"
+        defaultButtonVariant="hover-bubble"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        background="noise"
+        cardStyle="glass-elevated"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Toys",
-          id: "products",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="PlayPals"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Features", id: "features" },
+              { name: "Products", id: "products" },
+              { name: "FAQ", id: "faq" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="PlayPals"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitKpi
-      background={{
-        variant: "plain",
-      }}
-      title="Spark Joy in Every Little Heart"
-      description="Discover our collection of safe, sustainable, and educational toys designed to inspire imagination and endless hours of fun."
-      kpis={[
-        {
-          value: "100%",
-          label: "Non-Toxic",
-        },
-        {
-          value: "500+",
-          label: "Toys Offered",
-        },
-        {
-          value: "10k+",
-          label: "Happy Kids",
-        },
-      ]}
-      enableKpiAnimation={true}
-      buttons={[
-        {
-          text: "Shop Now",
-          href: "#products",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/cheerful-young-mixed-race-mother-casual-clothes-sitting-floor-with-her-baby-playing-with-toy-railway-set-together-cute-woman-enjoying-her-maternity-spending-time-with-son-selective-focus_344912-1921.jpg"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/non-binary-kid-playing-with-colorful-game-home_23-2148779614.jpg",
-          alt: "Child playing",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/kids-playing-with-play-dough_23-2149572136.jpg",
-          alt: "Child with play dough",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-kids-playing-memory-game_23-2150231752.jpg",
-          alt: "Child memory game",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/full-shot-kids-playing-with-eco-toys_23-2149884389.jpg",
-          alt: "Child with eco toy",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/child-having-fun-playtime_23-2149382686.jpg",
-          alt: "Child at play",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Sustainable",
-        },
-        {
-          type: "text",
-          text: "Non-Toxic",
-        },
-        {
-          type: "text",
-          text: "Educational",
-        },
-        {
-          type: "text",
-          text: "Durable",
-        },
-        {
-          type: "text",
-          text: "Fun",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            logoText="PlayPals"
+            description="Playful toys for tiny dreamers. Minimalist design, maximal fun."
+            buttons={[{ text: "Shop Toys", href: "#products" }, { text: "Learn More", href: "#about" }]}
+            background={{ variant: "sparkles-gradient" }}
+            imageSrc="http://img.b2bpic.net/free-photo/cheerful-young-mixed-race-mother-casual-clothes-sitting-floor-with-her-baby-playing-with-toy-railway-set-together-cute-woman-enjoying-her-maternity-spending-time-with-son-selective-focus_344912-1921.jpg"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={true}
-      title="Play with Purpose"
-      description={[
-        "Our toys are thoughtfully selected to support developmental milestones while keeping play simple and engaging.",
-        "We believe that childhood is a time of discovery, and every toy should spark curiosity and wonder.",
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TestimonialAboutCard
+            tag="Our Story"
+            tagIcon={Smile}
+            title="Play with Purpose"
+            description="We curate toys that spark curiosity and lasting joy."
+            subdescription="Clean, safe, and sustainably sourced playthings for a modern home."
+            icon={Heart}
+            imageSrc="http://img.b2bpic.net/free-photo/kids-playing-with-play-dough_23-2149572136.jpg"
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyFour
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",
-          title: "Eco-Friendly Design",
-          author: "Sustainable Materials",
-          description: "Made from responsibly sourced wood and non-toxic materials.",
-          tags: [
-            "Sustainable",
-            "Safe",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-stacked-colored-cubes_23-2148242687.jpg",
-        },
-        {
-          id: "f2",
-          title: "Learning Through Play",
-          author: "Educational Value",
-          description: "Designed to build motor skills and critical thinking naturally.",
-          tags: [
-            "Educational",
-            "Development",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/fidget-pop-it-toy-rainbow-color-antistress-fun-educational_58702-4098.jpg",
-        },
-        {
-          id: "f3",
-          title: "Creative Freedom",
-          author: "Imaginative Tools",
-          description: "Open-ended toys that let kids dictate how they play.",
-          tags: [
-            "Creative",
-            "Open-ended",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/geometric-shapes-financial-planning-yellow-background_23-2148305982.jpg",
-        },
-      ]}
-      title="Why Choose PlayPals?"
-      description="We prioritize quality and safety so you can focus on making memories."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureBento
+            animationType="slide-up"
+            title="Kid-Approved Magic"
+            description="Discover why our collection stands out."
+            useInvertedBackground={false}
+            textboxLayout="split"
+            features={[
+              { title: "Educational", description: "Skills built through play", bentoComponent: "reveal-icon", icon: Brain },
+              { title: "Sustainable", description: "Eco-friendly materials", bentoComponent: "reveal-icon", icon: Sparkles },
+              { title: "Durable", description: "Built to last generations", bentoComponent: "reveal-icon", icon: Heart }
+            ]}
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          name: "Rainbow Stacker",
-          price: "$24.99",
-          variant: "Classic",
-          imageSrc: "http://img.b2bpic.net/free-photo/colorful-pop-it-toy-background-close-up_58702-5515.jpg",
-        },
-        {
-          id: "p2",
-          name: "Wooden Train Set",
-          price: "$39.99",
-          variant: "Classic",
-          imageSrc: "http://img.b2bpic.net/free-photo/view-santa-claus-bag-with-presents-toys_23-2149660810.jpg",
-        },
-        {
-          id: "p3",
-          name: "Shape Sorter Puzzle",
-          price: "$19.99",
-          variant: "Educational",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-minimalistic-geometrical-figures_23-2148830284.jpg",
-        },
-        {
-          id: "p4",
-          name: "Animal Figurines Set",
-          price: "$29.99",
-          variant: "Imaginative",
-          imageSrc: "http://img.b2bpic.net/free-photo/wooden-reindeer_23-2147712889.jpg",
-        },
-        {
-          id: "p5",
-          name: "Xylophone Toy",
-          price: "$34.99",
-          variant: "Music",
-          imageSrc: "http://img.b2bpic.net/free-photo/small-boy-playing-with-vases-with-sweets_8353-917.jpg",
-        },
-        {
-          id: "p6",
-          name: "Balance Board Game",
-          price: "$45.99",
-          variant: "Skill",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-kid-s-hand-holding-toy_23-2149513079.jpg",
-        },
-      ]}
-      title="Our Toy Catalog"
-      description="Explore our curated selection of timeless favorites."
-    />
-  </div>
+        <div id="products" data-section="products">
+          <ProductCardOne
+            title="Product Catalog"
+            description="Curated playthings for every stage of growth."
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="split"
+            products={[
+              { id: "1", name: "Rainbow Stacker", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/colorful-pop-it-toy-background-close-up_58702-5515.jpg" },
+              { id: "2", name: "Wooden Train", price: "$40", imageSrc: "http://img.b2bpic.net/free-photo/view-santa-claus-bag-with-presents-toys_23-2149660810.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "15,000",
-          description: "Toys Delivered",
-        },
-        {
-          id: "m2",
-          value: "450+",
-          description: "Parents Trusted",
-        },
-        {
-          id: "m3",
-          value: "100%",
-          description: "Safety Guaranteed",
-        },
-      ]}
-      title="Our Growth"
-      description="Building a better future through play."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardSeven
+            title="By The Numbers"
+            description="Thousands of smiles delivered."
+            animationType="blur-reveal"
+            textboxLayout="split"
+            metrics={[
+              { id: "m1", value: "10k+", title: "Happy Kids", items: ["Safe play", "Verified quality"] },
+              { id: "m2", value: "500+", title: "Toys", items: ["Educational focus", "Sustainable"] }
+            ]}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Sarah J.",
-          role: "Mom",
-          testimonial: "The quality is unmatched, my son absolutely loves his train set!",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-mother-with-her-little-daughter-playing-home_1157-13740.jpg",
-        },
-        {
-          id: "t2",
-          name: "Mark D.",
-          role: "Dad",
-          testimonial: "Great selection of educational toys that keep my daughter engaged for hours.",
-          imageSrc: "http://img.b2bpic.net/free-photo/father-daughter_1303-4656.jpg",
-        },
-        {
-          id: "t3",
-          name: "Emily P.",
-          role: "Mom",
-          testimonial: "I love the eco-friendly focus, it makes me feel safe about the toys.",
-          imageSrc: "http://img.b2bpic.net/free-photo/active-caucasian-little-redhaired-girl-dress-with-fairhaired-boy-climbs-table-top-near-window-children-concept_197531-32819.jpg",
-        },
-        {
-          id: "t4",
-          name: "Jessica L.",
-          role: "Mom",
-          testimonial: "Beautiful design and so durable. Highly recommend for every home.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-holding-bank-card-white-wall_140725-107646.jpg",
-        },
-        {
-          id: "t5",
-          name: "Tom B.",
-          role: "Dad",
-          testimonial: "Simply wonderful products that spark real creativity in my kids.",
-          imageSrc: "http://img.b2bpic.net/free-photo/kid-playing-outdoorns-park_23-2149218028.jpg",
-        },
-      ]}
-      title="Loved by Families"
-      description="Hear what our wonderful customers have to say."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardThirteen
+            title="Families Love PlayPals"
+            showRating={true}
+            animationType="slide-up"
+            textboxLayout="split"
+            testimonials={[
+              { id: "1", name: "Sarah J.", handle: "@sarahj", testimonial: "Perfect toys for our minimalist home.", rating: 5 }
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "Are your toys safe for babies?",
-          content: "Absolutely. All our products meet rigorous safety standards and are made from non-toxic materials.",
-        },
-        {
-          id: "q2",
-          title: "Do you offer shipping?",
-          content: "Yes, we ship nationwide with free shipping on orders over $50.",
-        },
-        {
-          id: "q3",
-          title: "What if I'm not satisfied?",
-          content: "We offer a 30-day money-back guarantee if you are not fully satisfied.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Answers to commonly asked questions about our products."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            title="Common Questions"
+            faqsAnimation="slide-up"
+            textboxLayout="split"
+            faqs={[{ id: "1", title: "Are these safe?", content: "Yes, rigorously tested." }]}
+            imageSrc="http://img.b2bpic.net/free-photo/fidget-pop-it-toy-rainbow-color-antistress-fun-educational_58702-4098.jpg"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Stay Updated"
-      title="Join Our Community"
-      description="Sign up for updates, parenting tips, and exclusive new toy announcements."
-      imageSrc="http://img.b2bpic.net/free-photo/girl-coloring-eggs-looking-camera_23-2147752263.jpg"
-      mediaAnimation="slide-up"
-      inputPlaceholder="Enter your email"
-      buttonText="Subscribe"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Get In Touch"
+            title="Say Hello"
+            description="Questions? We're here to help you and your little ones."
+            background={{ variant: "sparkles-gradient" }}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="PlayPals"
-      leftLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[{ title: "Company", items: [{ label: "About" }, { label: "Terms" }] }]}
+            bottomLeftText="© 2024 PlayPals"
+            bottomRightText="hello@playpals.com"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );