Update src/app/page.tsx

This commit is contained in:
2026-01-29 16:28:29 +00:00
parent 2a02993d0f
commit bf1aa95e30

View File

@@ -9,259 +9,266 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven'; import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen'; import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqDouble from '@/components/sections/faq/FaqDouble'; import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase'; import FooterBase from '@/components/sections/footer/FooterBase';
import { Award, Zap, CheckCircle, Shield } from "lucide-react"; import { Award, Zap, CheckCircle, Shield } from "lucide-react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
export default function Page() { export default function Page() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="text-stagger" defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="rounded"
contentWidth="mediumLarge" contentWidth="mediumLarge"
sizing="largeSizeMediumTitles" sizing="largeSizeMediumTitles"
background="circleGradient" background="circleGradient"
cardStyle="gradient-radial" cardStyle="gradient-radial"
primaryButtonStyle="radial-glow" primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered" secondaryButtonStyle="layered"
headingFontWeight="medium" headingFontWeight="medium"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="IT Academy" brandName="IT Academy"
navItems={[ navItems={[
{ name: "About", id: "about" }, { name: "About", id: "about" },
{ name: "Courses", id: "courses" }, { name: "Courses", id: "courses" },
{ name: "Success Stories", id: "testimonials" }, { name: "Success Stories", id: "testimonials" },
{ name: "FAQ", id: "faq" } { name: "FAQ", id: "faq" }
]} ]}
button={{ button={{
text: "Enroll Now", href: "contact" text: "Enroll Now", href: "contact"
}} }}
/> />
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroLogo <HeroLogo
logoText="IT Academy" logoText="IT Academy"
description="Master in-demand tech skills and launch your career in technology with our comprehensive, industry-focused courses." description="Master in-demand tech skills and launch your career in technology with our comprehensive, industry-focused courses."
buttons={[ buttons={[
{ text: "Explore Courses", href: "courses" }, { text: "Explore Courses", href: "courses" },
{ text: "Learn More", href: "about" } { text: "Learn More", href: "about" }
]} ]}
imageSrc="https://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891341.jpg" imageSrc="https://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891341.jpg"
imageAlt="Students learning coding and technology" imageAlt="Students learning coding and technology"
showDimOverlay={true} showDimOverlay={true}
/> />
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<SplitAbout <SplitAbout
tag="About Us" tag="About Us"
title="Empowering the Next Generation of Tech Professionals" title="Empowering the Next Generation of Tech Professionals"
description="At IT Academy, we believe in transforming ambitions into achievements. Our mission is to provide world-class technical education that bridges the gap between academic learning and industry demands." description="At IT Academy, we believe in transforming ambitions into achievements. Our mission is to provide world-class technical education that bridges the gap between academic learning and industry demands."
textboxLayout="default" textboxLayout="default"
useInvertedBackground="invertDefault" useInvertedBackground="invertDefault"
bulletPoints={[ bulletPoints={[
{ {
title: "Expert Instructors", description: "Learn from industry professionals with years of hands-on experience in leading tech companies.", icon: Award title: "Expert Instructors", description: "Learn from industry professionals with years of hands-on experience in leading tech companies.", icon: Award
}, },
{ {
title: "Practical Projects", description: "Build real-world applications and portfolio projects that demonstrate your expertise to employers.", icon: Zap title: "Practical Projects", description: "Build real-world applications and portfolio projects that demonstrate your expertise to employers.", icon: Zap
}, },
{ {
title: "Career Support", description: "Receive guidance on job placement, interview preparation, and career advancement strategies.", icon: CheckCircle title: "Career Support", description: "Receive guidance on job placement, interview preparation, and career advancement strategies.", icon: CheckCircle
}, },
{ {
title: "Flexible Learning", description: "Choose between full-time, part-time, and self-paced options that fit your schedule.", icon: Shield title: "Flexible Learning", description: "Choose between full-time, part-time, and self-paced options that fit your schedule.", icon: Shield
} }
]} ]}
imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg" imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
imageAlt="IT Academy Learning Environment" imageAlt="IT Academy Learning Environment"
imagePosition="right" imagePosition="right"
/> />
</div> </div>
<div id="learning-process" data-section="learning-process"> <div id="learning-process" data-section="learning-process">
<FeatureCardEight <FeatureCardEight
tag="Our Methodology" tag="Our Methodology"
title="IT Academy" title="Your Learning Journey"
description="We follow a proven 4-step methodology to ensure comprehensive learning and skill mastery." description="We follow a proven 4-step methodology to ensure comprehensive learning and skill mastery."
textboxLayout="default" textboxLayout="default"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
features={[ features={[
{ {
id: 1, id: 1,
title: "Foundation Building", description: "Start with core concepts and fundamentals. Master the basics before advancing to complex topics.", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-working-laptops_23-2149739424.jpg", imageAlt: "Foundation building and learning basics" title: "Foundation Building", description: "Start with core concepts and fundamentals. Master the basics before advancing to complex topics.", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-working-laptops_23-2149739424.jpg", imageAlt: "Foundation building and learning basics"
}, },
{ {
id: 2, id: 2,
title: "Hands-On Practice", description: "Engage in interactive coding sessions, labs, and workshops to reinforce theoretical knowledge.", imageSrc: "https://img.b2bpic.net/free-photo/am-i-doing-it-right-group-young-people-casual-clothes-working-modern-office_146671-16514.jpg", imageAlt: "Hands-on coding practice and workshops" title: "Hands-On Practice", description: "Engage in interactive coding sessions, labs, and workshops to reinforce theoretical knowledge.", imageSrc: "https://img.b2bpic.net/free-photo/am-i-doing-it-right-group-young-people-casual-clothes-working-modern-office_146671-16514.jpg", imageAlt: "Hands-on coding practice and workshops"
}, },
{ {
id: 3, id: 3,
title: "Project Development", description: "Build portfolio projects from scratch, applying learned skills to solve real-world problems.", imageSrc: "https://img.b2bpic.net/free-photo/group-young-people-casual-clothes-working-modern-office_146671-16433.jpg", imageAlt: "Real-world project development" title: "Project Development", description: "Build portfolio projects from scratch, applying learned skills to solve real-world problems.", imageSrc: "https://img.b2bpic.net/free-photo/group-young-people-casual-clothes-working-modern-office_146671-16433.jpg", imageAlt: "Real-world project development"
}, },
{ {
id: 4, id: 4,
title: "Career Launch", description: "Graduate with credentials, resume support, and job placement assistance from our career team.", imageSrc: "https://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg", imageAlt: "Career launch and job placement support" title: "Career Launch", description: "Graduate with credentials, resume support, and job placement assistance from our career team.", imageSrc: "https://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg", imageAlt: "Career launch and job placement support"
} }
]} ]}
/> />
</div> </div>
<div id="courses" data-section="courses"> <div id="courses" data-section="courses">
<ProductCardTwo <ProductCardTwo
tag="Popular Courses" tag="Popular Courses"
title="Our Comprehensive Course Catalog" title="Our Comprehensive Course Catalog"
description="Choose from industry-leading courses designed by experts and trusted by thousands of graduates worldwide." description="Choose from industry-leading courses designed by experts and trusted by thousands of graduates worldwide."
textboxLayout="default" textboxLayout="default"
useInvertedBackground="invertDefault" useInvertedBackground="invertDefault"
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
animationType="slide-up" animationType="slide-up"
products={[ products={[
{ {
id: "web-dev", brand: "IT Academy", name: "Full Stack Web Development", price: "$2,499", rating: 5, id: "web-dev", brand: "IT Academy", name: "Full Stack Web Development", price: "$2,499", rating: 5,
reviewCount: "1.2k", imageSrc: "https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040428.jpg", imageAlt: "Web Development course" reviewCount: "1.2k", imageSrc: "https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040428.jpg", imageAlt: "Web Development course"
}, },
{ {
id: "data-science", brand: "IT Academy", name: "Data Science & Analytics", price: "$2,799", rating: 5, id: "data-science", brand: "IT Academy", name: "Data Science & Analytics", price: "$2,799", rating: 5,
reviewCount: "980", imageSrc: "https://img.b2bpic.net/free-vector/website-development-banners_1284-9108.jpg", imageAlt: "Data Science course" reviewCount: "980", imageSrc: "https://img.b2bpic.net/free-vector/website-development-banners_1284-9108.jpg", imageAlt: "Data Science course"
}, },
{ {
id: "cloud-computing", brand: "IT Academy", name: "Cloud Computing & DevOps", price: "$2,699", rating: 5, id: "cloud-computing", brand: "IT Academy", name: "Cloud Computing & DevOps", price: "$2,699", rating: 5,
reviewCount: "750", imageSrc: "https://img.b2bpic.net/free-photo/website-development-links-seo-webinar-cyberspace-concept_53876-120953.jpg", imageAlt: "Cloud Computing course" reviewCount: "750", imageSrc: "https://img.b2bpic.net/free-photo/website-development-links-seo-webinar-cyberspace-concept_53876-120953.jpg", imageAlt: "Cloud Computing course"
} }
]} ]}
/> />
</div> </div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardSeven <MetricCardSeven
tag="Our Impact" tag="Our Impact"
title="Proven Results & Success Metrics" title="Proven Results & Success Metrics"
description="Join thousands of students who have transformed their careers through IT Academy." description="Join thousands of students who have transformed their careers through IT Academy."
textboxLayout="default" textboxLayout="default"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
animationType="scale-rotate" animationType="scale-rotate"
metrics={[ metrics={[
{ {
id: "1", value: "15K+", title: "Students Trained", items: ["From 50+ countries", "98% completion rate", "Diverse backgrounds"] id: "1", value: "15K+", title: "Students Trained", items: ["From 50+ countries", "98% completion rate", "Diverse backgrounds"]
}, },
{ {
id: "2", value: "92%", title: "Job Placement Rate", items: ["Within 6 months of graduation", "Average salary increase of 45%", "Top tech companies"] id: "2", value: "92%", title: "Job Placement Rate", items: ["Within 6 months of graduation", "Average salary increase of 45%", "Top tech companies"]
}, },
{ {
id: "3", value: "8+", title: "Years in Education", items: ["Founded since 2016", "Continuously updated curriculum", "Industry partnerships"] id: "3", value: "8+", title: "Years in Education", items: ["Founded since 2016", "Continuously updated curriculum", "Industry partnerships"]
}, },
{ {
id: "4", value: "50+", title: "Expert Instructors", items: ["Average 12+ years experience", "Active in their fields", "Mentorship available"] id: "4", value: "50+", title: "Expert Instructors", items: ["Average 12+ years experience", "Active in their fields", "Mentorship available"]
} }
]} ]}
/> />
</div> </div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen <TestimonialCardFifteen
testimonial="IT Academy completely transformed my career. The structured curriculum, hands-on projects, and supportive instructors helped me land a job at a Fortune 500 tech company within 5 months of graduation. I went from frustrated self-learner to confident full-stack developer." testimonial="IT Academy completely transformed my career. The structured curriculum, hands-on projects, and supportive instructors helped me land a job at a Fortune 500 tech company within 5 months of graduation. I went from frustrated self-learner to confident full-stack developer."
rating={5} rating={5}
author="Sarah Chen, Senior Software Engineer at TechCorp" author="Sarah Chen, Senior Software Engineer at TechCorp"
avatars={[ avatars={[
{ {
src: "https://img.b2bpic.net/free-photo/young-woman-wearing-graduation-gown-outdoors_23-2148505264.jpg", alt: "Sarah Chen" src: "https://img.b2bpic.net/free-photo/young-woman-wearing-graduation-gown-outdoors_23-2148505264.jpg", alt: "Sarah Chen"
}, },
{ {
src: "https://img.b2bpic.net/free-photo/smiley-young-woman-celebrating-her-graduation_23-2148505256.jpg", alt: "John Rodriguez" src: "https://img.b2bpic.net/free-photo/smiley-young-woman-celebrating-her-graduation_23-2148505256.jpg", alt: "John Rodriguez"
}, },
{ {
src: "https://img.b2bpic.net/free-photo/front-view-smiley-young-woman-wearing-graduation-gown_23-2148505261.jpg", alt: "Emily Watson" src: "https://img.b2bpic.net/free-photo/front-view-smiley-young-woman-wearing-graduation-gown_23-2148505261.jpg", alt: "Emily Watson"
}, },
{ {
src: "https://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-holding-laptop-coffee-wearing-blue-gentle-shirt-modern-building_158595-6711.jpg", alt: "Michael Thompson" src: "https://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-holding-laptop-coffee-wearing-blue-gentle-shirt-modern-building_158595-6711.jpg", alt: "Michael Thompson"
}, },
{ {
src: "https://img.b2bpic.net/free-photo/young-woman-celebrating-her-graduation_23-2148505254.jpg", alt: "Lisa Anderson" src: "https://img.b2bpic.net/free-photo/young-woman-celebrating-her-graduation_23-2148505254.jpg", alt: "Lisa Anderson"
}, },
{ {
src: "https://img.b2bpic.net/free-photo/best-friends-playing-graduation-ceremony_23-2148505278.jpg", alt: "David Kumar" src: "https://img.b2bpic.net/free-photo/best-friends-playing-graduation-ceremony_23-2148505278.jpg", alt: "David Kumar"
} }
]} ]}
useInvertedBackground="invertDefault" useInvertedBackground="invertDefault"
/> />
</div> </div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqDouble <FaqDouble
tag="Help Center" tag="Help Center"
title="Frequently Asked Questions" title="Frequently Asked Questions"
description="Find answers to common questions about our programs, enrollment, and learning experience." description="Find answers to common questions about our programs, enrollment, and learning experience."
textboxLayout="default" textboxLayout="default"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
animationType="smooth" animationType="smooth"
faqs={[ faqs={[
{ {
id: "1", title: "What are the prerequisites for enrolling?", content: "Our courses are designed for beginners to intermediate learners. Basic computer literacy is helpful, but not required. We provide foundational materials for those new to programming. No prior tech experience necessary!" id: "1", title: "What are the prerequisites for enrolling?", content: "Our courses are designed for beginners to intermediate learners. Basic computer literacy is helpful, but not required. We provide foundational materials for those new to programming. No prior tech experience necessary!"
}, },
{ {
id: "2", title: "How long does it take to complete a course?", content: "Most full-time courses take 12-16 weeks. Part-time programs typically take 24-32 weeks. Self-paced options allow you to complete at your own speed. Each course page has detailed timeline information." id: "2", title: "How long does it take to complete a course?", content: "Most full-time courses take 12-16 weeks. Part-time programs typically take 24-32 weeks. Self-paced options allow you to complete at your own speed. Each course page has detailed timeline information."
}, },
{ {
id: "3", title: "Do you offer job placement assistance?", content: "Yes! Our Career Services team provides resume reviews, interview coaching, and job placement support. We have partnerships with 200+ companies actively hiring our graduates. 92% of our students find jobs within 6 months." id: "3", title: "Do you offer job placement assistance?", content: "Yes! Our Career Services team provides resume reviews, interview coaching, and job placement support. We have partnerships with 200+ companies actively hiring our graduates. 92% of our students find jobs within 6 months."
}, },
{ {
id: "4", title: "What certification will I receive?", content: "Graduates receive an IT Academy Certificate of Completion. Many courses also provide industry-recognized certifications (AWS, Google Cloud, etc.). Certificates are digital and shareable on LinkedIn." id: "4", title: "What certification will I receive?", content: "Graduates receive an IT Academy Certificate of Completion. Many courses also provide industry-recognized certifications (AWS, Google Cloud, etc.). Certificates are digital and shareable on LinkedIn."
}, },
{ {
id: "5", title: "Is financing available?", content: "Yes! We offer multiple payment plans, income-share agreements (ISA), and work with several financial institutions for loans. We also have scholarships for eligible candidates. Contact our admissions team for details." id: "5", title: "Is financing available?", content: "Yes! We offer multiple payment plans, income-share agreements (ISA), and work with several financial institutions for loans. We also have scholarships for eligible candidates. Contact our admissions team for details."
}, },
{ {
id: "6", title: "Can I interact with instructors?", content: "Absolutely! All our programs include office hours with instructors, group study sessions, and 1-on-1 mentoring. Our instructors are dedicated to your success and accessible throughout your learning journey." id: "6", title: "Can I interact with instructors?", content: "Absolutely! All our programs include office hours with instructors, group study sessions, and 1-on-1 mentoring. Our instructors are dedicated to your success and accessible throughout your learning journey."
} }
]} ]}
/> />
</div> </div>
<div id="contact_center" data-section="contact_center"> <div id="contact" data-section="contact">
<ContactCenter <ContactSplit
tag="Contact" tag="Stay Updated"
title="Get in Touch with Our Team" title="Get Latest Course Updates & Learning Tips"
description="Have questions about our courses or how we can support your tech education journey? Our dedicated team is here to assist you." description="Subscribe to our newsletter and receive exclusive content, new course announcements, industry insights, and tips from our expert instructors directly in your inbox."
useInvertedBackground="noInvert" useInvertedBackground="invertDefault"
/> imageSrc="https://img.b2bpic.net/free-photo/little-classmates-discussing-lesson-doing-task_74855-10243.jpg"
</div> imageAlt="Newsletter signup"
<div id="footer" data-section="footer"> mediaPosition="right"
<FooterBase inputPlaceholder="Enter your email address"
logoText="IT Academy" buttonText="Subscribe"
copyrightText="© 2025 IT Academy | Empowering Tech Professionals" termsText="We respect your privacy. Unsubscribe anytime. Check our Terms and Conditions for details."
columns={[ />
{ </div>
title: "Programs", items: [
{ label: "Web Development", href: "courses" }, <div id="footer" data-section="footer">
{ label: "Data Science", href: "courses" }, <FooterBase
{ label: "Cloud Computing", href: "courses" }, logoText="IT Academy"
{ label: "View All Courses", href: "courses" } copyrightText="© 2025 IT Academy | Empowering Tech Professionals"
] columns={[
}, {
{ title: "Programs", items: [
title: "Company", items: [ { label: "Web Development", href: "courses" },
{ label: "About Us", href: "about" }, { label: "Data Science", href: "courses" },
{ label: "Our Mission", href: "about" }, { label: "Cloud Computing", href: "courses" },
{ label: "Careers", href: "#careers" }, { label: "View All Courses", href: "courses" }
{ label: "Blog", href: "#blog" } ]
] },
}, {
{ title: "Company", items: [
title: "Support", items: [ { label: "About Us", href: "about" },
{ label: "FAQ", href: "faq" }, { label: "Our Mission", href: "about" },
{ label: "Contact Us", href: "contact" }, { label: "Careers", href: "#careers" },
{ label: "Learning Resources", href: "#resources" }, { label: "Blog", href: "#blog" }
{ label: "Student Portal", href: "#portal" } ]
] },
} {
]} title: "Support", items: [
/> { label: "FAQ", href: "faq" },
</div> { label: "Contact Us", href: "contact" },
</ThemeProvider> { label: "Learning Resources", href: "#resources" },
); { label: "Student Portal", href: "#portal" }
]
}
]}
/>
</div>
</ThemeProvider>
);
} }