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

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

src/pages/ProductsPage.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import ProductMediaCards from "@/components/sections/product/ProductMediaCards";
+import FeaturesBentoGrid from "@/components/sections/features/FeaturesBentoGrid";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function ProductsPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <NavbarCentered
+        logo="AcmeStore"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/contact" }}
+      />
+
+      <main>
+        <HeroSplit
+          tag="Our Products"
+          title="Tools to build your next big idea"
+          description="Discover our suite of premium products designed to help you scale faster and work smarter."
+          primaryButton={{ text: "Browse All", href: "#products" }}
+          secondaryButton={{ text: "Read Docs", href: "/docs" }}
+          imageSrc="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80"
+        />
+
+        <div id="products">
+          <ProductMediaCards
+            tag="Collection"
+            title="Featured Software"
+            description="Choose the right tool for your specific needs."
+            products={[
+              {
+                name: "Analytics Pro",
+                price: "$49/mo",
+                imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80",
+                onClick: () => console.log("Analytics clicked")
+              },
+              {
+                name: "Cloud Storage",
+                price: "$19/mo",
+                imageSrc: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&q=80",
+                onClick: () => console.log("Storage clicked")
+              },
+              {
+                name: "Team Chat",
+                price: "$29/mo",
+                imageSrc: "https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&q=80",
+                onClick: () => console.log("Chat clicked")
+              }
+            ]}
+          />
+        </div>
+
+        <FeaturesBentoGrid
+          tag="Benefits"
+          title="Why choose our ecosystem"
+          description="Everything works seamlessly together to give you the best experience possible."
+          features={[
+            {
+              title: "Lightning Fast",
+              description: "Optimized for speed and reliability across all devices.",
+              imageSrc: "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80"
+            },
+            {
+              title: "Secure by Default",
+              description: "Enterprise-grade security built into every product.",
+              imageSrc: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?auto=format&fit=crop&q=80"
+            },
+            {
+              title: "24/7 Support",
+              description: "Our dedicated team is always here to help you succeed.",
+              imageSrc: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80"
+            }
+          ]}
+        />
+      </main>
+
+      <FooterSimple
+        brand="AcmeStore"
+        columns={[
+          {
+            title: "Products",
+            items: [
+              { label: "Analytics", href: "#" },
+              { label: "Storage", href: "#" }
+            ]
+          }
+        ]}
+        copyright="© 2024 AcmeStore. All rights reserved."
+        links={[
+          { label: "Privacy Policy", href: "#" },
+          { label: "Terms of Service", href: "#" }
+        ]}
+      />
+    </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' },
 ];