259 lines
17 KiB
TypeScript
259 lines
17 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Sparkles, Award, Rocket, Linkedin, Twitter, Github, Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="inset-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="TechAcademy"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Courses", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Enroll Now", href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Master In-Demand Tech Skills"
|
|
description="Learn from industry experts in our comprehensive IT courses. From web development to data science, gain practical skills and launch your tech career."
|
|
tag="Start Learning Today"
|
|
tagIcon={Sparkles}
|
|
background={{ variant: "radial-gradient" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-working-laptops_23-2149739424.jpg", imageAlt: "Students learning online"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/two-teenage-friends-playing-video-games-together-home_23-2149332883.jpg", imageAlt: "Programming course"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/friends-having-fun-together_23-2149329703.jpg", imageAlt: "Tech classroom"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg", imageAlt: "Instructor teaching"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-working-laptops_23-2149739424.jpg", imageAlt: "Learning environment"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "View Courses", href: "features"
|
|
},
|
|
{
|
|
text: "Get Started", href: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaSplitTabsAbout
|
|
title="Why Choose TechAcademy?"
|
|
description="We combine practical training with industry expertise to transform careers."
|
|
tabs={[
|
|
{
|
|
id: "expertise", label: "Expert Instructors", description: "Learn from professionals with 10+ years of industry experience. Our instructors are active practitioners who bring real-world knowledge and current best practices to every lesson."
|
|
},
|
|
{
|
|
id: "curriculum", label: "Updated Curriculum", description: "Our courses are updated quarterly to reflect the latest technologies and industry trends. Stay ahead with content that matters in today's competitive job market."
|
|
},
|
|
{
|
|
id: "support", label: "Career Support", description: "We don't just teach—we mentor. Access career counseling, resume reviews, and interview prep to land your dream job in tech."
|
|
},
|
|
{
|
|
id: "community", label: "Active Community", description: "Join a vibrant community of learners and professionals. Network, collaborate, and grow together with peers from around the world."
|
|
}
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/close-up-young-business-team-working_23-2149153838.jpg"
|
|
imageAlt="TechAcademy team collaboration"
|
|
imagePosition="right"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardMedia
|
|
title="Popular Courses"
|
|
description="Explore our comprehensive range of IT courses designed for beginners to advanced learners"
|
|
tag="Featured"
|
|
tagIcon={Award}
|
|
features={[
|
|
{
|
|
id: "web-design", title: "UI/UX Design Mastery", description: "Create beautiful, user-centered digital experiences. Learn design principles, prototyping, and modern design tools to build interfaces that users love.", tag: "12 Weeks", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-studying-together-group-study_23-2149211081.jpg", buttons: [{ text: "Learn More", href: "pricing" }]
|
|
},
|
|
{
|
|
id: "web-dev", title: "Full Stack Web Development", description: "Build complete web applications from frontend to backend. Master JavaScript, React, Node.js, and databases to become a full-stack developer.", tag: "16 Weeks", imageSrc: "https://img.b2bpic.net/free-photo/friends-learning-study-group_23-2149257210.jpg", buttons: [{ text: "Learn More", href: "pricing" }]
|
|
},
|
|
{
|
|
id: "data-science", title: "Data Science & Analytics", description: "Transform data into insights. Learn Python, machine learning, and data visualization to solve real-world problems and drive business decisions.", tag: "14 Weeks", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-reading-coffee-shop_23-2150183754.jpg", buttons: [{ text: "Learn More", href: "pricing" }]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
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: "starter", tag: "Beginner Plan", price: "$199", period: "/month", description: "Perfect for those starting their tech journey with foundational knowledge.", button: { text: "Get Started", href: "contact" },
|
|
featuresTitle: "What's Included:", features: [
|
|
"Access to 3 foundational courses", "Weekly live Q&A sessions", "Course materials and resources", "Community forum access", "Certificate of completion"
|
|
]
|
|
},
|
|
{
|
|
id: "professional", tag: "Professional Plan", price: "$399", period: "/month", description: "Our most popular plan for serious learners aiming for career advancement.", button: { text: "Enroll Now", href: "contact" },
|
|
featuresTitle: "What's Included:", features: [
|
|
"Access to 8 professional courses", "2 weeks of 1-on-1 mentorship", "Priority support via Slack", "Job preparation bootcamp", "Resume and portfolio review", "Interview coaching sessions"
|
|
]
|
|
},
|
|
{
|
|
id: "enterprise", tag: "Enterprise Plan", price: "$799", period: "/month", description: "Comprehensive program for those committed to mastering multiple tech domains.", button: { text: "Start Premium", href: "contact" },
|
|
featuresTitle: "What's Included:", features: [
|
|
"Unlimited course access", "Unlimited 1-on-1 mentorship", "Personalized learning path", "Career placement assistance", "Lifetime community access", "Advanced capstone project guidance", "Direct instructor access"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="Student Success Stories"
|
|
description="Hear from graduates who transformed their careers through our programs"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", role: "Senior Frontend Developer", testimonial: "TechAcademy's Full Stack program completely changed my career trajectory. Within 3 months of completion, I landed a developer role at a top tech company. The mentorship was invaluable!", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Rodriguez", role: "Data Scientist", testimonial: "The data science course was comprehensive and practical. I went from zero coding experience to building machine learning models. Best investment in my future ever.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Watson", role: "UX Designer", testimonial: "The UI/UX design curriculum taught me not just tools, but design thinking. I've already used what I learned to redesign my company's entire product interface.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "James Park", role: "DevOps Engineer", testimonial: "The instructors are genuinely invested in your success. They answer questions beyond the curriculum and provide real industry insights that no other platform offers.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Thompson", role: "Freelance Web Developer", testimonial: "As a career changer, I was nervous about the transition. TechAcademy's supportive community and structured curriculum made it possible. Now I'm earning 3x what I made before.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-outdoor-businessman_23-2148763884.jpg"
|
|
},
|
|
{
|
|
id: "6", name: "David Kim", role: "Full Stack Developer", testimonial: "The capstone project was the perfect bridge to employment. It gave me portfolio pieces and experience that directly helped me secure my first tech role.", imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our courses, enrollment, and support"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Do I need prior coding experience?", content: "No! Our beginner courses are designed for students with zero programming experience. We start with fundamentals and progress at a sustainable pace. For advanced courses, we recommend basic familiarity with programming concepts."
|
|
},
|
|
{
|
|
id: "2", title: "How long does it take to complete a course?", content: "Course duration ranges from 8-16 weeks depending on the program. Most courses involve 15-20 hours of learning per week. You can learn at your own pace with recorded content, but we recommend staying on schedule for optimal progress and community engagement."
|
|
},
|
|
{
|
|
id: "3", title: "Are the certificates recognized by employers?", content: "Yes! Our certificates are industry-recognized and valued by employers. Many of our graduates include their TechAcademy certifications on LinkedIn and in job applications. We also provide letters of completion and detailed skill assessments."
|
|
},
|
|
{
|
|
id: "4", title: "Can I get a refund if I'm not satisfied?", content: "We offer a 14-day money-back guarantee for our courses. If you're not satisfied within the first two weeks, we'll provide a full refund. We're confident you'll love the program!"
|
|
},
|
|
{
|
|
id: "5", title: "How much support will I receive?", content: "Support varies by plan. Starter plan includes community forum access. Professional and Enterprise plans include dedicated mentorship, priority support channels, and direct instructor access. All plans include weekly live Q&A sessions."
|
|
},
|
|
{
|
|
id: "6", title: "Do you offer job placement guarantees?", content: "While we can't guarantee placement, our Enterprise plan includes dedicated job placement assistance and interview coaching. We have a strong track record of helping 85% of graduates secure tech positions within 3 months of course completion."
|
|
}
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/front-view-friends-playing-videogames_23-2150571961.jpg"
|
|
imageAlt="Customer support representative helping students"
|
|
mediaPosition="left"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Started"
|
|
title="Ready to Transform Your Tech Career?"
|
|
description="Join hundreds of successful graduates who've built rewarding careers in technology. Sign up now to learn more about enrollment and get exclusive access to course previews."
|
|
tagIcon={Rocket}
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Enroll Now"
|
|
termsText="By enrolling, you'll receive course information and updates. We respect your privacy and you can unsubscribe anytime."
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="TechAcademy"
|
|
copyrightText="© 2025 TechAcademy. All rights reserved. | Privacy Policy | Terms of Service"
|
|
socialLinks={[
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/company/techacademy", ariaLabel: "LinkedIn"
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/techacademy", ariaLabel: "Twitter"
|
|
},
|
|
{
|
|
icon: Github,
|
|
href: "https://github.com/techacademy", ariaLabel: "GitHub"
|
|
},
|
|
{
|
|
icon: Mail,
|
|
href: "mailto:hello@techacademy.com", ariaLabel: "Email"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |