Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c01e956d9b | |||
| 2cc5107baa | |||
| af51bceaf0 | |||
| b3a0e32917 |
487
src/app/page.tsx
487
src/app/page.tsx
@@ -2,372 +2,157 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||||
|
import { Smile, Sparkles, Heart, Brain } from "lucide-react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-shift"
|
defaultButtonVariant="hover-bubble"
|
||||||
defaultTextAnimation="entrance-slide"
|
defaultTextAnimation="reveal-blur"
|
||||||
borderRadius="soft"
|
borderRadius="pill"
|
||||||
|
contentWidth="medium"
|
||||||
|
sizing="medium"
|
||||||
|
background="noise"
|
||||||
|
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
|
<NavbarStyleFullscreen
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "Home", id: "hero" },
|
||||||
name: "Home",
|
{ name: "About", id: "about" },
|
||||||
id: "hero",
|
{ name: "Features", id: "features" },
|
||||||
},
|
{ name: "Products", id: "products" },
|
||||||
{
|
{ name: "FAQ", id: "faq" },
|
||||||
name: "About",
|
{ name: "Contact", id: "contact" },
|
||||||
id: "about",
|
]}
|
||||||
},
|
brandName="PlayPals"
|
||||||
{
|
/>
|
||||||
name: "Toys",
|
</div>
|
||||||
id: "products",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "FAQ",
|
|
||||||
id: "faq",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Contact",
|
|
||||||
id: "contact",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
brandName="PlayPals"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplitKpi
|
<HeroLogoBillboard
|
||||||
background={{
|
logoText="PlayPals"
|
||||||
variant: "plain",
|
description="Playful toys for tiny dreamers. Minimalist design, maximal fun."
|
||||||
}}
|
buttons={[{ text: "Shop Toys", href: "#products" }, { text: "Learn More", href: "#about" }]}
|
||||||
title="Spark Joy in Every Little Heart"
|
background={{ variant: "sparkles-gradient" }}
|
||||||
description="Discover our collection of safe, sustainable, and educational toys designed to inspire imagination and endless hours of fun."
|
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"
|
||||||
kpis={[
|
/>
|
||||||
{
|
</div>
|
||||||
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="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<TextSplitAbout
|
<TestimonialAboutCard
|
||||||
useInvertedBackground={true}
|
tag="Our Story"
|
||||||
title="Play with Purpose"
|
tagIcon={Smile}
|
||||||
description={[
|
title="Play with Purpose"
|
||||||
"Our toys are thoughtfully selected to support developmental milestones while keeping play simple and engaging.",
|
description="We curate toys that spark curiosity and lasting joy."
|
||||||
"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}
|
||||||
/>
|
imageSrc="http://img.b2bpic.net/free-photo/kids-playing-with-play-dough_23-2149572136.jpg"
|
||||||
</div>
|
useInvertedBackground={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="features" data-section="features">
|
<div id="features" data-section="features">
|
||||||
<FeatureCardTwentyFour
|
<FeatureBento
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="split"
|
title="Kid-Approved Magic"
|
||||||
useInvertedBackground={false}
|
description="Discover why our collection stands out."
|
||||||
features={[
|
useInvertedBackground={false}
|
||||||
{
|
textboxLayout="split"
|
||||||
id: "f1",
|
features={[
|
||||||
title: "Eco-Friendly Design",
|
{ title: "Educational", description: "Skills built through play", bentoComponent: "reveal-icon", icon: Brain },
|
||||||
author: "Sustainable Materials",
|
{ title: "Sustainable", description: "Eco-friendly materials", bentoComponent: "reveal-icon", icon: Sparkles },
|
||||||
description: "Made from responsibly sourced wood and non-toxic materials.",
|
{ title: "Durable", description: "Built to last generations", bentoComponent: "reveal-icon", icon: Heart }
|
||||||
tags: [
|
]}
|
||||||
"Sustainable",
|
/>
|
||||||
"Safe",
|
</div>
|
||||||
],
|
|
||||||
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="products" data-section="products">
|
<div id="products" data-section="products">
|
||||||
<ProductCardFour
|
<ProductCardOne
|
||||||
animationType="slide-up"
|
title="Product Catalog"
|
||||||
textboxLayout="split"
|
description="Curated playthings for every stage of growth."
|
||||||
gridVariant="uniform-all-items-equal"
|
gridVariant="uniform-all-items-equal"
|
||||||
useInvertedBackground={true}
|
animationType="slide-up"
|
||||||
products={[
|
textboxLayout="split"
|
||||||
{
|
useInvertedBackground={false}
|
||||||
id: "p1",
|
products={[
|
||||||
name: "Rainbow Stacker",
|
{ id: "1", name: "Rainbow Stacker", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/colorful-pop-it-toy-background-close-up_58702-5515.jpg" },
|
||||||
price: "$24.99",
|
{ id: "2", name: "Wooden Train", price: "$40", imageSrc: "http://img.b2bpic.net/free-photo/view-santa-claus-bag-with-presents-toys_23-2149660810.jpg" }
|
||||||
variant: "Classic",
|
]}
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/colorful-pop-it-toy-background-close-up_58702-5515.jpg",
|
/>
|
||||||
},
|
</div>
|
||||||
{
|
|
||||||
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="metrics" data-section="metrics">
|
<div id="metrics" data-section="metrics">
|
||||||
<MetricCardTwo
|
<MetricCardSeven
|
||||||
animationType="slide-up"
|
title="By The Numbers"
|
||||||
textboxLayout="split"
|
description="Thousands of smiles delivered."
|
||||||
gridVariant="uniform-all-items-equal"
|
animationType="blur-reveal"
|
||||||
useInvertedBackground={false}
|
textboxLayout="split"
|
||||||
metrics={[
|
useInvertedBackground={false}
|
||||||
{
|
metrics={[
|
||||||
id: "m1",
|
{ id: "m1", value: "10k+", title: "Happy Kids", items: ["Safe play", "Verified quality"] },
|
||||||
value: "15,000",
|
{ id: "m2", value: "500+", title: "Toys", items: ["Educational focus", "Sustainable"] }
|
||||||
description: "Toys Delivered",
|
]}
|
||||||
},
|
/>
|
||||||
{
|
</div>
|
||||||
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="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardTwo
|
<TestimonialCardThirteen
|
||||||
animationType="slide-up"
|
title="Families Love PlayPals"
|
||||||
textboxLayout="split"
|
description="What our happy customers say."
|
||||||
useInvertedBackground={true}
|
showRating={true}
|
||||||
testimonials={[
|
useInvertedBackground={false}
|
||||||
{
|
animationType="slide-up"
|
||||||
id: "t1",
|
textboxLayout="split"
|
||||||
name: "Sarah J.",
|
testimonials={[
|
||||||
role: "Mom",
|
{ id: "1", name: "Sarah J.", handle: "@sarahj", testimonial: "Perfect toys for our minimalist home.", rating: 5 }
|
||||||
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",
|
/>
|
||||||
},
|
</div>
|
||||||
{
|
|
||||||
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="faq" data-section="faq">
|
<div id="faq" data-section="faq">
|
||||||
<FaqBase
|
<FaqSplitMedia
|
||||||
textboxLayout="split"
|
title="Common Questions"
|
||||||
useInvertedBackground={false}
|
description="Need to know more about our toys?"
|
||||||
faqs={[
|
useInvertedBackground={false}
|
||||||
{
|
faqsAnimation="slide-up"
|
||||||
id: "q1",
|
textboxLayout="split"
|
||||||
title: "Are your toys safe for babies?",
|
faqs={[{ id: "1", title: "Are these safe?", content: "Yes, rigorously tested." }]}
|
||||||
content: "Absolutely. All our products meet rigorous safety standards and are made from non-toxic materials.",
|
imageSrc="http://img.b2bpic.net/free-photo/fidget-pop-it-toy-rainbow-color-antistress-fun-educational_58702-4098.jpg"
|
||||||
},
|
/>
|
||||||
{
|
</div>
|
||||||
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="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplit
|
<ContactCenter
|
||||||
useInvertedBackground={true}
|
tag="Get In Touch"
|
||||||
background={{
|
title="Say Hello"
|
||||||
variant: "plain",
|
description="Questions? We're here to help you and your little ones."
|
||||||
}}
|
useInvertedBackground={false}
|
||||||
tag="Stay Updated"
|
background={{ variant: "sparkles-gradient" }}
|
||||||
title="Join Our Community"
|
/>
|
||||||
description="Sign up for updates, parenting tips, and exclusive new toy announcements."
|
</div>
|
||||||
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="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoReveal
|
<FooterSimple
|
||||||
logoText="PlayPals"
|
columns={[{ title: "Company", items: [{ label: "About" }, { label: "Terms" }] }]}
|
||||||
leftLink={{
|
bottomLeftText="© 2024 PlayPals"
|
||||||
text: "Terms of Service",
|
bottomRightText="hello@playpals.com"
|
||||||
href: "#",
|
/>
|
||||||
}}
|
</div>
|
||||||
rightLink={{
|
|
||||||
text: "Privacy Policy",
|
|
||||||
href: "#",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user