# 🏍️ MOTORIDER - Tema WordPress Personalizado

<div align="center">

![Motorider](https://img.shields.io/badge/WordPress-Custom_Theme-21759B?style=for-the-badge&logo=wordpress)
![WooCommerce](https://img.shields.io/badge/WooCommerce-Ready-96588A?style=for-the-badge&logo=woocommerce)
![Version](https://img.shields.io/badge/Version-1.0-A27BB3?style=for-the-badge)
![PHP](https://img.shields.io/badge/PHP-7.4+-777BB4?style=for-the-badge&logo=php)

**Tema profesional para tienda de repuestos y accesorios de motocicletas**

[📖 Documentación Completa](#documentación) • [🚀 Instalación Rápida](#instalación-rápida) • [✨ Características](#características) • [🎨 Demo](#demo)

</div>

---

## 📑 Índice

- [Sobre el Proyecto](#sobre-el-proyecto)
- [Características](#características)
- [Instalación Rápida](#instalación-rápida)
- [Documentación](#documentación)
- [Screenshots](#screenshots)
- [Estructura del Proyecto](#estructura-del-proyecto)
- [Tecnologías](#tecnologías)
- [Soporte](#soporte)

---

## 🎯 Sobre el Proyecto

**Motorider** es un tema WordPress completamente personalizado desarrollado para **Motoryder SpA**, una empresa especializada en repuestos, accesorios y servicio técnico para motocicletas.

### ¿Qué hace especial este tema?

- ✅ **100% Personalizado** - Sin dependencias de frameworks o page builders
- ✅ **Diseño Único** - Colores corporativos integrados (Negro, Blanco, Morado)
- ✅ **E-commerce Completo** - Integración total con WooCommerce
- ✅ **Animaciones Modernas** - Efectos suaves y profesionales
- ✅ **Mobile First** - Responsive en todos los dispositivos
- ✅ **Performance** - Optimizado para velocidad
- ✅ **Documentación Completa** - 7 guías detalladas

---

## ✨ Características

### 🎨 Diseño

| Feature | Descripción |
|---------|-------------|
| **Hero Slider** | 3 slides con transiciones automáticas |
| **Brands Carousel** | Slider infinito de 8 marcas |
| **Product Grid** | Grid moderno con efectos hover |
| **Categorías** | Tarjetas visuales con imágenes |
| **Responsive** | Diseño adaptable a todos los dispositivos |

### 🛒 E-commerce

| Feature | Descripción |
|---------|-------------|
| **WooCommerce** | Integración completa |
| **Add to Cart** | AJAX sin recargar página |
| **Carrito Dinámico** | Contador en header |
| **Filtros** | Sistema de filtrado de productos |
| **Búsqueda** | Búsqueda avanzada de productos |

### ⚡ Funcionalidades

| Feature | Descripción |
|---------|-------------|
| **WhatsApp Float** | Botón flotante siempre visible |
| **Menu Móvil** | Hamburger menu animado |
| **Sticky Header** | Header que sigue el scroll |
| **Smooth Scroll** | Navegación suave |
| **Back to Top** | Botón de volver arriba |
| **Notifications** | Sistema de notificaciones toast |

### 📄 Páginas Incluidas

- ✅ Home (Hero slider + 7 secciones)
- ✅ Tienda (WooCommerce)
- ✅ Categorías
- ✅ Nosotros (Historia, misión, valores)
- ✅ Contacto (Formulario + mapa)
- ✅ Producto Individual
- ✅ Error 404

---

## 🚀 Instalación Rápida

### Requisitos

- XAMPP (Apache + MySQL)
- WordPress 5.0+
- WooCommerce 5.0+
- PHP 7.4+

### Pasos (10 minutos)

```bash
1. Instalar WordPress en C:\xampp\htdocs\MOTORIDER
2. Activar el tema en Apariencia → Temas
3. Instalar y activar WooCommerce
4. Crear páginas (Inicio, Nosotros, Contacto)
5. Configurar menú
6. ¡Listo! 🎉
```

### Guías Detalladas

📖 **[CONFIGURACION_RAPIDA.md](CONFIGURACION_RAPIDA.md)** - Setup en 10 minutos  
📖 **[README.md](README.md)** - Instalación completa paso a paso

---

## 📚 Documentación

| Archivo | Descripción | Cuándo Usar |
|---------|-------------|-------------|
| **[RESUMEN_PROYECTO.md](RESUMEN_PROYECTO.md)** | Overview ejecutivo | ⭐ Empezar aquí |
| **[CONFIGURACION_RAPIDA.md](CONFIGURACION_RAPIDA.md)** | Setup rápido | ⚡ Instalación express |
| **[README.md](README.md)** | Guía completa | 📖 Instalación detallada |
| **[INSTRUCCIONES_IMAGENES.md](INSTRUCCIONES_IMAGENES.md)** | Guía de imágenes | 📸 Generar/descargar imágenes |
| **[FEATURES.md](FEATURES.md)** | Specs técnicas | 🎯 Info para developers |
| **[INDICE_ARCHIVOS.md](INDICE_ARCHIVOS.md)** | Ubicación archivos | 📋 Navegación del proyecto |
| **[COMANDOS_TROUBLESHOOTING.md](COMANDOS_TROUBLESHOOTING.md)** | Solución problemas | 🛠️ Debugging y fixes |

---

## 📸 Screenshots

### Página de Inicio
```
┌─────────────────────────────────────┐
│  HERO SLIDER (3 slides animados)   │
├─────────────────────────────────────┤
│  LOGOS DE MARCAS (carousel)        │
├─────────────────────────────────────┤
│  CATEGORÍAS DESTACADAS (3 cards)   │
├─────────────────────────────────────┤
│  NUEVOS PRODUCTOS (6 productos)    │
├─────────────────────────────────────┤
│  SOBRE NOSOTROS (texto + imagen)   │
├─────────────────────────────────────┤
│  PRODUCTOS DESTACADOS (8)          │
├─────────────────────────────────────┤
│  CTA FINAL (call to action)        │
└─────────────────────────────────────┘
```

*Para ver el sitio completo: Seguir instalación y configurar imágenes*

---

## 📁 Estructura del Proyecto

```
MOTORIDER/
│
├── 📄 Documentación (7 archivos .md)
│   ├── START_HERE.md
│   ├── RESUMEN_PROYECTO.md
│   ├── CONFIGURACION_RAPIDA.md
│   ├── README.md
│   ├── INSTRUCCIONES_IMAGENES.md
│   ├── FEATURES.md
│   ├── INDICE_ARCHIVOS.md
│   └── COMANDOS_TROUBLESHOOTING.md
│
├── 📁 IMG/
│   └── logo.png
│
└── 📁 wp-content/
    └── 📁 themes/
        └── 📁 motorider-custom/
            ├── 📄 style.css (2,500+ líneas)
            ├── 📄 functions.php (1,500+ líneas)
            ├── 📄 Templates (12 archivos .php)
            ├── 📁 js/
            │   └── main.js (800+ líneas)
            ├── 📁 woocommerce/
            │   ├── archive-product.php
            │   └── single-product.php
            └── 📁 assets/
                └── 📁 images/
```

---

## 🛠️ Tecnologías

### Frontend
![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=flat&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=flat&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black)

### Backend
![PHP](https://img.shields.io/badge/PHP-777BB4?style=flat&logo=php&logoColor=white)
![WordPress](https://img.shields.io/badge/WordPress-21759B?style=flat&logo=wordpress&logoColor=white)
![MySQL](https://img.shields.io/badge/MySQL-4479A1?style=flat&logo=mysql&logoColor=white)

### Librerías
![jQuery](https://img.shields.io/badge/jQuery-0769AD?style=flat&logo=jquery&logoColor=white)
![Font Awesome](https://img.shields.io/badge/Font_Awesome-339AF0?style=flat&logo=fontawesome&logoColor=white)
![Google Fonts](https://img.shields.io/badge/Google_Fonts-4285F4?style=flat&logo=google&logoColor=white)

---

## 📊 Estadísticas del Código

| Métrica | Valor |
|---------|-------|
| **CSS** | 2,500+ líneas |
| **PHP** | 1,500+ líneas |
| **JavaScript** | 800+ líneas |
| **Templates** | 12 archivos |
| **Funciones** | 20+ custom |
| **Animaciones** | 8 CSS animations |

---

## 🎨 Paleta de Colores

```css
Negro:       #000000  ████████
Blanco:      #FFFFFF  ████████
Morado:      #A27BB3  ████████
Gris:        #333333  ████████
Gris Claro:  #f5f5f5  ████████
```

---

## ✅ Características Técnicas

### Performance
- ⚡ Lazy loading de imágenes
- ⚡ CSS optimizado
- ⚡ JavaScript eficiente
- ⚡ Sin frameworks innecesarios

### SEO
- 🔍 HTML5 semántico
- 🔍 Meta tags optimizados
- 🔍 Breadcrumbs incluidos
- 🔍 Schema ready

### Accesibilidad
- ♿ WCAG 2.1 nivel AA
- ♿ ARIA labels
- ♿ Navegación por teclado
- ♿ Alto contraste

### Seguridad
- 🔒 Sanitización de inputs
- 🔒 Escape de outputs
- 🔒 Nonces en AJAX
- 🔒 Best practices WP

---

## 🌟 Próximas Características (v2.0)

- [ ] Integración Transbank WebPay
- [ ] Checkout personalizado
- [ ] Wishlist de productos
- [ ] Blog section
- [ ] Multi-idioma
- [ ] Dark mode
- [ ] PWA support

---

## 📞 Soporte

### Documentación
- ✅ 7 guías completas incluidas
- ✅ Código completamente comentado
- ✅ Ejemplos y casos de uso

### Contacto
- **Web:** [QuieroVentas.cl](https://quieroventas.cl)
- **Email:** contacto@quieroventas.cl

### Recursos
- [WordPress Codex](https://codex.wordpress.org/)
- [WooCommerce Docs](https://woocommerce.com/documentation/)
- [Stack Overflow](https://stackoverflow.com/questions/tagged/wordpress)

---

## 📝 Licencia

Este tema está licenciado bajo **GNU General Public License v2 or later**

---

## 👨‍💻 Desarrollador

**QuieroVentas.cl**  
Desarrollo web profesional

---

## 🙏 Agradecimientos

- WordPress Community
- WooCommerce Team
- Font Awesome
- Google Fonts

---

<div align="center">

### ⭐ ¿Te gusta este proyecto?

Si encuentras útil este tema, considera darle una estrella ⭐

---

**Desarrollado con ❤️ por QuieroVentas.cl**

![Footer](https://img.shields.io/badge/Motorider-v1.0-A27BB3?style=for-the-badge)

</div>
