# 📚 ÍNDICE DE ARCHIVOS - PROYECTO MOTORIDER

## 🗂️ DOCUMENTACIÓN (Raíz del Proyecto)

### 📄 Archivos de Guía

1. **RESUMEN_PROYECTO.md** ⭐ EMPEZAR AQUÍ
   - Overview ejecutivo del proyecto
   - Entregables completados
   - Próximos pasos
   - Checklist final

2. **CONFIGURACION_RAPIDA.md** ⚡ INSTALACIÓN RÁPIDA
   - Setup en 10 minutos
   - Pasos básicos sin detalles
   - Comandos útiles
   - Para instalar rápidamente

3. **README.md** 📖 GUÍA COMPLETA
   - Instalación paso a paso detallada
   - Configuración completa
   - Solución de problemas
   - Documentación técnica extensa

4. **INSTRUCCIONES_IMAGENES.md** 📸 GUÍA DE IMÁGENES
   - 20 imágenes necesarias
   - Dimensiones exactas
   - Prompts para IA generativa
   - Ubicaciones de archivos
   - Herramientas recomendadas

5. **FEATURES.md** 🎯 CARACTERÍSTICAS TÉCNICAS
   - Especificaciones del tema
   - Métricas de código
   - Tecnologías utilizadas
   - Roadmap futuro

6. **INDICE_ARCHIVOS.md** 📋 (este archivo)
   - Ubicación de todos los archivos
   - Propósito de cada archivo
   - Guía de navegación

---

## 🎨 TEMA WORDPRESS

### Ubicación: `wp-content/themes/motorider-custom/`

### 📄 Archivos Principales

#### Core del Tema:
```
style.css           → Todos los estilos CSS (2,500+ líneas)
functions.php       → Funcionalidades PHP (1,500+ líneas)
header.php          → Encabezado con menú
footer.php          → Footer con widgets
index.php           → Template por defecto
```

#### Templates de Página:
```
front-page.php      → Página de inicio (Hero, slider, categorías)
page.php            → Páginas genéricas
page-nosotros.php   → Página "Sobre Nosotros"
page-contacto.php   → Página de Contacto con formulario
page-categorias.php → Página de Categorías
404.php             → Página de error 404
searchform.php      → Formulario de búsqueda
```

#### WooCommerce Templates:
```
woocommerce/
├── archive-product.php  → Página de Tienda/Shop
└── single-product.php   → Página individual de producto
```

#### JavaScript:
```
js/
└── main.js         → Todas las funcionalidades JS (800+ líneas)
```

#### Recursos:
```
assets/
└── images/
    ├── brands/     → Logos de marcas (8 imágenes)
    └── ...         → Imágenes del sitio (12+ imágenes)
```

#### Otros:
```
screenshot.txt      → Instrucciones para screenshot
```

---

## 📂 ESTRUCTURA DETALLADA DE ARCHIVOS

### 1. ARCHIVOS DE CONFIGURACIÓN

#### `style.css`
**Propósito:** Estilos completos del tema  
**Contenido:**
- Reset y variables CSS
- Header y navegación
- Hero slider
- Brands slider
- Categorías y productos
- Footer
- WhatsApp flotante
- Responsive design
- Animaciones

**Líneas:** ~2,500  
**Uso:** Se carga automáticamente

---

#### `functions.php`
**Propósito:** Funcionalidades WordPress  
**Contenido:**
- Soporte de tema (thumbnails, menus, etc.)
- Enqueue de estilos y scripts
- Widgets
- Customizer options
- WooCommerce integration
- AJAX functions
- Helper functions

**Líneas:** ~1,500  
**Uso:** Se ejecuta automáticamente

---

### 2. TEMPLATES DE ESTRUCTURA

#### `header.php`
**Propósito:** Encabezado del sitio  
**Incluye:**
- Meta tags
- Logo
- Menú principal
- Carrito de compras
- Menú móvil

**Uso:** Incluido en todas las páginas

---

#### `footer.php`
**Propósito:** Pie de página  
**Incluye:**
- 4 columnas de contenido
- Logo
- Enlaces rápidos
- Categorías
- Información de contacto
- Redes sociales
- Copyright
- WhatsApp flotante

**Uso:** Incluido en todas las páginas

---

### 3. TEMPLATES DE CONTENIDO

#### `front-page.php`
**Propósito:** Página de inicio principal  
**Secciones:**
1. Hero Slider (3 slides)
2. Brands Slider (8 marcas)
3. Categorías Destacadas (3)
4. Últimos Productos (6)
5. Sobre Nosotros
6. Productos Destacados (8)
7. CTA Final

**Uso:** Se activa automáticamente al configurar página de inicio estática

---

#### `page-nosotros.php`
**Propósito:** Página "Sobre Nosotros"  
**Template Name:** Página Nosotros  
**Contenido:**
- Historia de la empresa
- Misión
- Valores (3 tarjetas)
- Por qué elegirnos (6 features)
- CTA final

**Uso:** Seleccionar template al crear página

---

#### `page-contacto.php`
**Propósito:** Página de Contacto  
**Template Name:** Página Contacto  
**Contenido:**
- Formulario de contacto
- Información de contacto (4 cards)
- Mapas de 2 sucursales
- Horarios de atención
- Métodos de envío

**Uso:** Seleccionar template al crear página

---

#### `page-categorias.php`
**Propósito:** Página de Categorías  
**Template Name:** Categorías  
**Contenido:**
- Grid de todas las categorías
- Imagen por categoría
- Contador de productos
- Enlaces a categorías

**Uso:** Seleccionar template al crear página

