From 7b1b47568bc4f2ba5ecdb6c78379e63898bba175 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 12 Mar 2026 13:44:32 +0000
Subject: [PATCH 1/4] Update src/app/cart/page.tsx

---
 src/app/cart/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index db2a060..e110355 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -59,7 +59,7 @@ export default function CartPage() {
   const tax = subtotal * 0.08;
   const total = subtotal + shipping + tax;
 
-  const socialLinks: Array<{ icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; href: string; ariaLabel: string }> = [
+  const socialLinks = [
     { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
     { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
     { icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
-- 
2.49.1


From 28e04d57a540ab1c318a50c7e0117a590c41b23e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 12 Mar 2026 13:44:32 +0000
Subject: [PATCH 2/4] Update src/app/page.tsx

---
 src/app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8d62959..cd0c949 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -34,7 +34,7 @@ export default function HomePage() {
     { name: "Contact", id: "contact" },
   ];
 
-  const socialLinks: Array<{ icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; href: string; ariaLabel: string }> = [
+  const socialLinks = [
     { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
     { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
     { icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
-- 
2.49.1


From e024dff0ce6ba6b9f6e6f9a94123292649160a9c Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 12 Mar 2026 13:44:33 +0000
Subject: [PATCH 3/4] Update src/app/product/[id]/page.tsx

---
 src/app/product/[id]/page.tsx | 144 +++++++++++++++++++++-------------
 1 file changed, 90 insertions(+), 54 deletions(-)

diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
index 96c87a9..fcec043 100644
--- a/src/app/product/[id]/page.tsx
+++ b/src/app/product/[id]/page.tsx
@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import { Instagram, Twitter, Youtube, ShoppingCart, Heart } from "lucide-react";
+import { Instagram, Twitter, Youtube, Heart, Minus, Plus } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 
@@ -20,7 +20,7 @@ const TikTok = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export default function ProductDetailPage() {
+export default function ProductPage({ params }: { params: { id: string } }) {
   const navItems = [
     { name: "Shop", id: "products" },
     { name: "Collections", id: "collections" },
@@ -30,18 +30,21 @@ export default function ProductDetailPage() {
   ];
 
   const [quantity, setQuantity] = useState(1);
+  const [isFavorited, setIsFavorited] = useState(false);
   const [selectedSize, setSelectedSize] = useState("M");
   const [selectedColor, setSelectedColor] = useState("Black");
 
   const product = {
-    id: "1",    name: "Classic Black Hoodie",    price: 89.99,
+    id: params.id,
+    name: "Classic Black Hoodie",    price: 89.99,
     rating: 4.8,
-    reviews: 124,
-    description: "Premium quality streetwear hoodie with authentic urban style. Crafted from 100% cotton for maximum comfort and durability. Perfect for everyday wear or layering. Features a relaxed fit and quality embroidered details.",    imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg",    sizes: ["XS", "S", "M", "L", "XL", "2XL"],
-    colors: ["Black", "Gray", "Navy", "White"],
+    reviews: 142,
+    imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg",    imageAlt: "Classic black oversized hoodie",    description: "Premium quality hoodie crafted from sustainable cotton blend. Features a comfortable oversized fit, kangaroo pocket, and adjustable drawstring hood. Perfect for casual wear or streetwear styling.",    sizes: ["XS", "S", "M", "L", "XL", "XXL"],
+    colors: ["Black", "Navy", "Heather Gray", "White"],
+    inStock: true,
   };
 
-  const socialLinks: Array<{ icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; href: string; ariaLabel: string }> = [
+  const socialLinks = [
     { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
     { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
     { icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
@@ -78,36 +81,54 @@ export default function ProductDetailPage() {
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
               {/* Product Image */}
-              <div className="flex items-center justify-center bg-card/30 rounded-soft overflow-hidden h-96 md:h-full">
-                <img
-                  src={product.imageSrc}
-                  alt={product.name}
-                  className="w-full h-full object-cover"
-                />
+              <div className="flex items-center justify-center">
+                <div className="w-full aspect-square bg-card rounded-soft overflow-hidden">
+                  <img
+                    src={product.imageSrc}
+                    alt={product.imageAlt}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
               </div>
 
               {/* Product Details */}
-              <div>
-                <h1 className="text-4xl font-bold text-foreground mb-2">{product.name}</h1>
-                <div className="flex items-center gap-4 mb-6">
-                  <div className="text-xl font-semibold text-background-accent">${product.price}</div>
-                  <div className="text-sm text-foreground/70">⭐ {product.rating} ({product.reviews} reviews)</div>
+              <div className="flex flex-col justify-center">
+                <div className="mb-4">
+                  <h1 className="text-4xl font-bold text-foreground mb-2">{product.name}</h1>
+                  <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-1">
+                      <span className="text-yellow-400">★</span>
+                      <span className="text-foreground font-semibold">{product.rating}</span>
+                      <span className="text-foreground/70 text-sm">({product.reviews} reviews)</span>
+                    </div>
+                    {product.inStock ? (
+                      <span className="text-background-accent font-semibold">In Stock</span>
+                    ) : (
+                      <span className="text-red-500 font-semibold">Out of Stock</span>
+                    )}
+                  </div>
                 </div>
 
-                <p className="text-foreground/80 mb-8 leading-relaxed">{product.description}</p>
+                <p className="text-2xl font-bold text-background-accent mb-6">
+                  ${product.price.toFixed(2)}
+                </p>
+
+                <p className="text-foreground/80 mb-8 leading-relaxed">
+                  {product.description}
+                </p>
 
                 {/* Size Selection */}
-                <div className="mb-8">
-                  <label className="block text-sm font-semibold text-foreground mb-3">Size</label>
-                  <div className="flex gap-3 flex-wrap">
+                <div className="mb-6">
+                  <label className="block text-foreground font-semibold mb-3">Size</label>
+                  <div className="flex gap-2 flex-wrap">
                     {product.sizes.map((size) => (
                       <button
                         key={size}
                         onClick={() => setSelectedSize(size)}
-                        className={`px-4 py-2 rounded-soft border transition-colors ${
+                        className={`px-4 py-2 rounded-soft font-semibold transition-colors ${
                           selectedSize === size
-                            ? "bg-background-accent text-primary-cta-text border-background-accent"
-                            : "border-accent/30 text-foreground hover:border-accent/60"
+                            ? "bg-background-accent text-primary-cta-text"
+                            : "border border-accent/50 text-foreground hover:bg-accent/10"
                         }`}
                       >
                         {size}
@@ -117,17 +138,17 @@ export default function ProductDetailPage() {
                 </div>
 
                 {/* Color Selection */}
-                <div className="mb-8">
-                  <label className="block text-sm font-semibold text-foreground mb-3">Color</label>
-                  <div className="flex gap-3">
+                <div className="mb-6">
+                  <label className="block text-foreground font-semibold mb-3">Color</label>
+                  <div className="flex gap-2 flex-wrap">
                     {product.colors.map((color) => (
                       <button
                         key={color}
                         onClick={() => setSelectedColor(color)}
-                        className={`px-4 py-2 rounded-soft border transition-colors ${
+                        className={`px-4 py-2 rounded-soft font-semibold transition-colors ${
                           selectedColor === color
-                            ? "bg-background-accent text-primary-cta-text border-background-accent"
-                            : "border-accent/30 text-foreground hover:border-accent/60"
+                            ? "bg-background-accent text-primary-cta-text"
+                            : "border border-accent/50 text-foreground hover:bg-accent/10"
                         }`}
                       >
                         {color}
@@ -138,40 +159,55 @@ export default function ProductDetailPage() {
 
                 {/* Quantity Selection */}
                 <div className="mb-8">
-                  <label className="block text-sm font-semibold text-foreground mb-3">Quantity</label>
+                  <label className="block text-foreground font-semibold mb-3">Quantity</label>
                   <div className="flex items-center gap-4">
-                    <button
-                      onClick={() => setQuantity(Math.max(1, quantity - 1))}
-                      className="px-4 py-2 border border-accent/30 rounded-soft hover:bg-accent/10 transition-colors"
-                    >
-                      −
-                    </button>
-                    <span className="w-10 text-center font-semibold text-foreground">{quantity}</span>
-                    <button
-                      onClick={() => setQuantity(quantity + 1)}
-                      className="px-4 py-2 border border-accent/30 rounded-soft hover:bg-accent/10 transition-colors"
-                    >
-                      +
-                    </button>
+                    <div className="flex items-center gap-3 bg-accent/10 rounded-soft p-3">
+                      <button
+                        onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                        className="p-1 hover:bg-accent/20 rounded transition-colors"
+                      >
+                        <Minus size={18} className="text-foreground" />
+                      </button>
+                      <span className="w-8 text-center text-foreground font-semibold text-lg">
+                        {quantity}
+                      </span>
+                      <button
+                        onClick={() => setQuantity(quantity + 1)}
+                        className="p-1 hover:bg-accent/20 rounded transition-colors"
+                      >
+                        <Plus size={18} className="text-foreground" />
+                      </button>
+                    </div>
                   </div>
                 </div>
 
-                {/* Action Buttons */}
+                {/* Add to Cart */}
                 <div className="flex gap-4 mb-8">
-                  <button className="flex-1 px-8 py-3 bg-background-accent text-primary-cta-text font-semibold rounded-soft hover:bg-primary-cta transition-colors flex items-center justify-center gap-2">
-                    <ShoppingCart size={20} />
+                  <button className="flex-1 px-8 py-4 bg-background-accent text-primary-cta-text font-bold rounded-soft hover:bg-primary-cta transition-colors">
                     Add to Cart
                   </button>
-                  <button className="px-6 py-3 border border-accent/30 text-foreground rounded-soft hover:bg-accent/10 transition-colors">
-                    <Heart size={20} />
+                  <button
+                    onClick={() => setIsFavorited(!isFavorited)}
+                    className="px-6 py-4 border border-accent/50 rounded-soft hover:bg-accent/10 transition-colors"
+                  >
+                    <Heart
+                      size={24}
+                      className={isFavorited ? "fill-red-500 text-red-500" : "text-foreground"}
+                    />
                   </button>
                 </div>
 
                 {/* Additional Info */}
-                <div className="border-t border-accent/20 pt-6 space-y-3">
-                  <p className="text-sm text-foreground/70">✓ Free Shipping on orders over $150</p>
-                  <p className="text-sm text-foreground/70">✓ 30-Day Money Back Guarantee</p>
-                  <p className="text-sm text-foreground/70">✓ Premium Quality Materials</p>
+                <div className="border-t border-accent/20 pt-6 space-y-4">
+                  <div className="flex justify-between text-foreground/70">
+                    <span>Free shipping on orders over $150</span>
+                  </div>
+                  <div className="flex justify-between text-foreground/70">
+                    <span>30-day returns and exchanges</span>
+                  </div>
+                  <div className="flex justify-between text-foreground/70">
+                    <span>Secure checkout</span>
+                  </div>
                 </div>
               </div>
             </div>
-- 
2.49.1


From 0e817d1e382c1dc5260bab7b028d4391f9525e68 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 12 Mar 2026 13:44:33 +0000
Subject: [PATCH 4/4] Update src/app/shop/page.tsx

---
 src/app/shop/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index aa4492b..9828595 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -31,7 +31,7 @@ export default function ShopPage() {
     { name: "Contact", id: "contact" },
   ];
 
-  const socialLinks: Array<{ icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; href: string; ariaLabel: string }> = [
+  const socialLinks = [
     { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
     { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
     { icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
-- 
2.49.1