Not Found
+The requested URL was not found on this server.
+Additionally, a 404 Not Found +error was encountered while trying to use an ErrorDocument to handle the request.
+ diff --git a/packages/landing-page/public/images/logo.png b/packages/landing-page/public/images/logo.png new file mode 100644 index 0000000..e69de29 diff --git a/packages/landing-page/src/App.tsx b/packages/landing-page/src/App.tsx index 6cab603..769310e 100644 --- a/packages/landing-page/src/App.tsx +++ b/packages/landing-page/src/App.tsx @@ -4,6 +4,8 @@ const AnyRoutes: any = RRDRoutes import Broadcasts from './pages/Broadcasts' import Studio from './pages/Studio' import Landing from './pages/Landing' +import NewLanding from './pages/NewLanding' +import NextreamLanding from './pages/NextreamLanding' import Login from './pages/Login' import Register from './pages/Register' import MainLayout from './components/MainLayout' @@ -28,8 +30,10 @@ export default function App() { {/* Use any-cast to avoid TS incompatibility between react types and react-router-dom */}
+
+
+
+ + ¿Listo para comenzar tu próxima transmisión? +
++ Únete a miles de creadores que ya están transmitiendo con AvanzaCast. Es gratis para comenzar. +
+ + + ++ No se requiere tarjeta de crédito • Configura en menos de 2 minutos +
+
+
+ ))}
+
+
+
+ {/* Contenido de texto */}
+
+
+ {/* Imagen */}
+
+
+
+
+ 
{
+ e.currentTarget.src = 'https://via.placeholder.com/600x400?text=' + encodeURIComponent(block.title);
+ }}
+ />
+
+
+ {/* Header */}
+
+
+
+
+ {/* Carrusel de características */}
+ + Todo lo que necesitas para transmitir +
++ Herramientas profesionales al alcance de un clic +
+
+ {/* Flecha izquierda */}
+
+
+ {/* Grid de características */}
+
+
+ {features.map((feature) => (
+
+
+ {/* Flecha derecha */}
+
+ handleFeatureClick(feature.name)}
+ className="flex-none w-64 bg-white border-2 border-gray-200 rounded-2xl p-8 hover:-translate-y-2 hover:shadow-2xl transition-all cursor-pointer group"
+ >
+
+ ))}
+
+ {feature.icon}
+
+ + {feature.name} +
++ {feature.description} +
+
+
+
+ {/* Logo */}
+
+ 
+
+
+ {/* Desktop Navigation */}
+
+
+ {/* Mobile Menu Toggle */}
+
+
+
+ {/* Mobile Menu */}
+ {isMobileMenuOpen && (
+
+ )}
+
+
+
+ {/* Desktop Navigation */}
+
+
+ {/* Mobile Menu Toggle */}
+
+
+
+
+ {/* Contenido del Hero */}
+
+
+ {/* Logos de clientes */}
+
+
+
+ {/* Formulario de Registro */}
+ + La manera más sencilla de transmitir en vivo y grabar +
++ AvanzaCast es un estudio profesional para grabar y hacer transmisiones en vivo desde tu navegador. Invita a tus invitados, comparte tu pantalla y transmite en varias plataformas a la vez. +
+
+
+
+
+
+ {/* Gráfico decorativo de fondo */}
+
+ Comienza gratis
+ + {/* Botón de Google */} + + + {/* Separador */} +
+ o
+
+
+
+ {/* Formulario de Email */}
+
+
+ + Al continuar, aceptas nuestros{' '} + Términos de Servicio + {' '}y{' '} + Política de Privacidad. +
+ ++ ¿Ya tienes cuenta?{' '} + Inicia sesión +
+
+
+ Confiado por miles de creadores y empresas
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+ {/* Carrusel */}
+ + Testimonios +
++ 60,000,000+ transmisiones realizadas +
++ Miles de creadores confían en AvanzaCast para sus transmisiones +
+
+ {/* Flecha izquierda */}
+
+
+ {/* Testimonial Card */}
+
+
+ {/* Mobile Navigation */}
+
+ {/* Rating Stars */}
+
+
+ {/* Flecha derecha */}
+
+
+ {/* Pagination Dots */}
+
+ {[...Array(testimonials[currentIndex].rating)].map((_, i) => (
+
+ ))}
+
+
+ {/* Quote */}
+ + "{testimonials[currentIndex].quote}" ++ + {/* Author Info */} +
+
+
+ {testimonials[currentIndex].name.charAt(0)}
+
+
+
+ + {testimonials[currentIndex].name} +
++ {testimonials[currentIndex].role} at {testimonials[currentIndex].company} +
+
+ {testimonials.map((_, index) => (
+
+
+
+
+
+
+
+
+
+ {/* Main Header - Navegación principal */}
+
+
+
+ {/* Mobile Menu */}
+ {isMobileMenuOpen && (
+
+ {/* Logo */}
+
+
+
+
+
+
+
+
+
+
+ AvanzaCast
+
+ Professional Streaming
+
+
+
+ {/* Desktop Navigation */}
+
+
+ {/* CTA Buttons */}
+
+ {/* Search Button */}
+
+
+ {/* Login */}
+
+ Iniciar sesión
+
+
+ {/* Get Started Button */}
+
+ Empezar Gratis
+
+
+
+
+ {/* Mobile Menu Button */}
+
+
+
+ )}
+
+
+ Inicio
+
+
+
+
+
+ {activeDropdown === 'producto-mobile' && (
+
+ )}
+
+
+
+
+ {activeDropdown === 'soluciones-mobile' && (
+
+ )}
+
+
+
+ Precios
+
+
+ Nosotros
+
+
+ Contacto
+
+
+
+
+ {/* Gradient Orbs */}
+
+
+
+
+ {/* Floating Shapes */}
+
+
+
+
+ {/* Grid Pattern */}
+
+
+ {/* Content */}
+
+
+
+
+
+
+ {/* Wave Divider */}
+
+ {/* Left Content */}
+
+
+ {/* Badge */}
+
+
+ Transmite en Vivo
+
+
+
+ {/* Description */}
+
+
+ {/* Right Content - Animated Dashboard Preview */}
+
+
+ Plataforma #1 de Streaming Profesional
+
+
+ {/* Heading */}
+
+
+ Transmite en Vivo
+
+
+
+ Como un Profesional
+
+
+
+ {/* Description */}
+ + La plataforma todo-en-uno para crear transmisiones en vivo de alta calidad. + Multistream, estudio virtual, invitados remotos y mucho más. +
+ + {/* Features List */} +
+
+
+ {/* CTA Buttons */}
+
+
+
+
+
+ Multistream a múltiples plataformas
+
+
+
+
+
+ Hasta 10 invitados simultáneos
+
+
+
+
+
+ Grabación en alta calidad
+
+
+
+
+
+ Sin instalación, 100% web
+
+
+ Empezar Gratis
+
+
+
+
+
+
+ {/* Stats */}
+
+
+
+
+ 35M+
+ Horas transmitidas
+
+
+ 98%
+ Satisfacción
+
+
+ 150K+
+ Usuarios activos
+
+
+
+ {/* Main Dashboard Card */}
+
+
+ {/* Header */}
+
+
+ {/* Floating Elements */}
+
+
+
+ {/* Video Preview */}
+
+
+
+
+
+
+
+ En Vivo
+ 1,234 espectadores
+
+
+ LIVE
+
+
+
+
+ {/* Platforms */}
+
+
+
+ {/* Overlays */}
+ 🎥
+
+
+
+
+ Mi Transmisión
+ 2:34:12
+
+
+
+
+
+
+
+
+
+ Transmitiendo a:
+
+
+ {/* Chat Messages */}
+
+
+
+
+ YouTube
+
+
+
+ Facebook
+
+
+
+ Twitch
+
+
+
+
+
+
+
+
+
+
+ Usuario123
+ ¡Excelente contenido! 🔥
+
+
+
+
+
+
+
+ MariaG
+ Muy profesional 👏
+
+
+
+
+
+ 4K
+ HD Quality
+
+
+
+
+ 10
+ Invitados
+
+
+
+
+
+ {children}
+
+ );
+};
+
+export default PageContainer;
diff --git a/packages/landing-page/src/components/PlatformLogos.tsx b/packages/landing-page/src/components/PlatformLogos.tsx
new file mode 100644
index 0000000..317cdf2
--- /dev/null
+++ b/packages/landing-page/src/components/PlatformLogos.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+const platforms = [
+ { name: 'YouTube', logo: '🎥', color: 'from-red-500 to-red-600' },
+ { name: 'Twitch', logo: '🟣', color: 'from-purple-500 to-purple-600' },
+ { name: 'Facebook Live', logo: '👥', color: 'from-blue-500 to-blue-600' },
+ { name: 'LinkedIn Live', logo: '💼', color: 'from-blue-700 to-blue-800' },
+ { name: 'TikTok Live', logo: '🎵', color: 'from-pink-500 to-rose-600' },
+ { name: 'Instagram Live', logo: '📸', color: 'from-purple-400 to-pink-500' },
+ { name: 'Twitter/X', logo: '🐦', color: 'from-sky-400 to-sky-600' },
+ { name: 'Vimeo', logo: '▶️', color: 'from-cyan-500 to-cyan-600' },
+];
+
+export default function PlatformLogos() {
+ return (
+
+
+
+
+
+ {/* Logos Grid */}
+
+
+
+ Integraciones Nativas
+
+
+
+ + Multistreaming a Todas Tus Plataformas +
++ Transmite simultáneamente a más de 15+ plataformas con un solo click +
+
+ {/* Gradient Overlays */}
+
+
+
+ {/* Marquee Animation */}
+
+
+ {/* Stats Row */}
+
+
+
+ {[...platforms, ...platforms].map((platform, index) => (
+
+
+
+ ))}
+
+
+
+ {platform.logo}
+
+ + {platform.name} +
+
+
+
+
+
+ 15+
+
+ Plataformas Soportadas
+
+
+
+ 1-Click
+
+ Conexión Instantánea
+
+
+
+ 100%
+
+ Sincronización Perfecta
+
+
+
+
+
+ Planes y Precios
+
+
+
+ + Elige el Plan Perfecto para Ti +
++ Sin contratos. Cancela cuando quieras. Actualiza o cambia de plan en cualquier momento. +
+
+ {plans.map((plan, index) => (
+
+
+ {/* Additional Info */}
+
+ {plan.popular && (
+
+ ))}
+
+ MÁS POPULAR
+
+ )}
+
+
+
+ {plan.name}
++ {plan.description} +
+
+ ${plan.price}
+
+ /mes
+
+
+
+
+
+
+
+ + Características incluidas: +
+-
+ {plan.features.map((feature, i) => (
+
- + {feature.included ? ( + + ) : ( + + )} + + {feature.text} + + + ))} +
+
+ + ¿Necesitas un plan personalizado para tu empresa?{' '} + + Contáctanos para Enterprise + +
+
+
+
+
+ Sin tarjeta de crédito
+
+
+
+ Cancela en cualquier momento
+
+
+
+ 14 días de prueba gratis
+
+
+
+
+
+
+ Características Poderosas
+
+
+
+ + Todo lo que Necesitas para Transmitir +
++ Herramientas profesionales diseñadas para creadores de contenido, empresas y educadores +
+
+ {features.map((feature) => (
+
+
+ {/* CTA Button */}
+ setActiveFeature(feature.id)}
+ >
+
+ ))}
+
+ {feature.icon}
+
+ + {feature.title} +
++ {feature.description} +
+-
+ {feature.benefits.map((benefit, index) => (
+
- + + {benefit} + + ))} +
+
+
+
+
+
+
+
+
+ {/* Grid Pattern Overlay */}
+
+
+
+
+
+ {/* Left Content */}
+
+
+
+
+ {/* Right Content - Studio Preview */}
+
+
+
+
+
+
+ 🔴 50,000+ transmisiones en vivo ahora
+
+
+
+ + Transmite + + Multistreaming + + Profesional +
+ ++ La plataforma todo-en-uno para creadores de contenido. Transmite a YouTube, Twitch, Facebook y más de 15 plataformas simultáneamente. Sin software, desde tu navegador. +
+ + {/* Key Features */} +
+ {[
+ { icon: '📡', text: 'Multistreaming ilimitado' },
+ { icon: '☁️', text: 'Grabación en la nube' },
+ { icon: '👥', text: 'Hasta 10 invitados remotos' },
+ { icon: '🎨', text: 'Branding personalizado' },
+ ].map((feature, i) => (
+
+
+ {/* CTA Form */}
+
+
+
+ {feature.icon}
+ {feature.text}
+
+ ))}
+ + ✓ Sin tarjeta de crédito ✓ 14 días de prueba gratis ✓ Cancela cuando quieras +
+ + {/* Trust Indicators */} +
+
+
+
+
+ {['👨', '👩', '🧑', '👨💼'].map((avatar, i) => (
+
+
+ {avatar}
+
+ ))}
+
+
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+ 50,000+ usuarios activos
+
+
+
+ {/* Studio Interface Mockup */}
+
+
+ {/* Browser Bar */}
+
+
+ {/* Floating Elements */}
+
+
+
+ {/* Video Preview */}
+
+
+
+
+
+
+ studio.avanzacast.com
+
+
+
+
+ {/* Controls */}
+
+
+
+ {/* Live Indicator */}
+
+
+
+
+
+ Vista previa de tu transmisión
+
+
+ EN VIVO
+
+
+ {/* Viewer Count */}
+
+ 👁️ 1,234 espectadores
+
+
+ {/* Platform Indicators */}
+
+ {['🎥', '🟣', '👥'].map((emoji, i) => (
+
+
+ {emoji}
+
+ ))}
+
+
+
+ {[
+ { icon: '🎤', label: 'Mic' },
+ { icon: '📹', label: 'Cam' },
+ { icon: '🖥️', label: 'Screen' },
+ ].map((ctrl, i) => (
+
+ ))}
+
+
+
+ ✓ Conectado a 3 plataformas
+
+
+ 📊 Analytics en tiempo real
+
+
+
+
+
+
+
+
+
+
+
+ Estadísticas de la Plataforma
+
+
+
+ + Potenciando Creadores de Contenido +
++ Únete a miles de streamers profesionales que confían en AvanzaCast +
+
+ {stats.map((stat, index) => (
+
+
+
+ );
+}
diff --git a/packages/landing-page/src/components/StudioPreview.tsx b/packages/landing-page/src/components/StudioPreview.tsx
new file mode 100644
index 0000000..1ae1b4e
--- /dev/null
+++ b/packages/landing-page/src/components/StudioPreview.tsx
@@ -0,0 +1,190 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function StudioPreview() {
+ const [activeScene, setActiveScene] = useState('main');
+
+ return (
+
+
+ + {isVisible && ( + <> + {count.toLocaleString()} + {stat.suffix} + + )} +
++ {stat.label} +
+{stat.description}
+
+
+
+
+
+
+
+
+
+
+ Estudio Virtual Profesional
+
+
+
+ {/* Studio Interface Preview */}
+ + Tu Estudio de Broadcasting Completo +
++ Control total de tu transmisión desde el navegador, sin software adicional +
+
+
+
+ {/* Studio Header */}
+
+
+ {/* Feature Badges */}
+
+
+
+ {/* Main Preview Area */}
+
+
+
+
+
+
+
+
+
+ AvanzaCast Studio
+
+
+
+
+ EN VIVO
+
+ 1,234 espectadores
+
+
+
+ {/* Controls Panel */}
+
+
+
+ {/* Overlays */}
+
+
+
+
+
+ Vista previa de tu cámara
+
+
+ Mi Transmisión Profesional
+
+
+
+ {/* Scene Indicators */}
+ Nombre del Invitado
+CEO, Empresa Tech
+
+
+
+
+
+
+
+
+ {/* Scene Selector */}
+
+
+
+
+ {/* Streaming Destinations */}
+ + + Escenas +
+
+ {['Cámara Principal', 'Pantalla Compartida', 'Multi-invitados'].map((scene, i) => (
+
+ ))}
+
+
+
+
+ {/* Quick Actions */}
+ + + Destinos Activos +
+
+ {[
+ { name: 'YouTube', status: 'live', viewers: 856 },
+ { name: 'Twitch', status: 'live', viewers: 234 },
+ { name: 'Facebook', status: 'live', viewers: 144 },
+ ].map((dest, i) => (
+
+
+
+ ))}
+
+
+ {dest.name}
+
+ {dest.viewers} 👁️
+
+
+ + + Acciones Rápidas +
+
+ {[
+ { icon: '🎤', label: 'Audio' },
+ { icon: '📹', label: 'Video' },
+ { icon: '🖥️', label: 'Pantalla' },
+ { icon: '💬', label: 'Chat' },
+ ].map((action, i) => (
+
+ ))}
+
+
+ {[
+ '✨ Sin software adicional',
+ '🔒 Conexión segura',
+ '⚡ Latencia ultra baja',
+ '📊 Analytics en vivo',
+ ].map((badge, i) => (
+
+
+ {badge}
+
+ ))}
+
+
+
+
+ );
+};
+
+export default NewLanding;
diff --git a/packages/landing-page/src/pages/NextreamLanding.tsx b/packages/landing-page/src/pages/NextreamLanding.tsx
new file mode 100644
index 0000000..113fbbe
--- /dev/null
+++ b/packages/landing-page/src/pages/NextreamLanding.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PageContainer from '../components/PageContainer';
+import NextreamHeader from '../components/NextreamHeader';
+import NextreamHeroSection from '../components/NextreamHeroSection';
+import NewFeaturesGrid from '../components/NewFeaturesGrid';
+import NewContentDetailsSection from '../components/NewContentDetailsSection';
+import NewTestimonialsCarousel from '../components/NewTestimonialsCarousel';
+import NewCallToAction from '../components/NewCallToAction';
+import NewFooter from '../components/NewFooter';
+
+const NextreamLanding: React.FC = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default NextreamLanding;
diff --git a/packages/landing-page/src/pages/index.tsx b/packages/landing-page/src/pages/index.tsx
new file mode 100644
index 0000000..d6e901f
--- /dev/null
+++ b/packages/landing-page/src/pages/index.tsx
@@ -0,0 +1,88 @@
+/**
+ * AvanzaCast Landing Page - Plataforma de Streaming Profesional
+ * SaaS optimizado para creadores de contenido, empresas y educadores
+ * Enfocado en multistreaming, broadcasting y grabación en la nube
+ */
+
+import StreamingHeroSection from '../components/StreamingHeroSection';
+import StreamingStats from '../components/StreamingStats';
+import PlatformLogos from '../components/PlatformLogos';
+import StreamingFeatures from '../components/StreamingFeatures';
+import StudioPreview from '../components/StudioPreview';
+import TestimonialsSection from '../components/TestimonialsSection';
+import PricingSection from '../components/PricingSection';
+
+export default function LandingPage() {
+ return (
+
+
+ + ¿Listo para Revolucionar tus Transmisiones? +
++ Únete a miles de creadores que ya confían en AvanzaCast para sus streams profesionales +
+ +
+ {/* Avatar y nombre del usuario */}
+
+
+ );
+ }
+
+ return (
+
+ Iniciar sesión
+
+ );
+}
diff --git a/shared/components/LanguageSelector.tsx b/shared/components/LanguageSelector.tsx
new file mode 100644
index 0000000..3657013
--- /dev/null
+++ b/shared/components/LanguageSelector.tsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { useLanguage } from '@avanzacast/shared-hooks';
+import type { SupportedLanguage } from '@avanzacast/shared-types';
+
+interface LanguageSelectorProps {
+ className?: string;
+ variant?: 'dropdown' | 'flags';
+ position?: 'left' | 'right';
+}
+
+/**
+ * Componente compartido para selector de idioma
+ * Puede ser usado en landing-page, broadcast-studio y admin-panel
+ */
+export function LanguageSelector({
+ className = '',
+ variant = 'dropdown',
+ position = 'right'
+}: LanguageSelectorProps) {
+ const { language, availableLanguages, setLanguage } = useLanguage();
+ const [isOpen, setIsOpen] = useState(false);
+
+ const currentLanguage = availableLanguages.find(lang => lang.code === language);
+
+ const handleLanguageChange = (code: SupportedLanguage) => {
+ setLanguage(code);
+ setIsOpen(false);
+ };
+
+ if (variant === 'flags') {
+ return (
+
+ {user.name.charAt(0).toUpperCase()}
+
+
+ {user.name}
+
+
+
+ {/* Botón de logout */}
+
+
+ {availableLanguages.map((lang) => (
+
+ ))}
+
+ );
+ }
+
+ return (
+
+
+
+ {isOpen && (
+ <>
+ {/* Overlay para cerrar */}
+ ;
+}
+
+/**
+ * Hook compartido para manejar autenticación en todos los módulos
+ */
+export function useAuth(): UseAuthReturn {
+ const [user, setUser] = useState(null);
+ const [tokens, setTokens] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+
+ // Cargar datos de autenticación al montar
+ useEffect(() => {
+ const loadAuth = () => {
+ const savedUser = getUser();
+ const savedTokens = getTokens();
+
+ if (savedUser && savedTokens && checkAuth()) {
+ setUser(savedUser);
+ setTokens(savedTokens);
+ }
+ setIsLoading(false);
+ };
+
+ loadAuth();
+ }, []);
+
+ // Login
+ const login = useCallback(async (credentials: LoginCredentials) => {
+ setIsLoading(true);
+ try {
+ const response = await apiClient.login(credentials);
+
+ if (response.success && response.data) {
+ const { user: userData, tokens: tokenData } = response.data;
+ setUser(userData);
+ setTokens(tokenData);
+ saveUser(userData);
+ saveTokens(tokenData);
+ return { success: true };
+ }
+
+ return {
+ success: false,
+ error: response.error?.message || 'Error al iniciar sesión'
+ };
+ } catch (error) {
+ return {
+ success: false,
+ error: error instanceof Error ? error.message : 'Error desconocido'
+ };
+ } finally {
+ setIsLoading(false);
+ }
+ }, []);
+
+ // Register
+ const register = useCallback(async (data: RegisterData) => {
+ setIsLoading(true);
+ try {
+ const response = await apiClient.register(data);
+
+ if (response.success && response.data) {
+ const { user: userData, tokens: tokenData } = response.data;
+ setUser(userData);
+ setTokens(tokenData);
+ saveUser(userData);
+ saveTokens(tokenData);
+ return { success: true };
+ }
+
+ return {
+ success: false,
+ error: response.error?.message || 'Error al registrarse'
+ };
+ } catch (error) {
+ return {
+ success: false,
+ error: error instanceof Error ? error.message : 'Error desconocido'
+ };
+ } finally {
+ setIsLoading(false);
+ }
+ }, []);
+
+ // Logout
+ const logout = useCallback(() => {
+ setUser(null);
+ setTokens(null);
+ clearAuth();
+
+ // Llamar al endpoint de logout en segundo plano
+ apiClient.logout().catch(console.error);
+ }, []);
+
+ // Refresh auth (actualizar datos del usuario)
+ const refreshAuth = useCallback(async () => {
+ if (!tokens) return;
+
+ try {
+ const response = await apiClient.getProfile();
+ if (response.success && response.data) {
+ setUser(response.data);
+ saveUser(response.data);
+ }
+ } catch (error) {
+ console.error('Error refreshing auth:', error);
+ }
+ }, [tokens]);
+
+ return {
+ user,
+ tokens,
+ isAuthenticated: !!user && !!tokens,
+ isLoading,
+ login,
+ register,
+ logout,
+ refreshAuth,
+ };
+}
diff --git a/shared/hooks/useLanguage.ts b/shared/hooks/useLanguage.ts
new file mode 100644
index 0000000..e83cf92
--- /dev/null
+++ b/shared/hooks/useLanguage.ts
@@ -0,0 +1,58 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { SupportedLanguage } from '@avanzacast/shared-types';
+import {
+ getLanguage,
+ saveLanguage,
+ translate,
+ AVAILABLE_LANGUAGES
+} from '@avanzacast/shared-utils';
+
+interface UseLanguageReturn {
+ language: SupportedLanguage;
+ availableLanguages: typeof AVAILABLE_LANGUAGES;
+ setLanguage: (lang: SupportedLanguage) => void;
+ t: (key: string) => string;
+}
+
+/**
+ * Hook compartido para manejar internacionalización en todos los módulos
+ */
+export function useLanguage(): UseLanguageReturn {
+ const [language, setLanguageState] = useState(() => getLanguage());
+
+ // Función para cambiar el idioma
+ const setLanguage = useCallback((lang: SupportedLanguage) => {
+ saveLanguage(lang);
+ setLanguageState(lang);
+
+ // Actualizar el atributo lang del HTML
+ if (typeof document !== 'undefined') {
+ document.documentElement.lang = lang;
+ }
+ }, []);
+
+ // Cargar idioma guardado al montar
+ useEffect(() => {
+ const savedLang = getLanguage();
+ if (savedLang !== language) {
+ setLanguageState(savedLang);
+ }
+
+ // Configurar idioma en el HTML
+ if (typeof document !== 'undefined') {
+ document.documentElement.lang = savedLang;
+ }
+ }, []);
+
+ // Función de traducción
+ const t = useCallback((key: string) => {
+ return translate(key, language);
+ }, [language]);
+
+ return {
+ language,
+ availableLanguages: AVAILABLE_LANGUAGES,
+ setLanguage,
+ t,
+ };
+}
diff --git a/shared/types/index.ts b/shared/types/index.ts
new file mode 100644
index 0000000..428e001
--- /dev/null
+++ b/shared/types/index.ts
@@ -0,0 +1,186 @@
+// User types
+export interface User {
+ id: string;
+ email: string;
+ name: string;
+ avatar?: string;
+ role: 'user' | 'admin' | 'moderator';
+ subscription?: Subscription;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+export interface Subscription {
+ id: string;
+ plan: 'free' | 'basic' | 'pro' | 'enterprise';
+ status: 'active' | 'inactive' | 'cancelled' | 'past_due';
+ startDate: Date;
+ endDate: Date;
+ features: SubscriptionFeatures;
+}
+
+export interface SubscriptionFeatures {
+ maxStreams: number;
+ maxGuests: number;
+ recordingHours: number;
+ customBranding: boolean;
+ multistream: boolean;
+ analytics: boolean;
+ priority_support: boolean;
+}
+
+// Auth types
+export interface AuthTokens {
+ accessToken: string;
+ refreshToken: string;
+ expiresIn: number;
+}
+
+export interface LoginCredentials {
+ email: string;
+ password: string;
+}
+
+export interface RegisterData {
+ email: string;
+ password: string;
+ name: string;
+ language?: string;
+}
+
+export interface AuthResponse {
+ user: User;
+ tokens: AuthTokens;
+}
+
+export interface AuthState {
+ user: User | null;
+ tokens: AuthTokens | null;
+ isAuthenticated: boolean;
+ isLoading: boolean;
+}
+
+// Language types
+export type SupportedLanguage = 'es' | 'en' | 'pt' | 'fr';
+
+export interface LanguageState {
+ current: SupportedLanguage;
+ available: SupportedLanguage[];
+}
+
+export interface Translation {
+ [key: string]: string | Translation;
+}
+
+// API Response types
+export interface ApiResponse {
+ success: boolean;
+ data?: T;
+ error?: ApiError;
+ message?: string;
+}
+
+export interface ApiError {
+ code: string;
+ message: string;
+ details?: any;
+}
+
+// Broadcast types
+export interface Broadcast {
+ id: string;
+ title: string;
+ description?: string;
+ status: 'scheduled' | 'live' | 'ended' | 'recording';
+ userId: string;
+ destinations: StreamDestination[];
+ startedAt?: Date;
+ endedAt?: Date;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+export interface StreamDestination {
+ id: string;
+ platform: 'youtube' | 'facebook' | 'twitch' | 'linkedin' | 'custom';
+ streamKey?: string;
+ streamUrl?: string;
+ enabled: boolean;
+ status?: 'connected' | 'disconnected' | 'error';
+}
+
+// Studio types
+export interface StudioScene {
+ id: string;
+ name: string;
+ layout: 'single' | 'side-by-side' | 'pip' | 'grid';
+ overlays: Overlay[];
+ background?: BackgroundSource;
+}
+
+export interface Overlay {
+ id: string;
+ type: 'logo' | 'text' | 'image' | 'ticker';
+ position: Position;
+ size: Size;
+ content: any;
+ visible: boolean;
+}
+
+export interface Position {
+ x: number;
+ y: number;
+}
+
+export interface Size {
+ width: number;
+ height: number;
+}
+
+export interface BackgroundSource {
+ type: 'color' | 'image' | 'video';
+ value: string;
+}
+
+// Guest types
+export interface Guest {
+ id: string;
+ name: string;
+ email?: string;
+ joinLink: string;
+ status: 'invited' | 'joined' | 'disconnected';
+ audioEnabled: boolean;
+ videoEnabled: boolean;
+ joinedAt?: Date;
+}
+
+// Analytics types
+export interface AnalyticsData {
+ broadcastId: string;
+ viewers: ViewerStats;
+ engagement: EngagementStats;
+ platforms: PlatformStats[];
+}
+
+export interface ViewerStats {
+ total: number;
+ peak: number;
+ average: number;
+ current: number;
+}
+
+export interface EngagementStats {
+ likes: number;
+ comments: number;
+ shares: number;
+ chatMessages: number;
+}
+
+export interface PlatformStats {
+ platform: string;
+ viewers: number;
+ engagement: number;
+}
+
+// Export all types
+export * from './index';
diff --git a/shared/types/package.json b/shared/types/package.json
new file mode 100644
index 0000000..501af73
--- /dev/null
+++ b/shared/types/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@avanzacast/shared-types",
+ "version": "1.0.0",
+ "private": true,
+ "description": "AvanzaCast - Shared TypeScript Types",
+ "main": "index.ts",
+ "types": "index.ts",
+ "scripts": {
+ "typecheck": "tsc --noEmit"
+ },
+ "devDependencies": {
+ "typescript": "^5.2.2"
+ }
+}
diff --git a/shared/types/tsconfig.json b/shared/types/tsconfig.json
new file mode 100644
index 0000000..d4572fc
--- /dev/null
+++ b/shared/types/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "module": "ESNext",
+ "lib": ["ES2020"],
+ "moduleResolution": "node",
+ "declaration": true,
+ "declarationMap": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "resolveJsonModule": true,
+ "outDir": "./dist",
+ "rootDir": "./",
+ "forceConsistentCasingInFileNames": true
+ },
+ "include": ["./**/*"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/shared/utils/api.ts b/shared/utils/api.ts
new file mode 100644
index 0000000..9f5b0b9
--- /dev/null
+++ b/shared/utils/api.ts
@@ -0,0 +1,110 @@
+import type { LoginCredentials, RegisterData, AuthResponse, ApiResponse } from '@avanzacast/shared-types';
+import { getAuthHeader } from './auth';
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:4000/api/v1';
+
+/**
+ * Cliente HTTP para hacer peticiones a la API
+ */
+class ApiClient {
+ private baseUrl: string;
+
+ constructor(baseUrl: string) {
+ this.baseUrl = baseUrl;
+ }
+
+ private async request(
+ endpoint: string,
+ options: RequestInit = {}
+ ): Promise> {
+ const url = `${this.baseUrl}${endpoint}`;
+
+ const headers = {
+ 'Content-Type': 'application/json',
+ ...getAuthHeader(),
+ ...options.headers,
+ };
+
+ try {
+ const response = await fetch(url, {
+ ...options,
+ headers,
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ return {
+ success: false,
+ error: {
+ code: data.code || 'UNKNOWN_ERROR',
+ message: data.message || 'An error occurred',
+ details: data.details,
+ },
+ };
+ }
+
+ return {
+ success: true,
+ data,
+ };
+ } catch (error) {
+ return {
+ success: false,
+ error: {
+ code: 'NETWORK_ERROR',
+ message: error instanceof Error ? error.message : 'Network error',
+ },
+ };
+ }
+ }
+
+ async get(endpoint: string): Promise> {
+ return this.request(endpoint, { method: 'GET' });
+ }
+
+ async post(endpoint: string, data?: any): Promise> {
+ return this.request(endpoint, {
+ method: 'POST',
+ body: data ? JSON.stringify(data) : undefined,
+ });
+ }
+
+ async put(endpoint: string, data?: any): Promise> {
+ return this.request(endpoint, {
+ method: 'PUT',
+ body: data ? JSON.stringify(data) : undefined,
+ });
+ }
+
+ async delete(endpoint: string): Promise> {
+ return this.request(endpoint, { method: 'DELETE' });
+ }
+
+ // Auth endpoints
+ async login(credentials: LoginCredentials): Promise> {
+ return this.post('/auth/login', credentials);
+ }
+
+ async register(data: RegisterData): Promise> {
+ return this.post('/auth/register', data);
+ }
+
+ async logout(): Promise> {
+ return this.post('/auth/logout');
+ }
+
+ async refreshToken(refreshToken: string): Promise> {
+ return this.post('/auth/refresh', { refreshToken });
+ }
+
+ async getProfile(): Promise> {
+ return this.get('/auth/profile');
+ }
+}
+
+// Instancia única del cliente API
+export const apiClient = new ApiClient(API_BASE_URL);
+
+// Exportar cliente por defecto
+export default apiClient;
diff --git a/shared/utils/auth.ts b/shared/utils/auth.ts
new file mode 100644
index 0000000..3a117f6
--- /dev/null
+++ b/shared/utils/auth.ts
@@ -0,0 +1,101 @@
+import type { AuthTokens, User } from '@avanzacast/shared-types';
+
+const TOKEN_KEY = 'avanzacast_tokens';
+const USER_KEY = 'avanzacast_user';
+
+/**
+ * Guarda los tokens de autenticación en localStorage
+ */
+export const saveTokens = (tokens: AuthTokens): void => {
+ if (typeof window === 'undefined') return;
+ localStorage.setItem(TOKEN_KEY, JSON.stringify(tokens));
+};
+
+/**
+ * Obtiene los tokens de autenticación desde localStorage
+ */
+export const getTokens = (): AuthTokens | null => {
+ if (typeof window === 'undefined') return null;
+ const tokens = localStorage.getItem(TOKEN_KEY);
+ return tokens ? JSON.parse(tokens) : null;
+};
+
+/**
+ * Elimina los tokens de autenticación
+ */
+export const removeTokens = (): void => {
+ if (typeof window === 'undefined') return;
+ localStorage.removeItem(TOKEN_KEY);
+};
+
+/**
+ * Guarda los datos del usuario en localStorage
+ */
+export const saveUser = (user: User): void => {
+ if (typeof window === 'undefined') return;
+ localStorage.setItem(USER_KEY, JSON.stringify(user));
+};
+
+/**
+ * Obtiene los datos del usuario desde localStorage
+ */
+export const getUser = (): User | null => {
+ if (typeof window === 'undefined') return null;
+ const user = localStorage.getItem(USER_KEY);
+ return user ? JSON.parse(user) : null;
+};
+
+/**
+ * Elimina los datos del usuario
+ */
+export const removeUser = (): void => {
+ if (typeof window === 'undefined') return;
+ localStorage.removeItem(USER_KEY);
+};
+
+/**
+ * Limpia toda la información de autenticación
+ */
+export const clearAuth = (): void => {
+ removeTokens();
+ removeUser();
+};
+
+/**
+ * Verifica si el token de acceso ha expirado
+ */
+export const isTokenExpired = (tokens: AuthTokens | null): boolean => {
+ if (!tokens) return true;
+ const expirationTime = Date.now() + tokens.expiresIn * 1000;
+ return Date.now() >= expirationTime;
+};
+
+/**
+ * Obtiene el header de autorización para peticiones HTTP
+ */
+export const getAuthHeader = (): Record => {
+ const tokens = getTokens();
+ if (!tokens) return {};
+ return {
+ Authorization: `Bearer ${tokens.accessToken}`,
+ };
+};
+
+/**
+ * Verifica si el usuario está autenticado
+ */
+export const isAuthenticated = (): boolean => {
+ const tokens = getTokens();
+ const user = getUser();
+ return !!(tokens && user && !isTokenExpired(tokens));
+};
+
+/**
+ * Redirige al login si no está autenticado
+ */
+export const requireAuth = (redirectUrl: string = '/auth/login'): void => {
+ if (!isAuthenticated() && typeof window !== 'undefined') {
+ const currentPath = window.location.pathname;
+ window.location.href = `${redirectUrl}?redirect=${encodeURIComponent(currentPath)}`;
+ }
+};
diff --git a/shared/utils/i18n.ts b/shared/utils/i18n.ts
new file mode 100644
index 0000000..474047a
--- /dev/null
+++ b/shared/utils/i18n.ts
@@ -0,0 +1,258 @@
+import type { SupportedLanguage, Translation } from '@avanzacast/shared-types';
+
+const LANGUAGE_KEY = 'avanzacast_language';
+
+// Traducciones por idioma
+const translations: Record = {
+ es: {
+ common: {
+ login: 'Iniciar sesión',
+ logout: 'Cerrar sesión',
+ register: 'Registrarse',
+ email: 'Correo electrónico',
+ password: 'Contraseña',
+ name: 'Nombre',
+ save: 'Guardar',
+ cancel: 'Cancelar',
+ delete: 'Eliminar',
+ edit: 'Editar',
+ loading: 'Cargando...',
+ error: 'Error',
+ success: 'Éxito',
+ },
+ nav: {
+ home: 'Inicio',
+ features: 'Características',
+ pricing: 'Precios',
+ contact: 'Contacto',
+ dashboard: 'Panel',
+ broadcasts: 'Transmisiones',
+ studio: 'Estudio',
+ settings: 'Configuración',
+ },
+ landing: {
+ hero_title: 'La manera más sencilla de transmitir en vivo y grabar',
+ hero_subtitle: 'AvanzaCast es un estudio profesional para grabar y hacer transmisiones en vivo desde tu navegador',
+ get_started: 'Empecemos',
+ continue_google: 'Continuar con Google',
+ features_title: 'Todo lo que necesitas para transmitir',
+ testimonials_title: 'transmisiones realizadas',
+ },
+ auth: {
+ login_title: 'Inicia sesión en tu cuenta',
+ register_title: 'Crea tu cuenta',
+ forgot_password: '¿Olvidaste tu contraseña?',
+ no_account: '¿No tienes cuenta?',
+ already_account: '¿Ya tienes cuenta?',
+ terms_accept: 'Al continuar, aceptas nuestros',
+ terms_service: 'Términos de Servicio',
+ privacy_policy: 'Política de Privacidad',
+ },
+ },
+ en: {
+ common: {
+ login: 'Log in',
+ logout: 'Log out',
+ register: 'Sign up',
+ email: 'Email',
+ password: 'Password',
+ name: 'Name',
+ save: 'Save',
+ cancel: 'Cancel',
+ delete: 'Delete',
+ edit: 'Edit',
+ loading: 'Loading...',
+ error: 'Error',
+ success: 'Success',
+ },
+ nav: {
+ home: 'Home',
+ features: 'Features',
+ pricing: 'Pricing',
+ contact: 'Contact',
+ dashboard: 'Dashboard',
+ broadcasts: 'Broadcasts',
+ studio: 'Studio',
+ settings: 'Settings',
+ },
+ landing: {
+ hero_title: 'The easiest way to live stream and record',
+ hero_subtitle: 'AvanzaCast is a professional studio for recording and live streaming from your browser',
+ get_started: 'Get started',
+ continue_google: 'Continue with Google',
+ features_title: 'Everything you need to broadcast',
+ testimonials_title: 'streams created',
+ },
+ auth: {
+ login_title: 'Log in to your account',
+ register_title: 'Create your account',
+ forgot_password: 'Forgot password?',
+ no_account: "Don't have an account?",
+ already_account: 'Already have an account?',
+ terms_accept: 'By continuing, you agree to our',
+ terms_service: 'Terms of Service',
+ privacy_policy: 'Privacy Policy',
+ },
+ },
+ pt: {
+ common: {
+ login: 'Entrar',
+ logout: 'Sair',
+ register: 'Cadastrar',
+ email: 'E-mail',
+ password: 'Senha',
+ name: 'Nome',
+ save: 'Salvar',
+ cancel: 'Cancelar',
+ delete: 'Excluir',
+ edit: 'Editar',
+ loading: 'Carregando...',
+ error: 'Erro',
+ success: 'Sucesso',
+ },
+ nav: {
+ home: 'Início',
+ features: 'Recursos',
+ pricing: 'Preços',
+ contact: 'Contato',
+ dashboard: 'Painel',
+ broadcasts: 'Transmissões',
+ studio: 'Estúdio',
+ settings: 'Configurações',
+ },
+ landing: {
+ hero_title: 'A maneira mais fácil de transmitir ao vivo e gravar',
+ hero_subtitle: 'AvanzaCast é um estúdio profissional para gravar e fazer transmissões ao vivo do seu navegador',
+ get_started: 'Começar',
+ continue_google: 'Continuar com Google',
+ features_title: 'Tudo que você precisa para transmitir',
+ testimonials_title: 'transmissões realizadas',
+ },
+ auth: {
+ login_title: 'Entre na sua conta',
+ register_title: 'Crie sua conta',
+ forgot_password: 'Esqueceu a senha?',
+ no_account: 'Não tem uma conta?',
+ already_account: 'Já tem uma conta?',
+ terms_accept: 'Ao continuar, você concorda com nossos',
+ terms_service: 'Termos de Serviço',
+ privacy_policy: 'Política de Privacidade',
+ },
+ },
+ fr: {
+ common: {
+ login: 'Se connecter',
+ logout: 'Se déconnecter',
+ register: "S'inscrire",
+ email: 'E-mail',
+ password: 'Mot de passe',
+ name: 'Nom',
+ save: 'Enregistrer',
+ cancel: 'Annuler',
+ delete: 'Supprimer',
+ edit: 'Modifier',
+ loading: 'Chargement...',
+ error: 'Erreur',
+ success: 'Succès',
+ },
+ nav: {
+ home: 'Accueil',
+ features: 'Fonctionnalités',
+ pricing: 'Tarifs',
+ contact: 'Contact',
+ dashboard: 'Tableau de bord',
+ broadcasts: 'Diffusions',
+ studio: 'Studio',
+ settings: 'Paramètres',
+ },
+ landing: {
+ hero_title: 'La façon la plus simple de diffuser en direct et enregistrer',
+ hero_subtitle: 'AvanzaCast est un studio professionnel pour enregistrer et diffuser en direct depuis votre navigateur',
+ get_started: 'Commencer',
+ continue_google: 'Continuer avec Google',
+ features_title: 'Tout ce dont vous avez besoin pour diffuser',
+ testimonials_title: 'diffusions créées',
+ },
+ auth: {
+ login_title: 'Connectez-vous à votre compte',
+ register_title: 'Créez votre compte',
+ forgot_password: 'Mot de passe oublié?',
+ no_account: "Vous n'avez pas de compte?",
+ already_account: 'Vous avez déjà un compte?',
+ terms_accept: 'En continuant, vous acceptez nos',
+ terms_service: 'Conditions de service',
+ privacy_policy: 'Politique de confidentialité',
+ },
+ },
+};
+
+/**
+ * Guarda el idioma seleccionado en localStorage
+ */
+export const saveLanguage = (language: SupportedLanguage): void => {
+ if (typeof window === 'undefined') return;
+ localStorage.setItem(LANGUAGE_KEY, language);
+};
+
+/**
+ * Obtiene el idioma guardado o detecta el del navegador
+ */
+export const getLanguage = (): SupportedLanguage => {
+ if (typeof window === 'undefined') return 'es';
+
+ const saved = localStorage.getItem(LANGUAGE_KEY) as SupportedLanguage;
+ if (saved && ['es', 'en', 'pt', 'fr'].includes(saved)) {
+ return saved;
+ }
+
+ // Detectar idioma del navegador
+ const browserLang = navigator.language.split('-')[0];
+ if (['es', 'en', 'pt', 'fr'].includes(browserLang)) {
+ return browserLang as SupportedLanguage;
+ }
+
+ return 'es'; // Idioma por defecto
+};
+
+/**
+ * Obtiene una traducción específica
+ */
+export const translate = (key: string, language?: SupportedLanguage): string => {
+ const lang = language || getLanguage();
+ const keys = key.split('.');
+ let value: any = translations[lang];
+
+ for (const k of keys) {
+ if (value && typeof value === 'object') {
+ value = value[k];
+ } else {
+ return key; // Retorna la key si no encuentra traducción
+ }
+ }
+
+ return typeof value === 'string' ? value : key;
+};
+
+/**
+ * Hook helper para obtener función de traducción
+ */
+export const useTranslate = (language: SupportedLanguage) => {
+ return (key: string) => translate(key, language);
+};
+
+/**
+ * Obtiene todas las traducciones de un idioma
+ */
+export const getTranslations = (language: SupportedLanguage): Translation => {
+ return translations[language];
+};
+
+/**
+ * Lista de idiomas disponibles
+ */
+export const AVAILABLE_LANGUAGES: Array<{ code: SupportedLanguage; name: string; flag: string }> = [
+ { code: 'es', name: 'Español', flag: '🇪🇸' },
+ { code: 'en', name: 'English', flag: '🇺🇸' },
+ { code: 'pt', name: 'Português', flag: '🇧🇷' },
+ { code: 'fr', name: 'Français', flag: '🇫🇷' },
+];
diff --git a/shared/utils/index.ts b/shared/utils/index.ts
new file mode 100644
index 0000000..9346052
--- /dev/null
+++ b/shared/utils/index.ts
@@ -0,0 +1,4 @@
+// Export all utilities
+export * from './auth';
+export * from './i18n';
+export * from './api';
diff --git a/shared/utils/package.json b/shared/utils/package.json
new file mode 100644
index 0000000..ee3a2b6
--- /dev/null
+++ b/shared/utils/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "@avanzacast/shared-utils",
+ "version": "1.0.0",
+ "private": true,
+ "description": "AvanzaCast - Shared Utilities",
+ "main": "index.ts",
+ "types": "index.ts",
+ "scripts": {
+ "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@avanzacast/shared-types": "*"
+ },
+ "devDependencies": {
+ "typescript": "^5.2.2"
+ }
+}
diff --git a/shared/utils/tsconfig.json b/shared/utils/tsconfig.json
new file mode 100644
index 0000000..c81135b
--- /dev/null
+++ b/shared/utils/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM"],
+ "moduleResolution": "node",
+ "declaration": true,
+ "declarationMap": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "resolveJsonModule": true,
+ "outDir": "./dist",
+ "rootDir": "./",
+ "forceConsistentCasingInFileNames": true,
+ "types": ["vite/client"]
+ },
+ "include": ["./**/*"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
new file mode 100644
index 0000000..d2f25b4
--- /dev/null
+++ b/src/app/(public)/page.tsx
@@ -0,0 +1,88 @@
+/**
+ * AvanzaCast Landing Page - Plataforma de Streaming Profesional
+ * SaaS optimizado para creadores de contenido, empresas y educadores
+ * Enfocado en multistreaming, broadcasting y grabación en la nube
+ */
+
+import StreamingHeroSection from '@/components/StreamingHeroSection';
+import StreamingStats from '@/components/StreamingStats';
+import PlatformLogos from '@/components/PlatformLogos';
+import StreamingFeatures from '@/components/StreamingFeatures';
+import StudioPreview from '@/components/StudioPreview';
+import TestimonialsSection from '@/components/TestimonialsSection';
+import PricingSection from '@/components/PricingSection';
+
+export default function LandingPage() {
+ return (
+
+
+
+
+ {/* Footer */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/TestimonialsSection.tsx b/src/components/TestimonialsSection.tsx
new file mode 100644
index 0000000..23586b7
--- /dev/null
+++ b/src/components/TestimonialsSection.tsx
@@ -0,0 +1,283 @@
+'use client';import React, { useEffect, useRef, useState } from 'react'
+
+
+
+import { useState } from 'react';interface Testimonial { text: string; author: string }
+
+
+
+const testimonials = [const testimonials: Testimonial[] = [
+
+ { { text: 'Esta probablemente sea la plataforma de transmisión más fácil de usar que conozco...', author: 'Bomeca Trotter' },
+
+ id: 1, { text: 'Uso AvanzaCast desde hace mucho tiempo y sigo eligiéndolo...', author: 'Krissy Buck' },
+
+ name: 'María González', { text: 'Hace dos años que uso este sistema y me encanta!', author: 'Joy Ann Lajeret' },
+
+ role: 'Content Creator', { text: 'La integración con múltiples plataformas es perfecta...', author: 'Carlos Mendoza' },
+
+ company: '@MariaStreams', { text: 'Como creadora de contenido, necesitaba una herramienta confiable...', author: 'María González' }
+
+ avatar: '👩💼',]
+
+ rating: 5,
+
+ comment:export default function TestimonialsSection() {
+
+ 'AvanzaCast transformó completamente mi forma de hacer streaming. Antes necesitaba software complicado y equipos caros. Ahora transmito en 4K a YouTube, Twitch y Facebook simultáneamente desde mi navegador.', const scrollRef = useRef(null)
+
+ stats: { streams: 250, viewers: '50K+' }, const [isAutoPlay, setIsAutoPlay] = useState(true)
+
+ videoThumb: '🎬', const multiplier = 12
+
+ }, const duplicatedTestimonials = Array.from({ length: multiplier }, () => testimonials).flat()
+
+ {
+
+ id: 2, const scrollLeft = () => { if (scrollRef.current) scrollRef.current.scrollBy({ left: -400, behavior: 'smooth' }) }
+
+ name: 'Carlos Ramírez', const scrollRight = () => { if (scrollRef.current) scrollRef.current.scrollBy({ left: 400, behavior: 'smooth' }) }
+
+ role: 'CEO',
+
+ company: 'TechStartup Inc.', useEffect(() => {
+
+ avatar: '👨💻', if (scrollRef.current) {
+
+ rating: 5, const singleSetWidth = testimonials.length * 400
+
+ comment: const middleStart = singleSetWidth * Math.floor(multiplier / 2)
+
+ 'Para nuestros webinars corporativos, AvanzaCast es indispensable. La calidad de video es impecable, podemos invitar hasta 10 participantes remotos y el chat unificado nos permite interactuar con audiencias de múltiples plataformas.', scrollRef.current.scrollLeft = middleStart
+
+ stats: { streams: 120, viewers: '100K+' }, }
+
+ videoThumb: '📹', }, [])
+
+ },
+
+ { useEffect(() => {
+
+ id: 3, if (!isAutoPlay || !scrollRef.current) return
+
+ name: 'Ana Martínez', const interval = setInterval(() => scrollRight(), 4000)
+
+ role: 'Educadora Online', return () => clearInterval(interval)
+
+ company: 'Academia Digital', }, [isAutoPlay])
+
+ avatar: '👩🏫',
+
+ rating: 5, useEffect(() => {
+
+ comment: let scrollTimeout: any
+
+ 'Mis clases en vivo han mejorado increíblemente. Los estudiantes pueden unirse desde cualquier plataforma y la grabación automática en la nube me permite crear contenido on-demand sin esfuerzo adicional.', const container = scrollRef.current
+
+ stats: { streams: 300, viewers: '25K+' }, const handleScroll = () => {
+
+ videoThumb: '🎓', if (!container) return
+
+ }, const singleSetWidth = testimonials.length * 400
+
+]; const totalWidth = singleSetWidth * multiplier
+
+ const middleStart = singleSetWidth * Math.floor(multiplier / 2)
+
+export default function TestimonialsSection() { const tolerance = 100
+
+ const [activeTestimonial, setActiveTestimonial] = useState(0); requestAnimationFrame(() => {
+
+ if (container.scrollLeft <= tolerance) container.scrollLeft = middleStart
+
+ return ( else if (container.scrollLeft >= totalWidth - container.clientWidth - tolerance) container.scrollLeft = middleStart
+
+ })
+
+
+ );
+}
setIsOpen(false)}
+ aria-hidden="true"
+ />
+
+ {/* Dropdown menu */}
+
+ );
+}
diff --git a/shared/components/index.ts b/shared/components/index.ts
new file mode 100644
index 0000000..300ba81
--- /dev/null
+++ b/shared/components/index.ts
@@ -0,0 +1,3 @@
+// Export all shared components
+export { LanguageSelector } from './LanguageSelector';
+export { AuthButton } from './AuthButton';
diff --git a/shared/components/package.json b/shared/components/package.json
new file mode 100644
index 0000000..7e027ca
--- /dev/null
+++ b/shared/components/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "@avanzacast/shared-components",
+ "version": "1.0.0",
+ "private": true,
+ "description": "AvanzaCast - Shared React Components",
+ "main": "index.ts",
+ "types": "index.ts",
+ "scripts": {
+ "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@avanzacast/shared-types": "*",
+ "@avanzacast/shared-utils": "*",
+ "@avanzacast/shared-hooks": "*"
+ },
+ "peerDependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.0",
+ "@types/react-dom": "^18.2.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "typescript": "^5.2.2"
+ }
+}
diff --git a/shared/components/tsconfig.json b/shared/components/tsconfig.json
new file mode 100644
index 0000000..7b4ff33
--- /dev/null
+++ b/shared/components/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM"],
+ "jsx": "react-jsx",
+ "moduleResolution": "node",
+ "declaration": true,
+ "declarationMap": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "resolveJsonModule": true,
+ "outDir": "./dist",
+ "rootDir": "./",
+ "forceConsistentCasingInFileNames": true
+ },
+ "include": ["./**/*"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/shared/hooks/index.ts b/shared/hooks/index.ts
new file mode 100644
index 0000000..84a0917
--- /dev/null
+++ b/shared/hooks/index.ts
@@ -0,0 +1,3 @@
+// Export all hooks
+export * from './useAuth';
+export * from './useLanguage';
diff --git a/shared/hooks/package.json b/shared/hooks/package.json
new file mode 100644
index 0000000..604a220
--- /dev/null
+++ b/shared/hooks/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@avanzacast/shared-hooks",
+ "version": "1.0.0",
+ "private": true,
+ "description": "AvanzaCast - Shared React Hooks",
+ "main": "index.ts",
+ "types": "index.ts",
+ "scripts": {
+ "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@avanzacast/shared-types": "*",
+ "@avanzacast/shared-utils": "*"
+ },
+ "peerDependencies": {
+ "react": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.0",
+ "react": "^18.2.0",
+ "typescript": "^5.2.2"
+ }
+}
diff --git a/shared/hooks/tsconfig.json b/shared/hooks/tsconfig.json
new file mode 100644
index 0000000..7b4ff33
--- /dev/null
+++ b/shared/hooks/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM"],
+ "jsx": "react-jsx",
+ "moduleResolution": "node",
+ "declaration": true,
+ "declarationMap": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "resolveJsonModule": true,
+ "outDir": "./dist",
+ "rootDir": "./",
+ "forceConsistentCasingInFileNames": true
+ },
+ "include": ["./**/*"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/shared/hooks/useAuth.ts b/shared/hooks/useAuth.ts
new file mode 100644
index 0000000..4bb47a8
--- /dev/null
+++ b/shared/hooks/useAuth.ts
@@ -0,0 +1,141 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { User, AuthTokens, LoginCredentials, RegisterData, AuthResponse } from '@avanzacast/shared-types';
+import {
+ saveTokens,
+ saveUser,
+ getTokens,
+ getUser,
+ clearAuth,
+ isAuthenticated as checkAuth
+} from '@avanzacast/shared-utils';
+import { apiClient } from '@avanzacast/shared-utils';
+
+interface UseAuthReturn {
+ user: User | null;
+ tokens: AuthTokens | null;
+ isAuthenticated: boolean;
+ isLoading: boolean;
+ login: (credentials: LoginCredentials) => Promise<{ success: boolean; error?: string }>;
+ register: (data: RegisterData) => Promise<{ success: boolean; error?: string }>;
+ logout: () => void;
+ refreshAuth: () => Promise
+ {availableLanguages.map((lang) => (
+
+ ))}
+
+
+ )}
+
+
+ + ¿Listo para Revolucionar tus Transmisiones? +
++ Únete a miles de creadores que ya confían en AvanzaCast para sus streams profesionales +
+ + }
+
+
+
+
+ if (container) {
+
+ return () => { container.removeEventListener('scroll', debounced as any); clearTimeout(scrollTimeout) }
+
+ Lo que Dicen Nuestros Usuarios }
+
+ }, [])
+
+
+
+
+
+ {/* Testimonial Selector */}
+ + + Historias de Éxito Reales return ( + +
+
+ Miles de creadores, empresas y educadores confían en AvanzaCast para sus transmisiones en vivo
+
+
+
+ {/* Main Testimonial Showcase */} + + Ya se crearon más de 60 millones de transmisiones y grabaciones en AvanzaCast + +
+
+
+
+
+ {testimonials.map((testimonial, index) => (
+
+ ))}
+
+
+ {/* Trust Indicators */}
+
+ {[
+ { value: '50K+', label: 'Usuarios Activos' },
+ { value: '2M+', label: 'Horas Transmitidas' },
+ { value: '4.9/5', label: 'Rating Promedio' },
+ { value: '99.9%', label: 'Uptime Garantizado' },
+ ].map((stat, i) => (
+
+
+
+ ))}
+ + {stat.value} +
+{stat.label}
+