Merge version_2_1776784082294 into main #1
608
src/App.tsx
608
src/App.tsx
@@ -11,320 +11,320 @@ import TestimonialMarqueeCards from '@/components/sections/testimonial/Testimoni
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="IT Academy"
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
name: "Courses",
|
||||
href: "#courses",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Apply Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTiltedCarousel
|
||||
tag="Kickstart Your Future"
|
||||
title="Master the Future of Technology"
|
||||
description="Comprehensive IT training programs designed to bridge the gap between passion and a professional career in software, data, and security."
|
||||
primaryButton={{
|
||||
text: "Explore Courses",
|
||||
href: "#courses",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-high-tech-classroom-with-st-1776782141170-ebd709b5.png",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/close-up-of-coding-screen-with-various-t-1776782152723-29c25d03.png",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/network-connections-visualization-digita-1776782164962-93f3b71d.png",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/students-discussing-software-architectur-1776782174509-8e3b37ad.png",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/cybersecurity-padlock-digital-protection-1776782184388-69bbbe87.png",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/cloud-computing-data-center-server-rack--1776782195072-b20c3ec6.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutTextSplit
|
||||
title="Our Academy Commitment"
|
||||
descriptions={[
|
||||
"We provide immersive IT education that prioritizes hands-on experience and real-world application. Our curriculum is built by industry leaders to ensure you are job-ready from day one.",
|
||||
"Our academy combines theoretical knowledge with practical coding challenges, ensuring every student has the skills to thrive in a fast-paced technology market.",
|
||||
]}
|
||||
primaryButton={{
|
||||
text: "Meet the Team",
|
||||
href: "#team",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="statistics" data-section="statistics">
|
||||
<FeaturesStatisticsCards
|
||||
tag="Our Impact"
|
||||
title="Proven Academic Excellence"
|
||||
description="Results that speak for themselves. We prepare graduates to excel in their chosen career paths."
|
||||
items={[
|
||||
{
|
||||
title: "Placement Rate",
|
||||
description: "Percentage of students hired within 3 months of completion.",
|
||||
label: "Industry Leading",
|
||||
value: "94%",
|
||||
},
|
||||
{
|
||||
title: "Industry Partners",
|
||||
description: "Companies actively hiring our graduates.",
|
||||
label: "Partners",
|
||||
value: "150+",
|
||||
},
|
||||
{
|
||||
title: "Total Enrollments",
|
||||
description: "Students who started their journey with us.",
|
||||
label: "Alumni",
|
||||
value: "10k+",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="courses" data-section="courses">
|
||||
<ProductVariantCards
|
||||
tag="Available Programs"
|
||||
title="Professional IT Paths"
|
||||
description="Choose a career path that aligns with your professional ambitions."
|
||||
products={[
|
||||
{
|
||||
name: "Software Development",
|
||||
variant: "Full-Time",
|
||||
price: "$12,000",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-desk-workspace-with-organized-tec-1776782204694-b446f57f.png",
|
||||
},
|
||||
{
|
||||
name: "Data Analytics",
|
||||
variant: "Part-Time",
|
||||
price: "$8,500",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-person-writing-code-on-a-laptop-with-f-1776782215046-e298c259.png",
|
||||
},
|
||||
{
|
||||
name: "Cyber Security",
|
||||
variant: "Bootcamp",
|
||||
price: "$9,500",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-desk-workspace-with-organized-tec-1776782293255-338e81a0.png",
|
||||
},
|
||||
{
|
||||
name: "Cloud Computing",
|
||||
variant: "Specialist",
|
||||
price: "$7,000",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-person-writing-code-on-a-laptop-with-f-1776782302402-4a545879.png",
|
||||
},
|
||||
{
|
||||
name: "AI & Machine Learning",
|
||||
variant: "Advanced",
|
||||
price: "$15,000",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-desk-workspace-with-organized-tec-1776782313599-ac55317b.png",
|
||||
},
|
||||
{
|
||||
name: "UI/UX Design",
|
||||
variant: "Full-Time",
|
||||
price: "$6,000",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-person-writing-code-on-a-laptop-with-f-1776782325127-08055ca0.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingSplitCards
|
||||
tag="Transparent Fees"
|
||||
title="Flexible Payment Plans"
|
||||
description="Education should be accessible. Choose the plan that fits your financial goals."
|
||||
plans={[
|
||||
{
|
||||
tag: "Essentials",
|
||||
price: "$4,000",
|
||||
period: "Full Course",
|
||||
description: "Perfect for starters.",
|
||||
primaryButton: {
|
||||
text: "Apply Now",
|
||||
href: "#contact",
|
||||
},
|
||||
featuresTitle: "Included Features",
|
||||
features: [
|
||||
"Core curriculum",
|
||||
"Community support",
|
||||
"Basic resources",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Pro",
|
||||
price: "$7,000",
|
||||
period: "Full Course",
|
||||
description: "For serious learners.",
|
||||
primaryButton: {
|
||||
text: "Apply Now",
|
||||
href: "#contact",
|
||||
},
|
||||
featuresTitle: "Included Features",
|
||||
features: [
|
||||
"Full curriculum",
|
||||
"Mentorship sessions",
|
||||
"Job placement support",
|
||||
"Career coaching",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialMarqueeCards
|
||||
tag="Success Stories"
|
||||
title="Hear from Our Graduates"
|
||||
description="Graduates across the globe are thriving in their careers."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex River",
|
||||
role: "Full Stack Dev",
|
||||
quote: "The academy provided a perfect balance of theory and practice. I felt ready for my first role immediately.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-young-software-engineering-1776782224902-d41bc5ae.png",
|
||||
},
|
||||
{
|
||||
name: "Sam Taylor",
|
||||
role: "Data Analyst",
|
||||
quote: "Hands-on projects helped me build a portfolio that truly impressed my current employers.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-female-data-analyst-smilin-1776782234729-9759e754.png",
|
||||
},
|
||||
{
|
||||
name: "Jordan Lee",
|
||||
role: "Cybersecurity Analyst",
|
||||
quote: "The curriculum was challenging and up-to-date with current industry security protocols.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-male-web-developer-sitting-1776782245705-b1600f09.png",
|
||||
},
|
||||
{
|
||||
name: "Morgan Chase",
|
||||
role: "Cloud Architect",
|
||||
quote: "The career coaching sessions made the biggest difference in my job search process.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-happy-student-in-a-lab-1776782254918-bacfab4d.png",
|
||||
},
|
||||
{
|
||||
name: "Casey Quinn",
|
||||
role: "UI/UX Designer",
|
||||
quote: "I transitioned from marketing to UI/UX easily, thanks to the mentor-led sessions.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-mentor-in-a-technology-aca-1776782263479-f194e88c.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Learn More"
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about enrollment, course structures, and placement."
|
||||
items={[
|
||||
{
|
||||
question: "Are classes fully online?",
|
||||
answer: "We offer both hybrid and fully online options for all our courses.",
|
||||
},
|
||||
{
|
||||
question: "What is the mentorship process?",
|
||||
answer: "Students get access to weekly one-on-one sessions with senior engineers.",
|
||||
},
|
||||
{
|
||||
question: "Can I switch courses?",
|
||||
answer: "Yes, our flexible policy allows students to transfer between related tracks.",
|
||||
},
|
||||
{
|
||||
question: "Is there a certificate awarded?",
|
||||
answer: "Every graduate receives an industry-recognized certification upon program completion.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-student-using-a-digital-tablet-for-onl-1776782273255-90b016da.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitEmail
|
||||
tag="Get Started"
|
||||
title="Begin Your IT Journey"
|
||||
description="Join thousands of successful graduates. Fill in your details to schedule a consultation."
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Schedule Call"
|
||||
termsText="By submitting, you agree to our privacy policy."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/minimalist-reception-area-of-an-it-compa-1776782282250-1a6e814b.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBrandReveal
|
||||
brand="IT ACADEMY"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
<main className="pt-24">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="IT Academy"
|
||||
navItems={[
|
||||
{
|
||||
label: "About",
|
||||
name: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Courses",
|
||||
name: "Courses",
|
||||
href: "#courses",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
name: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
name: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Apply Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTiltedCarousel
|
||||
tag="Kickstart Your Future"
|
||||
title="Master the Future of Technology"
|
||||
description="Comprehensive IT training programs designed to bridge the gap between passion and a professional career in software, data, and security."
|
||||
primaryButton={{
|
||||
text: "Explore Courses",
|
||||
href: "#courses",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-high-tech-classroom-with-st-1776782141170-ebd709b5.png",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/close-up-of-coding-screen-with-various-t-1776782152723-29c25d03.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/network-connections-visualization-digita-1776782164962-93f3b71d.png",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/students-discussing-software-architectur-1776782174509-8e3b37ad.png",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/cybersecurity-padlock-digital-protection-1776782184388-69bbbe87.png",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/cloud-computing-data-center-server-rack--1776782195072-b20c3ec6.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutTextSplit
|
||||
title="Our Academy Commitment"
|
||||
descriptions={[
|
||||
"We provide immersive IT education that prioritizes hands-on experience and real-world application. Our curriculum is built by industry leaders to ensure you are job-ready from day one.",
|
||||
"Our academy combines theoretical knowledge with practical coding challenges, ensuring every student has the skills to thrive in a fast-paced technology market.",
|
||||
]}
|
||||
primaryButton={{
|
||||
text: "Meet the Team",
|
||||
href: "#team",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="statistics" data-section="statistics">
|
||||
<FeaturesStatisticsCards
|
||||
tag="Our Impact"
|
||||
title="Proven Academic Excellence"
|
||||
description="Results that speak for themselves. We prepare graduates to excel in their chosen career paths."
|
||||
items={[
|
||||
{
|
||||
title: "Placement Rate",
|
||||
description: "Percentage of students hired within 3 months of completion.",
|
||||
label: "Industry Leading",
|
||||
value: "94%",
|
||||
},
|
||||
{
|
||||
title: "Industry Partners",
|
||||
description: "Companies actively hiring our graduates.",
|
||||
label: "Partners",
|
||||
value: "150+",
|
||||
},
|
||||
{
|
||||
title: "Total Enrollments",
|
||||
description: "Students who started their journey with us.",
|
||||
label: "Alumni",
|
||||
value: "10k+",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="courses" data-section="courses">
|
||||
<ProductVariantCards
|
||||
tag="Available Programs"
|
||||
title="Professional IT Paths"
|
||||
description="Choose a career path that aligns with your professional ambitions."
|
||||
products={[
|
||||
{
|
||||
name: "Software Development",
|
||||
variant: "Full-Time",
|
||||
price: "$12,000",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-desk-workspace-with-organized-tec-1776782204694-b446f57f.png",
|
||||
},
|
||||
{
|
||||
name: "Data Analytics",
|
||||
variant: "Part-Time",
|
||||
price: "$8,500",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-person-writing-code-on-a-laptop-with-f-1776782215046-e298c259.png",
|
||||
},
|
||||
{
|
||||
name: "Cyber Security",
|
||||
variant: "Bootcamp",
|
||||
price: "$9,500",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-desk-workspace-with-organized-tec-1776782293255-338e81a0.png",
|
||||
},
|
||||
{
|
||||
name: "Cloud Computing",
|
||||
variant: "Specialist",
|
||||
price: "$7,000",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-person-writing-code-on-a-laptop-with-f-1776782302402-4a545879.png",
|
||||
},
|
||||
{
|
||||
name: "AI & Machine Learning",
|
||||
variant: "Advanced",
|
||||
price: "$15,000",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-desk-workspace-with-organized-tec-1776782313599-ac55317b.png",
|
||||
},
|
||||
{
|
||||
name: "UI/UX Design",
|
||||
variant: "Full-Time",
|
||||
price: "$6,000",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-person-writing-code-on-a-laptop-with-f-1776782325127-08055ca0.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingSplitCards
|
||||
tag="Transparent Fees"
|
||||
title="Flexible Payment Plans"
|
||||
description="Education should be accessible. Choose the plan that fits your financial goals."
|
||||
plans={[
|
||||
{
|
||||
tag: "Essentials",
|
||||
price: "$4,000",
|
||||
period: "Full Course",
|
||||
description: "Perfect for starters.",
|
||||
primaryButton: {
|
||||
text: "Apply Now",
|
||||
href: "#contact",
|
||||
},
|
||||
featuresTitle: "Included Features",
|
||||
features: [
|
||||
"Core curriculum",
|
||||
"Community support",
|
||||
"Basic resources",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Pro",
|
||||
price: "$7,000",
|
||||
period: "Full Course",
|
||||
description: "For serious learners.",
|
||||
primaryButton: {
|
||||
text: "Apply Now",
|
||||
href: "#contact",
|
||||
},
|
||||
featuresTitle: "Included Features",
|
||||
features: [
|
||||
"Full curriculum",
|
||||
"Mentorship sessions",
|
||||
"Job placement support",
|
||||
"Career coaching",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialMarqueeCards
|
||||
tag="Success Stories"
|
||||
title="Hear from Our Graduates"
|
||||
description="Graduates across the globe are thriving in their careers."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex River",
|
||||
role: "Full Stack Dev",
|
||||
quote: "The academy provided a perfect balance of theory and practice. I felt ready for my first role immediately.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-young-software-engineering-1776782224902-d41bc5ae.png",
|
||||
},
|
||||
{
|
||||
name: "Sam Taylor",
|
||||
role: "Data Analyst",
|
||||
quote: "Hands-on projects helped me build a portfolio that truly impressed my current employers.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-female-data-analyst-smilin-1776782234729-9759e754.png",
|
||||
},
|
||||
{
|
||||
name: "Jordan Lee",
|
||||
role: "Cybersecurity Analyst",
|
||||
quote: "The curriculum was challenging and up-to-date with current industry security protocols.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-male-web-developer-sitting-1776782245705-b1600f09.png",
|
||||
},
|
||||
{
|
||||
name: "Morgan Chase",
|
||||
role: "Cloud Architect",
|
||||
quote: "The career coaching sessions made the biggest difference in my job search process.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-happy-student-in-a-lab-1776782254918-bacfab4d.png",
|
||||
},
|
||||
{
|
||||
name: "Casey Quinn",
|
||||
role: "UI/UX Designer",
|
||||
quote: "I transitioned from marketing to UI/UX easily, thanks to the mentor-led sessions.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-mentor-in-a-technology-aca-1776782263479-f194e88c.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Learn More"
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about enrollment, course structures, and placement."
|
||||
items={[
|
||||
{
|
||||
question: "Are classes fully online?",
|
||||
answer: "We offer both hybrid and fully online options for all our courses.",
|
||||
},
|
||||
{
|
||||
question: "What is the mentorship process?",
|
||||
answer: "Students get access to weekly one-on-one sessions with senior engineers.",
|
||||
},
|
||||
{
|
||||
question: "Can I switch courses?",
|
||||
answer: "Yes, our flexible policy allows students to transfer between related tracks.",
|
||||
},
|
||||
{
|
||||
question: "Is there a certificate awarded?",
|
||||
answer: "Every graduate receives an industry-recognized certification upon program completion.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-student-using-a-digital-tablet-for-onl-1776782273255-90b016da.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitEmail
|
||||
tag="Get Started"
|
||||
title="Begin Your IT Journey"
|
||||
description="Join thousands of successful graduates. Fill in your details to schedule a consultation."
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Schedule Call"
|
||||
termsText="By submitting, you agree to our privacy policy."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/minimalist-reception-area-of-an-it-compa-1776782282250-1a6e814b.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBrandReveal
|
||||
brand="IT ACADEMY"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Courses",
|
||||
href: "#courses",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { Plus, ArrowRight } from "lucide-react";
|
||||
@@ -46,54 +46,45 @@ const NavLink = ({
|
||||
};
|
||||
|
||||
const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setIsScrolled(window.scrollY > 50);
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav
|
||||
className={cls(
|
||||
"fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
|
||||
isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
|
||||
)}
|
||||
>
|
||||
<div className="relative flex items-center justify-between h-full w-content-width mx-auto">
|
||||
<Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
|
||||
<nav className="fixed top-4 left-1/2 -translate-x-1/2 z-[100] rounded-full shadow-lg px-6 md:px-8 py-3 backdrop-blur-xl bg-white/70 border border-white/40 flex items-center justify-between md:justify-center gap-4 md:gap-8 w-[calc(100%-2rem)] md:w-auto transition-all duration-300">
|
||||
<Link to="/" className="text-xl font-medium text-foreground shrink-0">
|
||||
{logo}
|
||||
</Link>
|
||||
|
||||
<div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">
|
||||
{navItems.map((item) => (
|
||||
<NavLink
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-base text-foreground hover:opacity-70 transition-opacity"
|
||||
>
|
||||
{item.name}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block">
|
||||
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="flex md:hidden items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
<Plus
|
||||
className={cls("w-1/2 h-1/2 text-background transition-transform duration-300", menuOpen ? "rotate-45" : "rotate-0")}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</button>
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
{navItems.map((item) => (
|
||||
<NavLink
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-base font-medium text-foreground hover:opacity-70 transition-opacity"
|
||||
>
|
||||
{item.name}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block shrink-0">
|
||||
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="flex md:hidden items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded-full cursor-pointer"
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
<Plus
|
||||
className={cls(
|
||||
"w-1/2 h-1/2 text-background transition-transform duration-300",
|
||||
menuOpen ? "rotate-45" : "rotate-0"
|
||||
)}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<AnimatePresence>
|
||||
@@ -103,12 +94,12 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: "-135%" }}
|
||||
transition={{ type: "spring", damping: 26, stiffness: 170 }}
|
||||
className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 card rounded"
|
||||
className="md:hidden fixed z-[110] top-4 left-4 right-4 p-6 bg-white/90 backdrop-blur-xl border border-white/40 shadow-xl rounded-2xl"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<p className="text-xl text-foreground">Menu</p>
|
||||
<p className="text-xl font-medium text-foreground">Menu</p>
|
||||
<button
|
||||
className="flex items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
|
||||
className="flex items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded-full cursor-pointer"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
aria-label="Close menu"
|
||||
>
|
||||
@@ -128,7 +119,7 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
<ArrowRight className="h-4 w-4 text-foreground" strokeWidth={1.5} />
|
||||
</NavLink>
|
||||
{index < navItems.length - 1 && (
|
||||
<div className="h-px bg-linear-to-r from-transparent via-foreground/20 to-transparent" />
|
||||
<div className="h-px bg-foreground/10" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
@@ -144,4 +135,4 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default NavbarCentered;
|
||||
export default NavbarCentered;
|
||||
Reference in New Issue
Block a user