Bob AI: Add products page

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import ProductsPage from "@/pages/ProductsPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/products" element={<ProductsPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -27,7 +27,9 @@ export default function Layout() {
   },
   {
     "name": "Testimonials",    "href": "#testimonials"
-  }
+  },
+  { name: "Products", href: "/products" },
+
 ];
 
   return (

src/pages/ProductsPage.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import PricingSimpleCards from "@/components/sections/pricing/PricingSimpleCards";
+import ContactCta from "@/components/sections/contact/ContactCta";
+import FooterMinimal from "@/components/sections/footer/FooterMinimal";
+
+export default function ProductsPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col">
+      <NavbarCentered
+        logo="BarberCo"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Book Appointment", href: "/book" }}
+      />
+
+      <main className="flex-grow">
+        <HeroBillboard
+          tag="Services"
+          title="Expert Cuts & Styling"
+          description="Choose from our range of professional grooming services tailored to your style."
+          primaryButton={{ text: "Book Now", href: "/book" }}
+          secondaryButton={{ text: "View Menu", href: "#menu" }}
+        />
+
+        <div id="menu">
+          <PricingSimpleCards
+            tag="Service Menu"
+            title="Our Haircuts"
+            description="Simple, straightforward pricing for top-tier grooming."
+            plans={[
+              {
+                tag: "Buzz Cut",
+                price: "$15",
+                description: "Quick, clean, and low maintenance.",
+                features: ["Clipper cut all over", "Even length", "Neck trim"],
+                buttonText: "Book Buzz Cut",
+                href: "/book"
+              },
+              {
+                tag: "Basic Cut",
+                price: "$30",
+                description: "The classic professional standard.",
+                features: ["Scissor or clipper cut", "Standard styling", "Neck shave"],
+                buttonText: "Book Basic Cut",
+                href: "/book"
+              },
+              {
+                tag: "Fade",
+                price: "$40",
+                description: "Precision blending and sharp lines.",
+                features: ["Skin fade", "Detailed top styling", "Hot towel finish"],
+                buttonText: "Book Fade",
+                href: "/book"
+              }
+            ]}
+          />
+        </div>
+
+        <ContactCta
+          tag="Ready?"
+          text="Secure your spot in the chair today."
+          primaryButton={{ text: "Book Appointment", href: "/book" }}
+          secondaryButton={{ text: "Contact Us", href: "/contact" }}
+        />
+      </main>
+
+      <FooterMinimal
+        brand="BarberCo"
+        copyright="© 2024 BarberCo. All rights reserved."
+      />
+    </div>
+  );
+}

src/routes.ts

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