Add src/app/product-detail/page.tsx
This commit is contained in:
126
src/app/product-detail/page.tsx
Normal file
126
src/app/product-detail/page.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { Sparkles, ShoppingCart, Heart, Share2, Scale } from "lucide-react"; // Example icons
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const product = {
|
||||
name: "Minimalist Wooden Desk", price: "$299.00", discount: "33% off", originalPrice: "$450.00", stockStatus: "In Stock", deliveryEstimate: "2-3 business days", images: [
|
||||
{ src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-1.webp", alt: "Product image 1" },
|
||||
{ src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-2.webp", alt: "Product image 2" },
|
||||
{ src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-3.webp", alt: "Product image 3" },
|
||||
{ src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-4.webp", alt: "Product image 4" }
|
||||
],
|
||||
description: "Experience the perfect blend of functionality and Scandinavian elegance with our Minimalist Wooden Desk. Crafted from sustainably sourced oak, this desk offers a spacious work surface and a clean, uncluttered design that enhances any modern interior. Its robust construction ensures durability, while the natural wood grain adds a touch of organic warmth to your workspace.", specifications: [
|
||||
{ label: "Dimensions", value: "L 120cm x W 60cm x H 75cm" },
|
||||
{ label: "Material", value: "Solid Oak, Veneer" },
|
||||
{ label: "Weight", value: "25 kg" },
|
||||
{ label: "Color", value: "Natural Oak" }
|
||||
],
|
||||
materials: "100% FSC-certified solid oak and oak veneer. Finished with a non-toxic, water-based lacquer.", sustainability: "Our desk is crafted from wood sourced from responsibly managed forests, ensuring environmental protection and social benefits. We prioritize minimal waste production and use eco-friendly packaging materials.", shippingReturns: {
|
||||
shipping: "Free standard shipping on all orders over $100. Expedited shipping options available at checkout. Estimated delivery: 2-3 business days.", returns: "30-day hassle-free returns. Product must be in original condition and packaging. See full policy for details."
|
||||
}
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Product', id: '/product-detail' }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider attribute="class" enableSystem>
|
||||
<NavbarStyleApple navItems={navItems} brandName="Hara Minimalist Living" />
|
||||
<main className="min-h-screen bg-background text-foreground">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Product Gallery & Image Zoom */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="relative overflow-hidden rounded-lg shadow-lg aspect-w-16 aspect-h-9 sm:aspect-h-10 md:aspect-h-11 lg:aspect-h-12 xl:aspect-h-13 2xl:aspect-h-14">
|
||||
<img
|
||||
src={product.images[0].src}
|
||||
alt={product.images[0].alt}
|
||||
className="w-full h-full object-cover transition-transform duration-500 hover:scale-110 cursor-zoom-in"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{product.images.map((image, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
className="w-full h-24 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-primary-cta"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Info & Actions */}
|
||||
<div className="flex flex-col gap-6">
|
||||
<h1 className="text-4xl font-extrabold text-foreground">{product.name}</h1>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-bold text-primary-cta">{product.price}</span>
|
||||
<span className="text-lg text-muted-foreground line-through">{product.originalPrice}</span>
|
||||
<span className="text-lg font-semibold text-accent">{product.discount}</span>
|
||||
</div>
|
||||
<div className="text-md text-foreground flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-accent" /> {product.stockStatus}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Delivery: {product.deliveryEstimate}</p>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button className="flex-1 px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-lg font-semibold shadow-md hover:bg-primary-cta/90 transition-colors flex items-center justify-center gap-2">
|
||||
<ShoppingCart className="h-5 w-5" /> Add to Cart
|
||||
</button>
|
||||
<button className="flex-1 px-6 py-3 bg-foreground text-background rounded-lg font-semibold shadow-md hover:bg-foreground/90 transition-colors">
|
||||
Buy Now
|
||||
</button>
|
||||
<button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
|
||||
<Heart className="h-5 w-5" />
|
||||
</button>
|
||||
<button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
|
||||
<Scale className="h-5 w-5" />
|
||||
</button>
|
||||
<button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
|
||||
<Share2 className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Product Details Sections */}
|
||||
<div className="mt-8 space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">Description</h2>
|
||||
<p className="text-muted-foreground">{product.description}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">Specifications</h2>
|
||||
<ul className="list-disc list-inside text-muted-foreground space-y-1">
|
||||
{product.specifications.map((spec, index) => (
|
||||
<li key={index}>
|
||||
<strong>{spec.label}:</strong> {spec.value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">Materials</h2>
|
||||
<p className="text-muted-foreground">{product.materials}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">Sustainability</h2>
|
||||
<p className="text-muted-foreground">{product.sustainability}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">Shipping & Returns</h2>
|
||||
<p className="text-muted-foreground mb-2"><strong>Shipping:</strong> {product.shippingReturns.shipping}</p>
|
||||
<p className="text-muted-foreground"><strong>Returns:</strong> {product.shippingReturns.returns}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user