Initial commit
This commit is contained in:
Nikolay Pecheniev
266
src/app/page.tsx
Normal file
266
src/app/page.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
"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="invertDefault"
|
||||
/>
|
||||
</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="invertDefault"
|
||||
/>
|
||||
</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="invertDefault"
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user