Add src/app/product/[id]/page.tsx
This commit is contained in:
318
src/app/product/[id]/page.tsx
Normal file
318
src/app/product/[id]/page.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useParams } from "next/navigation";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { useState } from "react";
|
||||
|
||||
interface Product {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
description: string;
|
||||
longDescription: string;
|
||||
images: string[];
|
||||
imageAlts: string[];
|
||||
specifications?: { label: string; value: string }[];
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
const productDatabase: { [key: string]: Product } = {
|
||||
"prod-001": {
|
||||
id: "prod-001", name: "Tela de Algodón Premium", price: "$8.990", description: "Tela de algodón puro de alta calidad", longDescription: "Tela de algodón 100% natural de excelente calidad, perfecta para proyectos de confección, vestuario y accesorios. Ideal para diseñadores, sastres y emprendedores textiles. Disponible en múltiples colores y con excelente durabilidad.", images: [
|
||||
"http://img.b2bpic.net/free-photo/high-angle-view-colorful-cotton-textile_23-2147921793.jpg?_wi=1", "http://img.b2bpic.net/free-photo/close-up-wool-texture-design_23-2149503258.jpg?_wi=1"],
|
||||
imageAlts: ["Tela de algodón premium color natural", "Detalle de textura de algodón"],
|
||||
specifications: [
|
||||
{ label: "Composición", value: "100% Algodón" },
|
||||
{ label: "Ancho", value: "1.5 metros" },
|
||||
{ label: "Peso", value: "200 g/m²" },
|
||||
{ label: "Colores Disponibles", value: "15+ colores" },
|
||||
],
|
||||
inStock: true,
|
||||
},
|
||||
"prod-002": {
|
||||
id: "prod-002", name: "Botones Decorativos Surtidos", price: "$2.490", description: "Set completo de botones decorativos variados", longDescription: "Colección completa de botones decorativos en diferentes materiales, tamaños y estilos. Incluye botones de madera, plástico, metal y concha. Perfectos para proyectos de confección, reparación y personalización de prendas y accesorios.", images: [
|
||||
"http://img.b2bpic.net/free-photo/faucet-from-golden-fountain_1122-816.jpg?_wi=1", "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=1"],
|
||||
imageAlts: ["Set de botones decorativos variados", "Detalle de botones metálicos"],
|
||||
specifications: [
|
||||
{ label: "Cantidad", value: "100+ piezas" },
|
||||
{ label: "Materiales", value: "Madera, plástico, metal, concha" },
|
||||
{ label: "Tamaños", value: "12mm - 25mm" },
|
||||
{ label: "Colores", value: "Variados" },
|
||||
],
|
||||
inStock: true,
|
||||
},
|
||||
"prod-003": {
|
||||
id: "prod-003", name: "Hilos de Bordado Profesional", price: "$1.290", description: "Hilo de bordado profesional de alta calidad", longDescription: "Hilos de bordado profesional en múltiples colores, ideales para bordado a mano, máquina y proyectos artesanales. Composición de poliéster de alta resistencia con excelente brillo y durabilidad. Perfecto para bordadores, diseñadores y emprendedores textiles.", images: [
|
||||
"http://img.b2bpic.net/free-photo/close-up-wool-texture-design_23-2149503258.jpg?_wi=1", "http://img.b2bpic.net/free-photo/high-angle-view-colorful-cotton-textile_23-2147921793.jpg?_wi=2"],
|
||||
imageAlts: ["Carrete de hilo de bordado multicolor", "Colección completa de hilos"],
|
||||
specifications: [
|
||||
{ label: "Composición", value: "100% Poliéster" },
|
||||
{ label: "Peso del Carrete", value: "40 gramos" },
|
||||
{ label: "Colores Disponibles", value: "200+ colores" },
|
||||
{ label: "Resistencia", value: "Alta" },
|
||||
],
|
||||
inStock: true,
|
||||
},
|
||||
"prod-004": {
|
||||
id: "prod-004", name: "Velcro Adhesivo Industrial", price: "$3.990", description: "Velcro adhesivo de grado industrial", longDescription: "Rollo de velcro adhesivo de grado industrial con adhesivo permanente de alta resistencia. Ideal para aplicaciones profesionales, reparación de prendas y proyectos de confección. Fácil de cortar y aplicar en diversos materiales.", images: [
|
||||
"http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=1", "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894568.jpg?_wi=1"],
|
||||
imageAlts: ["Rollo de velcro adhesivo de calidad industrial", "Detalle de velcro"],
|
||||
specifications: [
|
||||
{ label: "Largo", value: "5 metros" },
|
||||
{ label: "Ancho", value: "5 centímetros" },
|
||||
{ label: "Tipo de Adhesivo", value: "Permanente" },
|
||||
{ label: "Resistencia", value: "Industrial" },
|
||||
],
|
||||
inStock: true,
|
||||
},
|
||||
"prod-005": {
|
||||
id: "prod-005", name: "Elásticos Variados Pack", price: "$1.890", description: "Pack completo de elásticos en múltiples colores y estilos", longDescription: "Pack completo de elásticos para confección en diversos colores, espesores y tipos. Incluye elásticos decorativos, funcionales y de precisión. Ideal para proyectos de confección de prendas deportivas, ropa interior, cinturones y accesorios.", images: [
|
||||
"http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894568.jpg?_wi=1", "http://img.b2bpic.net/free-photo/close-up-wool-texture-design_23-2149503258.jpg?_wi=2"],
|
||||
imageAlts: ["Pack de elásticos en múltiples colores", "Detalle de elásticos"],
|
||||
specifications: [
|
||||
{ label: "Cantidad de Tipos", value: "8 tipos diferentes" },
|
||||
{ label: "Colores", value: "10+ colores" },
|
||||
{ label: "Espesores", value: "5mm - 25mm" },
|
||||
{ label: "Largo Total", value: "10 metros" },
|
||||
],
|
||||
inStock: true,
|
||||
},
|
||||
"prod-006": {
|
||||
id: "prod-006", name: "Cierres Metálicos Surtidos", price: "$4.490", description: "Colección completa de cierres metálicos variados", longDescription: "Colección surtida de cierres metálicos para confección profesional. Incluye cierres de diferentes tamaños, colores y estilos. Ideales para prendas de vestir, mochilas, bolsos y otros proyectos de confección. Calidad profesional y durabilidad garantizada.", images: [
|
||||
"http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=2", "http://img.b2bpic.net/free-photo/faucet-from-golden-fountain_1122-816.jpg?_wi=2"],
|
||||
imageAlts: ["Colección de cierres metálicos variados", "Detalle de cierre metálico"],
|
||||
specifications: [
|
||||
{ label: "Cantidad", value: "50+ piezas" },
|
||||
{ label: "Tamaños", value: "10cm - 60cm" },
|
||||
{ label: "Colores", value: "8 colores" },
|
||||
{ label: "Material", value: "Metal de alta calidad" },
|
||||
],
|
||||
inStock: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const params = useParams();
|
||||
const productId = params.id as string;
|
||||
const product = productDatabase[productId];
|
||||
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Inicio", id: "home" },
|
||||
{ name: "Catálogo", id: "catalog" },
|
||||
{ name: "Sobre Nosotros", id: "about" },
|
||||
{ name: "Contacto", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Tienda", items: [
|
||||
{ label: "Catálogo", href: "/catalog" },
|
||||
{ label: "Telas", href: "/catalog" },
|
||||
{ label: "Botones", href: "/catalog" },
|
||||
{ label: "Hilos", href: "/catalog" },
|
||||
{ label: "Accesorios", href: "/catalog" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Compañía", items: [
|
||||
{ label: "Sobre Nosotros", href: "/" },
|
||||
{ label: "Contacto", href: "/catalog" },
|
||||
{ label: "Política de Privacidad", href: "#" },
|
||||
{ label: "Términos de Servicio", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Conecta", items: [
|
||||
{ label: "WhatsApp", href: "https://wa.me/56XXXXXXXXX" },
|
||||
{ label: "Instagram @cordoneriakika", href: "https://instagram.com/cordoneriakika" },
|
||||
{ label: "Email", href: "mailto:info@cordoneriakika.cl" },
|
||||
{ label: "Ubicación", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Horarios", items: [
|
||||
{ label: "Lunes a Viernes: 09:00 - 18:00", href: "#" },
|
||||
{ label: "Sábado: 10:00 - 14:00", href: "#" },
|
||||
{ label: "Domingo: Cerrado", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Cordonería KIKA"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "💬 WhatsApp", href: "https://wa.me/56XXXXXXXXX"}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ padding: "60px 20px", textAlign: "center" }}>
|
||||
<h1>Producto no encontrado</h1>
|
||||
<p>Lo sentimos, el producto que buscas no está disponible.</p>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const nextImage = () => {
|
||||
setCurrentImageIndex((prev) => (prev + 1) % product.images.length);
|
||||
};
|
||||
|
||||
const prevImage = () => {
|
||||
setCurrentImageIndex((prev) => (prev - 1 + product.images.length) % product.images.length);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Cordonería KIKA"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "💬 WhatsApp", href: "https://wa.me/56XXXXXXXXX"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-detail" data-section="product-detail" style={{ padding: "60px 20px" }}>
|
||||
<div style={{ maxWidth: "1200px", margin: "0 auto" }}>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "40px", marginBottom: "60px" }}>
|
||||
{/* Image Gallery */}
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative", width: "100%", paddingBottom: "100%", background: "var(--background-accent)", borderRadius: "8px", overflow: "hidden"}}
|
||||
>
|
||||
<img
|
||||
src={product.images[currentImageIndex]}
|
||||
alt={product.imageAlts[currentImageIndex]}
|
||||
style={{
|
||||
position: "absolute", top: 0,
|
||||
left: 0,
|
||||
width: "100%", height: "100%", objectFit: "cover"}}
|
||||
/>
|
||||
</div>
|
||||
{/* Image Thumbnails */}
|
||||
<div style={{ display: "flex", gap: "10px", marginTop: "20px" }}>
|
||||
{product.images.map((img, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setCurrentImageIndex(idx)}
|
||||
style={{
|
||||
width: "60px", height: "60px", borderRadius: "4px", border: idx === currentImageIndex ? "2px solid var(--primary-cta)" : "2px solid var(--card)", cursor: "pointer", padding: 0,
|
||||
overflow: "hidden"}}
|
||||
>
|
||||
<img src={img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
<div>
|
||||
<h1 style={{ fontSize: "32px", marginBottom: "12px" }}>{product.name}</h1>
|
||||
<p style={{ fontSize: "20px", fontWeight: "bold", color: "var(--primary-cta)", marginBottom: "20px" }}>
|
||||
{product.price}
|
||||
</p>
|
||||
<p style={{ fontSize: "16px", lineHeight: "1.6", marginBottom: "30px" }}>{product.longDescription}</p>
|
||||
|
||||
{/* Specifications */}
|
||||
{product.specifications && (
|
||||
<div style={{ marginBottom: "40px" }}>
|
||||
<h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "20px" }}>Especificaciones</h3>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px" }}>
|
||||
{product.specifications.map((spec, idx) => (
|
||||
<div key={idx} style={{ padding: "12px", background: "var(--background-accent)", borderRadius: "4px" }}>
|
||||
<p style={{ fontSize: "12px", color: "var(--accent)", marginBottom: "4px" }}>{spec.label}</p>
|
||||
<p style={{ fontSize: "14px", fontWeight: "600" }}>{spec.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CTA Button */}
|
||||
<a
|
||||
href={`https://wa.me/56XXXXXXXXX?text=Hola, me interesa el producto: ${product.name} - ${product.price}`}
|
||||
style={{
|
||||
display: "inline-block", padding: "16px 32px", background: "var(--primary-cta)", color: "white", borderRadius: "8px", textDecoration: "none", fontWeight: "600", fontSize: "16px"}}
|
||||
>
|
||||
💬 Consultar por WhatsApp
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="¿Dudas sobre este producto?"
|
||||
description="Completa el formulario con tus consultas y nos pondremos en contacto a la brevedad. Incluye el nombre del producto en tu mensaje."
|
||||
inputs={[
|
||||
{
|
||||
name: "nombre", type: "text", placeholder: "Tu nombre", required: true,
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Tu correo electrónico", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "consulta", placeholder: `Consulta sobre: ${product.name}...`,
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
useInvertedBackground={true}
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-tailoring-studio-with-sewing-machine-garments_23-2148834125.jpg"
|
||||
imageAlt="Taller de Cordonería KIKA"
|
||||
buttonText="Enviar Consulta"
|
||||
onSubmit={(data) => {
|
||||
console.log("Consulta enviada:", data);
|
||||
}}
|
||||
ariaLabel="Formulario de consulta sobre producto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-tailoring-studio-with-sewing-machine-garments_23-2148834125.jpg?_wi=1"
|
||||
imageAlt="Cordonería KIKA - Productos textiles y insumos"
|
||||
logoText="Cordonería KIKA"
|
||||
copyrightText="© 2025 Cordonería KIKA | Todos los derechos reservados | Chile"
|
||||
columns={footerColumns}
|
||||
ariaLabel="Pie de página - Cordonería KIKA"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user