Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b3a0e32917 |
286
src/app/page.tsx
286
src/app/page.tsx
@@ -19,31 +19,23 @@ export default function LandingPage() {
|
|||||||
defaultButtonVariant="text-shift"
|
defaultButtonVariant="text-shift"
|
||||||
defaultTextAnimation="entrance-slide"
|
defaultTextAnimation="entrance-slide"
|
||||||
borderRadius="soft"
|
borderRadius="soft"
|
||||||
|
contentWidth="medium"
|
||||||
|
sizing="medium"
|
||||||
|
background="circleGradient"
|
||||||
|
cardStyle="glass-elevated"
|
||||||
|
primaryButtonStyle="gradient"
|
||||||
|
secondaryButtonStyle="glass"
|
||||||
|
headingFontWeight="normal"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleApple
|
<NavbarStyleApple
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "Home", id: "hero" },
|
||||||
name: "Home",
|
{ name: "About", id: "about" },
|
||||||
id: "hero",
|
{ name: "Products", id: "products" },
|
||||||
},
|
{ name: "FAQ", id: "faq" },
|
||||||
{
|
{ name: "Contact", id: "contact" },
|
||||||
name: "About",
|
|
||||||
id: "about",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Toys",
|
|
||||||
id: "products",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "FAQ",
|
|
||||||
id: "faq",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Contact",
|
|
||||||
id: "contact",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
brandName="PlayPals"
|
brandName="PlayPals"
|
||||||
/>
|
/>
|
||||||
@@ -51,77 +43,31 @@ export default function LandingPage() {
|
|||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplitKpi
|
<HeroSplitKpi
|
||||||
background={{
|
background={{ variant: "plain" }}
|
||||||
variant: "plain",
|
|
||||||
}}
|
|
||||||
title="Spark Joy in Every Little Heart"
|
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."
|
description="Discover our collection of safe, sustainable, and educational toys designed to inspire imagination and endless hours of fun."
|
||||||
kpis={[
|
kpis={[
|
||||||
{
|
{ value: "100%", label: "Non-Toxic" },
|
||||||
value: "100%",
|
{ value: "500+", label: "Toys Offered" },
|
||||||
label: "Non-Toxic",
|
{ value: "10k+", label: "Happy Kids" },
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "500+",
|
|
||||||
label: "Toys Offered",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "10k+",
|
|
||||||
label: "Happy Kids",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
enableKpiAnimation={true}
|
enableKpiAnimation={true}
|
||||||
buttons={[
|
buttons={[{ text: "Shop Now", href: "#products" }]}
|
||||||
{
|
|
||||||
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"
|
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"
|
mediaAnimation="slide-up"
|
||||||
avatars={[
|
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/non-binary-kid-playing-with-colorful-game-home_23-2148779614.jpg",
|
{ src: "http://img.b2bpic.net/free-photo/kids-playing-with-play-dough_23-2149572136.jpg", alt: "Child with play dough" },
|
||||||
alt: "Child playing",
|
{ 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" },
|
||||||
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={[
|
marqueeItems={[
|
||||||
{
|
{ type: "text", text: "Sustainable" },
|
||||||
type: "text",
|
{ type: "text", text: "Non-Toxic" },
|
||||||
text: "Sustainable",
|
{ type: "text", text: "Educational" },
|
||||||
},
|
{ type: "text", text: "Durable" },
|
||||||
{
|
{ type: "text", text: "Fun" },
|
||||||
type: "text",
|
|
||||||
text: "Non-Toxic",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "Educational",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "Durable",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "Fun",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -131,9 +77,7 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
title="Play with Purpose"
|
title="Play with Purpose"
|
||||||
description={[
|
description={[
|
||||||
"Our toys are thoughtfully selected to support developmental milestones while keeping play simple and engaging.",
|
"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."]}
|
||||||
"We believe that childhood is a time of discovery, and every toy should spark curiosity and wonder.",
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -143,39 +87,9 @@ export default function LandingPage() {
|
|||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
features={[
|
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: "f1",
|
{ 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: "Eco-Friendly Design",
|
{ 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" },
|
||||||
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?"
|
title="Why Choose PlayPals?"
|
||||||
description="We prioritize quality and safety so you can focus on making memories."
|
description="We prioritize quality and safety so you can focus on making memories."
|
||||||
@@ -189,48 +103,12 @@ export default function LandingPage() {
|
|||||||
gridVariant="uniform-all-items-equal"
|
gridVariant="uniform-all-items-equal"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
products={[
|
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: "p1",
|
{ 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" },
|
||||||
name: "Rainbow Stacker",
|
{ 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" },
|
||||||
price: "$24.99",
|
{ id: "p4", name: "Animal Figurines Set", price: "$29.99", variant: "Imaginative", imageSrc: "http://img.b2bpic.net/free-photo/wooden-reindeer_23-2147712889.jpg" },
|
||||||
variant: "Classic",
|
{ 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" },
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/colorful-pop-it-toy-background-close-up_58702-5515.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" },
|
||||||
},
|
|
||||||
{
|
|
||||||
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"
|
title="Our Toy Catalog"
|
||||||
description="Explore our curated selection of timeless favorites."
|
description="Explore our curated selection of timeless favorites."
|
||||||
@@ -244,21 +122,9 @@ export default function LandingPage() {
|
|||||||
gridVariant="uniform-all-items-equal"
|
gridVariant="uniform-all-items-equal"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
metrics={[
|
metrics={[
|
||||||
{
|
{ id: "m1", value: "15,000", description: "Toys Delivered" },
|
||||||
id: "m1",
|
{ id: "m2", value: "450+", description: "Parents Trusted" },
|
||||||
value: "15,000",
|
{ id: "m3", value: "100%", description: "Safety Guaranteed" },
|
||||||
description: "Toys Delivered",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "m2",
|
|
||||||
value: "450+",
|
|
||||||
description: "Parents Trusted",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "m3",
|
|
||||||
value: "100%",
|
|
||||||
description: "Safety Guaranteed",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Our Growth"
|
title="Our Growth"
|
||||||
description="Building a better future through play."
|
description="Building a better future through play."
|
||||||
@@ -271,41 +137,11 @@ export default function LandingPage() {
|
|||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
testimonials={[
|
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: "t1",
|
{ 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" },
|
||||||
name: "Sarah J.",
|
{ 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" },
|
||||||
role: "Mom",
|
{ 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" },
|
||||||
testimonial: "The quality is unmatched, my son absolutely loves his train set!",
|
{ 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" },
|
||||||
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"
|
title="Loved by Families"
|
||||||
description="Hear what our wonderful customers have to say."
|
description="Hear what our wonderful customers have to say."
|
||||||
@@ -317,21 +153,9 @@ export default function LandingPage() {
|
|||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
faqs={[
|
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: "q1",
|
{ id: "q2", title: "Do you offer shipping?", content: "Yes, we ship nationwide with free shipping on orders over $50." },
|
||||||
title: "Are your toys safe for babies?",
|
{ id: "q3", title: "What if I'm not satisfied?", content: "We offer a 30-day money-back guarantee if you are not fully satisfied." },
|
||||||
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"
|
title="Frequently Asked Questions"
|
||||||
description="Answers to commonly asked questions about our products."
|
description="Answers to commonly asked questions about our products."
|
||||||
@@ -342,9 +166,7 @@ export default function LandingPage() {
|
|||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplit
|
<ContactSplit
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
background={{
|
background={{ variant: "plain" }}
|
||||||
variant: "plain",
|
|
||||||
}}
|
|
||||||
tag="Stay Updated"
|
tag="Stay Updated"
|
||||||
title="Join Our Community"
|
title="Join Our Community"
|
||||||
description="Sign up for updates, parenting tips, and exclusive new toy announcements."
|
description="Sign up for updates, parenting tips, and exclusive new toy announcements."
|
||||||
@@ -358,14 +180,8 @@ export default function LandingPage() {
|
|||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoReveal
|
<FooterLogoReveal
|
||||||
logoText="PlayPals"
|
logoText="PlayPals"
|
||||||
leftLink={{
|
leftLink={{ text: "Terms of Service", href: "#" }}
|
||||||
text: "Terms of Service",
|
rightLink={{ text: "Privacy Policy", href: "#" }}
|
||||||
href: "#",
|
|
||||||
}}
|
|
||||||
rightLink={{
|
|
||||||
text: "Privacy Policy",
|
|
||||||
href: "#",
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
|
|||||||
Reference in New Issue
Block a user