diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx new file mode 100644 index 0000000..2838438 --- /dev/null +++ b/src/app/product/[id]/page.tsx @@ -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 ( + + +
+

Producto no encontrado

+

Lo sentimos, el producto que buscas no está disponible.

+
+ + ); + } + + const nextImage = () => { + setCurrentImageIndex((prev) => (prev + 1) % product.images.length); + }; + + const prevImage = () => { + setCurrentImageIndex((prev) => (prev - 1 + product.images.length) % product.images.length); + }; + + return ( + + + +
+
+
+ {/* Image Gallery */} +
+
+ {product.imageAlts[currentImageIndex]} +
+ {/* Image Thumbnails */} +
+ {product.images.map((img, idx) => ( + + ))} +
+
+ + {/* Product Info */} +
+

{product.name}

+

+ {product.price} +

+

{product.longDescription}

+ + {/* Specifications */} + {product.specifications && ( +
+

Especificaciones

+
+ {product.specifications.map((spec, idx) => ( +
+

{spec.label}

+

{spec.value}

+
+ ))} +
+
+ )} + + {/* CTA Button */} + + 💬 Consultar por WhatsApp + +
+
+
+
+ +
+ { + console.log("Consulta enviada:", data); + }} + ariaLabel="Formulario de consulta sobre producto" + /> +
+ + + + ); +} \ No newline at end of file