@@ -3,12 +3,11 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider" ;
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered" ;
import FooterCard from "@/components/sections/footer/FooterCard" ;
import { Instagram , Twitter , Youtube , Heart , ShoppingCart } from "lucide-react" ;
import { Instagram , Twitter , Youtube } from "lucide-react" ;
import Link from "next/link" ;
import { useState } from "react" ;
import type { LucideIcon } from "lucide-react" ;
const TikTok : LucideIcon = ( props : React.SVGProps < SVGSVGElement > ) = > (
const TikTok = ( props : React.SVGProps < SVGSVGElement > ) = > (
< svg
xmlns = "http://www.w3.org/2000/svg"
width = "24"
@@ -19,9 +18,29 @@ const TikTok: LucideIcon = (props: React.SVGProps<SVGSVGElement>) => (
>
< path d = "M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.68v13.67a2.4 2.4 0 1 1-2.4-2.4c.34 0 .67.03 1 .09V9.41a7.12 7.12 0 0 0-1-.08C5.89 9.33 2 13.46 2 18.13s3.88 8.81 8.74 8.81c4.65 0 8.6-3.36 8.6-7.53 0-.13 0-.26 0-.39a5.5 5.5 0 0 0-.56-1.78h.09c4.87 0 8.82-3.37 8.82-7.53 0-4.16-3.96-7.53-8.82-7.53z" / >
< / svg >
) as 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" ] ;
export default function ProductPage() {
const navItems = [
{ name : "Shop" , id : "products" } ,
{ name : "Collections" , id : "collections" } ,
@@ -30,11 +49,6 @@ export default function ProductPage() {
{ name : "Contact" , id : "contact" } ,
] ;
const [ selectedSize , setSelectedSize ] = useState ( "M" ) ;
const [ selectedColor , setSelectedColor ] = useState ( "Black" ) ;
const [ quantity , setQuantity ] = useState ( 1 ) ;
const [ isFavorited , setIsFavorited ] = useState ( false ) ;
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" } ,
@@ -71,39 +85,23 @@ export default function ProductPage() {
< / Link >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-12" >
{ /* Product Image */ }
< div className = "flex items-center justify-center bg-card/50 border border-accent/20 rounded-soft h-96 md:h-auto" >
< img
src = "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg"
alt = "Classic Black Hoodie"
className = "w-full h-full object-cover rounded-soft"
/ >
< div className = "bg-card/30 rounded-soft overflow-hidden h-96 md:h-full" >
< img src = { product . image } alt = { product . name } className = "w-full h-full object-cover" / >
< / div >
{ /* Product Details */ }
< div >
< div className = "mb-6" >
< p className = "text-accent text-sm font-semibold mb-2" > Premium Collection < / p >
< h1 className = "text-4xl font-semibold text-foreground mb-3" > Classic Black Hoodie < / h1 >
< p className = "text-2xl font-bold text-background-accent mb-4" > $89 . 99 < / p >
< p className = "text-foreground/70 leading-relaxed" >
Experience the perfect blend of comfort and style with our Classic Black Hoodie . Crafted from premium materials , this versatile piece is ideal for layering or wearing alone . The spacious fit and quality construction make it a wardrobe essential for any streetwear enthusiast .
< / p >
< / div >
< div className = "flex flex-col justify-center" >
< h1 className = "text-4xl font-bold text-foreground mb-4" > { product . name } < / h1 >
< p className = "text-2xl font-semibold text-background-accent mb-6" > $ { product . price . toFixed ( 2 ) } < / p >
{ /* Color Selection */ }
< div className = "mb-6" >
< label className = "block text-foreground font-semibold mb-3 " > Color < / label >
< p className = "text-foreground/80 text-lg mb-8 leading-relaxed" > { product . description } < / p >
< div className = "mb-8 " >
< h3 className = "text-lg font-semibold text-foreground mb-4" > Colors < / h3 >
< div className = "flex gap-3" >
{ [ "Black" , "Grey" , "Navy" ] . map ( ( color ) = > (
{ product . colors . map ( ( color ) = > (
< button
key = { color }
onClick = { ( ) = > setSelectedColor ( color ) }
className = { ` px-4 py-2 rounded-soft border-2 transition-all ${
selectedColor === color
? "border-background-accent bg-background-accent/10"
: "border-accent/30 hover:border-accent/50"
} ` }
className = "px-4 py-2 border border-accent/30 rounded-soft text-foreground hover:border-background-accent transition-colors"
>
{ color }
< / button >
@@ -111,19 +109,13 @@ export default function ProductPage() {
< / div >
< / div >
{ /* Size Selection */ }
< div className = "mb-6" >
< label className = "block text-foreground font-semibold mb-3" > Size < / label >
< div className = "flex gap-3" >
{ [ "XS" , "S" , "M" , "L" , "XL" , "XXL" ] . map ( ( size ) = > (
< div className = "mb-8" >
< h3 className = "text-lg font-semibold text-foreground mb-4" > Sizes < / h3 >
< div className = "flex flex-wrap gap-3" >
{ product . sizes . map ( ( size ) = > (
< button
key = { size }
onClick = { ( ) = > setSelectedSize ( size ) }
className = { ` w-10 h-10 rounded-soft border-2 transition-all flex items-center justify-center ${
selectedSize === size
? "border-background-accent bg-background-accent/10"
: "border-accent/30 hover:border-accent/50"
} ` }
className = "px-4 py-2 border border-accent/30 rounded-soft text-foreground hover:border-background-accent transition-colors"
>
{ size }
< / button >
@@ -131,84 +123,13 @@ export default function ProductPage() {
< / div >
< / div >
{ /* Quantity */ }
< div className = "mb-8" >
< label className = "block text-foreground font-semibold mb-3" > Quantity < / label >
< div className = "flex items-center gap-4 w-fit" >
< button
onClick = { ( ) = > setQuantity ( Math . max ( 1 , quantity - 1 ) ) }
className = "w-10 h-10 rounded-soft border border-accent/30 flex items-center justify-center hover:bg-accent/10"
>
−
< / button >
< span className = "text-lg font-semibold text-foreground w-8 text-center" > { quantity } < / span >
< button
onClick = { ( ) = > setQuantity ( quantity + 1 ) }
className = "w-10 h-10 rounded-soft border border-accent/30 flex items-center justify-center hover:bg-accent/10"
>
+
< / button >
< / div >
< / div >
< button className = "px-8 py-4 bg-background-accent text-primary-cta-text font-semibold rounded-soft hover:bg-primary-cta transition-colors w-full mb-4" >
Add to Cart
< / button >
{ /* Action Buttons */ }
< div className = "flex gap-4 mb-8" >
< buttonclassName = "flex-1 px-6 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 } / >
Add to Cart
< / button >
< button
onClick = { ( ) = > setIsFavorited ( ! isFavorited ) }
className = "px-6 py-3 border border-accent/50 text-foreground font-semibold rounded-soft hover:bg-accent/10 transition-colors flex items-center justify-center gap-2"
>
< Heart size = { 20 } fill = { isFavorited ? "currentColor" : "none" } / >
< / button >
< / div >
{ /* Product Info */ }
< div className = "bg-card/50 border border-accent/20 rounded-soft p-6 space-y-4" >
< div >
< p className = "text-accent font-semibold text-sm" > Material < / p >
< p className = "text-foreground" > 100 % Premium Cotton < / p >
< / div >
< div >
< p className = "text-accent font-semibold text-sm" > Shipping < / p >
< p className = "text-foreground" > Free shipping on orders over $150 < / p >
< / div >
< div >
< p className = "text-accent font-semibold text-sm" > Returns < / p >
< p className = "text-foreground" > 30 - day return policy < / p >
< / div >
< / div >
< / div >
< / div >
{ /* Related Products */ }
< div className = "mt-20" >
< h2 className = "text-3xl font-semibold text-foreground mb-8" > Related Products < / h2 >
< div className = "grid grid-cols-1 md:grid-cols-3 gap-6" >
{ [
{
name : "Vintage Denim Jacket" , price : "$129.99" , image : "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg" } ,
{
name : "Cargo Pants - Khaki" , price : "$79.99" , image : "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432334.jpg" } ,
{
name : "Oversized T-Shirt" , price : "$49.99" , image : "http://img.b2bpic.net/free-photo/teenager-boy-stylish-clothes-posing_23-2149085228.jpg" } ,
] . map ( ( product , i ) = > (
< Link key = { i } href = "#" className = "group" >
< div className = "bg-card/50 border border-accent/20 rounded-soft overflow-hidden mb-4 h-60" >
< img
src = { product . image }
alt = { product . name }
className = "w-full h-full object-cover group-hover:scale-105 transition-transform"
/ >
< / div >
< h3 className = "text-foreground font-semibold mb-2 group-hover:text-background-accent transition-colors" >
{ product . name }
< / h3 >
< p className = "text-background-accent font-semibold" > { product . price } < / p >
< / Link >
) ) }
< button className = "px-8 py-4 border border-accent/50 text-foreground font-semibold rounded-soft hover:bg-accent/10 transition-colors w-full" >
Save for Later
< / button >
< / div >
< / div >
< / div >