Merge version_12_1776865736836 into main #9
346
src/App.tsx
346
src/App.tsx
@@ -1,338 +1,16 @@
|
||||
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 ToPage from "@/pages/ToPage";
|
||||
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="/to" element={<ToPage />} />
|
||||
<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,27 +1,106 @@
|
||||
import React from "react"
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered"
|
||||
import Button from "@/components/ui/Button"
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo"
|
||||
import { routes } from "@/routes"
|
||||
import HeroCentered from "@/components/sections/HeroCentered"
|
||||
import FeaturesGrid from "@/components/sections/FeaturesGrid"
|
||||
import CallToAction from "@/components/sections/CallToAction"
|
||||
import Section from "@/components/sections/Section" // Assuming a generic Section wrapper
|
||||
|
||||
interface ProductCardProps {
|
||||
imageSrc: string
|
||||
title: string
|
||||
description: string
|
||||
price: string
|
||||
linkHref: string
|
||||
}
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<NavbarCentered navItems={routes.map((r) => ({ name: r.label, href: r.path }))} />
|
||||
|
||||
const ProductCard: React.FC<ProductCardProps> = ({
|
||||
imageSrc,
|
||||
title,
|
||||
description,
|
||||
price,
|
||||
linkHref,
|
||||
}) => (
|
||||
<div className="flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg transition-transform duration-300 hover:scale-105 hover:shadow-xl dark:border-gray-700 dark:bg-gray-800">
|
||||
<img
|
||||
className="h-48 w-full object-cover"
|
||||
src={imageSrc}
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
|
||||
Explore Our Innovative Products
|
||||
</h1>
|
||||
<p className="mt-6 text-lg leading-8 text-muted-foreground">
|
||||
Discover solutions designed to empower your business and simplify your life.
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<Button variant="primary" size="lg" href="#products-list">
|
||||
View All Products
|
||||
</Button>
|
||||
<Button variant="secondary" size="lg" href="/contact">
|
||||
Contact Sales
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Product Categories (replaces features section) */}
|
||||
<section id="products-list" className="py-16 sm:py-24 lg:py-32 bg-card text-card-foreground">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl lg:text-center">
|
||||
<h2 className="text-base font-semibold leading-7 text-primary-cta">Our Offerings</h2>
|
||||
<p className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
|
||||
Our Product Categories
|
||||
</p>
|
||||
<p className="mt-6 text-lg leading-8 text-muted-foreground">
|
||||
From essential tools to advanced platforms, find what you need.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
|
||||
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
|
||||
<div className="relative pl-16">
|
||||
<dt className="text-base font-semibold leading-7">
|
||||
<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-cta text-primary-cta-foreground">
|
||||
<span className="text-xl">🚀</span>
|
||||
</div>
|
||||
Productivity Suites
|
||||
</dt>
|
||||
<dd className="mt-2 text-base leading-7 text-muted-foreground">
|
||||
Boost efficiency with our integrated software solutions.
|
||||
</dd>
|
||||
</div>
|
||||
<div className="relative pl-16">
|
||||
<dt className="text-base font-semibold leading-7">
|
||||
<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-cta text-primary-cta-foreground">
|
||||
<span className="text-xl">📊</span>
|
||||
</div>
|
||||
Data Analytics
|
||||
</dt>
|
||||
<dd className="mt-2 text-base leading-7 text-muted-foreground">
|
||||
Gain insights with powerful data visualization and reporting.
|
||||
</dd>
|
||||
</div>
|
||||
<div className="relative pl-16">
|
||||
<dt className="text-base font-semibold leading-7">
|
||||
<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-cta text-primary-cta-foreground">
|
||||
<span className="text-xl">☁️</span>
|
||||
</div>
|
||||
Cloud Infrastructure
|
||||
</dt>
|
||||
<dd className="mt-2 text-base leading-7 text-muted-foreground">
|
||||
Scalable and secure cloud services for modern enterprises.
|
||||
</dd>
|
||||
</div>
|
||||
<div className="relative pl-16">
|
||||
<dt className="text-base font-semibold leading-7">
|
||||
<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-cta text-primary-cta-foreground">
|
||||
<span className="text-xl">🔒</span>
|
||||
</div>
|
||||
Security Solutions
|
||||
</dt>
|
||||
<dd className="mt-2 text-base leading-7 text-muted-foreground">
|
||||
Protect your assets with our cutting-edge cybersecurity tools.
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Product (replaces product section) */}
|
||||
<section className="overflow-hidden py-16 sm:py-24 lg:py-32">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
|
||||
<div className="lg:pr-8 lg:pt-4">
|
||||
<div className="lg:max-w-lg">
|
||||
<h2 className="text-base font-semibold leading-7 text-primary-cta">Innovation at its best</h2>
|
||||
<p className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
|
||||
Featured Product: QuantumFlow
|
||||
</p>
|
||||
<p className="mt-6 text-lg leading-8 text-muted-foreground">
|
||||
Revolutionize your
|
||||
Reference in New Issue
Block a user