diff --git a/src/app/page.tsx b/src/app/page.tsx
index bed8945..935303e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -187,6 +187,7 @@ export default function LandingPage() {
           useInvertedBackground={false}
           imageSrc="https://img.b2bpic.net/free-photo/three-men-looking-aside-construction-site_259150-57679.jpg"
           imageAlt="JT Roofing professional team at work"
+          mediaAnimation="slide-up"
           mediaPosition="right"
           inputPlaceholder="Enter your email for updates"
           buttonText="Get Free Estimate"
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index f676707..2734509 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -94,7 +94,6 @@ export default function ProductPage({ params }: ProductPageProps) {
                         brandName="JT Roofing"
                         bottomLeftText="Available 24/7 for emergencies"
                         bottomRightText="call@jtroofing.com"
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -147,17 +146,29 @@ export default function ProductPage({ params }: ProductPageProps) {
                     bottomRightText="call@jtroofing.com"
                 />
                 </div>
-                <div id="productCatalog" data-section="productCatalog">
-                <ProductCatalog
-                    layout="page"
-                    products={products}
-                    searchValue={search}
-                    onSearchChange={setSearch}
-                    searchPlaceholder="Search products..."
-                    filters={filters}
-                    emptyMessage="No products found"
+                <div id="productDetail" data-section="productDetail">
+                <ProductDetailCard
+                    product={product}
+                    images={images}
+                    meta={meta}
+                    variants={variants}
+                    quantityVariant={quantityVariant}
+                    selectedQuantity={selectedQuantity}
+                    onAddToCart={handleAddToCart}
+                    onBuyNow={handleBuyNow}
+                    onBackClick={() => router.push('/shop')}
                 />
                 </div>
+                <ProductCart
+                    isOpen={cartOpen}
+                    onClose={() => setCartOpen(false)}
+                    items={cartItems}
+                    onUpdateQuantity={updateQuantity}
+                    onRemove={removeItem}
+                    total={cartTotal}
+                    onCheckout={handleCheckout}
+                    isCheckoutLoading={isCheckoutLoading}
+                />
                 <div id="footer" data-section="footer">
                 <FooterMedia
                     imageSrc="https://img.b2bpic.net/free-photo/retro-black-alarm-clock-dissolving-into-little-particles-time-can-return-never-wait-anyone-time-management-concept_616485-70.jpg"