266 lines
14 KiB
TypeScript
266 lines
14 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 MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { Award, BookOpen, DollarSign, HelpCircle, Mail, Sparkles, Star, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="inset-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Courses", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="My Coder"
|
|
bottomLeftText="Learn to Code"
|
|
bottomRightText="hello@mycoder.edu"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlay
|
|
title="Learn to Code, Shape Your Future"
|
|
description="Master web development, mobile apps, and software engineering with expert instructors and hands-on projects"
|
|
tag="Start Your Tech Career"
|
|
tagIcon={Zap}
|
|
imageSrc="https://img.b2bpic.net/free-photo/side-view-attractive-hispanic-developer-programming-software-using-computer-while-working-from-home_662251-988.jpg"
|
|
imageAlt="Developer coding on laptop"
|
|
textPosition="bottom-left"
|
|
showBlur={true}
|
|
showDimOverlay={true}
|
|
buttons={[
|
|
{ text: "Explore Courses", href: "features" },
|
|
{ text: "Get Started Free", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaSplitTabsAbout
|
|
title="Why Choose My Coder?"
|
|
description="We're dedicated to transforming aspiring developers into skilled professionals"
|
|
tabs={[
|
|
{
|
|
id: "expert-instructors", label: "Expert Instructors", description: "Learn from industry professionals with years of experience at top tech companies"
|
|
},
|
|
{
|
|
id: "hands-on-projects", label: "Real Projects", description: "Build portfolio-worthy projects and gain practical experience from day one"
|
|
},
|
|
{
|
|
id: "career-support", label: "Career Support", description: "Get job placement assistance, interview prep, and career guidance after graduation"
|
|
},
|
|
{
|
|
id: "community", label: "Community", description: "Join a supportive network of learners and stay connected with alumni"
|
|
}
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891341.jpg"
|
|
imageAlt="Students learning in coding classroom"
|
|
imagePosition="right"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyOne
|
|
title="Our Comprehensive Curriculum"
|
|
description="Structured learning paths designed to take you from beginner to professional developer"
|
|
tag="Courses"
|
|
tagIcon={BookOpen}
|
|
imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
|
|
imageAlt="Interactive learning platform"
|
|
mediaPosition="left"
|
|
accordionItems={[
|
|
{
|
|
id: "web-dev", title: "Web Development Fundamentals", content: "Master HTML, CSS, JavaScript, and React. Build responsive, modern websites from scratch with our comprehensive web development course covering frontend and backend technologies."
|
|
},
|
|
{
|
|
id: "mobile-dev", title: "Mobile App Development", content: "Create powerful mobile applications using React Native and Flutter. Learn iOS and Android development with hands-on projects and real-world scenarios."
|
|
},
|
|
{
|
|
id: "backend-dev", title: "Backend & Database Design", content: "Build scalable server-side applications with Node.js, Python, and databases. Master REST APIs, authentication, and cloud deployment practices."
|
|
},
|
|
{
|
|
id: "devops", title: "DevOps & Deployment", content: "Learn Docker, Kubernetes, and CI/CD pipelines. Deploy applications to production and manage infrastructure like a professional engineer."
|
|
}
|
|
]}
|
|
buttons={[{ text: "View All Courses", href: "pricing" }]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Choose Your Learning Path"
|
|
description="Flexible pricing options designed for every learner and budget"
|
|
tag="Pricing"
|
|
tagIcon={DollarSign}
|
|
plans={[
|
|
{
|
|
id: "starter", badge: "Popular", badgeIcon: Star,
|
|
price: "$49/month", subtitle: "Perfect for beginners", buttons: [{ text: "Get Started", href: "contact" }],
|
|
features: [
|
|
"Access to 5 core courses", "Interactive coding exercises", "Community forum access", "Monthly live Q&A sessions", "Certificate of completion"
|
|
]
|
|
},
|
|
{
|
|
id: "professional", badge: "Most Popular", badgeIcon: Sparkles,
|
|
price: "$99/month", subtitle: "For serious learners", buttons: [{ text: "Start Learning", href: "contact" }],
|
|
features: [
|
|
"All Starter features", "Access to 20+ advanced courses", "One-on-one mentorship", "Priority support", "Career guidance sessions", "Job placement assistance"
|
|
]
|
|
},
|
|
{
|
|
id: "enterprise", badge: "Premium", badgeIcon: Award,
|
|
price: "$199/month", subtitle: "Maximum acceleration", buttons: [{ text: "Upgrade Now", href: "contact" }],
|
|
features: [
|
|
"All Professional features", "Unlimited course access", "Personalized learning plan", "Weekly 1:1 coaching calls", "Internship opportunities", "Lifetime course updates", "Priority job matching"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg", imageAlt: "Sarah Chen"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson", imageSrc: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg", imageAlt: "Marcus Johnson"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", imageSrc: "https://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-building-street-with-folded-arms_158595-6645.jpg", imageAlt: "David Kim"
|
|
}
|
|
]}
|
|
cardTitle="Over 5,000 graduates have launched successful tech careers with My Coder"
|
|
cardTag="Student Success Stories"
|
|
cardTagIcon={Users}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about learning with My Coder"
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
imageSrc="https://img.b2bpic.net/free-photo/people-working-call-center_23-2149288189.jpg"
|
|
imageAlt="Customer support team"
|
|
mediaPosition="left"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Do I need prior coding experience?", content: "No! Our courses are designed for complete beginners. We start from the fundamentals and progressively advance through practical projects. You only need a computer and determination to learn."
|
|
},
|
|
{
|
|
id: "2", title: "How long does it take to complete a course?", content: "Most courses take 3-6 months with 15-20 hours per week commitment. You can learn at your own pace and complete courses faster or slower depending on your schedule."
|
|
},
|
|
{
|
|
id: "3", title: "Will I get job placement help?", content: "Yes! Professional and Enterprise plans include career guidance, resume review, interview preparation, and access to our job board with exclusive opportunities from partner companies."
|
|
},
|
|
{
|
|
id: "4", title: "What if I don't like the course?", content: "We offer a 30-day money-back guarantee if you're not satisfied. We want you to succeed, so we also provide free course switches if you want to change your learning path."
|
|
},
|
|
{
|
|
id: "5", title: "Are the certificates recognized by employers?", content: "Yes! Our certificates are recognized by top tech companies and are highly valued in the industry. Combined with portfolio projects, they significantly boost your hiring prospects."
|
|
},
|
|
{
|
|
id: "6", title: "Can I access courses on mobile?", content: "Absolutely. Our platform is fully mobile-responsive, so you can learn on your phone, tablet, or laptop. Download lessons to study offline whenever you want."
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get Started"
|
|
tagIcon={Mail}
|
|
title="Start Your Coding Journey Today"
|
|
description="Join thousands of students learning to code with My Coder. Sign up for our newsletter and get exclusive course discounts and learning tips."
|
|
imageSrc="https://img.b2bpic.net/free-photo/business-people-being-team_23-2148911773.jpg"
|
|
imageAlt="Community of developers"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Join Now"
|
|
termsText="We respect your privacy. Unsubscribe at any time. By joining, you agree to our Terms of Service."
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="My Coder"
|
|
columns={[
|
|
{
|
|
title: "Learn", items: [
|
|
{ label: "Web Development", href: "#courses" },
|
|
{ label: "Mobile Apps", href: "#courses" },
|
|
{ label: "Backend Development", href: "#courses" },
|
|
{ label: "All Courses", href: "#courses" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Press", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "Community", href: "#" },
|
|
{ label: "Help Center", href: "#" },
|
|
{ label: "Contact Support", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Accessibility", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 My Coder | Transforming Future Developers"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |