amayo/AmayoWeb/README.md

AmayoWeb - Landing Page

Landing page moderna para el bot de Discord Amayo, construida con Vue 3, Vite y diseño pixel art animado.

🌐 Dominios

• Frontend: https://docs.amayo.dev
• Backend API: https://api.amayo.dev

🚀 Características

• ✨ Fondo animado con gradientes temáticos
• 🎨 Sistema de temas (Rojo, Azul, Verde, Morado, Naranja)
• 🌍 Internacionalización (Español/English)
• 📊 Estadísticas en tiempo real del bot
• 🔐 Autenticación con Discord OAuth2
• 📱 Diseño responsive y moderno
• ⚡ Optimizado con Vite

📋 Prerequisitos

• Node.js 18+
• npm o pnpm
• Bot de Discord configurado
• Servidor backend corriendo en puerto 3001

🛠️ Instalación

# Clonar repositorio
cd AmayoWeb

# Instalar dependencias
npm install

# Copiar variables de entorno
cp .env.example .env

# Configurar tu Discord Client ID en .env
VITE_DISCORD_CLIENT_ID=tu_client_id_aqui

💻 Desarrollo

# Iniciar servidor de desarrollo (puerto 5173)
npm run dev

# Asegúrate de que el backend API esté corriendo en puerto 3001

🏗️ Compilación para Producción

# Build de producción
npm run build

# Los archivos compilados estarán en ./dist

🚀 Despliegue

Ver NGINX_CONFIG.md para instrucciones detalladas de configuración de NGINX con SSL.

Resumen rápido:

1. Build del proyecto: npm run build
2. Copiar archivos a /var/www/docs.amayo.dev
3. Configurar NGINX para servir los archivos estáticos
4. Generar certificados SSL con certbot

# Usar el script de deploy
./deploy.sh

📁 Estructura del Proyecto

AmayoWeb/
├── src/
│   ├── components/       # Componentes Vue
│   │   ├── AnimatedBackground.vue
│   │   ├── IslandNavbar.vue
│   │   ├── HeroSection.vue
│   │   └── DiscordLoginButton.vue
│   ├── composables/      # Composables de Vue
│   │   └── useTheme.js
│   ├── i18n/            # Configuración i18n
│   │   ├── index.js
│   │   └── locales.js
│   ├── services/        # Servicios API
│   │   ├── auth.js
│   │   └── bot.js
│   ├── router/          # Vue Router
│   └── views/           # Vistas/Páginas
├── public/              # Archivos estáticos
└── dist/               # Build de producción (generado)

🎨 Temas Disponibles

1. Rojo (Predeterminado) - Energético y vibrante
2. Azul - Tranquilo y profesional
3. Verde - Natural y relajante
4. Morado - Místico y elegante
5. Naranja - Cálido y acogedor

🌍 Idiomas

• 🇪🇸 Español (Predeterminado)
• 🇺🇸 English

🔧 Configuración

Variables de Entorno

# .env
VITE_DISCORD_CLIENT_ID=tu_client_id
VITE_API_URL=http://localhost:3001  # Desarrollo
# VITE_API_URL=https://api.amayo.dev # Producción

Vite Config

El proxy está configurado para desarrollo:

// vite.config.js
server: {
  proxy: {
    '/api': 'http://localhost:3001'
  }
}

📚 Documentación Adicional

• QUICKSTART.md - Guía de inicio rápido
• NGINX_CONFIG.md - Configuración de NGINX y SSL
• SETUP.md - Configuración detallada
• PERSONALIZACION.md - Cómo personalizar el diseño

🤝 Contribuir

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📝 Licencia

Este proyecto está bajo la licencia MIT.

🆘 Soporte

Si tienes problemas, abre un issue en GitHub o contacta al equipo de desarrollo.

---

Hecho con ❤️ para la comunidad de Amayo