Merge version_2 into main #2
487
src/app/page.tsx
487
src/app/page.tsx
@@ -2,372 +2,157 @@
|
||||
|
||||
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 } 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"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<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"
|
||||
useInvertedBackground={false}
|
||||
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"
|
||||
useInvertedBackground={false}
|
||||
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"
|
||||
description="What our happy customers say."
|
||||
showRating={true}
|
||||
useInvertedBackground={false}
|
||||
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"
|
||||
description="Need to know more about our toys?"
|
||||
useInvertedBackground={false}
|
||||
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."
|
||||
useInvertedBackground={false}
|
||||
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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user