219 lines
7.9 KiB
TypeScript
219 lines
7.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { CheckCircle, Users, TrendingUp, Award } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export default function CoursesPage() {
|
|
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="products" data-section="products">
|
|
<ProductCardTwo
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "Beginner Track",
|
|
name: "Web Development Fundamentals",
|
|
price: "$299",
|
|
rating: 5,
|
|
reviewCount: "1.2k",
|
|
imageSrc: "https://img.b2bpic.net/free-vector/realistic-responsive-website-design-collection_23-2149500090.jpg",
|
|
imageAlt: "Web Development Course"
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "Intermediate Track",
|
|
name: "Python Programming Mastery",
|
|
price: "$399",
|
|
rating: 5,
|
|
reviewCount: "980",
|
|
imageSrc: "https://img.b2bpic.net/free-vector/laptop-with-tablet-smartphone-website-information_24877-53528.jpg",
|
|
imageAlt: "Python Programming Course"
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "Advanced Track",
|
|
name: "Data Science & Machine Learning",
|
|
price: "$599",
|
|
rating: 5,
|
|
reviewCount: "756",
|
|
imageSrc: "https://img.b2bpic.net/free-photo/person-working-html-computer_23-2150038849.jpg",
|
|
imageAlt: "Data Science Course"
|
|
},
|
|
{
|
|
id: "4",
|
|
brand: "Professional Track",
|
|
name: "Cybersecurity Essentials",
|
|
price: "$499",
|
|
rating: 5,
|
|
reviewCount: "543",
|
|
imageSrc: "https://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg",
|
|
imageAlt: "Cybersecurity Course"
|
|
},
|
|
{
|
|
id: "5",
|
|
brand: "Expert Track",
|
|
name: "Full Stack Development",
|
|
price: "$799",
|
|
rating: 5,
|
|
reviewCount: "432",
|
|
imageSrc: "https://img.b2bpic.net/free-vector/realistic-responsive-website-design-collection_23-2149500090.jpg",
|
|
imageAlt: "Full Stack Course"
|
|
},
|
|
{
|
|
id: "6",
|
|
brand: "Professional Track",
|
|
name: "DevOps Engineering",
|
|
price: "$699",
|
|
rating: 5,
|
|
reviewCount: "298",
|
|
imageSrc: "https://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg",
|
|
imageAlt: "DevOps Course"
|
|
}
|
|
]}
|
|
title="All Courses"
|
|
description="Comprehensive collection of technology courses designed for career advancement"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "50",
|
|
title: "+",
|
|
description: "Available courses across all tech domains",
|
|
icon: Award
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "500",
|
|
title: "hrs",
|
|
description: "Total learning content available",
|
|
icon: TrendingUp
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "24/7",
|
|
title: "",
|
|
description: "Access to course materials and support",
|
|
icon: Users
|
|
}
|
|
]}
|
|
title="Course Statistics"
|
|
description: "Everything you need to know about our course offerings"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Ready to Start Learning?"
|
|
ctaDescription="Join thousands of students already transforming their tech careers with TechAcademy."
|
|
ctaButton={{
|
|
text: "Enroll Today",
|
|
href: "/contact"
|
|
}}
|
|
ctaIcon={CheckCircle}
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "How do I choose the right course?",
|
|
content: "Our course advisors can help you select the perfect learning path based on your experience level, career goals, and interests. Schedule a free consultation to get personalized recommendations."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Can I switch between courses?",
|
|
content: "Yes! You can request a course change within the first 14 days of enrollment at no additional cost. We want to ensure you're on the right learning path."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "What if I need more time to complete?",
|
|
content: "All our courses come with lifetime access, so you can learn at your own pace. There are no strict deadlines, and you can revisit materials anytime."
|
|
}
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
/>
|
|
</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>
|
|
);
|
|
} |