From 0ea9b47dcd762fdcb384b26994fefa9218e979b1 Mon Sep 17 00:00:00 2001 From: Cesar Mendivil Date: Mon, 3 Nov 2025 22:19:39 -0700 Subject: [PATCH] Change the modern saas --- AvanzaCast.code-workspace | 5 +- docs/SISTEMA_DISENO_UNIFICADO.md | 365 + docs/hero_diagonal_implementacion.md | 135 + docs/javascript-snippets.md | 178 + docs/typescript-snippets.md | 202 + package-lock.json | 3856 ++++++- packages/admin-panel/tailwind.config.cjs | 14 +- packages/broadcast-studio/tailwind.config.cjs | 14 +- packages/landing-page/index.html | 9 +- packages/landing-page/package.json | 16 +- .../public/images/client/amazon.svg | 38 + .../public/images/client/google.svg | 27 + .../public/images/client/lenovo.svg | 27 + .../public/images/client/paypal.svg | 41 + .../public/images/client/shopify.svg | 36 + .../public/images/client/spotify.svg | 38 + .../public/images/features/branding.svg | 27 + .../public/images/features/guests.svg | 21 + .../public/images/features/multistream.svg | 27 + .../public/images/features/recording.svg | 25 + .../src/components/ModernSaasFooter.tsx | 263 + .../src/components/ModernSaasHeader.tsx | 403 + .../components/NewContentDetailsSection.tsx | 14 +- .../src/components/PlatformLogos.tsx | 164 +- .../src/components/ScrollToTop.tsx | 47 + .../src/components/StreamingFeatures.tsx | 99 +- .../src/components/StreamingHeroSection.tsx | 222 +- packages/landing-page/src/index.css | 319 +- .../src/pages/NextreamLanding.tsx | 76 +- packages/landing-page/src/pages/index.tsx | 560 +- packages/landing-page/tailwind.config.cjs | 166 +- packages/shared-components/src/Badge.tsx | 40 + packages/shared-components/src/Button.tsx | 47 + packages/shared-components/src/Card.tsx | 70 + packages/shared-components/src/Input.tsx | 89 + packages/shared-components/src/index.ts | 8 + public/ajax-loader.gif | Bin 0 -> 4178 bytes public/materialdesignicons-webfont.eot | Bin 0 -> 1071740 bytes public/materialdesignicons-webfont.svg | 9879 +++++++++++++++++ public/materialdesignicons-webfont.ttf | Bin 0 -> 1071520 bytes public/materialdesignicons-webfont.woff | Bin 0 -> 484804 bytes public/materialdesignicons-webfont.woff2 | Bin 0 -> 337236 bytes src/styles/custom/_fonts.scss | 6 + src/styles/custom/_general.scss | 13 + src/styles/custom/pages/_helper.scss | 14 + src/styles/custom/pages/_hero.scss | 138 + src/styles/techwind.scss | 15 + tailwind.config.shared.js | 129 + 48 files changed, 17285 insertions(+), 597 deletions(-) create mode 100644 docs/SISTEMA_DISENO_UNIFICADO.md create mode 100644 docs/hero_diagonal_implementacion.md create mode 100644 docs/javascript-snippets.md create mode 100644 docs/typescript-snippets.md create mode 100644 packages/landing-page/public/images/client/amazon.svg create mode 100644 packages/landing-page/public/images/client/google.svg create mode 100644 packages/landing-page/public/images/client/lenovo.svg create mode 100644 packages/landing-page/public/images/client/paypal.svg create mode 100644 packages/landing-page/public/images/client/shopify.svg create mode 100644 packages/landing-page/public/images/client/spotify.svg create mode 100644 packages/landing-page/public/images/features/branding.svg create mode 100644 packages/landing-page/public/images/features/guests.svg create mode 100644 packages/landing-page/public/images/features/multistream.svg create mode 100644 packages/landing-page/public/images/features/recording.svg create mode 100644 packages/landing-page/src/components/ModernSaasFooter.tsx create mode 100644 packages/landing-page/src/components/ModernSaasHeader.tsx create mode 100644 packages/landing-page/src/components/ScrollToTop.tsx create mode 100644 packages/shared-components/src/Badge.tsx create mode 100644 packages/shared-components/src/Button.tsx create mode 100644 packages/shared-components/src/Card.tsx create mode 100644 packages/shared-components/src/Input.tsx create mode 100644 packages/shared-components/src/index.ts create mode 100644 public/ajax-loader.gif create mode 100644 public/materialdesignicons-webfont.eot create mode 100644 public/materialdesignicons-webfont.svg create mode 100644 public/materialdesignicons-webfont.ttf create mode 100644 public/materialdesignicons-webfont.woff create mode 100644 public/materialdesignicons-webfont.woff2 create mode 100644 src/styles/custom/_fonts.scss create mode 100644 src/styles/custom/_general.scss create mode 100644 src/styles/custom/pages/_helper.scss create mode 100644 src/styles/custom/pages/_hero.scss create mode 100644 src/styles/techwind.scss create mode 100644 tailwind.config.shared.js 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 `