Files
2df481f2-2d4b-4fb2-af78-591…/src/app/page.tsx

258 lines
16 KiB
TypeScript

"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, CheckCircle } from "lucide-react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="sharp"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="aurora"
cardStyle="gradient-mesh"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="IT Academy"
navItems={[
{ name: "Programs", id: "programs" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" }
]}
button={{ text: "Enroll Now", href: "contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Launch Your Tech Career Today"
description="Enrollment deadline: 5 days left"
tag="Premium Tech Education"
tagIcon={Sparkles}
imageSrc="http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891341.jpg"
imageAlt="IT Academy Learning Environment"
textPosition="bottom-left"
showBlur={true}
showDimOverlay={true}
buttons={[
{ text: "Explore Programs", href: "programs" },
{ text: "Schedule Demo", href: "contact" }
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
title="Empowering the next generation of tech professionals with industry-leading education, mentorship, and career support."
useInvertedBackground="noInvert"
buttons={[
{ text: "Learn More About Us", href: "#" }
]}
/>
</div>
<div id="programs" data-section="programs">
<ProductCardOne
title="Our Course Programs"
description="Comprehensive IT education designed for beginners to advanced professionals"
products={[
{
id: "1", name: "Web Development Mastery", price: "₹12,999", imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040420.jpg", imageAlt: "Web Development Course"
},
{
id: "2", name: "Data Science & Analytics", price: "₹14,999", imageSrc: "http://img.b2bpic.net/free-photo/html-css-collage-concept_23-2150061960.jpg", imageAlt: "Data Science Course"
},
{
id: "3", name: "Cybersecurity Fundamentals", price: "₹13,999", imageSrc: "http://img.b2bpic.net/free-photo/binary-code-digits-technology-software-concept_53876-124063.jpg", imageAlt: "Cybersecurity Course"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
title="Our Impact"
description="Proven results from our dedicated educational programs"
metrics={[
{ id: "1", value: "5,000+", description: "Students Graduated" },
{ id: "2", value: "92%", description: "Job Placement Rate" },
{ id: "3", value: "50+", description: "Courses Available" },
{ id: "4", value: "4.9/5", description: "Average Rating" }
]}
gridVariant="uniform-all-items-equal"
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
title="Expert Instructors"
description="Learn from industry professionals with years of real-world experience"
members={[
{
id: "1", name: "Rajesh Kumar", role: "Lead Instructor", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg", imageAlt: "Rajesh Kumar"
},
{
id: "2", name: "Priya Sharma", role: "Senior Mentor", imageSrc: "http://img.b2bpic.net/free-photo/mature-business-manager-office_1098-21368.jpg", imageAlt: "Priya Sharma"
},
{
id: "3", name: "Amit Patel", role: "Course Designer", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-studying-math_23-2150444951.jpg", imageAlt: "Amit Patel"
},
{
id: "4", name: "Neha Gupta", role: "Career Coach", imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Neha Gupta"
}
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="What Our Students Say"
description="Success stories from graduates who've transformed their careers"
testimonials={[
{
id: "1", name: "Vikram Singh, Software Developer at TechCorp", date: "Date: 15 November 2024", title: "Life-changing learning experience!", quote: "The instructors at IT Academy transformed my understanding of web development. Within 3 months of completing the course, I landed my dream job with a 40% salary increase. The practical projects were exactly what employers were looking for.", tag: "Web Development Graduate", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg"
},
{
id: "2", name: "Anjali Desai, Data Analyst at DataInsights", date: "Date: 10 November 2024", title: "Industry-standard training at affordable prices", quote: "I was skeptical about online education, but IT Academy proved me wrong. The curriculum is constantly updated with the latest industry practices. The mentors provided personalized guidance throughout my learning journey.", tag: "Data Science Graduate", avatarSrc: "http://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6609.jpg"
},
{
id: "3", name: "Rohit Verma, Security Specialist at SecureNet", date: "Date: 5 November 2024", title: "Comprehensive and practical cybersecurity training", quote: "The cybersecurity course covered both theoretical knowledge and hands-on labs that mirrored real-world scenarios. The certification is recognized by major employers in the industry.", tag: "Cybersecurity Graduate", avatarSrc: "http://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6612.jpg"
},
{
id: "4", name: "Meera Iyer, Tech Lead at InnovateLabs", date: "Date: 28 October 2024", title: "Best investment in my career", quote: "The combination of video lectures, live sessions, and project-based learning kept me engaged throughout. I've already recommended IT Academy to 5 of my friends who are now thriving in their tech careers.", tag: "Full Stack Developer", avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-young-man-holding-folder-outdoor_74855-2121.jpg"
},
{
id: "5", name: "Arjun Malhotra, DevOps Engineer at CloudBase", date: "Date: 20 October 2024", title: "Excellent support and community", quote: "The peer community and teaching assistants were incredibly supportive. Even after completing the course, the alumni network has been invaluable for career growth and learning opportunities.", tag: "DevOps Graduate", avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-holding-book_23-2148396358.jpg"
},
{
id: "6", name: "Divya Nair, Product Manager at TechVentures", date: "Date: 15 October 2024", title: "More than just coding - learned problem solving", quote: "What sets IT Academy apart is the focus on soft skills and problem-solving abilities. The instructors emphasized real-world applications, making the learning incredibly relevant and immediately applicable.", tag: "Full Stack Developer", avatarSrc: "http://img.b2bpic.net/free-photo/vertical-portrait-young-successful-woman-employee-entrepreneur-office-hall-tutor-carry-laptop-notebooks-looking-away-with-satisfied-pleased-smile-like-her-job_197531-30584.jpg"
}
]}
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Get answers to common questions about our programs, enrollment, and support"
faqs={[
{
id: "1", title: "What are the prerequisites for enrolling in your courses?", content: "Most of our beginner courses require no prior experience. For advanced courses, we recommend basic computer literacy and familiarity with programming concepts. Specific prerequisites are listed for each course."
},
{
id: "2", title: "How long do the courses typically last?", content: "Our programs range from 4 weeks to 6 months depending on the course intensity. Full-time programs are typically 3-4 months, while part-time options are 5-6 months. You can learn at your own pace with access to course materials for life."
},
{
id: "3", title: "Do you provide job placement assistance?", content: "Yes! We offer comprehensive career support including resume building, interview preparation, and job placement assistance. Our 92% job placement rate speaks to the effectiveness of our career support programs."
},
{
id: "4", title: "Are the courses available online?", content: "Yes, all our courses are delivered online with a mix of recorded lectures and live interactive sessions. You can access course materials 24/7 and attend live classes on a flexible schedule."
},
{
id: "5", title: "What certifications will I receive upon completion?", content: "You'll receive an IT Academy certification that's recognized by major tech companies and industry leaders. Depending on the course, you may also be eligible for vendor-specific certifications."
},
{
id: "6", title: "What if I'm not satisfied with the course?", content: "We offer a 14-day money-back guarantee on all courses. If you're not satisfied with the quality of instruction or course content, we'll refund your full payment, no questions asked."
}
]}
textPosition="left"
useInvertedBackground="invertDefault"
animationType="smooth"
/>
</div>
<div id="contact" data-section="contact">
<ContactFaq
ctaTitle="Ready to start learning?"
ctaDescription="Join IT Academy today and transform your career with industry-leading tech education."
ctaButton={{ text: "Enroll Now", href: "#" }}
ctaIcon={CheckCircle}
faqs={[
{
id: "1", title: "How do I get started?", content: "Click the Enroll Now button, fill out the registration form, and choose your preferred course. You'll get instant access to course materials and can start learning immediately."
},
{
id: "2", title: "What payment methods do you accept?", content: "We accept all major credit cards, debit cards, and digital wallets. We also offer flexible payment plans for courses over ₹10,000."
},
{
id: "3", title: "Can I change courses after enrolling?", content: "Yes, you can switch to a different course within 14 days of enrollment with no additional charges. After 14 days, you can upgrade or downgrade with a prorated adjustment."
}
]}
useInvertedBackground="noInvert"
animationType="slide-up"
/>
</div>
<div id="contact_split_form" data-section="contact_split_form">
<ContactSplitForm
title="Connect with Us"
description="Get in touch to learn more about our programs and opportunities."
inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Your Email", required: true }, { name: "message", type: "textarea", placeholder: "Your Message", required: false }]}
textarea={{ name: "", placeholder: "" }}
useInvertedBackground="noInvert"
imageSrc="https://placehold.co/600x400"
mediaPosition="left"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="IT Academy"
columns={[
{
items: [
{ label: "Programs", href: "programs" },
{ label: "About Us", href: "about" },
{ label: "Testimonials", href: "testimonials" }
]
},
{
items: [
{ label: "Contact Us", href: "contact" },
{ label: "FAQ", href: "faq" },
{ label: "Privacy Policy", href: "#" }
]
},
{
items: [
{ label: "Terms of Service", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}