Bob AI: Add shop 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 ShopPage from "@/pages/ShopPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/shop" element={<ShopPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -27,7 +27,9 @@ export default function Layout() {
   },
   {
     "name": "Team",    "href": "#team"
-  }
+  },
+  { name: "Shop", href: "/shop" },
+
 ];
 
   return (

src/pages/ShopPage.tsx

@@ -0,0 +1,135 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import FooterMinimal from "@/components/sections/footer/FooterMinimal";
+import Card from "@/components/ui/Card";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import Tag from "@/components/ui/Tag";
+import RatingStars from "@/components/ui/RatingStars";
+import PriceDisplay from "@/components/ui/PriceDisplay";
+import Button from "@/components/ui/Button";
+
+const SHOP_PRODUCTS = [
+  {
+    id: "p1",
+    name: "Ruby Matte Signature Lipstick",
+    price: 14.99,
+    originalPrice: 22.00,
+    rating: 4.9,
+    reviews: 1284,
+    isSale: true,
+    imageSrc: "https://images.unsplash.com/photo-1586495777744-4413f21062fa?auto=format&fit=crop&q=80"
+  },
+  {
+    id: "p2",
+    name: "Velvet Finish Liquid Foundation",
+    price: 24.50,
+    rating: 4.7,
+    reviews: 856,
+    isSale: false,
+    imageSrc: "https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?auto=format&fit=crop&q=80"
+  },
+  {
+    id: "p3",
+    name: "Crimson Glow Highlighter Palette",
+    price: 18.00,
+    originalPrice: 25.00,
+    rating: 4.8,
+    reviews: 642,
+    isSale: true,
+    imageSrc: "https://images.unsplash.com/photo-1599305090598-fe179d501227?auto=format&fit=crop&q=80"
+  },
+  {
+    id: "p4",
+    name: "Midnight Black Precision Eyeliner",
+    price: 12.99,
+    rating: 4.6,
+    reviews: 415,
+    isSale: false,
+    imageSrc: "https://images.unsplash.com/photo-1631214500515-8739516115a8?auto=format&fit=crop&q=80"
+  },
+  {
+    id: "p5",
+    name: "Rose Petal 18-Color Eyeshadow",
+    price: 29.99,
+    originalPrice: 38.00,
+    rating: 4.9,
+    reviews: 2105,
+    isSale: true,
+    imageSrc: "https://images.unsplash.com/photo-1512496115841-8743e1d92f1a?auto=format&fit=crop&q=80"
+  },
+  {
+    id: "p6",
+    name: "All-Day Flawless Setting Spray",
+    price: 16.50,
+    rating: 4.5,
+    reviews: 328,
+    isSale: false,
+    imageSrc: "https://images.unsplash.com/photo-1620916566398-39f1143ab7be?auto=format&fit=crop&q=80"
+  }
+];
+
+export default function ShopPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col">
+      <NavbarCentered
+        logo="Miss Rose"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Cart (0)", href: "/cart" }}
+      />
+
+      <main className="flex-grow">
+        <HeroBillboard
+          tag="Shop All"
+          title="Bold Beauty, Unapologetically You"
+          description="Discover our full collection of high-performance cosmetics designed to make you stand out. Rich pigments, long-lasting wear, and a signature ruby aesthetic."
+          primaryButton={{ text: "Shop Best Sellers", href: "#products" }}
+          secondaryButton={{ text: "View Offers", href: "#products" }}
+          imageSrc="https://images.unsplash.com/photo-1616683693504-3ea7e9ad6fec?auto=format&fit=crop&q=80"
+        />
+
+        <section id="products" className="py-24 px-6 max-w-7xl mx-auto">
+          <div className="mb-12 text-center">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">The Ruby Collection</h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">Explore our complete line of premium makeup products, featuring exclusive online pricing and verified customer reviews.</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {SHOP_PRODUCTS.map((product) => (
+              <Card key={product.id} className="p-5 flex flex-col gap-4 border-border bg-card hover:border-primary-cta transition-colors">
+                <div className="relative aspect-square overflow-hidden rounded-md bg-muted">
+                  <ImageOrVideo imageSrc={product.imageSrc} className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
+                  {product.isSale && (
+                    <div className="absolute top-3 left-3">
+                      <Tag text="Sale" className="bg-primary-cta text-primary-cta-foreground border-none font-bold" />
+                    </div>
+                  )}
+                </div>
+                
+                <div className="flex flex-col flex-grow gap-3">
+                  <h3 className="text-lg font-bold leading-tight text-card-foreground">{product.name}</h3>
+                  
+                  <div className="flex items-center gap-2">
+                    <RatingStars rating={product.rating} className="text-primary-cta" />
+                    <span className="text-sm text-muted-foreground">({product.reviews} reviews)</span>
+                  </div>
+                  
+                  <div className="mt-auto pt-4 flex items-center justify-between">
+                    <PriceDisplay price={product.price} originalPrice={product.originalPrice} currency="$" className="text-xl font-bold" />
+                  </div>
+                  
+                  <Button text="Add to Cart" variant="primary" className="w-full mt-2" />
+                </div>
+              </Card>
+            ))}
+          </div>
+        </section>
+      </main>
+
+      <FooterMinimal
+        brand="Miss Rose Cosmetics"
+        copyright="© 2024 Miss Rose. All rights reserved."
+      />
+    </div>
+  );
+}

src/routes.ts

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