260 lines
11 KiB
TypeScript
260 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import { BarChart, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="large"
|
|
background="grid"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Curriculum", id: "features"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Support", id: "faq"},
|
|
]}
|
|
brandName="LearnAI"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Master the Future of AI Learning"
|
|
description="Accelerate your career with industry-leading AI curriculum, expert-led workshops, and hands-on projects designed for the next generation of engineers."
|
|
buttons={[
|
|
{
|
|
text: "Start Learning", href: "#features"},
|
|
{
|
|
text: "Contact Us", href: "#contact"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/3d-render-network-communications-with-flowing-connecting-lines-dots_1048-13580.jpg"
|
|
imageAlt="AI technology learning background"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/waist-up-shot-thoughtful-young-woman-with-curly-hair-wears-spectacles-casual-clothes-carries-tablet-strolls-outside-urban-setting-clever-female-student-holds-modern-gadget-poses-street_273609-56927.jpg", alt: "Student portrait 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-female-student-stands-with-digital-tablet-her-hands-outside_169016-25043.jpg", alt: "Student portrait 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285308.jpg", alt: "Student portrait 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/positive-guy-glasses-holding-tablet-looking_74855-3039.jpg", alt: "Student portrait 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/tired-man-computer_23-2147717292.jpg", alt: "Student portrait 5"},
|
|
]}
|
|
avatarText="Join 10,000+ active learners"
|
|
marqueeItems={[
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particle-design_1048-13547.jpg", alt: "Particle tech design"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/3d-render-abstract-cyber-particles-background-with-shallow-depth-field_1048-13249.jpg", alt: "Cyber particles"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-flowing-particles_1048-14872.jpg", alt: "Flowing particles"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/3d-abstract-digital-particle-waves-design-background_1048-12573.jpg", alt: "Digital wave design"},
|
|
{
|
|
type: "text", text: "AI-Powered Excellence"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Foundation Pathways", description: "Master core concepts through interactive sessions.", icon: Zap,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/artificial-intelligence-elements-collection-flat-style_23-2147868685.jpg", imageAlt: "Foundations"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/network-concept-with-squares_23-2148999176.jpg", imageAlt: "Foundations Details"},
|
|
],
|
|
},
|
|
{
|
|
title: "Analytics Dashboard", description: "Track your progress with real-time performance tracking.", icon: BarChart,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/public-examination-preparation-concept_23-2149369872.jpg", imageAlt: "Analytics"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/person-using-tablet_53876-41005.jpg", imageAlt: "Analytics Details"},
|
|
],
|
|
},
|
|
{
|
|
title: "Collaborative Mentorship", description: "Learn side-by-side with industry experts.", icon: Users,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg", imageAlt: "Mentorship"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/successful-female-entrepreneur-collaborates-with-her-experts-team_482257-122594.jpg", imageAlt: "Mentorship Details"},
|
|
],
|
|
},
|
|
]}
|
|
title="Curriculum Built for Success"
|
|
description="Comprehensive pathways from foundational ML to advanced neural architectures."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "basic", badge: "Essential", price: "$199", subtitle: "For beginners", buttons: [
|
|
{
|
|
text: "Enroll Now"},
|
|
],
|
|
features: [
|
|
"Core ML concepts", "Access to community", "Monthly workshops"],
|
|
},
|
|
{
|
|
id: "pro", badge: "Pro", price: "$499", subtitle: "For professionals", buttons: [
|
|
{
|
|
text: "Enroll Now"},
|
|
],
|
|
features: [
|
|
"Everything in Basic", "Advanced project modules", "Mentorship access", "Industry certification"],
|
|
},
|
|
]}
|
|
title="Flexible Learning Plans"
|
|
description="Choose the learning path that matches your current expertise."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alice M.", role: "Engineer", company: "Tech", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg"},
|
|
{
|
|
id: "2", name: "Bob D.", role: "Developer", company: "Lab", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-sunglasses-sitting-along-with-laptop-white-space_140725-11140.jpg"},
|
|
{
|
|
id: "3", name: "Charlie S.", role: "Analyst", company: "Growth", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/paralysed-disabled-invalid-handicapped-work-colleague-looking-front-tired-upset-caused-his-disabilities-working-economic-business-office_482257-2084.jpg"},
|
|
{
|
|
id: "4", name: "Diana K.", role: "Manager", company: "Product", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-queer-girl-glasses-denim-jacket-standing-near-rainbow-wall-cross-hands-chest-smiling-camera-happy-lifestyle-urban-life-generation-concept_197531-30548.jpg"},
|
|
{
|
|
id: "5", name: "Ethan R.", role: "Researcher", company: "Science", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167349.jpg"},
|
|
]}
|
|
kpiItems={[
|
|
{
|
|
value: "10k+", label: "Learners"},
|
|
{
|
|
value: "500+", label: "Expert Tutors"},
|
|
{
|
|
value: "95%", label: "Placement Rate"},
|
|
]}
|
|
title="Voices of the Community"
|
|
description="Hear how LearnAI has transformed professional journeys."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "Do I need coding experience?", content: "Our beginner courses start from the fundamentals."},
|
|
{
|
|
id: "q2", title: "Can I get a certificate?", content: "All advanced programs include official industry certifications."},
|
|
{
|
|
id: "q3", title: "How long are the courses?", content: "Programs typically last 8-12 weeks based on intensity."},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
title="Common Inquiries"
|
|
description="Everything you need to know about starting your AI journey."
|
|
faqsAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg"
|
|
imageAlt="Digital tablet for online learning"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Get in touch"
|
|
title="Start Your AI Journey"
|
|
description="Sign up for our newsletter to get industry news, tips, and course early access."
|
|
imageSrc="http://img.b2bpic.net/free-photo/arrow-symbol-illustrated_23-2151909716.jpg"
|
|
mediaAnimation="slide-up"
|
|
imageAlt="Abstract tech background blue"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="LearnAI"
|
|
columns={[
|
|
{
|
|
title: "Explore", items: [
|
|
{
|
|
label: "Pathways", href: "#features"},
|
|
{
|
|
label: "Pricing", href: "#pricing"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About", href: "#"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy", href: "#"},
|
|
{
|
|
label: "Terms", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|