From d38e9e44fa3fe4fcdcbb7551532f9671d46d1162 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 22 Jun 2026 10:58:26 +0000
Subject: [PATCH 1/2] Bob AI: Add shop page

---
 src/App.tsx               |   2 +
 src/components/Layout.tsx |   4 +-
 src/pages/ShopPage.tsx    | 135 ++++++++++++++++++++++++++++++++++++++
 src/routes.ts             |   1 +
 4 files changed, 141 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/ShopPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 33d15f9..3f99632 100644
--- a/src/App.tsx
+++ b/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>
   );
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 6a19413..ab36fbb 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -27,7 +27,9 @@ export default function Layout() {
   },
   {
     "name": "Team",    "href": "#team"
-  }
+  },
+  { name: "Shop", href: "/shop" },
+
 ];
 
   return (
diff --git a/src/pages/ShopPage.tsx b/src/pages/ShopPage.tsx
new file mode 100644
index 0000000..21c4657
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..0e35e4b 100644
--- a/src/routes.ts
+++ b/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' },
 ];

From 461acaadfe62cfd6993a2b2e31db6932a7a437c0 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 22 Jun 2026 10:59:16 +0000
Subject: [PATCH 2/2] Bob AI: Populate src/pages/ShopPage.tsx (snippet builder,
 2 sections)

---
 src/pages/ShopPage.tsx | 144 ++++-------------------------------------
 1 file changed, 14 insertions(+), 130 deletions(-)

diff --git a/src/pages/ShopPage.tsx b/src/pages/ShopPage.tsx
index 21c4657..f9c5c5b 100644
--- a/src/pages/ShopPage.tsx
+++ b/src/pages/ShopPage.tsx
@@ -1,135 +1,19 @@
-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"
-  }
-];
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import AvatarGroup from "@/components/ui/AvatarGroup";
+import { Star, Loader2 } from "lucide-react";
+import { cls } from "@/lib/utils";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import useProducts from "@/hooks/useProducts";
 
 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>
+    <>
+      <div data-webild-section="HeroBillboard"><section aria-label="Hero section" className="relative pt-25 pb-20 md:pt-30"><HeroBackgroundSlot /><div className="flex flex-col gap-12 md:gap-15 w-content-width mx-auto"><div className="flex flex-col items-center gap-3 text-center"><AvatarGroup avatarsSrc={["https://img.freepik.com/free-photo/portrait-young-beautiful-woman-with-smoky-eyes-makeup-red-lips_186202-8958.jpg","https://img.freepik.com/free-photo/close-up-portrait-beautiful-young-woman-with-elegant-make-up-red-lips_186202-8960.jpg","https://img.freepik.com/free-photo/beautiful-woman-with-red-lipstick_23-2148330752.jpg"]} label="Loved by beauty enthusiasts everywhere" className="mb-1" /><TextAnimation text="Unleash Your Bold Beauty" variant="fade" gradientText={true} tag="h1" className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Explore our complete collection of professional-grade makeup. From ruby-red lips to flawless foundations, find everything you need to speak your truth." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Shop Collection" href="#products" variant="primary" /><Button text="Read Reviews" href="#reviews" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade" delay={0.2} className="w-full p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/flat-lay-makeup-products-with-red-lipstick_23-2148330760.jpg" className="aspect-4/5 md:aspect-video" /></ScrollReveal></div></section></div>
+      <div data-webild-section="ProductRatingCards"><section aria-label="Products section" className="py-20"><div className="w-content-width mx-auto flex justify-center"><Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} /></div></section></div>
+    </>
   );
-}
\ No newline at end of file
+}