bender/9dd4cafa-2c93-4063-bd98-fd99301bfc56
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

base: bender:version_2
Branches Tags
bender:main bender:version_2 bender:version_1
..
compare: bender:version_1
Branches Tags
bender:main bender:version_2 bender:version_1

1 Commits
version_2 ... version_1

Author SHA1 Message Date
bender
b3a0e32917 Update src/app/page.tsx 2026-04-17 12:07:26 +00:00
1 changed files with 161 additions and 130 deletions
Expand all files Collapse all files

291
src/app/page.tsx
View File

@@ -2,157 +2,188 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter'; import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureBento from '@/components/sections/feature/FeatureBento'; import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterSimple from '@/components/sections/footer/FooterSimple'; import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard'; import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven'; import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne'; import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen'; import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard'; import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Smile, Sparkles, Heart, Brain } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-bubble" defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur" defaultTextAnimation="entrance-slide"
borderRadius="pill" borderRadius="soft"
contentWidth="medium" contentWidth="medium"
sizing="medium" sizing="medium"
background="noise" background="circleGradient"
cardStyle="glass-elevated" cardStyle="glass-elevated"
primaryButtonStyle="gradient" primaryButtonStyle="gradient"
secondaryButtonStyle="glass" secondaryButtonStyle="glass"
headingFontWeight="normal" headingFontWeight="normal"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleApple
navItems={[ navItems={[
{ name: "Home", id: "hero" }, { name: "Home", id: "hero" },
{ name: "About", id: "about" }, { name: "About", id: "about" },
{ name: "Features", id: "features" }, { name: "Products", id: "products" },
{ name: "Products", id: "products" }, { name: "FAQ", id: "faq" },
{ name: "FAQ", id: "faq" }, { name: "Contact", id: "contact" },
{ name: "Contact", id: "contact" }, ]}
]} brandName="PlayPals"
brandName="PlayPals" />
/> </div>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroLogoBillboard <HeroSplitKpi
logoText="PlayPals" background={{ variant: "plain" }}
description="Playful toys for tiny dreamers. Minimalist design, maximal fun." title="Spark Joy in Every Little Heart"
buttons={[{ text: "Shop Toys", href: "#products" }, { text: "Learn More", href: "#about" }]} description="Discover our collection of safe, sustainable, and educational toys designed to inspire imagination and endless hours of fun."
background={{ variant: "sparkles-gradient" }} kpis={[
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" { value: "100%", label: "Non-Toxic" },
/> { value: "500+", label: "Toys Offered" },
</div> { 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="about" data-section="about"> <div id="about" data-section="about">
<TestimonialAboutCard <TextSplitAbout
tag="Our Story" useInvertedBackground={true}
tagIcon={Smile} title="Play with Purpose"
title="Play with Purpose" description={[
description="We curate toys that spark curiosity and lasting joy." "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."]}
subdescription="Clean, safe, and sustainably sourced playthings for a modern home." />
icon={Heart} </div>
imageSrc="http://img.b2bpic.net/free-photo/kids-playing-with-play-dough_23-2149572136.jpg"
useInvertedBackground={true}
/>
</div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureBento <FeatureCardTwentyFour
animationType="slide-up" animationType="slide-up"
title="Kid-Approved Magic" textboxLayout="split"
description="Discover why our collection stands out." useInvertedBackground={false}
useInvertedBackground={false} features={[
textboxLayout="split" { 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" },
features={[ { 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" },
{ title: "Educational", description: "Skills built through play", bentoComponent: "reveal-icon", icon: Brain }, { 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: "Sustainable", description: "Eco-friendly materials", bentoComponent: "reveal-icon", icon: Sparkles }, ]}
{ title: "Durable", description: "Built to last generations", bentoComponent: "reveal-icon", icon: Heart } title="Why Choose PlayPals?"
]} description="We prioritize quality and safety so you can focus on making memories."
/> />
</div> </div>
<div id="products" data-section="products"> <div id="products" data-section="products">
<ProductCardOne <ProductCardFour
title="Product Catalog" animationType="slide-up"
description="Curated playthings for every stage of growth." textboxLayout="split"
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
animationType="slide-up" useInvertedBackground={true}
textboxLayout="split" products={[
useInvertedBackground={false} { 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" },
products={[ { 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: "1", name: "Rainbow Stacker", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/colorful-pop-it-toy-background-close-up_58702-5515.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: "2", name: "Wooden Train", price: "$40", imageSrc: "http://img.b2bpic.net/free-photo/view-santa-claus-bag-with-presents-toys_23-2149660810.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" },
</div> ]}
title="Our Toy Catalog"
description="Explore our curated selection of timeless favorites."
/>
</div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardSeven <MetricCardTwo
title="By The Numbers" animationType="slide-up"
description="Thousands of smiles delivered." textboxLayout="split"
animationType="blur-reveal" gridVariant="uniform-all-items-equal"
textboxLayout="split" useInvertedBackground={false}
useInvertedBackground={false} metrics={[
metrics={[ { id: "m1", value: "15,000", description: "Toys Delivered" },
{ id: "m1", value: "10k+", title: "Happy Kids", items: ["Safe play", "Verified quality"] }, { id: "m2", value: "450+", description: "Parents Trusted" },
{ id: "m2", value: "500+", title: "Toys", items: ["Educational focus", "Sustainable"] } { id: "m3", value: "100%", description: "Safety Guaranteed" },
]} ]}
/> title="Our Growth"
</div> description="Building a better future through play."
/>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen <TestimonialCardTwo
title="Families Love PlayPals" animationType="slide-up"
description="What our happy customers say." textboxLayout="split"
showRating={true} useInvertedBackground={true}
useInvertedBackground={false} testimonials={[
animationType="slide-up" { 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" },
textboxLayout="split" { 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" },
testimonials={[ { 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: "1", name: "Sarah J.", handle: "@sarahj", testimonial: "Perfect toys for our minimalist home.", rating: 5 } { 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" },
/> ]}
</div> title="Loved by Families"
description="Hear what our wonderful customers have to say."
/>
</div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitMedia <FaqBase
title="Common Questions" textboxLayout="split"
description="Need to know more about our toys?" useInvertedBackground={false}
useInvertedBackground={false} faqs={[
faqsAnimation="slide-up" { 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." },
textboxLayout="split" { id: "q2", title: "Do you offer shipping?", content: "Yes, we ship nationwide with free shipping on orders over $50." },
faqs={[{ id: "1", title: "Are these safe?", content: "Yes, rigorously tested." }]} { id: "q3", title: "What if I'm not satisfied?", content: "We offer a 30-day money-back guarantee if you are not fully satisfied." },
imageSrc="http://img.b2bpic.net/free-photo/fidget-pop-it-toy-rainbow-color-antistress-fun-educational_58702-4098.jpg" ]}
/> title="Frequently Asked Questions"
</div> description="Answers to commonly asked questions about our products."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactSplit
tag="Get In Touch" useInvertedBackground={true}
title="Say Hello" background={{ variant: "plain" }}
description="Questions? We're here to help you and your little ones." tag="Stay Updated"
useInvertedBackground={false} title="Join Our Community"
background={{ variant: "sparkles-gradient" }} 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"
</div> mediaAnimation="slide-up"
inputPlaceholder="Enter your email"
buttonText="Subscribe"
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterSimple <FooterLogoReveal
columns={[{ title: "Company", items: [{ label: "About" }, { label: "Terms" }] }]} logoText="PlayPals"
bottomLeftText="© 2024 PlayPals" leftLink={{ text: "Terms of Service", href: "#" }}
bottomRightText="hello@playpals.com" rightLink={{ text: "Privacy Policy", href: "#" }}
/> />
</div> </div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );