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
+}