Update src/app/product/[id]/page.tsx
This commit is contained in:
@@ -1,90 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { ShoppingCart, Instagram, Twitter, Facebook, Pinterest } from "lucide-react";
|
||||
import { Instagram, Twitter, Facebook } from "lucide-react";
|
||||
|
||||
export default function ProductPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Men", id: "/men" },
|
||||
{ name: "Women", id: "/women" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const relatedProducts = [
|
||||
{
|
||||
id: "product-002",
|
||||
name: "Minimal Modern Tee",
|
||||
price: "$44.99",
|
||||
variant: "White • 3 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/merry-christmas-with-creative-card_23-2147578466.jpg?_wi=8",
|
||||
imageAlt: "Minimal modern design graphic tee",
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "product-003",
|
||||
name: "Vibrant Artistic Print",
|
||||
price: "$54.99",
|
||||
variant: "Multi • 4 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gospel-word-concept_23-2148717553.jpg?_wi=9",
|
||||
imageAlt: "Vibrant artistic graphic t-shirt",
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "product-004",
|
||||
name: "Contemporary Design Tee",
|
||||
price: "$49.99",
|
||||
variant: "Navy • 6 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/crystal-typeface_1284-46616.jpg?_wi=9",
|
||||
imageAlt: "Contemporary design graphic tee",
|
||||
isFavorited: false,
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex Johnson",
|
||||
handle: "@alexstyle",
|
||||
testimonial: "Amazing quality and design! The fit is perfect and the graphic print is stunning. Already ordered my second tee!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-smiling-boy-cafe_23-2148436234.jpg?_wi=3",
|
||||
imageAlt: "Alex Johnson profile",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah Chen",
|
||||
handle: "@sarahwears",
|
||||
testimonial: "Love these tees! The printing is sharp, the material is soft, and the designs are so unique. Best streetwear brand ever!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling_1187-1107.jpg?_wi=3",
|
||||
imageAlt: "Sarah Chen profile",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Marcus Williams",
|
||||
handle: "@marcusfashion",
|
||||
testimonial: "Great tees with excellent customer service. The designs stand out and compliments keep coming. Highly recommended!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1674.jpg?_wi=3",
|
||||
imageAlt: "Marcus Williams profile",
|
||||
},
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
|
||||
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
||||
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
|
||||
{ icon: Pinterest, href: "https://pinterest.com", ariaLabel: "Pinterest" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
@@ -101,75 +22,28 @@ export default function ProductPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Your Logo"
|
||||
navItems={navItems}
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Men", id: "/men" },
|
||||
{ name: "Women", id: "/women" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
button={{ text: "Cart", href: "/cart" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-details" data-section="product-details" className="mx-auto px-4 md:px-6 py-20">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
|
||||
<div className="flex items-center justify-center bg-gray-100 rounded-lg overflow-hidden h-96">
|
||||
<img
|
||||
src="http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448773.jpg"
|
||||
alt="Bold Street Statement Tee"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-2">Bold Street Statement Tee</h1>
|
||||
<p className="text-lg text-gray-600 mb-4">Black • 5 Colors Available</p>
|
||||
<p className="text-3xl font-semibold text-accent mb-6">$49.99</p>
|
||||
<p className="text-gray-700 leading-relaxed mb-8">
|
||||
Elevate your streetwear game with our Bold Street Statement Tee. Featuring premium quality fabric, exceptional graphic printing, and a modern design that stands out. Perfect for making a statement with style and confidence.
|
||||
</p>
|
||||
<div className="flex gap-4 mb-8">
|
||||
<button className="px-8 py-3 bg-foreground text-white rounded-lg font-semibold hover:bg-opacity-90 transition">
|
||||
Add to Cart
|
||||
</button>
|
||||
<button className="px-8 py-3 border-2 border-foreground text-foreground rounded-lg font-semibold hover:bg-foreground hover:text-white transition">
|
||||
View Size Guide
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="related-products" data-section="related-products">
|
||||
<ProductCardFour
|
||||
title="You Might Also Like"
|
||||
description="Explore more designs from our collection"
|
||||
tag="Related"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={relatedProducts}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-testimonials" data-section="product-testimonials">
|
||||
<TestimonialCardThirteen
|
||||
title="Why Customers Love Our Tees"
|
||||
description="Real reviews from customers who've made the switch"
|
||||
tag="Reviews"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
showRating={true}
|
||||
testimonials={testimonials}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Your Logo"
|
||||
copyrightText="© 2025 Your Logo. All rights reserved."
|
||||
socialLinks={socialLinks}
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
|
||||
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
||||
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user