---

#### `404.php`
**Propósito:** Página de error  
**Contenido:**
- Mensaje de error amigable
- Enlaces de navegación
- Formulario de búsqueda
- Sugerencias de páginas

**Uso:** Se activa automáticamente en errores 404

---

### 4. WOOCOMMERCE TEMPLATES

#### `woocommerce/archive-product.php`
**Propósito:** Página de tienda/shop  
**Contenido:**
- Header de tienda
- Filtros de productos
- Grid de productos
- Paginación
- Contador de resultados

**Uso:** Reemplaza template por defecto de WooCommerce

---

#### `woocommerce/single-product.php`
**Propósito:** Página individual de producto  
**Contenido:**
- Breadcrumbs
- Galería de imágenes
- Información de producto
- Add to cart
- Productos relacionados

**Uso:** Reemplaza template por defecto de WooCommerce

---

### 5. JAVASCRIPT

#### `js/main.js`
**Propósito:** Interactividad del sitio  
**Funciones:**
1. Hero Slider (auto-play, dots)
2. Mobile Menu (toggle, animación)
3. Scroll Animations (fade-in)
4. Sticky Header
5. Add to Cart AJAX
6. Smooth Scroll
7. Product Hover Effects
8. WhatsApp Float Animation
9. Brands Slider (pause on hover)
10. Contact Form Handler
11. Back to Top Button
12. Notification System

**Líneas:** ~800  
**Uso:** Enqueued automáticamente en functions.php

---

### 6. OTROS ARCHIVOS

#### `searchform.php`
**Propósito:** Formulario de búsqueda personalizado  
**Uso:** Llamado con `get_search_form()`

#### `screenshot.txt`
**Propósito:** Instrucciones para crear screenshot.png  
**Nota:** Reemplazar por imagen real 1200x900px

---

## 📸 IMÁGENES NECESARIAS

### Ubicación: `assets/images/`

#### Hero Slider (3 imágenes):
```
hero-1.jpg (1920x600px) - Taller de motos
hero-2.jpg (1920x600px) - Repuestos y accesorios
hero-3.jpg (1920x600px) - Logos de marcas
```

#### Categorías (3 imágenes):
```
category-repuestos.jpg (600x400px)
category-accesorios.jpg (600x400px)
category-aceites.jpg (600x400px)
```

#### Sobre Nosotros (5 imágenes):
```
about-taller.jpg (800x600px)
about-team.jpg (800x600px)
value-quality.jpg (600x400px)
value-transparency.jpg (600x400px)
value-commitment.jpg (600x400px)
```

#### Otros:
```
placeholder-product.jpg (500x500px)
logo.png (ya existe en IMG/)
```

#### Brands (8 logos):
```
brands/honda.png (200x100px)
brands/yamaha.png (200x100px)
brands/bajaj.png (200x100px)
brands/suzuki.png (200x100px)
brands/aohue.png (200x100px)
brands/ktm.png (200x100px)
brands/motorrad.png (200x100px)
brands/alternativas.png (200x100px)
```

**Ver:** `INSTRUCCIONES_IMAGENES.md` para prompts detallados

---

## 🔍 CÓMO USAR ESTE PROYECTO

### Para Instalación Rápida:
1. Leer `RESUMEN_PROYECTO.md` (5 min)
2. Seguir `CONFIGURACION_RAPIDA.md` (10 min)
3. Generar imágenes según `INSTRUCCIONES_IMAGENES.md` (2-3 horas)

### Para Instalación Detallada:
1. Leer `README.md` completo (20 min)
2. Seguir paso a paso (1-2 horas)
3. Consultar `FEATURES.md` para entender características

### Para Desarrolladores:
1. Revisar `FEATURES.md` para specs técnicas
2. Estudiar código en archivos PHP/CSS/JS
3. Consultar comentarios en el código

---

## 📞 SOPORTE

### Documentación:
- ✅ 5 guías completas
- ✅ Código comentado
- ✅ Ejemplos incluidos

### Contacto:
- Email: contacto@quieroventas.cl
- Web: https://quieroventas.cl

---

## ✅ CHECKLIST DE ARCHIVOS

### Documentación:
- [x] RESUMEN_PROYECTO.md
- [x] CONFIGURACION_RAPIDA.md
- [x] README.md
- [x] INSTRUCCIONES_IMAGENES.md
- [x] FEATURES.md
- [x] INDICE_ARCHIVOS.md

### Tema WordPress:
- [x] style.css
- [x] functions.php
- [x] header.php
- [x] footer.php
- [x] front-page.php
- [x] index.php
- [x] page.php
- [x] page-nosotros.php
- [x] page-contacto.php
- [x] page-categorias.php
- [x] 404.php
- [x] searchform.php

### WooCommerce:
- [x] archive-product.php
- [x] single-product.php

### JavaScript:
- [x] main.js

### Carpetas:
- [x] assets/images/
- [x] assets/images/brands/
- [x] woocommerce/
- [x] js/

---

## 🎯 PRÓXIMOS PASOS

1. ✅ Todos los archivos creados
2. ⏭️ Instalar WordPress
3. ⏭️ Activar tema
4. ⏭️ Configurar páginas
5. ⏭️ Generar/subir imágenes
6. ⏭️ Crear productos
7. ⏭️ Personalizar contenido
8. ⏭️ Lanzar sitio

---

**Todo listo para comenzar la instalación** ✅  
**Sigue:** `CONFIGURACION_RAPIDA.md` o `README.md`

---

**Desarrollado por QuieroVentas.cl** 🏍️  
**Noviembre 2025**
