tiendadesandalias

👡 AURA SANDALS — Mini E-Commerce de Sandalias (Tipo Shopify + WhatsApp)

Una tienda online moderna, rápida, elegante y completamente responsive de sandalias para mujer. Diseñada con la estética y experiencia de compra de una tienda Shopify, optimizada para la conversión directa mediante pedidos estructurados a WhatsApp.

🌟 Características Principales

🎨 Diseño Boutique de Lujo: Paleta cálida en tonos beige, arena, negro carbón y acentos en dorado/terracota.
📱 Mobile-First: 2 columnas en móviles, navegación sticky, drawers táctiles fluidos y botones amplios.
⚡ Catálogo Interactivo en Vivo:
- Búsqueda en tiempo real por nombre, referencia (ej. SD-025), categoría o color.
- Filtros por Categoría, Tallas (35 a 41), Colores con muestras visuales, Rango de Precios, Novedades y Ofertas.
- Ordenamiento por Destacados, Más recientes, Menor/Mayor precio, Nombre A-Z y Mayores ofertas.
🛍️ Modal & Página de Producto Detallada:
- Galería con miniaturas y navegación de fotos.
- Validación obligatoria de selección de talla y color.
- Control de stock y estado “Agotado” con botón de consulta.
- Botón de compra rápida “COMPRAR AHORA” y “Compartir producto” (Web Share API).
🛒 Carrito / “Mi Pedido” Lateral (Drawer):
- Manejo de variantes individuales por talla/color.
- Persistencia automática en localStorage (no se pierden productos al recargar).
- Barra de progreso para meta de Envío Gratis.
- Formulario de entrega (Nombre, Ciudad, Dirección, Teléfono, Observaciones).
💬 Pedido Automatizado por WhatsApp:
- Generación instantánea del mensaje con formato limpio, emojis, referencias de producto, desglose de cantidades, precios y datos del cliente.
- Enlace directo con wa.me/ sin necesidad de pasarelas de pago ni registro de usuarios.
📍 Botón Flotante de WhatsApp: Soporte y asesoría rápida en un clic desde cualquier parte del sitio.
🚀 Preparado para SEO: Metadata Open Graph, estructura semántica y rutas individuales preparadas (/producto/[id]).

🛠️ Tecnologías Utilizadas

Framework: Next.js 15 (App Router)
Lenguaje: TypeScript
Librería UI: React 19
Estilos: Tailwind CSS
Iconos: Lucide React

🚀 Guía de Uso y Configuración

1. Instalar Dependencias

pnpm install

2. Ejecutar en Modo Desarrollo

pnpm dev

Abre tu navegador en http://localhost:3000.

3. Compilar para Producción

pnpm build
pnpm start

4. Cambiar el Nombre y Datos de la Tienda

Todo se encuentra centralizado en src/config/store.ts. No necesitas modificar componentes:

// src/config/store.ts
export const STORE_CONFIG = {
  name: "MI NUEVA TIENDA",
  tagline: "Elegancia y frescura en cada paso",
  shortDescription: "Colección exclusiva de sandalias...",
  
  location: {
    city: "Medellín",
    country: "Colombia",
    address: "Calle 10 # 40-20, El Poblado",
    shippingInfo: "Envíos a todo el país (2 a 4 días hábiles)",
  },
  // ...
};

5. Cambiar el Número de WhatsApp

En src/config/store.ts, edita la propiedad whatsapp:

whatsapp: {
  // Código de país + número sin símbolos (Ejemplo Colombia: 57 + 3001234567)
  number: "573001234567",
  displayNumber: "+57 300 123 4567",
  defaultMessage: "Hola 👋, quiero consultar sobre el catálogo de sandalias.",
  floatButtonMessage: "Hola 👋, tengo una consulta sobre las sandalias.",
  orderGreeting: "Hola 👋, quiero realizar el siguiente pedido:",
}

6. Agregar Nuevos Productos

Abre el archivo src/data/products.ts y agrega un nuevo objeto al arreglo PRODUCTS:

{
  id: "SD-099",
  reference: "SD-099",
  name: "Sandalia Plataforma Verano",
  description: "Sandalia fresca y ligera con suela antideslizante.",
  longDescription: "Detalle completo del producto...",
  price: 69900,
  previousPrice: 79900, // Opcional, si tiene descuento
  category: "Plataformas",
  images: [
    "https://images.unsplash.com/photo-...",
    "https://images.unsplash.com/photo-..."
  ],
  colors: [
    { name: "Beige", hex: "#D6C4A5" },
    { name: "Negro", hex: "#1A1A1A" }
  ],
  sizes: [35, 36, 37, 38, 39, 40],
  featured: true, // Aparece en la sección favoritos
  isNew: true,    // Muestra insignia NUEVO
  isOffer: true,  // Muestra insignia OFERTA
  stock: 15,      // Si es 0, mostrará AGOTADO
  material: "Cuero sintético",
  heelHeight: "4 cm"
}

