bender/aba029c9-f2cb-4926-b418-080994cfa2ad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 4 commits from version_2 into main 2026-03-19 16:50:48 +00:00
Conversation 0 Commits 4 Files Changed 4 +912 -278
4 changed files with 912 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

475
src/app/admin/page.tsx Normal file
View File

@@ -0,0 +1,475 @@
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import { Plus, Edit2, Trash2, Search, Image as ImageIcon, Tag as TagIcon } from "lucide-react";
interface Product {
id: string;
name: string;
category: string;
price: string;
description: string;
mainImage: string;
sku: string;
stockStatus: "in-stock" | "low-stock" | "out-of-stock";
isFeatured: boolean;
offerLabel?: string;
}
interface FormData {
name: string;
category: string;
price: string;
description: string;
mainImage: string;
sku: string;
stockStatus: "in-stock" | "low-stock" | "out-of-stock";
isFeatured: boolean;
offerLabel: string;
}
const initialFormData: FormData = {
name: "", category: "", price: "", description: "", mainImage: "", sku: "", stockStatus: "in-stock", isFeatured: false,
offerLabel: ""};
const productCategories = [
"Telas", "Botones", "Hilos", "Velcros", "Elásticos", "Cierres", "Cintas", "Cordones", "Encajes", "Accesorios"];
export default function AdminPage() {
const [products, setProducts] = useState<Product[]>([
{
id: "prod-001", name: "Tela de Algodón Premium", category: "Telas", price: "$8.990", description: "Tela de algodón 100% natural de alta calidad", mainImage: "http://img.b2bpic.net/free-photo/high-angle-view-colorful-cotton-textile_23-2147921793.jpg?_wi=1", sku: "TEL-ALG-001", stockStatus: "in-stock", isFeatured: true,
offerLabel: "20% OFF"},
]);
const [formData, setFormData] = useState<FormData>(initialFormData);
const [isEditing, setIsEditing] = useState(false);
const [editingId, setEditingId] = useState<string | null>(null);
const [searchTerm, setSearchTerm] = useState("");
const [showForm, setShowForm] = useState(false);
const navItems = [
{ name: "Dashboard", id: "admin" },
{ name: "Productos", id: "products" },
{ name: "Volver a Tienda", id: "home" },
];
const filteredProducts = products.filter((p) =>
p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
p.sku.toLowerCase().includes(searchTerm.toLowerCase())
);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value, type } = e.target;
setFormData({
...formData,
[name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : value,
});
};
const handleAddProduct = () => {
if (!formData.name || !formData.category || !formData.price || !formData.sku) {
alert("Por favor completa los campos requeridos");
return;
}
if (isEditing && editingId) {
setProducts(
products.map((p) =>
p.id === editingId
? {
...formData,
id: editingId,
}
: p
)
);
setIsEditing(false);
setEditingId(null);
} else {
const newProduct: Product = {
...formData,
id: `prod-${Date.now()}`,
};
setProducts([...products, newProduct]);
}
setFormData(initialFormData);
setShowForm(false);
};
const handleEditProduct = (product: Product) => {
setFormData(product);
setIsEditing(true);
setEditingId(product.id);
setShowForm(true);
};
const handleDeleteProduct = (id: string) => {
if (confirm("¿Estás seguro de que deseas eliminar este producto?")) {
setProducts(products.filter((p) => p.id !== id));
}
};
const handleCancel = () => {
setFormData(initialFormData);
setIsEditing(false);
setEditingId(null);
setShowForm(false);
};
const getStockBadgeColor = (status: string) => {
switch (status) {
case "in-stock":
return "bg-green-100 text-green-800";
case "low-stock":
return "bg-yellow-100 text-yellow-800";
case "out-of-stock":
return "bg-red-100 text-red-800";
default:
return "bg-gray-100 text-gray-800";
}
};
const getStockLabel = (status: string) => {
switch (status) {
case "in-stock":
return "En Stock";
case "low-stock":
return "Stock Bajo";
case "out-of-stock":
return "Agotado";
default:
return status;
}
};
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 - Admin"
navItems={navItems}
button={{
text: "📊 Dashboard", href: "#admin"}}
/>
</div>
<main className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-bold text-gray-900 mb-2">Panel de Administración</h1>
<p className="text-gray-600">Gestiona tu catálogo de productos de manera fácil y rápida</p>
</div>
{/* Search Bar */}
<div className="mb-6 flex gap-4 flex-wrap">
<div className="flex-1 min-w-64 relative">
<Search className="absolute left-3 top-3 text-gray-400" size={20} />
<input
type="text"
placeholder="Buscar productos por nombre o SKU..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<button
onClick={() => setShowForm(true)}
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition"
>
<Plus size={20} />
Agregar Producto
</button>
</div>
{/* Form Modal */}
{showForm && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg shadow-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<div className="p-6">
<h2 className="text-2xl font-bold text-gray-900 mb-4">
{isEditing ? "Editar Producto" : "Nuevo Producto"}
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Product Name */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Nombre del Producto *
</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleInputChange}
placeholder="Ej: Tela de Algodón Premium"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
{/* Category */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Categoría *
</label>
<select
name="category"
value={formData.category}
onChange={handleInputChange}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="">Selecciona una categoría</option>
{productCategories.map((cat) => (
<option key={cat} value={cat}>
{cat}
</option>
))}
</select>
</div>
{/* Price */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Precio *
</label>
<input
type="text"
name="price"
value={formData.price}
onChange={handleInputChange}
placeholder="Ej: $8.990"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
{/* SKU */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
SKU *
</label>
<input
type="text"
name="sku"
value={formData.sku}
onChange={handleInputChange}
placeholder="Ej: TEL-ALG-001"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
{/* Stock Status */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Estado de Stock
</label>
<select
name="stockStatus"
value={formData.stockStatus}
onChange={handleInputChange}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="in-stock">En Stock</option>
<option value="low-stock">Stock Bajo</option>
<option value="out-of-stock">Agotado</option>
</select>
</div>
{/* Main Image URL */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
URL de Imagen Principal
</label>
<input
type="text"
name="mainImage"
value={formData.mainImage}
onChange={handleInputChange}
placeholder="https://..."
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
{/* Offer Label */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Etiqueta de Oferta (opcional)
</label>
<input
type="text"
name="offerLabel"
value={formData.offerLabel}
onChange={handleInputChange}
placeholder="Ej: 20% OFF"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
</div>
{/* Description */}
<div className="mt-4">
<label className="block text-sm font-medium text-gray-700 mb-1">
Descripción
</label>
<textarea
name="description"
value={formData.description}
onChange={handleInputChange}
placeholder="Descripción detallada del producto..."
rows={4}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
{/* Featured Checkbox */}
<div className="mt-4 flex items-center gap-2">
<input
type="checkbox"
name="isFeatured"
checked={formData.isFeatured}
onChange={handleInputChange}
className="w-4 h-4 border-gray-300 rounded focus:ring-2 focus:ring-blue-500"
/>
<label className="text-sm font-medium text-gray-700">Marcar como destacado</label>
</div>
{/* Buttons */}
<div className="mt-6 flex gap-3">
<button
onClick={handleAddProduct}
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition"
>
{isEditing ? "Guardar Cambios" : "Agregar Producto"}
</button>
<button
onClick={handleCancel}
className="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-lg font-medium transition"
>
Cancelar
</button>
</div>
</div>
</div>
</div>
)}
{/* Products Table */}
<div className="bg-white rounded-lg shadow-md overflow-hidden">
{filteredProducts.length > 0 ? (
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="bg-gray-100 border-b">
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Producto</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Categoría</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">SKU</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Precio</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Stock</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Destacado</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Acciones</th>
</tr>
</thead>
<tbody>
{filteredProducts.map((product) => (
<tr key={product.id} className="border-b hover:bg-gray-50">
<td className="px-6 py-4 text-sm text-gray-900">
<div className="flex items-center gap-3">
{product.mainImage && (
<img
src={product.mainImage}
alt={product.name}
className="w-10 h-10 object-cover rounded"
/>
)}
<div>
<div className="font-medium">{product.name}</div>
{product.offerLabel && (
<div className="text-xs text-orange-600 flex items-center gap-1">
<TagIcon size={12} />
{product.offerLabel}
</div>
)}
</div>
</div>
</td>
<td className="px-6 py-4 text-sm text-gray-600">{product.category}</td>
<td className="px-6 py-4 text-sm text-gray-600 font-mono">{product.sku}</td>
<td className="px-6 py-4 text-sm font-semibold text-gray-900">{product.price}</td>
<td className="px-6 py-4 text-sm">
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStockBadgeColor(product.stockStatus)}`}>
{getStockLabel(product.stockStatus)}
</span>
</td>
<td className="px-6 py-4 text-sm text-center">
{product.isFeatured ? (
<span className="text-yellow-600 font-bold">★</span>
) : (
<span className="text-gray-300">☆</span>
)}
</td>
<td className="px-6 py-4 text-sm">
<div className="flex gap-2">
<button
onClick={() => handleEditProduct(product)}
className="text-blue-600 hover:text-blue-800 font-medium flex items-center gap-1 p-2 hover:bg-blue-50 rounded"
>
<Edit2 size={16} />
</button>
<button
onClick={() => handleDeleteProduct(product.id)}
className="text-red-600 hover:text-red-800 font-medium flex items-center gap-1 p-2 hover:bg-red-50 rounded"
>
<Trash2 size={16} />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
) : (
<div className="p-8 text-center text-gray-500">
<p>No se encontraron productos. ¡Crea tu primer producto!</p>
</div>
)}
</div>
{/* Stats */}
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-white p-6 rounded-lg shadow-md">
<p className="text-gray-600 text-sm">Total de Productos</p>
<p className="text-3xl font-bold text-gray-900 mt-2">{products.length}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<p className="text-gray-600 text-sm">Productos Destacados</p>
<p className="text-3xl font-bold text-gray-900 mt-2">
{products.filter((p) => p.isFeatured).length}
</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<p className="text-gray-600 text-sm">En Stock</p>
<p className="text-3xl font-bold text-gray-900 mt-2">
{products.filter((p) => p.stockStatus === "in-stock").length}
</p>
</div>
</div>
</div>
</main>
</ThemeProvider>
);
}

200
src/app/catalog/page.tsx
View File

@@ -1,15 +1,15 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import ContactText from "@/components/sections/contact/ContactText";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Scissors, Circle, Zap } from "lucide-react";
import { useState } from "react";
export default function CatalogPage() {
const [selectedProduct, setSelectedProduct] = useState<string | null>(null);
const navItems = [
{ name: "Inicio", id: "home" },
{ name: "Catálogo", id: "catalog" },
@@ -17,10 +17,48 @@ export default function CatalogPage() {
{ name: "Contacto", id: "contact" },
];
const products = [
{
id: "prod-001", name: "Tela de Algodón Premium", price: "$8.990", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-colorful-cotton-textile_23-2147921793.jpg?_wi=1", imageAlt: "Tela de algodón premium color natural", onProductClick: () => setSelectedProduct("prod-001"),
},
{
id: "prod-002", name: "Botones Decorativos Surtidos", price: "$2.490", imageSrc: "http://img.b2bpic.net/free-photo/faucet-from-golden-fountain_1122-816.jpg?_wi=1", imageAlt: "Set de botones decorativos variados", onProductClick: () => setSelectedProduct("prod-002"),
},
{
id: "prod-003", name: "Hilos de Bordado Profesional", price: "$1.290", imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-design_23-2149503258.jpg?_wi=1", imageAlt: "Carrete de hilo de bordado multicolor", onProductClick: () => setSelectedProduct("prod-003"),
},
{
id: "prod-004", name: "Velcro Adhesivo Industrial", price: "$3.990", imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=1", imageAlt: "Rollo de velcro adhesivo de calidad industrial", onProductClick: () => setSelectedProduct("prod-004"),
},
{
id: "prod-005", name: "Elásticos Variados Pack", price: "$1.890", imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894568.jpg?_wi=1", imageAlt: "Pack de elásticos en múltiples colores", onProductClick: () => setSelectedProduct("prod-005"),
},
{
id: "prod-006", name: "Cierres Metálicos Surtidos", price: "$4.490", imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=2", imageAlt: "Colección de cierres metálicos variados", onProductClick: () => setSelectedProduct("prod-006"),
},
{
id: "prod-007", name: "Tela de Lino Natural", price: "$9.990", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-colorful-cotton-textile_23-2147921793.jpg?_wi=2", imageAlt: "Tela de lino natural", onProductClick: () => setSelectedProduct("prod-007"),
},
{
id: "prod-008", name: "Cintas Decorativas Variadas", price: "$2.290", imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894568.jpg?_wi=2", imageAlt: "Colección de cintas decorativas", onProductClick: () => setSelectedProduct("prod-008"),
},
{
id: "prod-009", name: "Encajes Premium", price: "$3.790", imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-design_23-2149503258.jpg?_wi=2", imageAlt: "Encajes premium variados", onProductClick: () => setSelectedProduct("prod-009"),
},
{
id: "prod-010", name: "Cordones Variados", price: "$1.590", imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=3", imageAlt: "Set de cordones variados", onProductClick: () => setSelectedProduct("prod-010"),
},
{
id: "prod-011", name: "Tela Poliéster Premium", price: "$5.990", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-colorful-cotton-textile_23-2147921793.jpg?_wi=3", imageAlt: "Tela poliéster premium", onProductClick: () => setSelectedProduct("prod-011"),
},
{
id: "prod-012", name: "Botones Metálicos Decorativos", price: "$3.290", imageSrc: "http://img.b2bpic.net/free-photo/faucet-from-golden-fountain_1122-816.jpg?_wi=2", imageAlt: "Botones metálicos decorativos", onProductClick: () => setSelectedProduct("prod-012"),
},
];
const footerColumns = [
{
title: "Tienda",
items: [
title: "Tienda", items: [
{ label: "Catálogo", href: "/catalog" },
{ label: "Telas", href: "/catalog" },
{ label: "Botones", href: "/catalog" },
@@ -29,17 +67,15 @@ export default function CatalogPage() {
],
},
{
title: "Compañía",
items: [
title: "Compañía", items: [
{ label: "Sobre Nosotros", href: "/" },
{ label: "Contacto", href: "/" },
{ label: "Contacto", href: "/catalog" },
{ label: "Política de Privacidad", href: "#" },
{ label: "Términos de Servicio", href: "#" },
],
},
{
title: "Conecta",
items: [
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" },
@@ -47,8 +83,7 @@ export default function CatalogPage() {
],
},
{
title: "Horarios",
items: [
title: "Horarios", items: [
{ label: "Lunes a Viernes: 09:00 - 18:00", href: "#" },
{ label: "Sábado: 10:00 - 14:00", href: "#" },
{ label: "Domingo: Cerrado", href: "#" },
@@ -74,108 +109,15 @@ export default function CatalogPage() {
brandName="Cordonería KIKA"
navItems={navItems}
button={{
text: "💬 WhatsApp",
href: "https://wa.me/56XXXXXXXXX",
}}
text: "💬 WhatsApp", href: "https://wa.me/56XXXXXXXXX"}}
/>
</div>
<div id="catalog-categories" data-section="catalog-categories">
<FeatureBorderGlow
title="Catálogo Completo"
description="Accede a nuestro catálogo completo de productos. Todos nuestros insumos textiles están cuidadosamente seleccionados para garantizar la mejor calidad y satisfacción."
features={[
{
icon: Scissors,
title: "Telas Variadas",
description: "Algodón, lino, poliéster, tul, denim, lino, y muchas más opciones para tus proyectos.",
},
{
icon: Circle,
title: "Botones y Accesorios",
description: "Amplia variedad de botones decorativos, funcionales y accesorios de confección.",
},
{
icon: Zap,
title: "Hilos Especializados",
description: "Hilos para bordado, costura, máquina y acabado en todos los colores imaginables.",
},
]}
animationType="opacity"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="all-products" data-section="all-products">
<div id="products" data-section="products">
<ProductCardThree
title="Todos nuestros Productos"
description="Explora el catálogo completo de insumos textiles. Desde telas premium hasta accesorios especializados, encontrarás todo lo que necesitas para tus proyectos de confección y diseño."
products={[
{
id: "prod-001",
name: "Tela de Algodón Premium",
price: "$8.990",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-colorful-cotton-textile_23-2147921793.jpg?_wi=2",
imageAlt: "Tela de algodón premium",
},
{
id: "prod-002",
name: "Botones Decorativos Surtidos",
price: "$2.490",
imageSrc: "http://img.b2bpic.net/free-photo/faucet-from-golden-fountain_1122-816.jpg?_wi=2",
imageAlt: "Botones decorativos",
},
{
id: "prod-003",
name: "Hilos de Bordado Profesional",
price: "$1.290",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-design_23-2149503258.jpg?_wi=2",
imageAlt: "Hilos de bordado",
},
{
id: "prod-004",
name: "Velcro Adhesivo Industrial",
price: "$3.990",
imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=3",
imageAlt: "Velcro adhesivo",
},
{
id: "prod-005",
name: "Elásticos Variados Pack",
price: "$1.890",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894568.jpg?_wi=2",
imageAlt: "Elásticos variados",
},
{
id: "prod-006",
name: "Cierres Metálicos Surtidos",
price: "$4.490",
imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=4",
imageAlt: "Cierres metálicos",
},
{
id: "prod-007",
name: "Tela de Lino Natural",
price: "$10.490",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fabric-texture_23-2148882808.jpg",
imageAlt: "Tela de lino",
},
{
id: "prod-008",
name: "Cintas y Ribetes",
price: "$3.290",
imageSrc: "http://img.b2bpic.net/free-photo/sewing-threads-colorful-grey-desk_179666-146.jpg",
imageAlt: "Cintas y ribetes",
},
{
id: "prod-009",
name: "Agujas Surtidas Profesional",
price: "$890",
imageSrc: "http://img.b2bpic.net/free-photo/garden-objects_23-2147997211.jpg",
imageAlt: "Agujas profesionales",
},
]}
title="Catálogo Completo de Productos"
description="Explora nuestro amplio catálogo de insumos textiles. Todos nuestros productos son seleccionados por calidad y disponibilidad. Haz clic en cualquier producto para más detalles o contacta directamente para consultas."
products={products}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
@@ -184,34 +126,40 @@ export default function CatalogPage() {
</div>
<div id="contact" data-section="contact">
<ContactText
text="¿Necesitas algo específico? No dudes en contactarnos. Nuestro equipo está listo para ayudarte a encontrar exactamente lo que buscas."
animationType="entrance-slide"
buttons={[
<ContactSplitForm
title="¿Necesitas más información?"
description="Completa el formulario y nos pondremos en contacto contigo a la brevedad. También puedes comunicarte directamente por WhatsApp para consultas inmediatas."
inputs={[
{
text: "💬 WhatsApp",
href: "https://wa.me/56XXXXXXXXX",
name: "nombre", type: "text", placeholder: "Tu nombre", required: true,
},
{
text: "📧 Email",
href: "mailto:info@cordoneriakika.cl",
name: "email", type: "email", placeholder: "Tu correo electrónico", required: true,
},
{
text: "📱 Instagram @cordoneriakika",
href: "https://instagram.com/cordoneriakika",
name: "telefono", type: "tel", placeholder: "Tu teléfono", required: false,
},
]}
background={{
variant: "radial-gradient",
textarea={{
name: "mensaje", placeholder: "Cuéntanos qué producto te interesa o qué necesitas...", rows: 4,
required: true,
}}
useInvertedBackground={false}
ariaLabel="Sección de contacto - Catálogo"
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("Form submitted:", data);
}}
ariaLabel="Formulario de contacto para consultas de productos"
/>
</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=2"
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"

197
src/app/page.tsx
View File

@@ -22,8 +22,7 @@ export default function HomePage() {
const footerColumns = [
{
title: "Tienda",
items: [
title: "Tienda", items: [
{ label: "Catálogo", href: "/catalog" },
{ label: "Telas", href: "/catalog" },
{ label: "Botones", href: "/catalog" },
@@ -32,8 +31,7 @@ export default function HomePage() {
],
},
{
title: "Compañía",
items: [
title: "Compañía", items: [
{ label: "Sobre Nosotros", href: "/" },
{ label: "Contacto", href: "/" },
{ label: "Política de Privacidad", href: "#" },
@@ -41,8 +39,7 @@ export default function HomePage() {
],
},
{
title: "Conecta",
items: [
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" },
@@ -50,8 +47,7 @@ export default function HomePage() {
],
},
{
title: "Horarios",
items: [
title: "Horarios", items: [
{ label: "Lunes a Viernes: 09:00 - 18:00", href: "#" },
{ label: "Sábado: 10:00 - 14:00", href: "#" },
{ label: "Domingo: Cerrado", href: "#" },
@@ -77,9 +73,7 @@ export default function HomePage() {
brandName="Cordonería KIKA"
navItems={navItems}
button={{
text: "💬 WhatsApp",
href: "https://wa.me/56XXXXXXXXX",
}}
text: "💬 WhatsApp", href: "https://wa.me/56XXXXXXXXX"}}
/>
</div>
@@ -89,18 +83,13 @@ export default function HomePage() {
description="Todo lo que necesitas en cordonería e insumos textiles. Telas, botones, hilos, velcros, elásticos, cierres, cintas, cordones, encajes y mucho más. Productos de calidad con atención cercana."
buttons={[
{
text: "Ver Catálogo",
href: "/catalog",
},
text: "Ver Catálogo", href: "/catalog"},
{
text: "Hablar por WhatsApp",
href: "https://wa.me/56XXXXXXXXX",
},
text: "Hablar por WhatsApp", href: "https://wa.me/56XXXXXXXXX"},
]}
buttonAnimation="slide-up"
background={{
variant: "circleGradient",
}}
variant: "circleGradient"}}
imageSrc="http://img.b2bpic.net/free-photo/colorful-items-tailor-s-table_329181-14406.jpg"
imageAlt="Variedad de insumos textiles - Cordonería KIKA"
mediaAnimation="slide-up"
@@ -116,34 +105,22 @@ export default function HomePage() {
features={[
{
icon: Scissors,
title: "Telas",
description: "Amplia variedad de telas premium: algodón, lino, poliéster, tul, y más.",
},
title: "Telas", description: "Amplia variedad de telas premium: algodón, lino, poliéster, tul, y más."},
{
icon: Circle,
title: "Botones",
description: "Botones de madera, plástico, metal y decorativos en múltiples estilos.",
},
title: "Botones", description: "Botones de madera, plástico, metal y decorativos en múltiples estilos."},
{
icon: Zap,
title: "Hilos",
description: "Hilos para bordado, costura y máquina en amplia gama de colores.",
},
title: "Hilos", description: "Hilos para bordado, costura y máquina en amplia gama de colores."},
{
icon: Layers,
title: "Velcros",
description: "Velcro adhesivo e industrial de alta calidad para múltiples aplicaciones.",
},
title: "Velcros", description: "Velcro adhesivo e industrial de alta calidad para múltiples aplicaciones."},
{
icon: Maximize,
title: "Elásticos",
description: "Elásticos decorativos, funcionales y elásticos de precisión.",
},
title: "Elásticos", description: "Elásticos decorativos, funcionales y elásticos de precisión."},
{
icon: LinkIcon,
title: "Cierres",
description: "Cierres metálicos, plásticos y cordones para prendas y accesorios.",
},
title: "Cierres", description: "Cierres metálicos, plásticos y cordones para prendas y accesorios."},
]}
animationType="opacity"
textboxLayout="default"
@@ -157,47 +134,17 @@ export default function HomePage() {
description="Descubre nuestros productos más populares y recomendados. Todos seleccionados por calidad y versatilidad para satisfacer tus necesidades de confección y diseño."
products={[
{
id: "prod-001",
name: "Tela de Algodón Premium",
price: "$8.990",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-colorful-cotton-textile_23-2147921793.jpg?_wi=1",
imageAlt: "Tela de algodón premium color natural",
},
id: "prod-001", name: "Tela de Algodón Premium", price: "$8.990", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-colorful-cotton-textile_23-2147921793.jpg?_wi=1", imageAlt: "Tela de algodón premium color natural"},
{
id: "prod-002",
name: "Botones Decorativos Surtidos",
price: "$2.490",
imageSrc: "http://img.b2bpic.net/free-photo/faucet-from-golden-fountain_1122-816.jpg?_wi=1",
imageAlt: "Set de botones decorativos variados",
},
id: "prod-002", name: "Botones Decorativos Surtidos", price: "$2.490", imageSrc: "http://img.b2bpic.net/free-photo/faucet-from-golden-fountain_1122-816.jpg?_wi=1", imageAlt: "Set de botones decorativos variados"},
{
id: "prod-003",
name: "Hilos de Bordado Profesional",
price: "$1.290",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-design_23-2149503258.jpg?_wi=1",
imageAlt: "Carrete de hilo de bordado multicolor",
},
id: "prod-003", name: "Hilos de Bordado Profesional", price: "$1.290", imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-design_23-2149503258.jpg?_wi=1", imageAlt: "Carrete de hilo de bordado multicolor"},
{
id: "prod-004",
name: "Velcro Adhesivo Industrial",
price: "$3.990",
imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=1",
imageAlt: "Rollo de velcro adhesivo de calidad industrial",
},
id: "prod-004", name: "Velcro Adhesivo Industrial", price: "$3.990", imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=1", imageAlt: "Rollo de velcro adhesivo de calidad industrial"},
{
id: "prod-005",
name: "Elásticos Variados Pack",
price: "$1.890",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894568.jpg?_wi=1",
imageAlt: "Pack de elásticos en múltiples colores",
},
id: "prod-005", name: "Elásticos Variados Pack", price: "$1.890", imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894568.jpg?_wi=1", imageAlt: "Pack de elásticos en múltiples colores"},
{
id: "prod-006",
name: "Cierres Metálicos Surtidos",
price: "$4.490",
imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=2",
imageAlt: "Colección de cierres metálicos variados",
},
id: "prod-006", name: "Cierres Metálicos Surtidos", price: "$4.490", imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13641.jpg?_wi=2", imageAlt: "Colección de cierres metálicos variados"},
]}
gridVariant="asymmetric-60-wide-40-narrow"
animationType="slide-up"
@@ -210,28 +157,17 @@ export default function HomePage() {
<InlineImageSplitTextAbout
heading={[
{
type: "text",
content: "Cordonería KIKA: Tu tienda de confianza en insumos textiles",
},
type: "text", content: "Cordonería KIKA: Tu tienda de confianza en insumos textiles"},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/portrait-senior-male-tailor-cutting-piece-fabric-with-scissors_23-2148180319.jpg",
alt: "Interior de Cordonería KIKA",
},
type: "image", src: "http://img.b2bpic.net/free-photo/portrait-senior-male-tailor-cutting-piece-fabric-with-scissors_23-2148180319.jpg", alt: "Interior de Cordonería KIKA"},
{
type: "text",
content: "Con años de experiencia en el rubro textil, Cordonería KIKA se ha consolidado como referente en la venta de insumos de calidad para profesionales, talleres, diseñadores y aficionados a la costura. Nuestro compromiso es ofrecer productos seleccionados, precios competitivos y atención personalizada. Cada cliente es importante para nosotros, y nos esforzamos por brindar la mejor experiencia de compra, ya sea presencial o a través de nuestros canales digitales. En Cordonería KIKA encontrarás no solo productos, sino también confianza, calidad y dedicación al detalle.",
},
type: "text", content: "Con años de experiencia en el rubro textil, Cordonería KIKA se ha consolidado como referente en la venta de insumos de calidad para profesionales, talleres, diseñadores y aficionados a la costura. Nuestro compromiso es ofrecer productos seleccionados, precios competitivos y atención personalizada. Cada cliente es importante para nosotros, y nos esforzamos por brindar la mejor experiencia de compra, ya sea presencial o a través de nuestros canales digitales. En Cordonería KIKA encontrarás no solo productos, sino también confianza, calidad y dedicación al detalle."},
]}
buttons={[
{
text: "Ver Catálogo Completo",
href: "/catalog",
},
text: "Ver Catálogo Completo", href: "/catalog"},
{
text: "Contactar",
href: "/catalog",
},
text: "Contactar", href: "/catalog"},
]}
buttonAnimation="slide-up"
useInvertedBackground={false}
@@ -244,67 +180,31 @@ export default function HomePage() {
description="Conoce las experiencias de nuestros clientes satisfechos que confían en Cordonería KIKA para sus necesidades de insumos textiles."
testimonials={[
{
id: "test-001",
name: "Catalina Martínez",
role: "Diseñadora de Moda",
company: "Atelier CM",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg?_wi=1",
},
id: "test-001", name: "Catalina Martínez", role: "Diseñadora de Moda", company: "Atelier CM", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg?_wi=1"},
{
id: "test-002",
name: "Roberto Sánchez",
role: "Sastre Profesional",
company: "Sastrería San Cristóbal",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg?_wi=1",
},
id: "test-002", name: "Roberto Sánchez", role: "Sastre Profesional", company: "Sastrería San Cristóbal", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg?_wi=1"},
{
id: "test-003",
name: "Gabriela López",
role: "Emprendedora Textil",
company: "La Costurera Feliz",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/attractive-european-girl-with-charming-smile-keeps-arms-folded-wears-round-spectacles_273609-18493.jpg?_wi=1",
},
id: "test-003", name: "Gabriela López", role: "Emprendedora Textil", company: "La Costurera Feliz", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/attractive-european-girl-with-charming-smile-keeps-arms-folded-wears-round-spectacles_273609-18493.jpg?_wi=1"},
{
id: "test-004",
name: "Diego Flores",
role: "Pequeño Comerciante",
company: "Tienda de Accesorios",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-hat_23-2149529885.jpg?_wi=1",
},
id: "test-004", name: "Diego Flores", role: "Pequeño Comerciante", company: "Tienda de Accesorios", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-hat_23-2149529885.jpg?_wi=1"},
{
id: "test-005",
name: "Patricia González",
role: "Costurera Independiente",
company: "Confecciones Patricia",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg?_wi=2",
},
id: "test-005", name: "Patricia González", role: "Costurera Independiente", company: "Confecciones Patricia", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg?_wi=2"},
{
id: "test-006",
name: "Miguel Rojas",
role: "Taller de Confección",
company: "Rojas y Cía",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg?_wi=2",
},
id: "test-006", name: "Miguel Rojas", role: "Taller de Confección", company: "Rojas y Cía", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg?_wi=2"},
]}
kpiItems={[
{
value: "+2000",
label: "Clientes Satisfechos",
},
value: "+2000", label: "Clientes Satisfechos"},
{
value: "+15 años",
label: "Experiencia en el Rubro",
},
value: "+15 años", label: "Experiencia en el Rubro"},
{
value: "100%",
label: "Calidad Garantizada",
},
value: "100%", label: "Calidad Garantizada"},
]}
animationType="slide-up"
textboxLayout="default"
@@ -318,21 +218,14 @@ export default function HomePage() {
animationType="entrance-slide"
buttons={[
{
text: "💬 WhatsApp",
href: "https://wa.me/56XXXXXXXXX",
},
text: "💬 WhatsApp", href: "https://wa.me/56XXXXXXXXX"},
{
text: "📧 Email",
href: "mailto:info@cordoneriakika.cl",
},
text: "📧 Email", href: "mailto:info@cordoneriakika.cl"},
{
text: "📱 Instagram @cordoneriakika",
href: "https://instagram.com/cordoneriakika",
},
text: "📱 Instagram @cordoneriakika", href: "https://instagram.com/cordoneriakika"},
]}
background={{
variant: "radial-gradient",
}}
variant: "radial-gradient"}}
useInvertedBackground={false}
ariaLabel="Sección de contacto - Comunícate con Cordonería KIKA"
/>
@@ -350,4 +243,4 @@ export default function HomePage() {
</div>
</ThemeProvider>
);
}
}

318
src/app/product/[id]/page.tsx Normal file
View 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>
);
}