📖

Manual de Edición

Raíces Ecuatorianas · Guía completa para el propietario

Este manual explica exactamente dónde y cómo editar cada parte del contenido de tu sitio web. Todos los cambios se hacen directamente en los archivos de código usando el editor de Rocket.

📌 Cómo usar este manual:

Encuentra la sección que quieres editar en el menú de la izquierda.
Lee el archivo y la línea exacta donde está el contenido.
Abre ese archivo en el editor de código de Rocket.
Cambia solo el texto/valor indicado, sin modificar el código alrededor.
Guarda y verifica el cambio en la vista previa.

⚠️ Regla de Oro

Cambia solo el texto entre comillas o los valores numéricos. Nunca borres llaves {}, corchetes [], ni puntos y comas.

🖼️

Sección Principal (Hero)

📁 src/app/components/HeroSection.tsx

🎩

Productos y Precios

📁 src/app/products/components/ProductsGrid.tsx

Todos los productos del catálogo están en el array allProducts al inicio del archivo. Cada producto tiene esta estructura:

{
  id: 1,                          // ← ID único (no cambiar)
  name: 'Montecristi Superfino',  // ← Nombre del producto
  category: 'fino',               // ← 'fino' | 'clasico' | 'especial'
  weave: 'Superfino · 2500 puntos/cm²', // ← Descripción del tejido
  origin: 'Montecristi, Manabí',  // ← Lugar de origen
  price: 320,                     // ← Precio en dólares (solo número)
  badge: 'Exclusivo',             // ← Etiqueta sobre la imagen
  image: "https://...",           // ← URL de la imagen
  alt: 'Descripción de la imagen',// ← Texto alternativo
  desc: 'El más fino del mundo...'// ← Descripción corta
}

⭐

Productos Destacados (Página de Inicio)

📁 src/app/components/FeaturedProducts.tsx

La sección de productos destacados en la página de inicio tiene su propio array featuredHats con 3 productos.

📜

Sección Historia

📁 src/app/components/HeritageSection.tsx

💳

Métodos de Pago

📁 src/app/checkout/components/CheckoutForm.tsx

📱

Número de WhatsApp

📁 src/components/WhatsAppButton.tsx

📸

Enlace de Instagram

📁 src/components/InstagramButton.tsx

🧭

Menú de Navegación

📁 src/components/Header.tsx

📋

Pie de Página (Footer)

📁 src/components/Footer.tsx

🛒

Formulario de Pago / Checkout

📁 src/app/checkout/components/CheckoutForm.tsx

🖼️

Cómo Cambiar Imágenes

📁 Múltiples archivos

Opciones para obtener URLs de imágenes:

1️⃣

Unsplash (gratis)

Ve a unsplash.com, busca la imagen, haz clic derecho → "Copiar dirección de imagen". Usa esa URL directamente.

2️⃣

Imgur (sube tus fotos)

Ve a imgur.com, sube tu foto, copia el enlace directo que termina en .jpg o .png.

3️⃣

Cloudinary (profesional)

Crea cuenta en cloudinary.com, sube tus imágenes y usa las URLs que genera automáticamente.

💡 Recomendación de tamaños:

• Hero principal: 800×1000px (vertical)
• Tarjetas de producto: 800×600px (horizontal)
• Sección historia: 600×800px (vertical)

🎨

Colores y Estilos

📁 src/styles/tailwind.css y tailwind.config.js

Colores principales del sitio:

Color primario (dorado/ámbar)

Botones, badges, acentos principales

--color-primary en src/styles/tailwind.css

Color secundario

Hover de botones

--color-secondary en src/styles/tailwind.css

Fondo de la página

Color de fondo general

--color-background en src/styles/tailwind.css

Color del texto

Texto principal

--color-foreground en src/styles/tailwind.css

⚠️ Al cambiar colores:

En src/styles/tailwind.css, busca la variable que quieres cambiar y reemplaza solo el valor hexadecimal (ej: #C9A84C) con el nuevo color. No cambies el nombre de la variable.