amayo/AmayoWeb/PERSONALIZACION.md

🎨 Guía de Personalización - AmayoWeb

📝 Pasos Esenciales de Configuración

1. Configurar Variables de Entorno

Crea un archivo .env en la raíz de AmayoWeb/:

# Discord OAuth2
VITE_DISCORD_CLIENT_ID=TU_CLIENT_ID_AQUI

# API URL (opcional si tienes backend)
VITE_API_URL=https://docs.amayo.dev/api

2. Cambiar Avatar del Bot

Edita src/components/IslandNavbar.vue (línea 36):

// Antes
const botLogo = ref('https://cdn.discordapp.com/avatars/1234567890/avatar.png')

// Después - Usa tu avatar real
const botLogo = ref('https://cdn.discordapp.com/avatars/TU_BOT_ID/TU_AVATAR_HASH.png')

3. Actualizar Nombre del Bot

En el mismo archivo IslandNavbar.vue (línea 37):

// Cambia 'Amayo' por el nombre de tu bot si es diferente
const botName = ref('TuBotName')

4. Personalizar Textos del Hero

Edita src/i18n/locales.js:

// Español
hero: {
  subtitle: 'Tu descripción personalizada aquí',
  // ... más textos
}

// Inglés
hero: {
  subtitle: 'Your custom description here',
  // ... more texts
}

5. Ajustar Estadísticas

Edita src/components/HeroSection.vue (línea 42):

const stats = ref({
  servers: '1.2K',    // Cambia por tus números reales
  users: '50K',       // Cambia por tus números reales
  commands: '150'     // Cambia por tus números reales
})

6. Configurar URL de Invitación

Edita src/components/HeroSection.vue (línea 115):

const inviteBot = () => {
  // Reemplaza YOUR_CLIENT_ID con tu Discord Client ID real
  window.open('https://discord.com/api/oauth2/authorize?client_id=TU_CLIENT_ID&permissions=8&scope=bot%20applications.commands', '_blank')
}

🎨 Personalización de Colores

Cambiar el Tema por Defecto

Edita src/composables/useTheme.js (línea 36):

// Cambia 'red' por: 'blue', 'green', 'purple', 'orange'
const currentTheme = ref('red')

Agregar un Nuevo Tema

En src/composables/useTheme.js, añade al objeto themes:

const themes = {
  // ... temas existentes
  cyan: {
    primary: '#00bcd4',
    secondary: '#0097a7',
    accent: '#00e5ff',
    gradient: 'linear-gradient(135deg, #00bcd4, #0097a7)',
  },
}

Luego en src/components/IslandNavbar.vue, añade el tema al array:

const themes = [
  // ... temas existentes
  { name: 'cyan', gradient: 'linear-gradient(135deg, #00bcd4, #0097a7)' },
]

Personalizar Colores del Fondo

Edita src/components/AnimatedBackground.vue:

.layer-1 {
  /* Cambia los colores del gradiente */
  background: radial-gradient(circle at 30% 50%, #TU_COLOR 0%, transparent 50%);
}

🌐 Añadir Más Idiomas

1. Actualizar configuración de i18n

Edita src/i18n/locales.js:

export default {
  es: { /* ... */ },
  en: { /* ... */ },
  // Nuevo idioma
  pt: {
    navbar: {
      getStarted: 'Começar',
      dashboard: 'Painel',
    },
    // ... más traducciones
  }
}

2. Actualizar selector de idioma

Edita src/components/IslandNavbar.vue:

const toggleLanguage = () => {
  const langs = ['es', 'en', 'pt']
  const currentIndex = langs.indexOf(locale.value)
  const nextIndex = (currentIndex + 1) % langs.length
  locale.value = langs[nextIndex]
  localStorage.setItem('language', locale.value)
}

📱 Ajustes Responsive

Cambiar Breakpoints

Edita el CSS en los componentes:

/* Cambiar de 768px a tu preferencia */
@media (max-width: 768px) {
  /* Estilos móviles */
}

/* Agregar nuevos breakpoints */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Estilos tablet */
}

🔗 Configurar Links del Navbar

Edita src/components/IslandNavbar.vue:

<template>
  <!-- Cambia los hrefs -->
  <a href="#tus-secciones" class="nav-btn primary">
    {{ t('navbar.getStarted') }}
  </a>
  <a href="/tu-dashboard" class="nav-btn secondary">
    {{ t('navbar.dashboard') }}
  </a>
</template>

🎯 Personalizar Animaciones

Velocidad del Typewriter

Edita src/components/HeroSection.vue (línea 62):

const typewriterEffect = () => {
  // Ajusta las velocidades (en milisegundos)
  const speed = isDeleting.value ? 50 : 100  // Cambia estos valores
}

Velocidad de Animación del Fondo

Edita src/components/AnimatedBackground.vue:

.layer-1 {
  animation: slide1 15s infinite;  /* Cambia 15s a tu preferencia */
}

🖼️ Añadir Más Características al Hero

Edita src/components/HeroSection.vue:

<div class="hero-visual">
  <!-- Añade más tarjetas flotantes -->
  <div class="floating-card card-4">
    <div class="card-icon">⚡</div>
    <div class="card-text">Nueva Característica</div>
  </div>
</div>

.card-4 {
  top: 150px;
  right: 50px;
  animation: float 6s ease-in-out infinite 6s;
}

📊 Backend Discord OAuth2

Configurar el Backend

1. Copia server-example.js a tu carpeta de backend
2. Instala dependencias:

npm install express axios cors dotenv jsonwebtoken

3. Crea .env en tu backend:

DISCORD_CLIENT_ID=tu_client_id
DISCORD_CLIENT_SECRET=tu_client_secret
JWT_SECRET=tu_secret_super_seguro
NODE_ENV=production
PORT=3000

4. Ejecuta con PM2:

pm2 start server-example.js --name "amayo-auth"
pm2 save

🔒 Configurar Discord Developer Portal

1. Ve a https://discord.com/developers/applications
2. Crea una nueva aplicación o selecciona la existente
3. Ve a OAuth2 > General
4. Añade Redirect URIs:
   • Desarrollo: http://localhost:5173/auth/callback
   • Producción: https://docs.amayo.dev/auth/callback
5. Copia el Client ID y Client Secret
6. Ve a Bot y copia el Token del bot (si lo necesitas)

🚀 Optimizaciones de Producción

Lazy Loading de Componentes

En src/router/index.js:

{
  path: '/dashboard',
  component: () => import('../views/Dashboard.vue')  // Carga perezosa
}

Preload de Fuentes

En index.html:

<head>
  <link rel="preload" href="/fonts/tu-fuente.woff2" as="font" type="font/woff2" crossorigin>
</head>

📈 Analytics (Opcional)

Añadir Google Analytics

En index.html:

<head>
  <!-- Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=TU_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'TU_ID');
  </script>
</head>

🎨 Fuentes Personalizadas

Importar Google Fonts

En src/App.vue o index.html:

<style>
@import url('https://fonts.googleapis.com/css2?family=TuFuente:wght@400;600;700&display=swap');
</style>

Luego en el CSS:

body {
  font-family: 'TuFuente', sans-serif;
}

🔔 Notificaciones (Próximamente)

Placeholder para cuando quieras añadir notificaciones:

// Instalar: npm install vue-toastification
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

app.use(Toast, {
  position: "top-right",
  timeout: 3000
});

---

¡Con estas personalizaciones tendrás tu landing page única! 🎉