Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c01e956d9b | |||
| 2cc5107baa | |||
| af51bceaf0 |
291
src/app/page.tsx
291
src/app/page.tsx
@@ -2,188 +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"
|
contentWidth="medium"
|
||||||
sizing="medium"
|
sizing="medium"
|
||||||
background="circleGradient"
|
background="noise"
|
||||||
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">
|
||||||
<NavbarStyleApple
|
<NavbarStyleFullscreen
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Home", id: "hero" },
|
{ name: "Home", id: "hero" },
|
||||||
{ name: "About", id: "about" },
|
{ name: "About", id: "about" },
|
||||||
{ name: "Products", id: "products" },
|
{ name: "Features", id: "features" },
|
||||||
{ name: "FAQ", id: "faq" },
|
{ name: "Products", id: "products" },
|
||||||
{ name: "Contact", id: "contact" },
|
{ name: "FAQ", id: "faq" },
|
||||||
]}
|
{ name: "Contact", id: "contact" },
|
||||||
brandName="PlayPals"
|
]}
|
||||||
/>
|
brandName="PlayPals"
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplitKpi
|
<HeroLogoBillboard
|
||||||
background={{ variant: "plain" }}
|
logoText="PlayPals"
|
||||||
title="Spark Joy in Every Little Heart"
|
description="Playful toys for tiny dreamers. Minimalist design, maximal fun."
|
||||||
description="Discover our collection of safe, sustainable, and educational toys designed to inspire imagination and endless hours of fun."
|
buttons={[{ text: "Shop Toys", href: "#products" }, { text: "Learn More", href: "#about" }]}
|
||||||
kpis={[
|
background={{ variant: "sparkles-gradient" }}
|
||||||
{ value: "100%", label: "Non-Toxic" },
|
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: "500+", label: "Toys Offered" },
|
/>
|
||||||
{ value: "10k+", label: "Happy Kids" },
|
</div>
|
||||||
]}
|
|
||||||
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.", "We believe that childhood is a time of discovery, and every toy should spark curiosity and wonder."]}
|
description="We curate toys that spark curiosity and lasting joy."
|
||||||
/>
|
subdescription="Clean, safe, and sustainably sourced playthings for a modern home."
|
||||||
</div>
|
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">
|
<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}
|
||||||
{ 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" },
|
textboxLayout="split"
|
||||||
{ 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" },
|
features={[
|
||||||
{ 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: "Educational", description: "Skills built through play", bentoComponent: "reveal-icon", icon: Brain },
|
||||||
]}
|
{ title: "Sustainable", description: "Eco-friendly materials", bentoComponent: "reveal-icon", icon: Sparkles },
|
||||||
title="Why Choose PlayPals?"
|
{ title: "Durable", description: "Built to last generations", bentoComponent: "reveal-icon", icon: Heart }
|
||||||
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">
|
||||||
<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"
|
||||||
{ 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" },
|
useInvertedBackground={false}
|
||||||
{ 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" },
|
products={[
|
||||||
{ 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: "1", name: "Rainbow Stacker", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/colorful-pop-it-toy-background-close-up_58702-5515.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: "2", name: "Wooden Train", price: "$40", imageSrc: "http://img.b2bpic.net/free-photo/view-santa-claus-bag-with-presents-toys_23-2149660810.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">
|
||||||
<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}
|
||||||
{ id: "m1", value: "15,000", description: "Toys Delivered" },
|
metrics={[
|
||||||
{ id: "m2", value: "450+", description: "Parents Trusted" },
|
{ id: "m1", value: "10k+", title: "Happy Kids", items: ["Safe play", "Verified quality"] },
|
||||||
{ id: "m3", value: "100%", description: "Safety Guaranteed" },
|
{ id: "m2", value: "500+", title: "Toys", items: ["Educational focus", "Sustainable"] }
|
||||||
]}
|
]}
|
||||||
title="Our Growth"
|
/>
|
||||||
description="Building a better future through play."
|
</div>
|
||||||
/>
|
|
||||||
</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}
|
||||||
{ 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" },
|
animationType="slide-up"
|
||||||
{ 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" },
|
textboxLayout="split"
|
||||||
{ 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" },
|
testimonials={[
|
||||||
{ 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: "1", name: "Sarah J.", handle: "@sarahj", testimonial: "Perfect toys for our minimalist home.", rating: 5 }
|
||||||
{ 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"
|
</div>
|
||||||
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}
|
||||||
{ 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." },
|
faqsAnimation="slide-up"
|
||||||
{ id: "q2", title: "Do you offer shipping?", content: "Yes, we ship nationwide with free shipping on orders over $50." },
|
textboxLayout="split"
|
||||||
{ id: "q3", title: "What if I'm not satisfied?", content: "We offer a 30-day money-back guarantee if you are not fully satisfied." },
|
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"
|
||||||
title="Frequently Asked Questions"
|
/>
|
||||||
description="Answers to commonly asked questions about our products."
|
</div>
|
||||||
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={{ variant: "plain" }}
|
title="Say Hello"
|
||||||
tag="Stay Updated"
|
description="Questions? We're here to help you and your little ones."
|
||||||
title="Join Our Community"
|
useInvertedBackground={false}
|
||||||
description="Sign up for updates, parenting tips, and exclusive new toy announcements."
|
background={{ variant: "sparkles-gradient" }}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/girl-coloring-eggs-looking-camera_23-2147752263.jpg"
|
/>
|
||||||
mediaAnimation="slide-up"
|
</div>
|
||||||
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={{ text: "Terms of Service", href: "#" }}
|
bottomLeftText="© 2024 PlayPals"
|
||||||
rightLink={{ text: "Privacy Policy", href: "#" }}
|
bottomRightText="hello@playpals.com"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user