diff --git a/AvanzaCast.code-workspace b/AvanzaCast.code-workspace index 27df636..d08c148 100644 --- a/AvanzaCast.code-workspace +++ b/AvanzaCast.code-workspace @@ -4,10 +4,7 @@ "path": "." }, { - "path": "../vristo-main-1.1.8/react/vristo-react-main" - }, - { - "path": "../../Next" + "path": "../../../Descargas/techwind_v2.2.0" } ], "settings": {} diff --git a/docs/SISTEMA_DISENO_UNIFICADO.md b/docs/SISTEMA_DISENO_UNIFICADO.md new file mode 100644 index 0000000..a00c28f --- /dev/null +++ b/docs/SISTEMA_DISENO_UNIFICADO.md @@ -0,0 +1,365 @@ +# Sistema de Diseño Unificado - AvanzaCast + +## 📋 Resumen + +Se ha implementado un **sistema de diseño unificado** basado en el template **Techwind** para toda la aplicación AvanzaCast, asegurando consistencia visual entre: +- Landing Page +- Broadcast Studio +- Admin Panel + +--- + +## 🎨 Configuración Tailwind Compartida + +### Archivo: `tailwind.config.shared.js` + +#### **Colores Principales** +```javascript +{ + primary: { + // Indigo - Color principal de AvanzaCast + 500: '#8b5cf6', + 600: '#7c3aed', // Principal + 700: '#6d28d9', + }, + secondary: { + // Blue - Color secundario + 500: '#3b82f6', + 600: '#2563eb', // Principal + 700: '#1d4ed8', + }, + dark: '#3c4858', + black: '#161c2d', + 'dark-footer': '#192132', +} +``` + +#### **Tipografía** +- **Font Family**: Nunito (Google Fonts) +- **Weights**: 300, 400, 500, 600, 700 +- Fuentes alternativas: Alex Brush (cursiva), EB Garamond (serif) + +#### **Breakpoints** +```javascript +{ + xs: '540px', + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', + '2xl': '1536px', +} +``` + +#### **Shadows (Techwind Style)** +```javascript +{ + sm: '0 2px 4px 0 rgb(60 72 88 / 0.15)', + DEFAULT: '0 0 3px rgb(60 72 88 / 0.15)', + md: '0 5px 13px rgb(60 72 88 / 0.20)', + lg: '0 10px 25px -3px rgb(60 72 88 / 0.15)', + xl: '0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)', + '2xl': '0 25px 50px -12px rgb(60 72 88 / 0.25)', +} +``` + +#### **Animaciones** +```javascript +{ + 'float': 'float 6s ease-in-out infinite', + 'float-delayed': 'float 6s ease-in-out infinite 3s', + 'fadeInUp': 'fadeInUp 0.6s ease-out', + 'marquee': 'marquee 30s linear infinite', + 'spin-slow': 'spin 10s linear infinite', +} +``` + +--- + +## 🧩 Componentes UI Compartidos + +Todos disponibles en `@avanzacast/shared-components` + +### 1. **Button Component** + +```tsx +import { Button } from '@avanzacast/shared-components' + +// Variantes + + + + + + +// Tamaños + + + + +// Loading state + +``` + +**Props:** +- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' +- `size`: 'sm' | 'md' | 'lg' +- `isLoading`: boolean +- Todos los props nativos de `