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 #15

Merged
bender merged 4 commits from version_1 into main 2026-03-12 13:44:37 +00:00
Conversation 0 Commits 4 Files Changed 4 +93 -57
4 changed files with 93 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/cart/page.tsx
View File

@@ -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
src/app/page.tsx
View File

@@ -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" },

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

@@ -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
src/app/shop/page.tsx
View File

@@ -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" },