222 lines
11 KiB
TypeScript
222 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { Users, TrendingUp, Award, Star } from "lucide-react";
|
|
import Link from "next/link";
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="slide-background"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="inset-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="TechAcademy"
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Courses", id: "/courses" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Contact", id: "/contact" }
|
|
]}
|
|
button={{
|
|
text: "Enroll Now", href: "/contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="STEP Academy"
|
|
description="Master in-demand technology skills with our comprehensive IT courses. Learn from industry experts and launch your tech career."
|
|
buttons={[
|
|
{ text: "Explore Courses", href: "/courses" },
|
|
{ text: "Get Started", href: "/contact" }
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010130.jpg", imageAlt: "Programming and coding education"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/system-engineers-celebrating-successful-code-compiling-doing-high-five-hand-gesture-with-colleague-coder-analyzing-algorithm-multiple-screens-takes-off-glasses-congratulates-coworker_482257-41855.jpg", imageAlt: "Tech training and learning"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/person-working-html-computer_23-2150038840.jpg", imageAlt: "IT academy classroom"
|
|
}
|
|
]}
|
|
autoplayDelay={5000}
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Expert Instructors", description: "Learn from experienced professionals with 10+ years in the tech industry. Our instructors bring real-world insights and practical knowledge to every lesson.", phoneOne: {
|
|
imageSrc: "https://img.b2bpic.net/free-photo/caucasian-software-developer-signaling-screen-data-breach-deactivated-security-system-tech-engineer-observing-multiple-system-security-breaches-caused-by-overloaded-storage-servers_482257-40529.jpg"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "https://img.b2bpic.net/free-photo/caucasian-software-developer-signaling-screen-data-breach-deactivated-security-system-tech-engineer-observing-multiple-system-security-breaches-caused-by-overloaded-storage-servers_482257-40529.jpg"
|
|
}
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Flexible Learning", description: "Study at your own pace with self-paced courses, live sessions, and recorded content. Access materials anytime, anywhere on any device.", phoneOne: {
|
|
imageSrc: "https://img.b2bpic.net/free-photo/informational-agency-multiracial-tech-engineers-programming-application-while-using-computer-cyber-security-company-developers-encrypting-cloud-processing-data-system-using-blockchain-technology_482257-40527.jpg"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "https://img.b2bpic.net/free-photo/informational-agency-multiracial-tech-engineers-programming-application-while-using-computer-cyber-security-company-developers-encrypting-cloud-processing-data-system-using-blockchain-technology_482257-40527.jpg"
|
|
}
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Career Support", description: "Get job placement assistance, resume reviews, and interview coaching. Our alumni network opens doors to exciting career opportunities.", phoneOne: {
|
|
imageSrc: "https://img.b2bpic.net/free-photo/software-programer-pointing-pencil-source-code-computer-screen-explaining-algorithm-coworker-standing-desk-programmers-discussing-online-cloud-computing-with-team_482257-33535.jpg"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "https://img.b2bpic.net/free-photo/software-programer-pointing-pencil-source-code-computer-screen-explaining-algorithm-coworker-standing-desk-programmers-discussing-online-cloud-computing-with-team_482257-33535.jpg"
|
|
}
|
|
}
|
|
]}
|
|
animationType="none"
|
|
title="Why Choose TechAcademy"
|
|
description="Industry-leading education platform designed for career growth"
|
|
tag="Unique"
|
|
buttons={[{ text: "View Courses", label: "courses", href: "/courses" }, { text: "Learn More", label: "about", href: "/about" }]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<FeatureCardSeven
|
|
features={[{ title: "Feature 1", description: "Feature description" }, { title: "Feature 2", description: "Feature description" }, { title: "Feature 3", description: "Feature description" }]}
|
|
animationType="slide-up"
|
|
title="Featured Courses"
|
|
description="Start your learning journey with our most popular programs"
|
|
tag="Curriculum"
|
|
buttons={[{ text: "Get Started", label: "Get Started", href: "#" }, { text: "Learn More", label: "Learn More", href: "#" }]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
metrics={[
|
|
{
|
|
id: "1", value: "5000", title: "Students", description: "Successfully trained and certified professionals", icon: Users
|
|
},
|
|
{
|
|
id: "2", value: "95", title: "%", description: "Job placement rate within 3 months", icon: TrendingUp
|
|
},
|
|
{
|
|
id: "3", value: "20", title: "+", description: "Expert instructors on our team", icon: Award
|
|
},
|
|
{
|
|
id: "4", value: "4.9", title: "/5", description: "Average student satisfaction rating", icon: Star
|
|
}
|
|
]}
|
|
carouselMode="auto"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
title="TechAcademy Metrics"
|
|
description="See the impact of our courses on student success and our growing network of expert instructors."
|
|
tag="Metrics"
|
|
buttons={[{ text: "Explore Courses", label: "Explore Courses", href: "#" }, { text: "Meet Our Team", label: "Meet Our Team", href: "#" }]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="TechAcademy transformed my career. The courses are comprehensive, instructors are phenomenal, and the job placement support really works. I landed my dream job within 2 months of completion!"
|
|
rating={5}
|
|
author="Sarah Johnson, Senior Developer"
|
|
avatars={[
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Student testimonial 1"
|
|
},
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", alt: "Student testimonial 2"
|
|
},
|
|
{
|
|
src: "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", alt: "Student testimonial 3"
|
|
},
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", alt: "Student testimonial 4"
|
|
},
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg", alt: "Student testimonial 5"
|
|
},
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", alt: "Student testimonial 6"
|
|
}
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact_center" data-section="contact_center">
|
|
<ContactCenter
|
|
tag="Label"
|
|
title="Reach Out to Us"
|
|
description="Have questions? Our dedicated team is here to assist you."
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://img.b2bpic.net/free-photo/html-css-collage-concept-with-person_23-2150061986.jpg"
|
|
imageAlt="Graduation and success celebration"
|
|
logoText="TechAcademy"
|
|
copyrightText="© 2025 TechAcademy. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Courses", items: [
|
|
{ label: "Web Development", href: "/courses" },
|
|
{ label: "Python Programming", href: "/courses" },
|
|
{ label: "Data Science", href: "/courses" },
|
|
{ label: "Cybersecurity", href: "/courses" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Our Team", href: "/about" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Blog", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "/contact" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |