Add src/app/product/[id]/page.tsx

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

@@ -0,0 +1,352 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { Heart, Share2, ChevronLeft, Check } from "lucide-react";
+
+export default function ProductPage() {
+  const params = useParams();
+  const productId = params.id as string;
+
+  const navItems = [
+    { name: "Home", id: "home" },
+    { name: "Shop", id: "shop" },
+    { name: "Brands", id: "brands" },
+    { name: "New Arrivals", id: "new-arrivals" },
+    { name: "Best Sellers", id: "best-sellers" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Shop",      items: [
+        { label: "All Products", href: "/shop" },
+        { label: "New Arrivals", href: "/shop" },
+        { label: "Best Sellers", href: "/shop" },
+        { label: "Brands", href: "/shop" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/" },
+        { label: "Contact", href: "/" },
+        { label: "Blog", href: "/" },
+        { label: "Careers", href: "#" },
+      ],
+    },
+    {
+      title: "Support",      items: [
+        { label: "Shipping & Returns", href: "/" },
+        { label: "FAQ", href: "/" },
+        { label: "Size Guide", href: "#" },
+        { label: "Track Order", href: "#" },
+      ],
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms & Conditions", href: "#" },
+        { label: "Cookie Policy", href: "#" },
+        { label: "Accessibility", href: "#" },
+      ],
+    },
+  ];
+
+  const allProducts = [
+    {
+      id: "prod-001",      brand: "Nike",      name: "Air Max 90 Classic",      price: "$129.99",      rating: 4.8,
+      reviewCount: "342",      imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2",      imageAlt: "Nike Air Max 90 sneaker in white and grey",      category: "Shoes",      size: ["6", "7", "8", "9", "10", "11", "12"],
+      stock: 45,
+      description: "Experience timeless style with the Nike Air Max 90 Classic. Featuring the iconic Air Max sole unit and premium leather construction, these sneakers deliver exceptional comfort and durability. Perfect for everyday wear or making a statement with classic sneaker culture."},
+    {
+      id: "prod-002",      brand: "Supreme",      name: "Box Logo Hoodie",      price: "$345.00",      rating: 4.9,
+      reviewCount: "521",      imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2",      imageAlt: "Supreme black box logo hoodie",      category: "Tops",      size: ["XS", "S", "M", "L", "XL", "XXL"],
+      stock: 12,
+      description: "The Supreme Box Logo Hoodie is an iconic piece of streetwear history. Crafted with premium materials and featuring the legendary box logo, this hoodie represents supreme quality and style. Perfect for collectors and enthusiasts alike."},
+    {
+      id: "prod-003",      brand: "Carhartt WIP",      name: "Detroit Jacket",      price: "$159.99",      rating: 4.7,
+      reviewCount: "189",      imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2",      imageAlt: "Carhartt WIP brown Detroit work jacket",      category: "Jackets",      size: ["XS", "S", "M", "L", "XL"],
+      stock: 28,
+      description: "The Carhartt WIP Detroit Jacket blends timeless workwear heritage with modern streetwear aesthetics. Featuring durable canvas construction and signature Carhartt craftsmanship, this jacket is built to last and designed to impress."},
+    {
+      id: "prod-004",      brand: "Stüssy",      name: "Classic T-Shirt",      price: "$48.00",      rating: 4.6,
+      reviewCount: "276",      imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2",      imageAlt: "Stüssy white classic logo t-shirt",      category: "Tops",      size: ["XS", "S", "M", "L", "XL", "XXL"],
+      stock: 156,
+      description: "The Stüssy Classic T-Shirt is a wardrobe staple featuring the iconic Stüssy logo. Made from premium cotton, this tee offers exceptional comfort and quality. A versatile piece that pairs well with any outfit."},
+    {
+      id: "prod-005",      brand: "Adidas",      name: "Ultra Boost 22",      price: "$189.99",      rating: 4.8,
+      reviewCount: "437",      imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg",      imageAlt: "Adidas Ultra Boost 22 in black",      category: "Shoes",      size: ["6", "7", "8", "9", "10", "11", "12", "13"],
+      stock: 34,
+      description: "Step into the future with the Adidas Ultra Boost 22. Featuring Boost technology and responsive cushioning, these shoes provide ultimate comfort for performance and lifestyle wear. Engineered for excellence."},
+  ];
+
+  const product = allProducts.find((p) => p.id === productId);
+
+  const [selectedSize, setSelectedSize] = useState<string | null>(null);
+  const [quantity, setQuantity] = useState(1);
+  const [isFavorited, setIsFavorited] = useState(false);
+  const [addedToCart, setAddedToCart] = useState(false);
+
+  if (!product) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="mediumSizeLargeTitles"
+        background="aurora"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="bold"
+      >
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={navItems}
+            brandName="garraagarmzz"
+            button={{
+              text: "Shop Now",              href: "/shop"}}
+            animateOnLoad={true}
+            className="bg-opacity-95"
+            navItemClassName="text-sm font-medium"
+            buttonClassName="bg-blue-500 hover:bg-blue-600"
+            buttonTextClassName="text-white font-semibold"
+          />
+        </div>
+        <main className="min-h-screen flex items-center justify-center pt-24">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold mb-4">Product not found</h1>
+            <Link href="/shop" className="text-blue-600 hover:underline">
+              Back to Shop
+            </Link>
+          </div>
+        </main>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="garraagarmzz"
+            copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
+            columns={footerColumns}
+            ariaLabel="Site footer with navigation and company information"
+          />
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  const handleAddToCart = () => {
+    if (selectedSize) {
+      setAddedToCart(true);
+      setTimeout(() => setAddedToCart(false), 2000);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="aurora"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="garraagarmzz"
+          button={{
+            text: "Shop Now",            href: "/shop"}}
+          animateOnLoad={true}
+          className="bg-opacity-95"
+          navItemClassName="text-sm font-medium"
+          buttonClassName="bg-blue-500 hover:bg-blue-600"
+          buttonTextClassName="text-white font-semibold"
+        />
+      </div>
+
+      <main className="min-h-screen pt-24 pb-20">
+        <div className="max-w-7xl mx-auto px-4 md:px-6">
+          {/* Breadcrumb */}
+          <Link href="/shop" className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 mb-8">
+            <ChevronLeft size={16} />
+            Back to Shop
+          </Link>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
+            {/* Product Image */}
+            <div className="flex flex-col gap-4">
+              <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
+                <img
+                  src={product.imageSrc}
+                  alt={product.imageAlt}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <div className="grid grid-cols-4 gap-2">
+                {[1, 2, 3, 4].map((i) => (
+                  <div key={i} className="aspect-square bg-gray-200 rounded-lg">
+                    <img
+                      src={product.imageSrc}
+                      alt={`Product view ${i}`}
+                      className="w-full h-full object-cover cursor-pointer hover:opacity-75"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Product Details */}
+            <div className="flex flex-col gap-6">
+              {/* Brand and Title */}
+              <div>
+                <p className="text-sm text-gray-600 mb-2">{product.brand}</p>
+                <h1 className="text-3xl md:text-4xl font-bold mb-2">{product.name}</h1>
+                
+                {/* Rating */}
+                <div className="flex items-center gap-2 mb-4">
+                  <div className="flex gap-1">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                      <span key={i} className={i < Math.floor(product.rating) ? "text-yellow-400" : "text-gray-300"}>
+                        ★
+                      </span>
+                    ))}
+                  </div>
+                  <span className="text-sm text-gray-600">({product.reviewCount} reviews)</span>
+                </div>
+              </div>
+
+              {/* Price and Stock */}
+              <div className="border-t border-b py-4">
+                <p className="text-3xl font-bold mb-2">{product.price}</p>
+                <p className={`text-sm font-medium ${
+                  product.stock > 10 ? "text-green-600" : product.stock > 0 ? "text-orange-600" : "text-red-600"
+                }`}>
+                  {product.stock > 0 ? (
+                    <>
+                      <span className="inline-block w-2 h-2 bg-current rounded-full mr-2"></span>
+                      {product.stock} in stock
+                    </>
+                  ) : (
+                    "Out of stock"
+                  )}
+                </p>
+              </div>
+
+              {/* Description */}
+              <div>
+                <h2 className="text-lg font-semibold mb-3">Product Description</h2>
+                <p className="text-gray-700 leading-relaxed">{product.description}</p>
+              </div>
+
+              {/* Size Selection */}
+              <div>
+                <h2 className="text-lg font-semibold mb-3">Select Size</h2>
+                <div className="grid grid-cols-4 gap-2 mb-4">
+                  {product.size.map((size) => (
+                    <button
+                      key={size}
+                      onClick={() => setSelectedSize(size)}
+                      className={`py-3 px-2 rounded-lg border-2 text-center font-medium transition ${
+                        selectedSize === size
+                          ? "border-blue-600 bg-blue-50 text-blue-600"
+                          : "border-gray-300 hover:border-gray-400"
+                      }`}
+                    >
+                      {size}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Quantity and Actions */}
+              <div className="flex items-center gap-4">
+                <div className="flex items-center border rounded-lg">
+                  <button
+                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                    className="px-4 py-2 hover:bg-gray-100"
+                  >
+                    −
+                  </button>
+                  <span className="px-4 py-2 font-medium">{quantity}</span>
+                  <button
+                    onClick={() => setQuantity(quantity + 1)}
+                    className="px-4 py-2 hover:bg-gray-100"
+                  >
+                    +
+                  </button>
+                </div>
+              </div>
+
+              {/* Add to Cart Button */}
+              <button
+                onClick={handleAddToCart}
+                disabled={product.stock === 0 || !selectedSize}
+                className={`py-4 px-6 rounded-lg font-semibold text-white text-lg transition flex items-center justify-center gap-2 ${
+                  addedToCart
+                    ? "bg-green-600 hover:bg-green-700"
+                    : product.stock === 0 || !selectedSize
+                    ? "bg-gray-400 cursor-not-allowed"
+                    : "bg-blue-600 hover:bg-blue-700"
+                }`}
+              >
+                {addedToCart ? (
+                  <>
+                    <Check size={20} />
+                    Added to Cart
+                  </>
+                ) : (
+                  "Add to Cart"
+                )}
+              </button>
+
+              {/* Wishlist and Share */}
+              <div className="flex gap-3">
+                <button
+                  onClick={() => setIsFavorited(!isFavorited)}
+                  className={`flex-1 py-3 px-4 border-2 rounded-lg font-semibold transition ${
+                    isFavorited
+                      ? "border-red-600 bg-red-50 text-red-600"
+                      : "border-gray-300 hover:border-gray-400"
+                  }`}
+                >
+                  <Heart size={20} className="inline mr-2" fill={isFavorited ? "currentColor" : "none"} />
+                  {isFavorited ? "Saved" : "Save"}
+                </button>
+                <button className="flex-1 py-3 px-4 border-2 border-gray-300 rounded-lg font-semibold hover:border-gray-400 transition">
+                  <Share2 size={20} className="inline mr-2" />
+                  Share
+                </button>
+              </div>
+
+              {/* Additional Info */}
+              <div className="bg-gray-50 rounded-lg p-4 space-y-2 text-sm">
+                <p>✓ 100% Authentic Guarantee</p>
+                <p>✓ Free Shipping on orders over $100</p>
+                <p>✓ 30-Day Return Policy</p>
+                <p>✓ Secure Checkout</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="garraagarmzz"
+          copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
+          columns={footerColumns}
+          ariaLabel="Site footer with navigation and company information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}