src/App.tsx

@@ -32,6 +32,8 @@ export default function App() {
               name: "FAQ",
               href: "#faq",
             },
+            { name: "Products", href: "/products" },
+
           ]}
           ctaButton={{
             text: "Apply Now",

src/pages/ProductsPage.tsx

@@ -1,27 +1,39 @@
-import React from "react"
-import NavbarCentered from "@/components/ui/NavbarCentered"
-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
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import Button from "@/components/ui/Button";
+import { routes } from "@/routes";
 
-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}
+      {/* Hero Section */}
+      <section className="container mx-auto py-20 text-center">
+        <h1 className="text-5xl font-bold tracking-tight sm:text-6xl">
+          Discover Our Innovative Products
+        </h1>
+        <p className="mt-6 text-xl text-muted-foreground max-w-3xl mx-auto">
+          Explore our range of cutting-edge solutions designed to elevate your experience and streamline your workflow.
+        </p>
+        <div className="mt-10 flex justify-center gap-x-6">
+          <Button variant="primary-cta" size="lg" href="#products">
+            View All Products
+          </Button>
+          <Button variant="outline" size="lg" href="/contact">
+            Contact Sales
+          </Button>
+        </div>
+      </section>
+
+      {/* Products Section */}
+      <section id="products" className="py-20 bg-card text-card-foreground">
+        <div className="container mx-auto">
+          <h2 className="text-4xl font-bold text-center mb-12">Our Product Portfolio</h2>
+          <GridOrCarousel
+            items={[
+              {
+                type: "card",
+                title: "Product Alpha",
+                description: "A revolutionary tool for data analysis and visualization.",
+                image: "https://via.placeholder.com/400x300/