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

---
 src/App.tsx                | 346 ++---------------------------------
 src/pages/HomePage.tsx     | 357 +++++++++++++++++++++++++++++++++++--
 src/pages/ProductsPage.tsx | 125 ++++++++++---
 3 files changed, 452 insertions(+), 376 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d476431..c74d55f 100644
--- a/src/App.tsx
+++ b/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>
   );
-}
\ 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 59dd3cb..785640a 100644
--- a/src/pages/ProductsPage.tsx
+++ b/src/pages/ProductsPage.tsx
@@ -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}
\ No newline at end of file
+      <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
\ No newline at end of file
-- 
2.49.1