From b647f784d96f8e710ccff062ff234986074c867d Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 13:40:33 +0000 Subject: [PATCH 1/4] Update src/app/cart/page.tsx --- src/app/cart/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx index a853a82..8dde930 100644 --- a/src/app/cart/page.tsx +++ b/src/app/cart/page.tsx @@ -8,7 +8,7 @@ import Link from "next/link"; import { useState } from "react"; import type { LucideIcon } from "lucide-react"; -const TikTok = (props: React.SVGProps) => ( +const TikTok = (props: React.SVGProps): LucideIcon => ( ) => ( > -) as unknown as LucideIcon; +) as any; export default function CartPage() { const navItems = [ -- 2.49.1 From 2642d5e23666abd088a8fded033da71a8c918f97 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 13:40:34 +0000 Subject: [PATCH 2/4] Update src/app/page.tsx --- src/app/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index b15d97b..63622da 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -13,7 +13,7 @@ import Link from "next/link"; import { Sparkles, TrendingUp, Instagram, Twitter, Youtube } from "lucide-react"; import type { LucideIcon } from "lucide-react"; -const TikTok = (props: React.SVGProps) => ( +const TikTok = (props: React.SVGProps): LucideIcon => ( ) => ( > -) as unknown as LucideIcon; +) as any; export default function HomePage() { const navItems = [ -- 2.49.1 From b365c749cdaec44131d6c717e7862e15698a8364 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 13:40:34 +0000 Subject: [PATCH 3/4] Update src/app/product/[id]/page.tsx --- src/app/product/[id]/page.tsx | 208 +++++++++++++++++++++++++--------- 1 file changed, 155 insertions(+), 53 deletions(-) diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx index 9d97dd5..9b9fa8f 100644 --- a/src/app/product/[id]/page.tsx +++ b/src/app/product/[id]/page.tsx @@ -3,11 +3,12 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; import FooterCard from "@/components/sections/footer/FooterCard"; -import { Instagram, Twitter, Youtube } from "lucide-react"; +import { Instagram, Twitter, Youtube, Heart, ShoppingCart, Minus, Plus } from "lucide-react"; import Link from "next/link"; +import { useState } from "react"; import type { LucideIcon } from "lucide-react"; -const TikTok = (props: React.SVGProps) => ( +const TikTok = (props: React.SVGProps): LucideIcon => ( ) => ( > -) as unknown as LucideIcon; - -const productDetails: { [key: string]: { name: string; price: number; image: string; description: string; sizes: string[]; colors: string[] } } = { - "1": { - name: "Classic Black Hoodie", price: 89.99, - image: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg", description: "Premium oversized hoodie crafted from 100% organic cotton. Perfect for layering or wearing solo. Features a kangaroo pocket and adjustable drawstrings. Comfortable, durable, and timeless.", sizes: ["XS", "S", "M", "L", "XL", "XXL"], - colors: ["Black", "Charcoal", "Navy", "White"], - }, - "2": { - name: "Vintage Denim Jacket", price: 129.99, - image: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg", description: "Authentic vintage-inspired denim jacket with a modern fit. Featuring button closure, multiple pockets, and classic denim construction. A versatile staple for any wardrobe.", sizes: ["XS", "S", "M", "L", "XL"], - colors: ["Indigo", "Light Blue", "Black"], - }, - "3": { - name: "Cargo Pants - Khaki", price: 79.99, - image: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432334.jpg", description: "Comfortable cargo pants with multiple pockets and adjustable straps. Perfect for everyday wear with a practical, streetwear aesthetic. Premium cotton blend fabric.", sizes: ["XS", "S", "M", "L", "XL", "XXL"], - colors: ["Khaki", "Black", "Olive"], - }, -}; - -export default function ProductPage({ params }: { params: { id: string } }) { - const product = productDetails[params.id as keyof typeof productDetails] || productDetails["1"]; +) as any; +export default function ProductDetailPage() { const navItems = [ { name: "Shop", id: "products" }, { name: "Collections", id: "collections" }, @@ -49,6 +30,28 @@ export default function ProductPage({ params }: { params: { id: string } }) { { name: "Contact", id: "contact" }, ]; + const [quantity, setQuantity] = useState(1); + const [isFavorite, setIsFavorite] = useState(false); + const [selectedSize, setSelectedSize] = useState("M"); + const [selectedColor, setSelectedColor] = useState("Black"); + + const product = { + id: "1", name: "Classic Black Hoodie", price: 89.99, + originalPrice: 119.99, + rating: 4.8, + reviews: 128, + description: "Experience premium comfort with our Classic Black Hoodie. Crafted from high-quality materials, this versatile piece is perfect for any season. Features a spacious kangaroo pocket, drawstring hood, and relaxed fit that pairs well with any outfit.", images: [ + "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg", "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-electric-scooter_23-2149356776.jpg"], + sizes: ["XS", "S", "M", "L", "XL", "XXL"], + colors: ["Black", "Navy", "Gray", "Charcoal"], + specifications: [ + { label: "Material", value: "100% Premium Cotton" }, + { label: "Weight", value: "450 GSM" }, + { label: "Care", value: "Machine wash cold, tumble dry low" }, + { label: "Fit", value: "Relaxed fit" }, + ], + }; + const socialLinks: Array<{ icon: LucideIcon; href: string; ariaLabel: string }> = [ { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" }, { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" }, @@ -56,6 +59,14 @@ export default function ProductPage({ params }: { params: { id: string } }) { { icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" }, ]; + const handleAddToCart = () => { + console.log(`Added ${quantity} of ${product.name} (${selectedSize}, ${selectedColor}) to cart`); + }; + + const handleToggleFavorite = () => { + setIsFavorite(!isFavorite); + }; + return ( -
+
@@ -85,37 +96,65 @@ export default function ProductPage({ params }: { params: { id: string } }) {
-
- {product.name} + {/* Product Images */} +
+
+ {product.name} +
+
+ {product.images.map((img, idx) => ( +
+ {`${product.name} +
+ ))} +
-
+ {/* Product Details */} +

{product.name}

-

${product.price.toFixed(2)}

-

{product.description}

- -
-

Colors

-
- {product.colors.map((color) => ( - - ))} -
+
+ ${product.price} + ${product.originalPrice} + + {Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% OFF +
-
-

Sizes

-
+
+
+ {[...Array(5)].map((_, i) => ( + ★ + ))} +
+ + {product.rating} ({product.reviews} reviews) + +
+ +

{product.description}

+ + {/* Size Selection */} +
+ +
{product.sizes.map((size) => ( @@ -123,13 +162,76 @@ export default function ProductPage({ params }: { params: { id: string } }) {
- + {/* Color Selection */} +
+ +
+ {product.colors.map((color) => ( + + ))} +
+
- + {/* Quantity & Buttons */} +
+
+ + {quantity} + +
+ + + + +
+ + {/* Specifications */} +
+

Specifications

+
+ {product.specifications.map((spec, idx) => ( +
+ {spec.label} + {spec.value} +
+ ))} +
+
-- 2.49.1 From b6692a9a151b861a950ce09d2f2955260d63469f Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 13:40:35 +0000 Subject: [PATCH 4/4] Update src/app/shop/page.tsx --- src/app/shop/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx index def8cd4..ad2bdde 100644 --- a/src/app/shop/page.tsx +++ b/src/app/shop/page.tsx @@ -10,7 +10,7 @@ import Link from "next/link"; import { TrendingUp, Instagram, Twitter, Youtube } from "lucide-react"; import type { LucideIcon } from "lucide-react"; -const TikTok = (props: React.SVGProps) => ( +const TikTok = (props: React.SVGProps): LucideIcon => ( ) => ( > -) as unknown as LucideIcon; +) as any; export default function ShopPage() { const navItems = [ -- 2.49.1