diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
new file mode 100644
index 0000000..0dfaa14
--- /dev/null
+++ b/src/app/shop/[id]/page.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { Suspense, use, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
+import ProductCart from "@/components/ecommerce/cart/ProductCart";
+import { useProductDetail } from "@/hooks/useProductDetail";
+import { useCart } from "@/hooks/useCart";
+import { useCheckout } from "@/hooks/useCheckout";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+interface ProductPageProps {
+ params: Promise<{ id: string }>;
+}
+
+export default function ProductPage({ params }: ProductPageProps) {
+ return (
+
+
+
+ );
+}
+
+function ProductPageContent({ params }: ProductPageProps) {
+ const { id } = use(params);
+ const router = useRouter();
+
+ const {
+ product,
+ isLoading,
+ images,
+ meta,
+ variants,
+ quantityVariant,
+ selectedQuantity,
+ createCartItem,
+ } = useProductDetail(id);
+
+ const {
+ items: cartItems,
+ isOpen: cartOpen,
+ setIsOpen: setCartOpen,
+ addItem,
+ updateQuantity,
+ removeItem,
+ total: cartTotal,
+ getCheckoutItems,
+ } = useCart();
+
+ const { buyNow, checkout, isLoading: isCheckoutLoading } = useCheckout();
+
+ const handleAddToCart = useCallback(() => {
+ const item = createCartItem();
+ if (item) {
+ addItem(item);
+ }
+ }, [createCartItem, addItem]);
+
+ const handleBuyNow = useCallback(() => {
+ if (product) {
+ buyNow(product, selectedQuantity);
+ }
+ }, [product, selectedQuantity, buyNow]);
+
+ const handleCheckout = useCallback(async () => {
+ if (cartItems.length === 0) return;
+
+ const currentUrl = new URL(window.location.href);
+ currentUrl.searchParams.set("success", "true");
+
+ await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
+ }, [cartItems, checkout, getCheckoutItems]);
+
+ if (isLoading) {
+ return (
+
+
+
+
+
+
+
+ Loading product...
+
+
+
+ );
+ }
+
+ if (!product) {
+ return (
+
+
+
+
+
+
+
+
+
Product not found
+
+
+
+
+
+
+
0 ? variants : undefined}
+ quantity={quantityVariant}
+ ribbon={meta.ribbon}
+ inventoryStatus={meta.inventoryStatus}
+ inventoryQuantity={meta.inventoryQuantity}
+ sku={meta.sku}
+ buttons={[
+ { text: "Add To Cart", onClick: handleAddToCart },
+ { text: "Buy Now", onClick: handleBuyNow },
+ ]}
+ />
+
+
setCartOpen(false)}
+ items={cartItems}
+ onQuantityChange={updateQuantity}
+ onRemove={removeItem}
+ total={`$${cartTotal}`}
+ buttons={[
+ {
+ text: isCheckoutLoading ? "Processing..." : "Check Out",
+ onClick: handleCheckout,
+ },
+ ]}
+ />
+
+
+
+
+
+ Loading products...
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default function ShopPage() {
+ return (
+
+
+
+ );
+}