@@ -4,6 +4,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 Link from "next/link" ;
import { useState } from "react" ;
const TikTok = ( props : React.SVGProps < SVGSVGElement > ) = > (
@@ -19,7 +20,28 @@ const TikTok = (props: React.SVGProps<SVGSVGElement>) => (
< / svg >
) ;
export default function ProductPage() {
const products : { [ key : string ] : any } =
"1" : {
id : "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 black hoodie perfect for street style. Made with 100% organic cotton for maximum comfort." , sizes : [ "XS" , "S" , "M" , "L" , "XL" , "XXL" ] ,
colors : [ "Black" , "Charcoal" , "Navy" ] ,
} ,
"2" : {
id : "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 distressed details. Perfect layering piece for any streetwear outfit." , sizes : [ "XS" , "S" , "M" , "L" , "XL" ] ,
colors : [ "Indigo" , "Light Blue" , "Black" ] ,
} ,
"3" : {
id : "3" , name : "Cargo Pants - Khaki" , price : "$79.99" , image : "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432334.jpg" , description : "Multi-pocket cargo pants in breathable khaki. Comfortable and functional for everyday wear." , sizes : [ "28" , "30" , "32" , "34" , "36" ] ,
colors : [ "Khaki" , "Olive" , "Black" ] ,
} ,
} ;
export default function ProductPage ( { params } : { params : { id : string } } ) {
const product = products [ params . id ] || products [ "1" ] ;
const [ quantity , setQuantity ] = useState ( 1 ) ;
const [ selectedSize , setSelectedSize ] = useState ( product . sizes [ 0 ] ) ;
const [ selectedColor , setSelectedColor ] = useState ( product . colors [ 0 ] ) ;
const [ isFavorited , setIsFavorited ] = useState ( false ) ;
const navItems = [
{ name : "Shop" , id : "products" } ,
{ name : "Collections" , id : "collections" } ,
@@ -28,9 +50,12 @@ export default function ProductPage() {
{ name : "Contact" , id : "contact" } ,
] ;
const [ isFavorited , setIsFavorited ] = useState ( false ) ;
const [ selectedSize , setSelectedSize ] = useState ( "M" ) ;
const [ selectedColor , setSelectedColor ] = useState ( "Black" ) ;
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" } ,
{ icon : Youtube , href : "https://youtube.com/@umbra" , ariaLabel : "YouTube" } ,
] ;
return (
< ThemeProvider
@@ -56,57 +81,38 @@ export default function ProductPage() {
< div id = "product" data-section = "product" className = "mx-auto px-4 md:px-6" >
< div className = "py-20" >
< div className = "max-w-6xl mx-auto" >
< Link href = "/shop" className = "text-accent hover:text-background-accent mb-8 inline-block" >
← Back to Shop
< / Link >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-12" >
{ /* Product Image */ }
< div className = "relative" >
< div className = "bg-card/50 border border-accent/20 rounded-soft overflow-hidden aspect-square" >
< 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"
/ >
< / div >
< button
onClick = { ( ) = > setIsFavorited ( ! isFavorited ) }
className = "absolute top-4 right-4 p-3 bg-card/80 backdrop-blur rounded-soft hover:bg-background-accent transition-colors"
>
< Heart
size = { 24 }
className = { isFavorited ? "fill-background-accent text-background-accent" : "text-foreground" }
/ >
< / button >
< div className = "flex items-center justify-center" >
< img
src = { product . image }
alt = { product . name }
className = "w-full h-auto object-cover rounded-soft "
/ >
< / div >
{ /* Product Details */ }
< div className = "flex flex-col justify-start" >
< div className = "mb-8 " >
< p className = "text-accent text-sm font-semibold mb-2" > UMBRA COLLECTION < / p >
< h1 className = "text-4xl font-light text-foreground mb-4" > Classic Black Hoodie < / h1 >
< div className = "flex items-center gap-4" >
< span className = "text-3xl font-bold text-background-accent" > $89 . 99 < / span >
< span className = "text-foreground/50 line-through" > $129 . 99 < / span >
< span className = "text-background-accent text-sm font-semibold" > 30 % OFF < / span >
< / div >
< / div >
< div className = "flex flex-col justify-center" >
< h1 className = "text-4xl font-light text-foreground mb-4" > { product . name } < / h1 >
< p className = "text-3xl font-bold text-background-accent mb-6 " > { product . price } < / p >
< div className = "mb-8 pb-8 border-b border-accent/20" >
< p className = "text-foreground/70 leading-relaxed" >
Experience ultimate comfort and style with our Classic Black Hoodie . Crafted from premium materials , this versatile piece is perfect for urban exploration . Features a relaxed fit , warm lining , and timeless design that works with any streetwear ensemble .
< / p >
< / div >
< p className = "text-foreground/70 mb-8" > { product . description } < / p >
{ /* Size Selection */ }
< div className = "mb-8" >
< label className = "block text-foreground font-semibold mb-4 " > Size < / label >
< div className = "grid grid-cols-4 gap-3" >
{ [ "XS" , "S" , "M" , "L" , "XL" , "XXL" ] . map ( ( size ) = > (
< label className = "block text-sm font-semibold text-foreground mb-3 " >
Size
< / label >
< div className = "flex gap-3 flex-wrap" >
{ product . sizes . map ( ( size : string ) = > (
< button
key = { size }
onClick = { ( ) = > setSelectedSize ( size ) }
className = { ` py-3 px -2 rounded-soft border-2 font-semibold text-sm transition-all ${
className = { ` px-4 py -2 rounded-soft border transition-colors ${
selectedSize === size
? "border-background-accent bg-background-accent text-primary-cta-text"
: "border-accent/3 0 text-foreground hover:border-accent/50 "
? "bg-background-accent text-primary-cta-text border-background-accent "
: "border-accent/5 0 text-foreground hover:border-accent"
} ` }
>
{ size }
@@ -115,18 +121,19 @@ export default function ProductPage() {
< / div >
< / div >
{ /* Color Selection */ }
< div className = "mb-8" >
< label className = "block text-foreground font-semibold mb-4 " > Color < / label >
< div className = "flex gap-4" >
{ [ "Black" , "Grey" , "Navy" ] . map ( ( color ) = > (
< label className = "block text-sm font-semibold text-foreground mb-3 " >
Color
< / label >
< div className = "flex gap-3 flex-wrap" >
{ product . colors . map ( ( color : string ) = > (
< button
key = { color }
onClick = { ( ) = > setSelectedColor ( color ) }
className = { ` px-6 py-3 rounded-soft border-2 font-semibold transition-all ${
className = { ` px-4 py-2 rounded-soft border transition-colors ${
selectedColor === color
? "border-background-accent bg-background-accent text-primary-cta-text"
: "border-accent/3 0 text-foreground hover:border-accent/50 "
? "bg-background-accent text-primary-cta-text border-background-accent "
: "border-accent/5 0 text-foreground hover:border-accent"
} ` }
>
{ color }
@@ -135,32 +142,45 @@ export default function ProductPage() {
< / div >
< / div >
{ /* Add to Cart */ }
< div className = "mb-8" >
< label className = "block text-sm font-semibold text-foreground 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/50 rounded-soft hover:bg-accent/10"
>
−
< / button >
< span className = "text-lg font-semibold text-foreground w-12 text-center" >
{ quantity }
< / span >
< button
onClick = { ( ) = > setQuantity ( quantity + 1 ) }
className = "px-4 py-2 border border-accent/50 rounded-soft hover:bg-accent/10"
>
+
< / button >
< / div >
< / div >
< div className = "flex gap-4" >
< button className = "flex-1 px-8 py-4 bg-background-accent text-primary-cta-text font-semibold rounded-soft hover:bg-primary-cta transition-colors flex items-center justify-center gap-2" >
< button className = "flex-1 px-6 py-3 bg-background-accent text-primary-cta-text font-semibold rounded-soft hover:bg-primary-cta hover:text-primary-cta-text transition-colors flex items-center justify-center gap-2" >
< ShoppingCart size = { 20 } / >
Add to Cart
< / button >
< button className = "px-8 py-4 border border-accent/50 text-foreground font-semibold rounded-soft hover:bg-accent/10 transition-colors" >
Buy Now
< button
onClick = { ( ) = > setIsFavorited ( ! isFavorited ) }
className = { ` px-6 py-3 border rounded-soft transition-colors ${
isFavorited
? "bg-background-accent/20 border-background-accent text-background-accent"
: "border-accent/50 text-foreground hover:border-accent"
} ` }
>
< Heart size = { 20 } fill = { isFavorited ? "currentColor" : "none" } / >
< / button >
< / div >
{ /* Product Info */ }
< div className = "mt-12 pt-8 border-t border-accent/20 space-y-4" >
< div className = "flex justify-between" >
< span className = "text-foreground/70" > SKU : < / span >
< span className = "text-foreground font-semibold" > UMBRA - BH - 001 < / span >
< / div >
< div className = "flex justify-between" >
< span className = "text-foreground/70" > Material : < / span >
< span className = "text-foreground font-semibold" > 100 % Premium Cotton < / span >
< / div >
< div className = "flex justify-between" >
< span className = "text-foreground/70" > Care : < / span >
< span className = "text-foreground font-semibold" > Machine wash cold < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
@@ -171,12 +191,7 @@ export default function ProductPage() {
< FooterCard
logoText = "Umbra"
copyrightText = "© 2025 | Umbra Streetwear. All rights reserved."
socialLinks = { [
{ icon : Instagram , href : "https://instagram.com/umbra" , ariaLabel : "Instagram" } ,
{ icon : Twitter , href : "https://twitter.com/umbra" , ariaLabel : "Twitter" } ,
{ icon : TikTok as React . ComponentType < React.SVGProps < SVGSVGElement > > , href : "https://tiktok.com/@umbra" , ariaLabel : "TikTok" } ,
{ icon : Youtube , href : "https://youtube.com/@umbra" , ariaLabel : "YouTube" } ,
] }
socialLinks = { socialLinks }
/ >
< / div >
< / ThemeProvider >