src/app/blog/page.tsx

@@ -38,7 +38,15 @@ export default function BlogPage() {
                 </div>
                 <div id="blog-section" data-section="blog-section">
                     {!isLoading && posts && posts.length > 0 && (
-                        <BlogCardThree posts={posts} />
+                        <BlogCardThree 
+                            title="Our Latest Articles"
+                            description="Stay updated with the latest news and tips from our bakery"
+                            items={posts}
+                            animationType="slide-up"
+                            gridVariant="three-columns-all-equal-width"
+                            textboxLayout="default"
+                            useInvertedBackground={false}
+                        />
                     )}
                 </div>
             </ReactLenis>

src/app/shop/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense, use, useCallback } from "react";
+import { Suspense, use, useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
@@ -18,9 +18,18 @@ function ProductDetailContent({
     const resolvedParams = use(params);
     const { product, isLoading } = useProductDetail(resolvedParams.id);
     const router = useRouter();
+    const [cartItems, setCartItems] = useState<any[]>([]);
+    const [isCartOpen, setIsCartOpen] = useState(false);
 
     const handleAddToCart = useCallback(() => {
-        // Handle add to cart logic
+        if (product) {
+            setCartItems([...cartItems, product]);
+            setIsCartOpen(true);
+        }
+    }, [product, cartItems]);
+
+    const handleCloseCart = useCallback(() => {
+        setIsCartOpen(false);
     }, []);
 
     if (isLoading) {
@@ -33,8 +42,24 @@ function ProductDetailContent({
 
     return (
         <>
-            <ProductDetailCard product={product} onAddToCart={handleAddToCart} />
-            <ProductCart />
+            <ProductDetailCard 
+                title={product.name}
+                description={product.description || ""}
+                price={product.price || ""}
+                imageSrc={product.imageSrc || ""}
+                imageAlt={product.imageAlt || product.name}
+                onAddToCart={handleAddToCart}
+            />
+            <ProductCart 
+                isOpen={isCartOpen}
+                onClose={handleCloseCart}
+                items={cartItems}
+                total={cartItems.reduce((sum, item) => sum + (parseFloat(item.price) || 0), 0)}
+                buttons={[
+                    { text: "Continue Shopping", href: "/shop" },
+                    { text: "Checkout", href: "#" }
+                ]}
+            />
         </>
     );
 }

src/app/shop/page.tsx

@@ -12,20 +12,19 @@ function ShopPageContent() {
     const {
         products,
         isLoading,
-        searchQuery,
-        setSearchQuery,
-        categoryFilter,
-        setCategoryFilter,
+        search,
+        setSearch,
+        category,
+        setCategory,
     } = useProductCatalog();
 
     return (
         <ProductCatalog
             products={products}
-            isLoading={isLoading}
-            searchQuery={searchQuery}
-            onSearchChange={setSearchQuery}
-            categoryFilter={categoryFilter}
-            onCategoryChange={setCategoryFilter}
+            search={search}
+            onSearchChange={setSearch}
+            category={category}
+            onCategoryChange={setCategory}
         />
     );
 }