# Configuración de Branding - English World Center

Este documento explica todas las variables de branding que puedes cambiar fácilmente para personalizar la aplicación.

## 📋 Variables de Entorno

Todas las variables de branding se configuran en el archivo `.env` (o `.env.production` para producción). Estas variables se cargan automáticamente en el frontend.

### Variables Disponibles

#### `VITE_APP_NAME`
- **Descripción**: Nombre de la aplicación que aparece en el header y títulos
- **Valor actual**: `English World Center`
- **Dónde se usa**: 
  - Header de todas las pantallas
  - Título de la página de login
  - Título del HTML (`<title>`)

#### `VITE_APP_COMPANY_NAME`
- **Descripción**: Nombre de la empresa que aparece en el footer
- **Valor actual**: `English World Center`
- **Dónde se usa**: 
  - Footer de todas las pantallas
  - Enlaces a la página de la empresa

#### `VITE_APP_COMPANY_URL`
- **Descripción**: URL del sitio web de la empresa
- **Valor actual**: `https://englishworldcenter.com/`
- **Dónde se usa**: 
  - Enlace del footer que lleva a la página de la empresa

#### `VITE_APP_FOOTER_TEXT`
- **Descripción**: Texto adicional del footer
- **Valor actual**: `All rights reserved`
- **Dónde se usa**: 
  - Footer de todas las pantallas

## 🔧 Cómo Cambiar las Variables

### Para Desarrollo Local

1. Edita el archivo `.env` en la raíz del proyecto:

```bash
# Branding Configuration
VITE_APP_NAME=Tu Nombre de App
VITE_APP_COMPANY_NAME=Tu Empresa
VITE_APP_COMPANY_URL=https://tu-empresa.com/
VITE_APP_FOOTER_TEXT=All rights reserved
```

2. Reinicia el frontend para que cargue las nuevas variables:

```bash
docker-compose --profile dev restart frontend-dev
```

### Para Producción

1. Edita el archivo `env.production`
2. Despliega los cambios

## 📍 Dónde se Usan las Variables

### Componentes que Usan las Variables

1. **`frontend/src/utils/appConfig.ts`**
   - Archivo central que define todas las variables de configuración
   - Proporciona funciones helper: `getAppName()`, `getCompanyName()`, `getCompanyUrl()`, `getFooterText()`

2. **`frontend/src/components/GlobalHeader.vue`**
   - Usa `getAppName()` para mostrar el nombre en el header
   - Línea 34: `{{ appName }}`

3. **`frontend/src/components/GlobalFooter.vue`**
   - Usa `getCompanyName()` y `getCompanyUrl()` para el enlace del footer
   - Usa `getFooterText()` para el texto adicional

4. **`frontend/src/views/public/LoginView.vue`**
   - Usa `getAppName()` para el título de la página de login

5. **`frontend/index.html`**
   - Título del HTML (actualizado manualmente, pero debería usar la variable)

## ✅ Checklist de Branding

Para cambiar completamente el branding de la aplicación, asegúrate de actualizar:

- [x] `VITE_APP_NAME` en `.env`
- [x] `VITE_APP_COMPANY_NAME` en `.env`
- [x] `VITE_APP_COMPANY_URL` en `.env`
- [x] `VITE_APP_FOOTER_TEXT` en `.env`
- [x] `frontend/index.html` - título del HTML
- [x] `env.production` - para producción
- [x] `env.example` - como plantilla

## 🎯 Valores Actuales

```
VITE_APP_NAME=English World Center
VITE_APP_COMPANY_NAME=English World Center
VITE_APP_COMPANY_URL=https://englishworldcenter.com/
VITE_APP_FOOTER_TEXT=All rights reserved
```

## 📝 Notas Importantes

- Las variables que empiezan con `VITE_` son específicas de Vite y se exponen al frontend
- Los cambios en `.env` requieren reiniciar el contenedor del frontend
- Las variables se leen en tiempo de compilación (build) para producción
- En desarrollo, se leen en tiempo de ejecución