354 lines
16 KiB
TypeScript
354 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
|
|
import { BookOpen, Star, Rocket, Facebook, Twitter, Instagram, Youtube, Linkedin, Github } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="sharp"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="noiseGradient"
|
|
cardStyle="solid-accent-light"
|
|
primaryButtonStyle="layered-depth"
|
|
secondaryButtonStyle="minimal"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="Children 404"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Courses", id: "features" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
bottomLeftText="Global IT Education"
|
|
bottomRightText="learn@children404.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlay
|
|
title="Empower the Next Generation of Developers"
|
|
description="Children 404 teaches kids the future of technology through hands-on coding, game development, robotics, and creative problem-solving. Start your child's IT journey today."
|
|
tag="Learn to Code"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eh5aiv"
|
|
imageAlt="Children learning coding in a modern classroom"
|
|
textPosition="bottom-left"
|
|
showBlur={true}
|
|
showDimOverlay={true}
|
|
buttons={[
|
|
{ text: "Explore Courses", href: "features" },
|
|
{ text: "Book a Demo", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="About Us"
|
|
title="Building confident, creative young programmers who love solving problems with code."
|
|
description="Children 404 Leadership"
|
|
subdescription="IT Education for the Future"
|
|
icon={BookOpen}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2xj61j"
|
|
imageAlt="Instructor mentoring a student"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwenty
|
|
title="Learn Through Real-World Projects"
|
|
description="Our curriculum combines fundamental programming concepts with exciting real-world applications. Students don't just learn syntax—they build games, websites, robots, and apps that solve actual problems."
|
|
tag="Hands-On Learning"
|
|
images={[
|
|
{ id: 1, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r66mao" },
|
|
{ id: 2, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gz5xj4" },
|
|
{ id: 3, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vgu5zb" },
|
|
{ id: 4, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8be9yi" }
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{ text: "View All Courses", href: "#courses" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
title="Choose Your Learning Path"
|
|
description="Select the perfect course package for your child's skill level and interests"
|
|
tag="Flexible Pricing"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
plans={[
|
|
{
|
|
id: "1",
|
|
price: "$99/month",
|
|
name: "Beginner Explorer",
|
|
buttons: [
|
|
{ text: "Get Started", href: "#contact" },
|
|
{ text: "Learn More" }
|
|
],
|
|
features: [
|
|
"Introduction to Python programming",
|
|
"2 hours per week instruction",
|
|
"Access to learning portal",
|
|
"Monthly projects and challenges",
|
|
"Community support access"
|
|
]
|
|
},
|
|
{
|
|
id: "2",
|
|
badge: "Most Popular",
|
|
badgeIcon: Star,
|
|
price: "$199/month",
|
|
name: "Developer Builder",
|
|
buttons: [
|
|
{ text: "Get Started", href: "#contact" },
|
|
{ text: "Learn More" }
|
|
],
|
|
features: [
|
|
"Full-stack web development",
|
|
"Game development fundamentals",
|
|
"4 hours per week instruction",
|
|
"1-on-1 mentoring sessions",
|
|
"Portfolio building projects",
|
|
"Certification upon completion"
|
|
]
|
|
},
|
|
{
|
|
id: "3",
|
|
price: "$299/month",
|
|
name: "Master Programmer",
|
|
buttons: [
|
|
{ text: "Get Started", href: "#contact" },
|
|
{ text: "Learn More" }
|
|
],
|
|
features: [
|
|
"Advanced programming (Python, JavaScript, C++)",
|
|
"Robotics and IoT projects",
|
|
"6 hours per week instruction",
|
|
"Weekly 1-on-1 mentoring",
|
|
"Advanced problem-solving workshops",
|
|
"Competition preparation",
|
|
"Premium certification"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="Our Impact"
|
|
description="Building the next generation of tech innovators"
|
|
tag="Results"
|
|
textboxLayout="default"
|
|
animationType="scale-rotate"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="uniform-all-items-equal"
|
|
metrics={[
|
|
{ id: "1", value: "2,500+", description: "Students Trained" },
|
|
{ id: "2", value: "95%", description: "Completion Rate" },
|
|
{ id: "3", value: "50+", description: "Active Instructors" },
|
|
{ id: "4", value: "15+", description: "Course Programs" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardOne
|
|
title="Meet Our Expert Instructors"
|
|
description="Passionate educators with real-world tech experience"
|
|
tag="Team"
|
|
textboxLayout="default"
|
|
animationType="opacity"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="uniform-all-items-equal"
|
|
members={[
|
|
{ id: "1", name: "Alex Chen", role: "Lead Instructor", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=grhk13" },
|
|
{ id: "2", name: "Sarah Mitchell", role: "Web Development", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wmn8io" },
|
|
{ id: "3", name: "Marcus Johnson", role: "Game Development", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gwl3d8" },
|
|
{ id: "4", name: "Emma Rodriguez", role: "Robotics & IoT", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=95c05q" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Students and Parents Say"
|
|
description="Real feedback from our learning community"
|
|
tag="Testimonials"
|
|
textboxLayout="default"
|
|
animationType="blur-reveal"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="uniform-all-items-equal"
|
|
testimonials={[
|
|
{ id: "1", name: "Jamie Chen", role: "Student", company: "Age 12", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aydmov" },
|
|
{ id: "2", name: "Sarah Thompson", role: "Parent", company: "Proud Mom", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1fy7sw" },
|
|
{ id: "3", name: "Lucas Park", role: "Student", company: "Age 14", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3p0aht" },
|
|
{ id: "4", name: "Michael Wong", role: "Parent", company: "Supportive Dad", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3a7fla" },
|
|
{ id: "5", name: "Emma Okafor", role: "Student", company: "Age 13", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aydmov" },
|
|
{ id: "6", name: "David Kumar", role: "Parent", company: "Enthusiastic Guardian", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1fy7sw" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about Children 404"
|
|
tag="Help & Support"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uwv9k6"
|
|
imageAlt="Learning and support resources"
|
|
mediaPosition="left"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "What age group do you teach?",
|
|
content: "We offer programs for children ages 8-18. Our curriculum is designed with age-appropriate content and difficulty levels, from absolute beginners to advanced programmers."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Do students need prior coding experience?",
|
|
content: "No experience necessary! Our Beginner Explorer program is perfect for complete beginners. We teach fundamental concepts from scratch and progress at each student's own pace."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "What is your class format?",
|
|
content: "We offer both live online instruction and hybrid formats. Classes are small (5-8 students) to ensure personalized attention from instructors."
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "What programming languages do you teach?",
|
|
content: "We teach Python, JavaScript, HTML/CSS, C++, and more. Our curriculum introduces industry-relevant languages while keeping learning fun and engaging."
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Are there scholarships available?",
|
|
content: "Yes! We offer need-based scholarships and referral discounts. Contact our team at learn@children404.com to discuss scholarship opportunities."
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "How do I enroll my child?",
|
|
content: "Simply click 'Get Started' in any course section, fill out the enrollment form, and our team will contact you within 24 hours to schedule a placement assessment and demo class."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Ready to Start Learning?"
|
|
ctaDescription="Enroll your child in a course today and watch them discover the joy of coding."
|
|
ctaButton={{
|
|
text: "Enroll Now",
|
|
href: "https://forms.children404.com/enroll"
|
|
}}
|
|
ctaIcon={Rocket}
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "What if my child can't make the scheduled classes?",
|
|
content: "We offer recorded lectures and flexible makeup sessions. Our platform allows students to learn at their own pace while staying connected with their cohort."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "How can parents track their child's progress?",
|
|
content: "Parents receive weekly progress reports via email, have access to our parent dashboard, and can schedule quarterly check-ins with instructors to discuss milestones and goals."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "What happens after the course ends?",
|
|
content: "Students receive a certificate of completion and are invited to join our alumni community. They can continue with advanced programs, participate in competitions, or explore specialized tracks."
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Is there technical support if my child has issues?",
|
|
content: "Yes! Our support team responds within 2 hours. We provide setup assistance, troubleshooting, and technical resources to ensure smooth learning."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseSocial
|
|
logoText="Children 404"
|
|
description="Empowering the next generation of developers through hands-on coding education, innovative projects, and mentorship from industry experts."
|
|
copyrightText="© 2025 Children 404. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Programs",
|
|
items: [
|
|
{ label: "Beginner Explorer", href: "#pricing" },
|
|
{ label: "Developer Builder", href: "#pricing" },
|
|
{ label: "Master Programmer", href: "#pricing" },
|
|
{ label: "All Courses", href: "#features" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Team", href: "#team" },
|
|
{ label: "Blog", href: "https://blog.children404.com" },
|
|
{ label: "Careers", href: "https://careers.children404.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Refund Policy", href: "/refund-policy" },
|
|
{ label: "Terms of Service", href: "/terms" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect",
|
|
items: [
|
|
{ label: "Discord Community", href: "https://discord.gg/children404" },
|
|
{ label: "Newsletter", href: "https://newsletter.children404.com" },
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "Partner With Us", href: "mailto:partnerships@children404.com" }
|
|
]
|
|
}
|
|
]}
|
|
socialLinks={[
|
|
{ icon: Facebook, href: "https://facebook.com/children404", ariaLabel: "Facebook" },
|
|
{ icon: Twitter, href: "https://twitter.com/children404", ariaLabel: "Twitter" },
|
|
{ icon: Instagram, href: "https://instagram.com/children404", ariaLabel: "Instagram" },
|
|
{ icon: Youtube, href: "https://youtube.com/children404", ariaLabel: "YouTube" },
|
|
{ icon: Linkedin, href: "https://linkedin.com/company/children404", ariaLabel: "LinkedIn" },
|
|
{ icon: Github, href: "https://github.com/children404", ariaLabel: "GitHub" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |