From c5c9786fc5d49183be04a6c262675231af60a652 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Wed, 22 Apr 2026 16:43:37 +0300
Subject: [PATCH] Bob AI: Add products page

---
 src/App.tsx                | 344 ++---------------------------------
 src/pages/HomePage.tsx     | 357 +++++++++++++++++++++++++++++++++++--
 src/pages/ProductsPage.tsx |  82 +++++++--
 3 files changed, 411 insertions(+), 372 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d476431..21ac228 100644
--- a/src/App.tsx
+++ b/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>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index a3e7160..9c411cc 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -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>
+  );
+}
diff --git a/src/pages/ProductsPage.tsx b/src/pages/ProductsPage.tsx
index 3ff7fd7..67e4d90 100644
--- a/src/pages/ProductsPage.tsx
+++ b/src/pages/ProductsPage.tsx
@@ -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
\ No newline at end of file
-- 
2.49.1