bender/c5532ddc-1ab8-4fef-a41a-60a13d372803
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #4

Merged
bender merged 2 commits from version_1 into main 2026-03-12 06:21:36 +00:00
Conversation 0 Commits 2 Files Changed 2 +41 -68
2 changed files with 41 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/page.tsx
View File

@@ -70,7 +70,7 @@ export default function HomePage() {
description="Discover authentic streetwear and casual apparel designed for urban culture. Premium quality, bold designs, and timeless aesthetics."
tag="New Collection"
tagIcon={Sparkles}
background={{ variant: "plain" }}
background={{ variant: "noiseDiagonalGradient" }}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-electric-scooter_23-2149356776.jpg", imageAlt: "Urban streetwear model wearing black jacket"},

107
src/app/product/[id]/page.tsx
View File

@@ -6,6 +6,7 @@ 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";
import { useParams } from "next/navigation";
const TikTok = (props: React.SVGProps<SVGSVGElement>) => (
<svg
@@ -20,27 +21,17 @@ const TikTok = (props: React.SVGProps<SVGSVGElement>) => (
</svg>
);
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"],
},
};
const products = [
{
id: "1", name: "Classic Black Hoodie", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg", description: "Our signature black hoodie crafted from premium organic cotton blend. Features a relaxed fit, front kangaroo pocket, and reinforced stitching for durability.", details: "Material: 60% organic cotton, 40% polyester | Fit: Oversized | Care: Machine wash cold"},
{
id: "2", name: "Vintage Denim Jacket", price: "$129.99", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg", description: "A timeless denim jacket with authentic vintage vibes. Perfect layering piece for any streetwear aesthetic.", details: "Material: 100% denim | Fit: Relaxed | Care: Machine wash cold"},
];
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);
export default function ProductPage() {
const params = useParams();
const productId = params.id as string;
const product = products.find((p) => p.id === productId) || products[0];
const navItems = [
{ name: "Shop", id: "products" },
@@ -50,6 +41,10 @@ export default function ProductPage({ params }: { params: { id: string } }) {
{ name: "Contact", id: "contact" },
];
const [selectedSize, setSelectedSize] = useState("M");
const [quantity, setQuantity] = useState(1);
const [isFavorited, setIsFavorited] = useState(false);
const socialLinks = [
{ icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
{ icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
@@ -86,33 +81,31 @@ export default function ProductPage({ params }: { params: { id: string } }) {
</Link>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="flex items-center justify-center">
<div className="flex items-center justify-center bg-card/30 rounded-soft p-8">
<img
src={product.image}
src={product.imageSrc}
alt={product.name}
className="w-full h-auto object-cover rounded-soft"
className="max-w-md w-full h-auto object-cover rounded-soft"
/>
</div>
<div className="flex flex-col justify-center">
<div className="flex flex-col justify-start">
<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>
<p className="text-foreground/70 mb-8">{product.description}</p>
<p className="text-foreground/70 mb-8 text-lg">{product.description}</p>
<div className="mb-8">
<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) => (
<h3 className="text-sm font-semibold text-foreground mb-3">Size</h3>
<div className="flex gap-3">
{["XS", "S", "M", "L", "XL", "XXL"].map((size) => (
<button
key={size}
onClick={() => setSelectedSize(size)}
className={`px-4 py-2 rounded-soft border transition-colors ${
selectedSize === size
? "bg-background-accent text-primary-cta-text border-background-accent"
: "border-accent/50 text-foreground hover:border-accent"
: "border-accent/30 text-foreground hover:border-background-accent"
}`}
>
{size}
@@ -122,65 +115,45 @@ export default function ProductPage({ params }: { params: { id: string } }) {
</div>
<div className="mb-8">
<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-4 py-2 rounded-soft border transition-colors ${
selectedColor === color
? "bg-background-accent text-primary-cta-text border-background-accent"
: "border-accent/50 text-foreground hover:border-accent"
}`}
>
{color}
</button>
))}
</div>
</div>
<div className="mb-8">
<label className="block text-sm font-semibold text-foreground mb-3">
Quantity
</label>
<div className="flex items-center gap-4">
<h3 className="text-sm font-semibold text-foreground mb-3">Quantity</h3>
<div className="flex items-center gap-3 w-fit">
<button
onClick={() => setQuantity(Math.max(1, quantity - 1))}
className="px-4 py-2 border border-accent/50 rounded-soft hover:bg-accent/10"
className="px-3 py-2 border border-accent/30 rounded-soft hover:bg-accent/10 transition-colors"
>
−
</button>
<span className="text-lg font-semibold text-foreground w-12 text-center">
{quantity}
</span>
<span className="w-12 text-center font-semibold text-foreground">{quantity}</span>
<button
onClick={() => setQuantity(quantity + 1)}
className="px-4 py-2 border border-accent/50 rounded-soft hover:bg-accent/10"
className="px-3 py-2 border border-accent/30 rounded-soft hover:bg-accent/10 transition-colors"
>
+
</button>
</div>
</div>
<div className="flex gap-4">
<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">
<div className="flex gap-4 mb-8">
<button className="flex-1 px-8 py-4 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
onClick={() => setIsFavorited(!isFavorited)}
className={`px-6 py-3 border rounded-soft transition-colors ${
className={`px-6 py-4 rounded-soft border transition-colors ${
isFavorited
? "bg-background-accent/20 border-background-accent text-background-accent"
: "border-accent/50 text-foreground hover:border-accent"
? "bg-background-accent/20 border-background-accent"
: "border-accent/30 hover:border-background-accent"
}`}
>
<Heart size={20} fill={isFavorited ? "currentColor" : "none"} />
<Heart size={20} className={isFavorited ? "fill-background-accent text-background-accent" : "text-foreground"} />
</button>
</div>
<div className="pt-8 border-t border-accent/20">
<h3 className="text-sm font-semibold text-foreground mb-3">Product Details</h3>
<p className="text-foreground/70 text-sm">{product.details}</p>
</div>
</div>
</div>
</div>