bender/b392a167-6855-43b5-be30-5d70cbf10312
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-04 11:24:06 +00:00
parent 49409fb8e6
commit 1843abff4d
1 changed files with 148 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

537
src/app/page.tsx
View File

@@ -18,405 +18,164 @@ export default function LandingPage() {
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "ABC",
id: "features",
},
{
name: "Quiz",
id: "metrics",
},
{
name: "Worksheets",
id: "worksheets",
},
]}
brandName="Kiddo Learn"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "Products", id: "product-highlight" },
{ name: "Worksheets", id: "worksheets" },
{ name: "Metrics", id: "metrics" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Footer", id: "footer" }
]}
brandName="Kiddo Learn"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{
variant: "gradient-bars",
}}
title="Welcome to Kiddo Learn!"
description="The ultimate fun learning platform for little champs! 🌟 Join us to explore letters, numbers, and so much more in the most interactive way possible."
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/interested-happy-girl-is-reading-book-emotion-concept_169016-64231.jpg",
imageAlt: "Kid learning alphabet blocks",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-little-girl-coloring_23-2148886424.jpg?_wi=1",
imageAlt: "Portrait little girl coloring",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/little-girl-front-laptop-screen-study-concept_169016-29442.jpg?_wi=1",
imageAlt: "Little girl in front of laptop screen study concept",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/smiley-little-girl-home-online-school-with-laptop_23-2148827499.jpg?_wi=1",
imageAlt: "Smiley little girl at home during online school with laptop",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-down-syndrome-studying-while-sitting-desk-home_1157-52004.jpg",
imageAlt: "Girl with Down syndrome studying while sitting at desk at home",
},
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-little-girl-coloring_23-2148886425.jpg",
imageAlt: "Kid learning alphabet blocks",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/adorable-little-girl-drawing-paper-home_23-2149106224.jpg",
imageAlt: "Adorable little girl drawing on paper at home",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-little-girl-coloring_23-2148886424.jpg?_wi=2",
imageAlt: "Portrait little girl coloring",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/little-girl-front-laptop-screen-study-concept_169016-29442.jpg?_wi=2",
imageAlt: "Little girl in front of laptop screen study concept",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/smiley-little-girl-home-online-school-with-laptop_23-2148827499.jpg?_wi=2",
imageAlt: "Smiley little girl at home during online school with laptop",
},
]}
buttons={[
{
text: "Start Playing! 🚀",
href: "#",
},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/girl-playing-with-hair-accessories-reading-mom_23-2147896479.jpg",
alt: "Parent smiling",
},
{
src: "http://img.b2bpic.net/free-photo/mother-reading-book-her-daughter-by-lake_23-2148224679.jpg",
alt: "Parent holding book",
},
{
src: "http://img.b2bpic.net/free-photo/girl-pointing-book-while-reading-with-mom_23-2147896475.jpg",
alt: "Teacher smiling",
},
{
src: "http://img.b2bpic.net/free-photo/happy-mother-daughter-reading-book-picnic_23-2148224681.jpg",
alt: "Happy child",
},
{
src: "http://img.b2bpic.net/free-photo/happy-black-teacher-schoolgirl-using-digital-tablet-classroom_637285-9450.jpg",
alt: "Student engaged",
},
]}
avatarText="Loved by 50,000+ parents and teachers!"
marqueeItems={[
{
type: "image",
src: "http://img.b2bpic.net/free-vector/goals-habits-tracking-app_52683-44015.jpg",
alt: "Goals and habits tracking app",
},
{
type: "image",
src: "http://img.b2bpic.net/free-vector/charity-app-screens_23-2148632318.jpg",
alt: "Charity app screens",
},
{
type: "image",
src: "http://img.b2bpic.net/free-vector/mobile-app-template_23-2148160338.jpg",
alt: "Mobile app template",
},
{
type: "image",
src: "http://img.b2bpic.net/free-vector/course-app-template-set_23-2148651304.jpg",
alt: "Course app template set",
},
{
type: "text",
text: "KIDDO LEARN",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{ variant: "gradient-bars" }}
title="Welcome to Kiddo Learn!"
description="The ultimate fun learning platform for little champs! 🌟 Join us to explore letters, numbers, and so much more in the most interactive way possible."
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/interested-happy-girl-is-reading-book-emotion-concept_169016-64231.jpg", imageAlt: "Kid learning alphabet blocks" },
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-little-girl-coloring_23-2148886424.jpg", imageAlt: "Portrait little girl coloring" },
{ imageSrc: "http://img.b2bpic.net/free-photo/little-girl-front-laptop-screen-study-concept_169016-29442.jpg", imageAlt: "Little girl in front of laptop screen study concept" },
{ imageSrc: "http://img.b2bpic.net/free-photo/smiley-little-girl-home-online-school-with-laptop_23-2148827499.jpg", imageAlt: "Smiley little girl at home during online school with laptop" },
{ imageSrc: "http://img.b2bpic.net/free-photo/girl-with-down-syndrome-studying-while-sitting-desk-home_1157-52004.jpg", imageAlt: "Girl with Down syndrome studying while sitting at desk at home" }
]}
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-little-girl-coloring_23-2148886425.jpg", imageAlt: "Kid learning alphabet blocks" },
{ imageSrc: "http://img.b2bpic.net/free-photo/adorable-little-girl-drawing-paper-home_23-2149106224.jpg", imageAlt: "Adorable little girl drawing on paper at home" },
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-little-girl-coloring_23-2148886424.jpg", imageAlt: "Portrait little girl coloring" },
{ imageSrc: "http://img.b2bpic.net/free-photo/little-girl-front-laptop-screen-study-concept_169016-29442.jpg", imageAlt: "Little girl in front of laptop screen study concept" },
{ imageSrc: "http://img.b2bpic.net/free-photo/smiley-little-girl-home-online-school-with-laptop_23-2148827499.jpg", imageAlt: "Smiley little girl at home during online school with laptop" }
]}
buttons={[{ text: "Start Playing! 🚀", href: "#" }]}
avatars={[
{ src: "http://img.b2bpic.net/free-photo/girl-playing-with-hair-accessories-reading-mom_23-2147896479.jpg", alt: "Parent smiling" },
{ src: "http://img.b2bpic.net/free-photo/mother-reading-book-her-daughter-by-lake_23-2148224679.jpg", alt: "Parent holding book" },
{ src: "http://img.b2bpic.net/free-photo/girl-pointing-book-while-reading-with-mom_23-2147896475.jpg", alt: "Teacher smiling" },
{ src: "http://img.b2bpic.net/free-photo/happy-mother-daughter-reading-book-picnic_23-2148224681.jpg", alt: "Happy child" },
{ src: "http://img.b2bpic.net/free-photo/happy-black-teacher-schoolgirl-using-digital-tablet-classroom_637285-9450.jpg", alt: "Student engaged" }
]}
avatarText="Loved by 50,000+ parents and teachers!"
marqueeItems={[
{ type: "image", src: "http://img.b2bpic.net/free-vector/goals-habits-tracking-app_52683-44015.jpg", alt: "Goals and habits tracking app" },
{ type: "image", src: "http://img.b2bpic.net/free-vector/charity-app-screens_23-2148632318.jpg", alt: "Charity app screens" },
{ type: "image", src: "http://img.b2bpic.net/free-vector/mobile-app-template_23-2148160338.jpg", alt: "Mobile app template" },
{ type: "image", src: "http://img.b2bpic.net/free-vector/course-app-template-set_23-2148651304.jpg", alt: "Course app template set" },
{ type: "text", text: "KIDDO LEARN" }
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="Learning Made Magical"
buttons={[
{
text: "Learn More",
},
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="Learning Made Magical"
buttons={[{ text: "Learn More" }]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwelve
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: "f1",
label: "🔤",
title: "ABC Learning",
items: [
"Learn letters with phonics",
"Interactive letter matching",
"Cute 3D animations",
],
},
{
id: "f2",
label: "🔢",
title: "Math Fun",
items: [
"Count objects",
"Easy additions",
"Practice logic",
],
},
{
id: "f3",
label: "📖",
title: "Reading",
items: [
"Read fun stories",
"Learn simple sentences",
"Improve vocabulary",
],
},
]}
title="Fun Features"
description="What can you discover today?"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwelve
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{ id: "f1", label: "🔤", title: "ABC Learning", items: ["Learn letters with phonics", "Interactive letter matching", "Cute 3D animations"] },
{ id: "f2", label: "🔢", title: "Math Fun", items: ["Count objects", "Easy additions", "Practice logic"] },
{ id: "f3", label: "📖", title: "Reading", items: ["Read fun stories", "Learn simple sentences", "Improve vocabulary"] }
]}
title="Fun Features"
description="What can you discover today?"
/>
</div>
<div id="product-highlight" data-section="product-highlight">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Alphabet Fun Pack",
price: "$10",
imageSrc: "http://img.b2bpic.net/free-photo/alphabet-made-colored-plasticine-light-background_185193-161668.jpg",
},
{
id: "p2",
name: "Math Quiz Challenge",
price: "$15",
imageSrc: "http://img.b2bpic.net/free-photo/little-boy-playing-tablet_23-2148518117.jpg",
},
{
id: "p3",
name: "Writing Skills Worksheet",
price: "$12",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cyszg6",
},
{
id: "p4",
name: "Animal Sounds Discovery",
price: "$10",
imageSrc: "http://img.b2bpic.net/free-photo/word-form-balloon_23-2150316340.jpg",
},
{
id: "p5",
name: "Color Matching Game",
price: "$12",
imageSrc: "http://img.b2bpic.net/free-vector/course-app-interface-concept_23-2148653668.jpg",
},
{
id: "p6",
name: "Story Time Reader",
price: "$15",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=71k1eu",
},
]}
title="Learning Modules"
description="Explore our interactive educational sets."
/>
</div>
<div id="product-highlight" data-section="product-highlight">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Alphabet Fun Pack", price: "$10", imageSrc: "http://img.b2bpic.net/free-photo/alphabet-made-colored-plasticine-light-background_185193-161668.jpg" },
{ id: "p2", name: "Math Quiz Challenge", price: "$15", imageSrc: "http://img.b2bpic.net/free-photo/little-boy-playing-tablet_23-2148518117.jpg" },
{ id: "p3", name: "Writing Skills Worksheet", price: "$12", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cyszg6" }
]}
title="Learning Modules"
description="Explore our interactive educational sets."
/>
</div>
<div id="worksheets" data-section="worksheets">
<PricingCardEight
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "basic",
badge: "Free",
price: "$0",
subtitle: "Basics",
features: [
"Alphabet sheets",
"Counting worksheets",
"Fun activities",
],
buttons: [
{
text: "Download",
},
],
},
{
id: "premium",
badge: "Pro",
price: "$9",
subtitle: "Full Access",
features: [
"All worksheets",
"Weekly updates",
"Progress tracking",
],
buttons: [
{
text: "Get Access",
},
],
},
]}
title="Practice Sheets"
description="Download and practice at home!"
/>
</div>
<div id="worksheets" data-section="worksheets">
<PricingCardEight
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{ id: "basic", badge: "Free", price: "$0", subtitle: "Basics", features: ["Alphabet sheets", "Counting worksheets", "Fun activities"], buttons: [{ text: "Download" }] },
{ id: "premium", badge: "Pro", price: "$9", subtitle: "Full Access", features: ["All worksheets", "Weekly updates", "Progress tracking"], buttons: [{ text: "Get Access" }] }
]}
title="Practice Sheets"
description="Download and practice at home!"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "50k+",
title: "Happy Students",
items: [
"Learning with joy",
],
},
{
id: "m2",
value: "100+",
title: "Interactive Lessons",
items: [
"Created by experts",
],
},
{
id: "m3",
value: "95%",
title: "Skill Growth",
items: [
"Based on feedback",
],
},
]}
title="Our Impact"
description="Helping thousands of kids learn faster."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "50k+", title: "Happy Students", items: ["Learning with joy"] },
{ id: "m2", value: "100+", title: "Interactive Lessons", items: ["Created by experts"] },
{ id: "m3", value: "95%", title: "Skill Growth", items: ["Based on feedback"] }
]}
title="Our Impact"
description="Helping thousands of kids learn faster."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Sarah",
role: "Parent",
testimonial: "My son loves playing here! Truly educational.",
imageSrc: "http://img.b2bpic.net/free-photo/mother-reading-book-cute-girl-bed_23-2147896514.jpg",
},
{
id: "t2",
name: "Michael",
role: "Parent",
testimonial: "The best interactive tool I have found.",
imageSrc: "http://img.b2bpic.net/free-photo/college-girls-doing-home-assignment-cafeteria-using-digital-tablet-making-notes-paper_273609-5563.jpg",
},
{
id: "t3",
name: "Emily",
role: "Teacher",
testimonial: "Really engaged my students in learning.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-teenage-girl-writing-diary_329181-20321.jpg",
},
{
id: "t4",
name: "David",
role: "Parent",
testimonial: "So fun and simple to use.",
imageSrc: "http://img.b2bpic.net/free-photo/young-autistic-boy-playing-with-toys-home_23-2150266535.jpg",
},
{
id: "t5",
name: "Jenny",
role: "Parent",
testimonial: "Kids grow their skills so fast!",
imageSrc: "http://img.b2bpic.net/free-photo/world-book-day-celebration_23-2151245076.jpg",
},
]}
title="Parent Stories"
description="See why parents love Kiddo Learn."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{ id: "t1", name: "Sarah", role: "Parent", testimonial: "My son loves playing here! Truly educational.", imageSrc: "http://img.b2bpic.net/free-photo/mother-reading-book-cute-girl-bed_23-2147896514.jpg" },
{ id: "t2", name: "Michael", role: "Parent", testimonial: "The best interactive tool I have found.", imageSrc: "http://img.b2bpic.net/free-photo/college-girls-doing-home-assignment-cafeteria-using-digital-tablet-making-notes-paper_273609-5563.jpg" },
{ id: "t3", name: "Emily", role: "Teacher", testimonial: "Really engaged my students in learning.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-teenage-girl-writing-diary_329181-20321.jpg" },
{ id: "t4", name: "David", role: "Parent", testimonial: "So fun and simple to use.", imageSrc: "http://img.b2bpic.net/free-photo/young-autistic-boy-playing-with-toys-home_23-2150266535.jpg" },
{ id: "t5", name: "Jenny", role: "Parent", testimonial: "Kids grow their skills so fast!", imageSrc: "http://img.b2bpic.net/free-photo/world-book-day-celebration_23-2151245076.jpg" }
]}
title="Parent Stories"
description="See why parents love Kiddo Learn."
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "#",
},
{
label: "Contact",
href: "#",
},
],
},
{
title: "Resources",
items: [
{
label: "Blog",
href: "#",
},
{
label: "Worksheets",
href: "#",
},
],
},
]}
logoText="Kiddo Learn"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }] },
{ title: "Resources", items: [{ label: "Blog", href: "#" }, { label: "Worksheets", href: "#" }] }
]}
logoText="Kiddo Learn"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}