Initial commit
This commit is contained in:
288
src/app/page.tsx
Normal file
288
src/app/page.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Sparkles, CheckCircle, Zap, Award, Star } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="sharp"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="STEP"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Courses", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Enroll Now", href: "contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: "plain" }}
|
||||
title="Learn to Code. Build Your Future."
|
||||
description="Master full-stack development with our comprehensive, industry-leading curriculum. From beginner to expert, we guide you every step of the way."
|
||||
tag="Start Your Journey"
|
||||
tagIcon={Sparkles}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/young-girl-listening-educational-documentary-laptop-takes-notes_482257-126301.jpg"
|
||||
imageAlt="Students learning to code"
|
||||
buttons={[
|
||||
{ text: "Explore Courses", href: "features" },
|
||||
{ text: "View Pricing", href: "pricing" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
title="Why Choose STEP Academy"
|
||||
description="We're committed to transforming aspiring developers into industry-ready professionals. Our approach combines hands-on learning, mentorship, and real-world projects."
|
||||
tag="About STEP"
|
||||
imageSrc="https://img.b2bpic.net/free-photo/funny-little-girl-headphones-with-laptop-plays-games-game-addiction-concept_169016-53925.jpg"
|
||||
imageAlt="STEP Academy classroom"
|
||||
useInvertedBackground="noInvert"
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
title="Our Comprehensive Curriculum"
|
||||
description="Carefully designed courses that cover all aspects of modern web development"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Frontend Mastery", description: "Build beautiful, responsive interfaces with React, Vue, and modern CSS frameworks. Learn design principles and UX best practices.", tag: "Web Design", imageSrc: "https://img.b2bpic.net/free-photo/two-teenage-friends-playing-video-games-together-home_23-2149332883.jpg", imageAlt: "Frontend development course"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Backend Architecture", description: "Develop scalable server-side applications using Node.js, Python, and databases. Master APIs, authentication, and cloud deployment.", tag: "Server-Side", imageSrc: "https://img.b2bpic.net/free-photo/teenage-girl-using-laptop-home_23-2149332882.jpg", imageAlt: "Backend development course"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Full-Stack Integration", description: "Bring it all together. Build complete applications from database to user interface. Learn DevOps, testing, and deployment strategies.", tag: "Complete Solutions", imageSrc: "https://img.b2bpic.net/free-photo/scholar-paying-attention-online-class-webinar-via-video-conferencing_482257-123192.jpg", imageAlt: "Full-stack development course"
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="invertDefault"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="learning-paths" data-section="learning-paths">
|
||||
<ProductCardFour
|
||||
title="Structured Learning Paths"
|
||||
description="Choose your path and progress at your own pace"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Beginner Track", price: "Perfect Start", variant: "HTML, CSS, JavaScript Fundamentals", imageSrc: "https://img.b2bpic.net/free-photo/university-scholar-listening-therapy-music-create-perfect-ambient_482257-123297.jpg", imageAlt: "Beginner learning path"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Intermediate Track", price: "Level Up", variant: "React, Node.js, Databases", imageSrc: "https://img.b2bpic.net/free-photo/young-scholar-celebrating-some-good-news-feeling-pleased-with-progress_482257-126249.jpg", imageAlt: "Intermediate learning path"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Advanced Track", price: "Master", variant: "System Design, DevOps, Leadership", imageSrc: "https://img.b2bpic.net/free-photo/young-woman-works-laptop-earphones-office_346278-206.jpg", imageAlt: "Advanced learning path"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
title="Proven Results"
|
||||
description="Join thousands of successful graduates"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "5,000+", description: "Students Graduated"
|
||||
},
|
||||
{
|
||||
id: "2", value: "95%", description: "Job Placement Rate"
|
||||
},
|
||||
{
|
||||
id: "3", value: "50K+", description: "Average First Salary"
|
||||
},
|
||||
{
|
||||
id: "4", value: "12 Weeks", description: "Average to First Job"
|
||||
}
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
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/medium-shot-smiley-man-with-laptop_23-2149915909.jpg", imageAlt: "Sarah Chen"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Marcus Johnson", imageSrc: "https://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg", imageAlt: "Marcus Johnson"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Elena Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/student-posing-group-study-session-with-colleagues_23-2149211075.jpg", imageAlt: "Elena Rodriguez"
|
||||
},
|
||||
{
|
||||
id: "4", name: "David Park", imageSrc: "https://img.b2bpic.net/free-photo/front-view-man-working-laptop_23-2149915910.jpg", imageAlt: "David Park"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Jessica Williams", imageSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-arms-crossed-holding-white-headphone-around-his-neck_23-2148096439.jpg", imageAlt: "Jessica Williams"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Alex Thompson", imageSrc: "https://img.b2bpic.net/free-photo/smiling-redhead-man-with-laptop-looking-camera-cafe_1163-5162.jpg", imageAlt: "Alex Thompson"
|
||||
}
|
||||
]}
|
||||
cardTitle="Join thousands of developers who transformed their careers with STEP Academy"
|
||||
cardTag="See what they achieved"
|
||||
cardTagIcon={CheckCircle}
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Choose the plan that fits your learning goals and budget"
|
||||
plans={[
|
||||
{
|
||||
id: "monthly", tag: "Monthly Plan", tagIcon: Zap,
|
||||
price: "$299", period: "/month", description: "Perfect for self-paced learners wanting flexibility", button: {
|
||||
text: "Start Learning", href: "contact"
|
||||
},
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"Access to all courses", "Weekly live Q&A sessions", "Project portfolio building", "Career guidance resources"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "quarterly", tag: "Quarterly Plan", tagIcon: Award,
|
||||
price: "$799", period: "/3 months", description: "Best value for serious learners. Most popular choice.", button: {
|
||||
text: "Get Started", href: "contact"
|
||||
},
|
||||
featuresTitle: "Everything in Monthly, plus:", features: [
|
||||
"1-on-1 mentorship sessions", "Job preparation workshop", "GitHub portfolio review", "Priority support"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "annual", tag: "Annual Plan", tagIcon: Star,
|
||||
price: "$1,899", period: "/year", description: "Complete mastery. Maximum savings with lifetime access.", button: {
|
||||
text: "Unlock Full Access", href: "contact"
|
||||
},
|
||||
featuresTitle: "Everything in Quarterly, plus:", features: [
|
||||
"Lifetime course access", "Monthly 1-on-1 sessions", "Interview prep intensive", "Exclusive alumni network"
|
||||
]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="invertDefault"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about STEP Academy"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "Do I need prior coding experience?", content: "No! Our Beginner Track is designed for complete newcomers. We start with HTML, CSS, and JavaScript fundamentals and progress systematically."
|
||||
},
|
||||
{
|
||||
id: "2", title: "What's the time commitment?", content: "Most students dedicate 30-40 hours per week. We offer flexible scheduling to accommodate different lifestyles and learning paces."
|
||||
},
|
||||
{
|
||||
id: "3", title: "Will I get a certification?", content: "Yes, you'll receive a STEP Academy certificate upon completion. Plus, you'll build a portfolio of real projects to showcase to employers."
|
||||
},
|
||||
{
|
||||
id: "4", title: "What kind of job support do you offer?", content: "We provide resume reviews, mock interviews, job placement assistance, and access to our alumni network and partner companies."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Can I access courses after I graduate?", content: "Annual plan members get lifetime access. Monthly and Quarterly plans provide access during your subscription period."
|
||||
},
|
||||
{
|
||||
id: "6", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, and offer installment plans for quarterly and annual subscriptions."
|
||||
}
|
||||
]}
|
||||
textPosition="left"
|
||||
useInvertedBackground="noInvert"
|
||||
animationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Newsletter"
|
||||
title="Stay Updated"
|
||||
description="Get the latest news about new courses, industry insights, and exclusive learning tips delivered to your inbox."
|
||||
useInvertedBackground="invertDefault"
|
||||
imageSrc="https://img.b2bpic.net/free-photo/colleagues-studying-together-group-study_23-2149211081.jpg"
|
||||
imageAlt="Newsletter signup"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
termsText="We respect your privacy. Unsubscribe at any time."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Courses", href: "features" },
|
||||
{ label: "Pricing", href: "pricing" },
|
||||
{ label: "Learning Paths", href: "learning-paths" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "about" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Blog", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Contact Us", href: "contact" },
|
||||
{ label: "FAQ", href: "faq" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 STEP Academy. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user