Merge version_11_1776865359583 into main #8
344
src/App.tsx
344
src/App.tsx
@@ -1,338 +1,14 @@
|
||||
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
|
||||
import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
|
||||
import FooterBrandReveal from '@/components/sections/footer/FooterBrandReveal';
|
||||
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
|
||||
import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
|
||||
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import HomePage from "@/pages/HomePage";
|
||||
import ProductsPage from "@/pages/ProductsPage";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<main className="pt-24">
|
||||
<div id="nav" data-section="nav" className="fixed top-4 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg px-8 py-3 backdrop-blur-xl bg-white/70 border border-white/40 flex items-center gap-8">
|
||||
<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 className="fixed bottom-6 right-6 z-50 inline-flex items-center gap-2 px-4 py-2 rounded-full backdrop-blur-xl bg-white/70 border border-white/40 shadow-xl text-sm font-medium text-foreground">
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
|
||||
</span>
|
||||
Active now
|
||||
</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: [
|
||||
{
|
||||
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>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/products" element={<ProductsPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +1,341 @@
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import { routes } from "@/routes";
|
||||
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
|
||||
import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
|
||||
import FooterBrandReveal from '@/components/sections/footer/FooterBrandReveal';
|
||||
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
|
||||
import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
|
||||
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
|
||||
|
||||
const HomePage = () => {
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<NavbarCentered
|
||||
logo="Logo"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Get Started", href: "#" }}
|
||||
/>
|
||||
<main className="pt-20 flex flex-col items-center justify-center min-h-[80vh] px-4">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-4">Welcome</h1>
|
||||
<p className="text-lg text-muted-foreground max-w-xl text-center">
|
||||
Your website content will appear here.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<main className="pt-24">
|
||||
<div id="nav" data-section="nav" className="fixed top-4 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg px-8 py-3 backdrop-blur-xl bg-white/70 border border-white/40 flex items-center gap-8">
|
||||
<NavbarCentered
|
||||
logo="IT Academy"
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
name: "Courses",
|
||||
href: "#courses",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{ name: "Products", href: "/products" },
|
||||
|
||||
export default HomePage;
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Apply Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="fixed bottom-6 right-6 z-50 inline-flex items-center gap-2 px-4 py-2 rounded-full backdrop-blur-xl bg-white/70 border border-white/40 shadow-xl text-sm font-medium text-foreground">
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
|
||||
</span>
|
||||
Active now
|
||||
</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: [
|
||||
{
|
||||
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,22 +1,66 @@
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import { routes } from "@/routes";
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered"
|
||||
import Button from "@/components/ui/Button"
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo"
|
||||
import { routes } from "@/routes"
|
||||
|
||||
const ProductsPage = () => {
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<NavbarCentered
|
||||
logo="Logo"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Get Started", href: "#" }}
|
||||
/>
|
||||
<main className="pt-20 flex flex-col items-center justify-center min-h-[80vh] px-4">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-4">Products</h1>
|
||||
<p className="text-lg text-muted-foreground max-w-xl text-center">
|
||||
Welcome to the Products page. Content coming soon.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<div className="bg-background text-foreground min-h-screen flex flex-col">
|
||||
<NavbarCentered navItems={routes.map((r) => ({ name: r.label, href: r.path }))} />
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<section className="py-24 md:py-32 text-center bg-background" id="hero">
|
||||
<div className="container mx-auto px-4 max-w-4xl">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-6">
|
||||
Explore Our Innovative Products
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-muted-foreground mb-10">
|
||||
Discover a suite of solutions designed to elevate your experience and streamline your workflow.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<Button as="a" href="#products" variant="primary-cta">
|
||||
View All Products
|
||||
</Button>
|
||||
<Button as="a" href="/contact" variant="secondary">
|
||||
Contact Sales
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
export default ProductsPage;
|
||||
{/* Product Section */}
|
||||
<section className="py-24 md:py-32 bg-card text-card-foreground" id="products">
|
||||
<div className="container mx-auto px-4 max-w-6xl">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div className="md:order-2">
|
||||
<ImageOrVideo
|
||||
src="/placeholder-image.jpg" // Replace with actual image path
|
||||
alt="Our Flagship Product"
|
||||
className="rounded-lg shadow-lg w-full h-auto object-cover"
|
||||
width={600}
|
||||
height={400}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:order-1">
|
||||
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-card-foreground mb-6">
|
||||
Our Flagship Product
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
Dive deep into the features and benefits of our leading solution. Built with cutting-edge technology to meet your evolving needs.
|
||||
</p>
|
||||
<ul className="space-y-3 mb-8 text-muted-foreground">
|
||||
<li className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-primary-cta" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Seamless Integration
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-primary-cta" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Robust Performance
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-primary-cta" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0
|
||||
Reference in New Issue
Block a user