7. Cambiar Imágenes

Puedes usar:

Imágenes locales: Guarda tus fotos en public/images/sandalias/mi-foto.jpg y usa la ruta "/images/sandalias/mi-foto.jpg".
Imágenes remotas: Puedes pegar URLs directas (ej. de Unsplash, Cloudinary, ImgBB, etc.). Si usas un nuevo dominio remoto, agrégalo a next.config.mjs en remotePatterns.

8. Cambiar o Agregar Colores

En cada producto dentro de src/data/products.ts, define los colores con su nombre y código hexadecimal:

colors: [
  { name: "Miel", hex: "#C68B59" },
  { name: "Lavanda", hex: "#BDB0D0" },
  { name: "Dorado", hex: "#D4AF37" }
]

9. Agregar Nuevas Categorías

Abre src/data/categories.ts y agrega la categoría:

{
  id: "tacon-alto",
  name: "Tacón Alto",
  slug: "tacon-alto",
  image: "https://images.unsplash.com/...",
  description: "Para eventos de gala y ocasiones formales"
}

Asegúrate de que los productos correspondientes tengan category: "Tacón Alto" en src/data/products.ts.

10. Desplegar el Proyecto (Vercel)

El proyecto está 100% optimizado para desplegarse con un clic en Vercel:

Sube tu código a un repositorio de GitHub, GitLab o Bitbucket.
Ingresa a vercel.com e inicia sesión.
Haz clic en “Add New Project” y selecciona tu repositorio.
Vercel detectará automáticamente Next.js. Haz clic en “Deploy”.
¡Listo! Tu tienda estará online en segundos con certificado SSL gratis y CDN global ultrarrápida.

📁 Estructura del Código

├── public/
├── src/
│   ├── app/
│   │   ├── layout.tsx                # Layout con proveedores y SEO
│   │   ├── page.tsx                  # Landing / Catálogo completo
│   │   ├── globals.css               # Estilos globales y scrollbar boutique
│   │   └── producto/[id]/            # Página individual para SEO y enlaces directos
│   ├── components/
│   │   ├── Header.tsx                # Cabecera sticky, búsqueda y carrito
│   │   ├── Hero.tsx                  # Hero visual con CTAs
│   │   ├── CategoryList.tsx          # Categorías visuales interactivas
│   │   ├── FeaturedSections.tsx      # Más vendidos, ofertas y novedades
│   │   ├── ProductGrid.tsx           # Catálogo con ordenamiento y barra de filtros
│   │   ├── ProductCard.tsx           # Tarjeta de producto e-commerce
│   │   ├── ProductFilters.tsx        # Filtros Shopify (desktop sidebar + mobile drawer)
│   │   ├── ProductModal.tsx          # Modal vista rápida con variantes
│   │   ├── ProductGallery.tsx        # Galería con miniaturas y zoom
│   │   ├── ProductVariants.tsx       # Selección de color y talla
│   │   ├── QuantitySelector.tsx      # Selector de cantidad con control de stock
│   │   ├── CartDrawer.tsx            # Drawer "Mi Pedido" estilo Shopify
│   │   ├── CartItem.tsx              # Fila de item con variantes
│   │   ├── CustomerForm.tsx          # Formulario rápido de entrega
│   │   ├── WhatsAppFloatingButton.tsx# Botón flotante permanente
│   │   ├── BenefitsSection.tsx       # Beneficios de la tienda
│   │   ├── TestimonialsSection.tsx   # Testimonios de clientes
│   │   ├── ToastNotification.tsx     # Notificaciones flotantes
│   │   └── Footer.tsx                # Pie de página y redes
│   ├── config/
│   │   └── store.ts                  # Configuración centralizada de la tienda
│   ├── context/
│   │   ├── CartContext.tsx           # Estado global del carrito y localStorage
│   │   └── FilterContext.tsx         # Estado global de búsqueda, filtros y orden
│   ├── data/
│   │   ├── categories.ts             # Categorías con imágenes
│   │   └── products.ts               # Catálogo con 12+ productos reales
│   ├── lib/
│   │   ├── formatters.ts             # Formato de precios en COP
│   │   └── whatsapp.ts               # Generador del mensaje estructurado de WhatsApp
│   └── types/
│       └── index.ts                  # Tipos TypeScript
├── next.config.mjs
├── tailwind.config.ts
└── tsconfig.json