Add src/app/products/[productId]/page.tsx
This commit is contained in:
182
src/app/products/[productId]/page.tsx
Normal file
182
src/app/products/[productId]/page.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import Image from 'next/image';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface ProductDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
description: string;
|
||||
details: string[]; // e.g., features, benefits
|
||||
}
|
||||
|
||||
const mockProducts: ProductDetail[] = [
|
||||
{
|
||||
id: "nasal-strips-1", name: "Original Nasal Strips (30-pack)", price: "$19.99", imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-girl-black-sportswear-with-headband-puzzled-standing-white-wall_141793-56736.jpg?_wi=1", imageAlt: "TAPE IT Original Nasal Strips 30-pack", description: "Enhance your breathing instantly with our original nasal strips. Designed for comfort and effective airflow improvement.", details: [
|
||||
"30 count pack for daily use", "Hypoallergenic adhesive", "Increases nasal airflow by up to 30%", "Reduces snoring and improves sleep quality", "Ideal for exercise and daily wear"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "nasal-strips-2", name: "Sensitive Skin Nasal Strips (30-pack)", price: "$22.99", imageSrc: "http://img.b2bpic.net/free-photo/future-mother-keeps-shoes-baby_8353-5121.jpg?_wi=1", imageAlt: "TAPE IT Sensitive Skin Nasal Strips 30-pack", description: "Gentle yet effective, our sensitive skin nasal strips provide optimal breathing support without irritation.", details: [
|
||||
"30 count pack", "Extra gentle, latex-free adhesive", "Dermatologist tested for sensitive skin", "Improves breathing without causing redness", "Perfect for extended wear"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "nasal-strips-3", name: "Extra Strength Nasal Strips (30-pack)", price: "$21.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-folding-menstrual-cup-medium-shot_23-2149734183.jpg?_wi=1", imageAlt: "TAPE IT Extra Strength Nasal Strips 30-pack", description: "For maximum support, choose our extra strength nasal strips. Designed to provide powerful lift for severe congestion or intense activity.", details: [
|
||||
"30 count pack for robust support", "Stronger adhesive for secure fit", "Maximizes nasal passage opening", "Ideal for athletes and heavy snorers", "Long-lasting hold during vigorous activities"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "nasal-strips-4", name: "Original Nasal Strips (90-pack)", price: "$49.99", imageSrc: "http://img.b2bpic.net/free-photo/young-female-doctor-holding-hands-head-medical-uniform-mask-looking-confident_176474-81552.jpg?_wi=1", imageAlt: "TAPE IT Original Nasal Strips 90-pack", description: "Stock up and save with our 90-pack of original nasal strips, ensuring you never run out of breath-enhancing support.", details: [
|
||||
"90 count bulk pack", "Economical and convenient", "Same great original formula", "Continuous supply for consistent relief", "Perfect for regular users"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "nasal-strips-5", name: "Travel Pack Assorted (10-pack)", price: "$8.99", imageSrc: "http://img.b2bpic.net/free-photo/collagen-white-stick-with-glass-water_185193-162486.jpg?_wi=1", imageAlt: "TAPE IT Travel Pack Assorted Nasal Strips 10-pack", description: "Don't let travel disrupt your breathing. Our assorted travel pack offers a convenient mix of strips for any situation.", details: [
|
||||
"10 count assorted pack", "Compact for travel", "Includes a mix of original and sensitive strips", "Always be prepared for better breathing on the go", " resealable pouch"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "nasal-strips-6", name: "Kids Nasal Strips (20-pack)", price: "$14.99", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-putting-medical-mask-face-protection_23-2148802176.jpg?_wi=1", imageAlt: "TAPE IT Kids Nasal Strips 20-pack", description: "Help your little ones breathe easier with our specially designed kids nasal strips. Gentle and perfectly sized for smaller noses.", details: [
|
||||
"20 count pack, kid-friendly design", "Smaller size for children's noses", "Hypoallergenic and gentle adhesive", "Helps reduce nighttime stuffiness for better sleep", "Fun, colorful designs"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const productId = params.productId as string;
|
||||
const [product, setProduct] = useState<ProductDetail | null>(null);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop Now", id: "/products" },
|
||||
{ name: "How It Works", id: "/#features" },
|
||||
{ name: "Our Mission", id: "/#about" },
|
||||
{ name: "Contact Us", id: "/#contact" }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const foundProduct = mockProducts.find(p => p.id === productId);
|
||||
if (foundProduct) {
|
||||
setProduct(foundProduct);
|
||||
} else {
|
||||
// Optionally redirect to a 404 page or products list if not found
|
||||
router.push('/products');
|
||||
}
|
||||
}, [productId, router]);
|
||||
|
||||
if (!product) {
|
||||
return null; // Or a loading spinner
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={navItems}
|
||||
brandName="TAPE IT JO"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-16" id="product-detail" data-section="product-detail">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="mb-8 text-primary-cta hover:underline focus:outline-none"
|
||||
>
|
||||
← Back to Products
|
||||
</button>
|
||||
<div className="flex flex-col lg:flex-row gap-8 items-start">
|
||||
<div className="w-full lg:w-1/2 relative bg-card rounded-lg overflow-hidden shadow-lg">
|
||||
<Image
|
||||
src={product.imageSrc.replace('?_wi=1', '?w=800&h=800&q=80')}
|
||||
alt={product.imageAlt}
|
||||
width={800}
|
||||
height={800}
|
||||
layout="responsive"
|
||||
objectFit="contain"
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/2 p-4 md:p-8 bg-card rounded-lg shadow-lg">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4 text-foreground leading-tight">
|
||||
{product.name}
|
||||
</h1>
|
||||
<p className="text-3xl md:text-4xl font-semibold mb-6 text-primary-cta">
|
||||
{product.price}
|
||||
</p>
|
||||
<p className="text-lg mb-6 text-foreground/80 leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
<h2 className="text-2xl font-semibold mb-3 text-foreground">
|
||||
Product Features:
|
||||
</h2>
|
||||
<ul className="list-disc list-inside space-y-2 text-foreground/70">
|
||||
{product.details.map((detail, index) => (
|
||||
<li key={index}>{detail}</li>
|
||||
))}
|
||||
</ul>
|
||||
<button
|
||||
className="mt-8 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-md text-lg font-medium hover:opacity-90 transition-opacity duration-300"
|
||||
>
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/yoga-mat-water-bottle-assortment_23-2149442713.jpg?_wi=1"
|
||||
imageAlt="Gym product nasal strips lifestyle"
|
||||
logoText="TAPE IT JO"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Shop Now", href: "/products" },
|
||||
{ label: "How It Works", href: "/#features" },
|
||||
{ label: "FAQs", href: "/#faq" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "Our Mission", href: "/#about" },
|
||||
{ label: "Contact Us", href: "/#contact" },
|
||||
{ label: "Where to Find Us", href: "/locations" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 TAPE IT JO. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user