src/pages/ProductsPage.tsx

@@ -0,0 +1,27 @@
+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
+
+interface ProductCardProps {
+  imageSrc: string
+  title: string
+  description: string
+  price: string
+  linkHref: string
+}
+
+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}

src/routes.ts

@@ -7,4 +7,5 @@ export interface Route {
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/to', label: 'To', pageFile: 'ToPage' },
+  { path: '/products', label: 'Products', pageFile: 'ProductsPage' },
 ];