neoris/AvanzaCast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
AvanzaCast/docs/landingtemplate2.md

72 KiB
Raw Blame History

I. Estructura y Componentes Lógicos:

La página web se puede descomponer en los siguientes componentes lógicos de React, envueltos por un PageContainer principal que gestiona el ancho máximo y el centrado del contenido.

  1. PageContainer (src/components/PageContainer.tsx):

    • Descripción: Componente contenedor global que define el max-width (aproximadamente 1280px) y margin: 0 auto para centrar todo el contenido de la página.
    • Jerarquía DOM Clave: div.pageContainer.

  2. Header (src/components/Header/Header.tsx):

    • Descripción: Contiene el logo de la marca, la navegación principal con enlaces y dropdowns, y un botón de "Empecemos" (Get started).
    • Jerarquía DOM Clave: <header> que contiene un <div> para el logo y un <nav> para los enlaces de navegación (<ul>, <li> con <a>). Incluye un <a> con estilo de botón para "Empecemos".
    • Medidas Clave:
      • Altura: Aproximadamente 80px (fijo en escritorio), reducida en móvil.
      • Layout: display: flex para alinear el logo y la navegación.
      • Ancho máximo: Contenido limitado por el max-width global del PageContainer.
    • Actualización (Video): Los elementos "Producto" y "Para empresas" incluyen iconos junto al texto en los ítems del menú desplegable.

  3. HeroSection (src/components/HeroSection/HeroSection.tsx):

    • Descripción: La sección inicial de la página con un título principal, una descripción y un formulario de registro/inicio de sesión.
    • Jerarquía DOM Clave: <section> que contiene dos <div> principales: uno para el contenido de texto (<h1>, <p>) y otro para el formulario de suscripción (<div> con botones, input de email y texto de enlaces). Incluye un elemento gráfico flotante en el fondo.
    • Medidas Clave:
      • Layout: display: flex para una disposición en dos columnas (texto a la izquierda, formulario a la derecha) en escritorio.
      • Ancho máximo: Contenido limitado por el max-width global del PageContainer.
      • Formulario: Ancho fijo en escritorio (aproximadamente 380px), adaptativo en móvil. border-radius: 16px.
    • Actualización (Video): El formulario de la sección "Hero" permite "Continuar con Google" (posiblemente un login pre-rellenado con un email específico) o ingresar un correo electrónico.

  4. FeaturesGrid (src/components/FeaturesGrid/FeaturesGrid.tsx):

    • Descripción: Presenta las características clave del producto mediante tarjetas interactivas con iconos y títulos.
    • Jerarquía DOM Clave: <section> que contiene un <div> (featuresGrid) para los elementos individuales (featureCard), con flechas de navegación para el carrusel. Cada tarjeta contiene un <img> (icono/imagen) y un <h3> (título).
    • Medidas Clave:
      • Layout: display: flex con gap para la separación entre tarjetas. Implementa overflow-x: auto con scroll-snap-type para el carrusel en pantallas donde las tarjetas no caben en una fila.
      • Tarjetas: border-radius: 16px, box-shadow sutil. Dimensiones uniformes (ej. 220px x 220px).
    • Actualización (Video): Es un carrusel horizontal interactivo con flechas de navegación a izquierda y derecha.

  5. ContentDetailsSection (src/components/ContentDetailsSection/ContentDetailsSection.tsx):

    • Descripción: Agrupa múltiples bloques de contenido que detallan aspectos específicos del producto, a menudo con un layout de texto e imagen/video lado a lado.
    • Jerarquía DOM Clave: Múltiples <section.contentBlock> con div.textColumn y div.imageColumn. Incluye un reproductor de audio simulado en una de las secciones.
    • Medidas Clave:
      • Layout: display: flex para los bloques de texto y multimedia, alternando flex-direction (normal y row-reverse).
      • Espaciado vertical: padding: 100px 0 para separar cada sub-sección.

  6. TestimonialsCarousel (src/components/TestimonialsCarousel/TestimonialsCarousel.tsx):

    • Descripción: Sección que muestra testimonios de usuarios en un formato de carrusel interactivo.
    • Jerarquía DOM Clave: <section> con un <h2> y un contenedor <div> para el carrusel de tarjetas (testimonialCard). Incluye flechas de navegación (<button>) y puntos de paginación (<div> con <span>).
    • Medidas Clave:
      • Layout: display: flex con overflow-x: hidden para el carrusel.
      • Tarjetas: border-radius: 16px, box-shadow para elevación.
    • Actualización (Video): Confirmado como carrusel con flechas de navegación y puntos de paginación.

  7. CallToActionSection (src/components/CallToActionSection/CallToActionSection.tsx):

    • Descripción: Una sección destacada al final de la página que incita al usuario a comenzar a usar el producto.
    • Jerarquía DOM Clave: <section> con un <h2> para el mensaje principal, un <button> para la acción y un <p> con texto complementario, todo centrado.
    • Medidas Clave:
      • Color de fondo: Azul primario (#0066FF) con un patrón gráfico sutil.
      • Botón: border-radius: 8px, padding: 18px 36px.

  8. Footer (src/components/Footer/Footer.tsx):

    • Descripción: Contiene el logo de StreamYard, enlaces de navegación secundarios organizados en columnas (Producto, Comunidad, StreamYard para, Únete a nosotros) y un selector de idioma.
    • Jerarquía DOM Clave: <footer> con múltiples <div>s para las columnas de enlaces (<ul>, <li>, <a>). Incluye un select o un dropdown personalizado para el idioma, y enlaces de términos y políticas.
    • Actualización (Video): Selector de idioma funcional en la parte inferior derecha.

II. Métricas Pixel-Perfect:

A. Tipografía:

  • Familia de Fuentes: sans-serif (posiblemente 'Inter', o 'system-ui', 'Helvetica Neue', 'Arial').
  • H1 (Títulos principales, ej. La manera más sencilla...):
    • Tamaño: 64px (Escritorio), 40px (Móvil)
    • Peso: 800 (Extra Bold)
    • Altura de línea: 1.2
    • Color: #1A1A1A
  • H2 (Títulos de Sección, ej. Transmitir en vivo o graba podcasts):
    • Tamaño: 44px (Escritorio), 32px (Móvil)
    • Peso: 700 (Bold)
    • Altura de línea: 1.3
    • Color: #1A1A1A
  • P (Párrafos de Contenido):
    • Tamaño: 18px (Escritorio), 16px (Móvil)
    • Peso: 400 (Regular)
    • Altura de línea: 1.6
    • Color: #333333
  • Texto Pequeño (Footer, captions, formularios):
    • Tamaño: 14px (Escritorio), 13px (Móvil)
    • Peso: 400
    • Altura de línea: 1.5
    • Color: #666666

B. Paleta de Colores:

  • Fondo Principal (General): #FFFFFF (Blanco puro) o #F9FAFC (Blanco muy ligero).
  • Texto Principal: #1A1A1A (Negro muy oscuro).
  • Texto Secundario/Párrafos: #333333 o #666666.
  • Color de Acento (Azul Primario): #0066FF (Botones, enlaces primarios).
  • Color de Acento (Rosa): #FFDCE6 (Fondos de sección específicos).
  • Color de Acento (Morado): #6432C8 (Fondos de sección específicos).
  • Color de Acento (Amarillo): #FFE664 (Fondos de sección específicos).
  • Bordes/Líneas sutiles: #E0E0E0.
  • Sombras (Box-shadow): 0 4px 12px rgba(0, 0, 0, 0.08) para tarjetas y formularios.
  • Gradientes (ej. Hero Section): linear-gradient(to bottom, #EBF5FF, #FFFFFF).

C. Espaciado y Bordeado:

  • Separación Vertical entre Secciones: padding-top: 100px, padding-bottom: 100px.
  • Separación Interna (Padding):
    • Botones: padding: 16px 32px.
    • Tarjetas: padding: 24px.
    • Contenedores de contenido: padding-inline: 20px (para márgenes laterales en pantallas más pequeñas).
  • Radio de Borde (border-radius):
    • Botones: 8px.
    • Tarjetas (Características, Testimonios): 16px.
    • Inputs de formulario: 6px.
    • Contenedor del formulario Hero: 16px.

III. Funcionalidad y Scripts Internos:

A. Funcionalidad del Aplicativo Web (Interactividad a Replicar):

  1. Menú de Navegación Colapsable (Móvil) y Dropdowns (Header):
    • En móvil, el menú principal se colapsa en un icono de hamburguesa. Al hacer clic, el menú se desliza.
    • Los elementos "Producto" y "Para empresas" muestran submenús (dropdowns) al pasar el ratón (escritorio). En móvil, estos dropdowns se expanden/colapsan al hacer clic.
  2. Carrusel de Características (FeaturesGrid):
    • La sección de características es un carrusel horizontal con flechas de navegación izquierda/derecha.
    • Al hacer clic en una tarjeta de característica específica (ej. "Transmisión múltiple"), el usuario es redirigido a una página de registro/inicio de sesión.
  3. Formulario de Hero Section (Redirección):
    • Al hacer clic en los botones "Continuar con Google" o "Empecemos" (Get started) en el formulario de la sección Hero, el usuario es redirigido a una página de registro/inicio de sesión dedicada (/signup o /login).
  4. Reproducción de Audio Interactivo:
    • En la sección "Grabaciones con calidad de estudio...", hay un botón "Play/Pause" que simula la reproducción de audio, actualizando una barra de progreso.
  5. Carrusel de Testimonios (TestimonialsCarousel):
    • Muestra testimonios en un carrusel con flechas de navegación izquierda/derecha y puntos de paginación para indicar el slide actual y permitir la navegación directa.
  6. Selector de Idioma (Footer):
    • Un dropdown en el footer permite al usuario seleccionar el idioma de la interfaz.

B. Scripts Internos (Lógica JavaScript Clave):

  1. Manejo de Estado del Menú Móvil y Dropdowns:
    • useState en Header.tsx para isMobileMenuOpen, isProductDropdownOpen, isBusinessDropdownOpen.
    • onClick handlers para el icono de hamburguesa y los enlaces de dropdown en móvil. onMouseEnter/onMouseLeave para los dropdowns en escritorio.
    • Renderizado condicional de clases CSS (.navOpen, .dropdownMenu) para controlar visibilidad y animaciones.
    • Se añadirán iconos SVG a los ítems del menú desplegable.
  2. Gestión de Carrusel (FeaturesGrid y TestimonialsCarousel):
    • useState para currentIndex del carrusel y useRef para el elemento de desplazamiento.
    • Funciones scrollLeft y scrollRight para las flechas de navegación, actualizando el scrollLeft del elemento referenciado.
    • Manejo de clic en tarjetas para redirección (window.location.href = '/signup').
    • Para el carrusel de testimonios, se añadirán puntos de paginación que actualizan currentIndex directamente.
  3. Redirección de Formulario (Hero Section):
    • onClick handlers para los botones "Continuar con Google" y "Get started" que ejecutarán window.location.href = '/signup' para simular la redirección.
  4. Control de Audio Simulado:
    • useState para isPlayingAudio y audioProgress en el componente ContentDetailsSection.
    • handlePlayPauseAudio alterna isPlayingAudio y usa setInterval para simular el avance de audioProgress.
  5. Manejo de Selector de Idioma (Footer):
    • useState para selectedLanguage y un onChange handler para el elemento select (o un onClick para un dropdown personalizado) que actualizará el estado (sin lógica de internacionalización real).

Generación de Código

A continuación, se presenta el código de los componentes React/TypeScript y sus archivos CSS Modules, incorporando las actualizaciones del análisis del video.

src/components/PageContainer.tsx

import React, { ReactNode } from 'react';
import styles from './PageContainer.module.css';

interface PageContainerProps {
  children: ReactNode;
}

const PageContainer: React.FC<PageContainerProps> = ({ children }) => {
  return (
    <div className={styles.pageContainer}>
      {children}
    </div>
  );
};

export default PageContainer;

src/components/PageContainer.module.css

/* src/components/PageContainer.module.css */

.pageContainer {
  max-width: 1280px; /* Ancho máximo del contenido */
  margin: 0 auto; /* Centrar el contenedor en la página */
  padding: 0 20px; /* Padding horizontal para evitar que el contenido toque los bordes en pantallas pequeñas */
  overflow-x: hidden; /* Evita el scroll horizontal no deseado */
}

/* Base styles for the page */
:root {
  --primary-blue: #0066FF;
  --light-blue-gradient-start: #EBF5FF;
  --text-dark: #1A1A1A;
  --text-medium: #333333;
  --text-light: #666666;
  --bg-white: #FFFFFF;
  --bg-light-grey: #F9FAFC;
  --accent-pink: #FFDCE6;
  --accent-purple: #6432C8;
  --accent-yellow: #FFE664;
  --border-light: #E0E0E0;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Tipografía Escritorio */
  --font-size-h1: 64px;
  --font-weight-h1: 800;
  --line-height-h1: 1.2;

  --font-size-h2: 44px;
  --font-weight-h2: 700;
  --line-height-h2: 1.3;

  --font-size-p: 18px;
  --font-weight-p: 400;
  --line-height-p: 1.6;

  --font-size-sm: 14px;
  --font-weight-sm: 400;
  --line-height-sm: 1.5;

  /* Bordes */
  --border-radius-button: 8px;
  --border-radius-card: 16px;
  --border-radius-input: 6px;
}

body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Usar Inter si está disponible, sino fallbacks */
  margin: 0;
  padding: 0;
  background-color: var(--bg-white);
  color: var(--text-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--text-dark);
  margin-top: 0;
  margin-bottom: 24px;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  color: var(--text-dark);
  margin-top: 0;
  margin-bottom: 20px;
}

p {
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-p);
  line-height: var(--line-height-p);
  color: var(--text-medium);
  margin-bottom: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pageContainer {
    padding: 0 16px;
  }

  h1 {
    font-size: 40px; /* Ajuste para móviles */
    line-height: 1.1;
  }

  h2 {
    font-size: 32px; /* Ajuste para móviles */
    line-height: 1.2;
  }

  p {
    font-size: 16px; /* Ajuste para móviles */
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 28px;
  }
}

src/components/Header/Header.tsx

import React, { useState } from 'react';
import styles from './Header.module.css';

// Mock icons for demonstration, using simple SVGs or placeholder img
const MenuIcon = () => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>;
const CloseIcon = () => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>;
const ChevronDown = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>;

// Mock icons for dropdown items (simplificado)
const IconMic = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>;
const IconUsers = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87m-3-12a4 4 0 0 1 0 7.75"></path></svg>;
const IconPalette = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16.2 7.7l-4.2 4.2M8 12l4 4"></path></svg>;
const IconVideo = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M23 7l-7 5 7 5V7z"></path><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>;
const IconMonitor = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>;


const Header: React.FC = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isProductDropdownOpen, setIsProductDropdownOpen] = useState(false);
  const [isBusinessDropdownOpen, setIsBusinessDropdownOpen] = useState(false);

  // Función para alternar el menú móvil
  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  // Funciones para manejar los dropdowns en desktop (hover)
  const handleProductMouseEnter = () => setIsProductDropdownOpen(true);
  const handleProductMouseLeave = () => setIsProductDropdownOpen(false);
  const handleBusinessMouseEnter = () => setIsBusinessDropdownOpen(true);
  const handleBusinessMouseLeave = () => setIsBusinessDropdownOpen(false);

  // Funciones para manejar los dropdowns en mobile (click)
  const toggleProductDropdown = () => {
    setIsProductDropdownOpen(!isProductDropdownOpen);
    setIsBusinessDropdownOpen(false); // Cierra el otro dropdown si está abierto
  };
  const toggleBusinessDropdown = () => {
    setIsBusinessDropdownOpen(!isBusinessDropdownOpen);
    setIsProductDropdownOpen(false); // Cierra el otro dropdown si está abierto
  };

  // Simula la redirección a una página de registro/inicio de sesión
  const handleGetStartedClick = () => {
    console.log("Redirecting to signup page...");
    // En una aplicación real: window.location.href = '/signup';
    alert("Simulando redirección a /signup");
  };

  return (
    <header className={styles.header}>
      <div className={styles.logo}>
        <img src="https://via.placeholder.com/150x40?text=StreamYard+Logo" alt="StreamYard Logo" />
      </div>

      {/* Botón de menú de hamburguesa para móvil */}
      <button className={styles.menuToggle} onClick={toggleMobileMenu} aria-label="Toggle menu">
        {isMobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
      </button>

      {/* Menú de navegación */}
      <nav className={`${styles.nav} ${isMobileMenuOpen ? styles.navOpen : ''}`}>
        <ul className={styles.navList}>
          {/* Dropdown 'Product' */}
          <li
            className={styles.navItemDropdown}
            onMouseEnter={handleProductMouseEnter}
            onMouseLeave={handleProductMouseLeave}
          >
            <a href="#" className={styles.navLink} onClick={toggleProductDropdown} aria-expanded={isProductDropdownOpen}>
              Producto <ChevronDown />
            </a>
            {isProductDropdownOpen && (
              <ul className={styles.dropdownMenu}>
                <li><a href="#"><IconMic /> Por qué StreamYard</a></li>
                <li><a href="#"><IconUsers /> Invitados</a></li>
                <li><a href="#"><IconPalette /> Marca</a></li>
                <li><a href="#"><IconVideo /> Transmisión múltiple</a></li>
                <li><a href="#"><IconMonitor /> Grabación</a></li>
                {/* Añadir más ítems según sea necesario */}
              </ul>
            )}
          </li>

          <li><a href="#" className={styles.navLink}>Contacto</a></li>
          <li><a href="#" className={styles.navLink}>Precios</a></li>
          <li><a href="#" className={styles.navLink}>Novedades</a></li>

          {/* Dropdown 'For Business' */}
          <li
            className={styles.navItemDropdown}
            onMouseEnter={handleBusinessMouseEnter}
            onMouseLeave={handleBusinessMouseLeave}
          >
            <a href="#" className={styles.navLink} onClick={toggleBusinessDropdown} aria-expanded={isBusinessDropdownOpen}>
              Para empresas <ChevronDown />
            </a>
            {isBusinessDropdownOpen && (
              <ul className={styles.dropdownMenu}>
                <li><a href="#"><IconMonitor /> Enterprise</a></li>
                <li><a href="#"><IconUsers /> Agencias</a></li>
              </ul>
            )}
          </li>

          <li><a href="#" className={styles.navLink}>Accede</a></li>
          <li>
            <button className={styles.getStartedButton} onClick={handleGetStartedClick}>Empecemos</button>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

src/components/Header/Header.module.css

/* src/components/Header/Header.module.css */

.header {
  display: flex;
  justify-content: space-between; /* Espacia el logo y la navegación */
  align-items: center;
  padding: 16px 20px; /* Padding interno */
  height: 80px; /* Altura fija */
  background-color: var(--bg-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil */
  position: sticky; /* Sticky header */
  top: 0;
  z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
}

.logo img {
  height: 40px; /* Altura del logo */
  width: auto;
}

.nav {
  display: flex; /* Por defecto, flex para escritorio */
}

.navList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 30px; /* Espacio entre elementos de navegación */
}

.navLink {
  text-decoration: none;
  color: var(--text-medium);
  font-weight: 500;
  font-size: 16px;
  padding: 8px 0;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px; /* Espacio para el icono de chevron */
}

.navLink:hover {
  color: var(--primary-blue); /* Color al pasar el ratón */
}

.getStartedButton {
  background-color: var(--primary-blue);
  color: var(--bg-white);
  border: none;
  border-radius: var(--border-radius-button);
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.getStartedButton:hover {
  background-color: #0056e6; /* Azul más oscuro al pasar el ratón */
}

/* Estilos para el menú dropdown */
.navItemDropdown {
  position: relative;
}

.dropdownMenu {
  position: absolute;
  top: 100%; /* Debajo del elemento padre */
  left: 0;
  background-color: var(--bg-white);
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-input);
  list-style: none;
  padding: 10px 0;
  margin-top: 5px; /* Pequeño espacio entre el link y el dropdown */
  min-width: 200px; /* Ancho ajustado para los ítems con icono */
  display: none; /* Oculto por defecto, se muestra con JS */
  flex-direction: column;
  z-index: 1010;
}

.navItemDropdown:hover .dropdownMenu {
  display: flex; /* Mostrar en hover para desktop */
}

.dropdownMenu li a {
  display: flex; /* Para alinear el icono y el texto */
  align-items: center;
  gap: 10px; /* Espacio entre icono y texto */
  padding: 8px 15px;
  color: var(--text-medium);
  text-decoration: none;
  font-size: 15px;
}

.dropdownMenu li a:hover {
  background-color: var(--bg-light-grey);
  color: var(--primary-blue);
}

/* Estilos para los iconos dentro del dropdown */
.dropdownMenu li a svg {
  color: var(--text-light); /* Color del icono por defecto */
  transition: color 0.3s ease;
}

.dropdownMenu li a:hover svg {
  color: var(--primary-blue); /* Color del icono al pasar el ratón */
}


/* Menú de hamburguesa (visible solo en móvil) */
.menuToggle {
  display: none; /* Oculto por defecto */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Responsive: Mobile styles */
@media (max-width: 1024px) {
  .navList {
    gap: 20px; /* Reduce el espacio entre elementos */
  }
}

@media (max-width: 768px) {
  .header {
    padding: 16px;
    height: 60px; /* Reduce la altura del header en móvil */
  }

  .nav {
    display: none; /* Oculta la navegación por defecto en móvil */
    flex-direction: column;
    position: absolute;
    top: 60px; /* Debajo del header */
    left: 0;
    width: 100%;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    padding: 20px 0;
    z-index: 999;
    /* Animación de deslizamiento */
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
  }

  .nav.navOpen {
    display: flex; /* Muestra el menú cuando está abierto */
    transform: translateY(0);
  }

  .navList {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .navList li {
    width: 100%;
    padding: 8px 20px; /* Padding para los ítems del menú móvil */
  }

  .navLink {
    width: 100%;
  }

  .navItemDropdown {
    width: 100%;
  }

  .navItemDropdown:hover .dropdownMenu {
    display: none; /* Deshabilita el hover en mobile, se activa con click */
  }

  .navItemDropdown .dropdownMenu {
    position: static; /* Cambia a posición estática para que fluya en el menú móvil */
    box-shadow: none;
    border-radius: 0;
    padding-left: 20px; /* Indentación para sub-items */
    margin-top: 0;
    display: none; /* Oculto por defecto en móvil */
  }

  /* Mostrar dropdowns en móvil al hacer click (aria-expanded="true" lo controla) */
  .navItemDropdown a[aria-expanded="true"] + .dropdownMenu {
    display: flex;
  }

  .menuToggle {
    display: block; /* Muestra el botón de hamburguesa */
  }

  .getStartedButton {
    width: calc(100% - 40px); /* Ajuste de ancho para botón en móvil */
    margin: 10px 20px;
    text-align: center;
  }
}

src/components/HeroSection/HeroSection.tsx

import React from 'react';
import styles from './HeroSection.module.css';

const HeroSection: React.FC = () => {
  // Simula la redirección a una página de registro/inicio de sesión
  const handleFormAction = () => {
    console.log("Redirecting to signup page...");
    // En una aplicación real: window.location.href = '/signup';
    alert("Simulando redirección a /signup");
  };

  return (
    <section className={styles.heroSection}>
      <div className={styles.heroContent}>
        <h1>La manera más sencilla de grabar y transmitir en vivo</h1>
        <p>
          StreamYard es un estudio profesional para grabar y hacer transmisiones en vivo desde tu
          navegador. Graba contenido o transmite en vivo a Facebook, YouTube y otras plataformas.
        </p>
      </div>
      <div className={styles.heroFormContainer}>
        <div className={styles.heroForm}>
          {/* Botón de "Continuar con Google" con texto pre-rellenado simulado */}
          <button className={styles.googleButton} onClick={handleFormAction}>
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" alt="Google Logo" className={styles.googleLogo} />
            Continuar como Nextv<br/>
            <span className={styles.googleEmail}>testv.stream@gmail.com</span>
          </button>
          <div className={styles.separator}>O continúa con tu correo electrónico</div>
          <input
            type="email"
            placeholder="Ingrese la dirección de correo electrónico"
            className={styles.emailInput}
          />
          <button className={styles.getStartedButton} onClick={handleFormAction}>
            Empieza, ¡es gratis!
          </button>
          <p className={styles.formFooterText}>
            ¡Confiado por más de 12,000,000 creadores!
            <br />
            Al continuar, aceptas nuestros <a href="#">Términos de Servicio del Usuario</a> y{' '}
            <a href="#">Política de uso del Plan</a> y reconoces la recepción
            de nuestra <a href="#">Política de Privacidad</a>
          </p>
          <p className={styles.loginText}>¿Ya usas StreamYard? <a href="#">Inicia sesión.</a></p>
        </div>
        {/* Gráfico de fondo, ahora en el container del formulario para mejor posicionamiento */}
        <img
          src="https://via.placeholder.com/400x300?text=Hero+Graphic" // Placeholder image for the graphic
          alt="StreamYard Interface Graphic"
          className={styles.heroGraphic}
        />
      </div>
    </section>
  );
};

export default HeroSection;

src/components/HeroSection/HeroSection.module.css

/* src/components/HeroSection/HeroSection.module.css */

.heroSection {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 0; /* Espaciado vertical */
  background: linear-gradient(to bottom, var(--light-blue-gradient-start), var(--bg-white)); /* Gradiente de fondo */
  gap: 80px; /* Espacio entre el contenido de texto y el formulario */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas más pequeñas */
}

.heroContent {
  flex: 1; /* Ocupa el espacio disponible */
  min-width: 300px; /* Ancho mínimo para el texto */
  max-width: 600px; /* Ancho máximo para el texto */
}

.heroContent h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--text-dark);
}

.heroContent p {
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
  color: var(--text-medium);
  max-width: 500px; /* Limita el ancho del párrafo */
}

.heroFormContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Alinea el formulario y el gráfico a la derecha */
  min-width: 350px;
}

.heroForm {
  background-color: var(--bg-white);
  border-radius: var(--border-radius-card); /* Radio de borde para el formulario */
  box-shadow: var(--shadow-sm); /* Sombra para el formulario */
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espacio entre elementos del formulario */
  width: 380px; /* Ancho fijo para el formulario */
  z-index: 1; /* Asegura que el formulario esté sobre el gráfico */
}

.googleButton {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-button);
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-medium);
  display: flex;
  flex-direction: column; /* Apila el texto principal y el email */
  align-items: center;
  justify-content: center;
  gap: 5px; /* Espacio entre las líneas de texto */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.googleButton:hover {
  background-color: var(--bg-light-grey);
}

.googleButton img {
  position: absolute; /* Posiciona el logo de Google */
  left: 20px;
  height: 20px;
  width: 20px;
}

.googleEmail {
  font-size: 12px;
  color: var(--text-light);
}

.separator {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-light);
  position: relative;
  margin: 10px 0;
}

.separator::before,
.separator::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background-color: var(--border-light);
}

.separator::before {
  left: 0;
}

.separator::after {
  right: 0;
}

.emailInput {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-input);
  padding: 14px 15px;
  font-size: 16px;
  width: calc(100% - 30px); /* Ajusta el ancho por el padding */
}

.emailInput:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.2);
}

.getStartedButton {
  background-color: var(--primary-blue);
  color: var(--bg-white);
  border: none;
  border-radius: var(--border-radius-button);
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.getStartedButton:hover {
  background-color: #0056e6;
}

.formFooterText {
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
  margin-top: 10px;
}

.formFooterText a,
.loginText a {
  color: var(--primary-blue);
  text-decoration: none;
}

.loginText {
  font-size: var(--font-size-sm);
  color: var(--text-medium);
  text-align: center;
  margin-top: 15px;
}

.heroGraphic {
  position: absolute;
  top: -80px; /* Posiciona el gráfico flotando por encima del formulario */
  right: -100px; /* Ajusta la posición del gráfico */
  width: 450px; /* Tamaño del gráfico */
  height: auto;
  opacity: 0.8; /* Transparencia para que parezca de fondo */
  z-index: 0; /* Detrás del formulario */
  filter: blur(1px); /* Ligero desenfoque */
}


/* Responsive adjustments */
@media (max-width: 1024px) {
  .heroSection {
    flex-direction: column; /* Apila el contenido y el formulario */
    padding: 80px 0;
    gap: 50px;
  }

  .heroContent {
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
  }

  .heroContent h1 {
    font-size: 52px;
  }

  .heroContent p {
    font-size: 17px;
  }

  .heroFormContainer {
    align-items: center; /* Centra el formulario */
    min-width: unset;
    width: 100%;
  }

  .heroForm {
    width: 85%; /* El formulario ocupa más ancho en móviles */
    max-width: 450px; /* Limita el ancho del formulario */
  }

  .heroGraphic {
    position: static; /* Quita el posicionamiento absoluto en móvil */
    margin-top: 30px;
    width: 80%;
    max-width: 400px;
    opacity: 1;
    filter: none;
  }
}

@media (max-width: 768px) {
  .heroSection {
    padding: 60px 0;
  }

  .heroContent h1 {
    font-size: 40px;
  }

  .heroForm {
    width: 95%; /* Aún más ancho en pantallas más pequeñas */
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .heroContent h1 {
    font-size: 32px;
  }
  .heroContent p {
    font-size: 16px;
  }
  .googleButton {
    padding: 12px 10px;
    font-size: 14px;
  }
  .googleButton img {
    left: 10px;
  }
}

src/components/FeaturesGrid/FeaturesGrid.tsx

import React, { useState, useRef } from 'react';
import styles from './FeaturesGrid.module.css';

// Mock data for features
const features = [
  { id: 1, name: 'Marca', icon: 'https://via.placeholder.com/64?text=Marca' },
  { id: 2, name: 'Podcasts', icon: 'https://via.placeholder.com/64?text=Podcasts' },
  { id: 3, name: 'Reutilización de Video', icon: 'https://via.placeholder.com/64?text=Reutilizar' },
  { id: 4, name: 'Seminarios web', icon: 'https://via.placeholder.com/64?text=Seminarios' },
  { id: 5, name: 'Participación', icon: 'https://via.placeholder.com/64?text=Partic' },
  { id: 6, name: 'Grabación', icon: 'https://via.placeholder.com/64?text=Grab' },
  { id: 7, name: 'Transmisión múltiple', icon: 'https://via.placeholder.com/64?text=Multi' },
  { id: 8, name: 'Invitados', icon: 'https://via.placeholder.com/64?text=Invitados' },
];

const FeaturesGrid: React.FC = () => {
  const scrollRef = useRef<HTMLDivElement>(null);

  const scroll = (direction: 'left' | 'right') => {
    if (scrollRef.current) {
      const scrollAmount = 300; // Cantidad de desplazamiento
      if (direction === 'left') {
        scrollRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
      } else {
        scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
      }
    }
  };

  // Simula la redirección al hacer clic en una tarjeta de característica
  const handleFeatureClick = (featureName: string) => {
    console.log(`Clicked feature: ${featureName}. Redirecting to signup page...`);
    // En una aplicación real: window.location.href = `/signup?feature=${encodeURIComponent(featureName)}`;
    alert(`Simulando redirección a /signup por la característica: ${featureName}`);
  };

  return (
    <section className={styles.featuresSection}>
      <div className={styles.carouselContainer}>
        {/* Flecha de navegación izquierda */}
        <button className={`${styles.navArrow} ${styles.leftArrow}`} onClick={() => scroll('left')} aria-label="Scroll left">
          &#8249; {/* Carácter de flecha izquierda */}
        </button>
        <div className={styles.featuresGrid} ref={scrollRef}>
          {features.map((feature) => (
            <div key={feature.id} className={styles.featureCard} onClick={() => handleFeatureClick(feature.name)}>
              <img src={feature.icon} alt={feature.name} className={styles.featureIcon} />
              <h3>{feature.name}</h3>
            </div>
          ))}
        </div>
        {/* Flecha de navegación derecha */}
        <button className={`${styles.navArrow} ${styles.rightArrow}`} onClick={() => scroll('right')} aria-label="Scroll right">
          &#8250; {/* Carácter de flecha derecha */}
        </button>
      </div>
    </section>
  );
};

export default FeaturesGrid;

src/components/FeaturesGrid/FeaturesGrid.module.css

/* src/components/FeaturesGrid/FeaturesGrid.module.css */

.featuresSection {
  padding: 50px 0 100px 0; /* Menos padding superior, más inferior */
  background-color: var(--bg-white); /* Fondo blanco, no gris */
  text-align: center; /* Centra el texto */
}

.carouselContainer {
  position: relative;
  max-width: 1200px; /* Ancho máximo para el carrusel */
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.featuresGrid {
  display: flex;
  overflow-x: auto; /* Permite el desplazamiento horizontal */
  -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iOS */
  scroll-snap-type: x mandatory; /* Ajuste para el scroll-snap */
  gap: 30px; /* Espacio entre las tarjetas */
  padding: 20px; /* Padding para evitar que las tarjetas toquen los bordes */
  margin: 0 -20px; /* Compensa el padding para que el contenido fluya */
  scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
}

/* Oculta la barra de desplazamiento en Chrome/Safari */
.featuresGrid::-webkit-scrollbar {
  display: none;
}

.featureCard {
  flex: 0 0 auto; /* No permite que las tarjetas se encojan */
  width: 220px; /* Ancho fijo de la tarjeta */
  height: 220px; /* Altura fija para que sean cuadradas */
  background-color: var(--bg-white);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  scroll-snap-align: start; /* Alineación para el scroll-snap */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 1px solid var(--border-light); /* Borde sutil */
}

.featureCard:hover {
  transform: translateY(-5px); /* Pequeño efecto de elevación */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.featureIcon {
  width: 64px; /* Tamaño del icono */
  height: 64px;
  margin-bottom: 15px;
}

.featureCard h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.navArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 50%; /* Botones circulares */
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.navArrow:hover {
  background-color: var(--bg-light-grey);
  transform: translateY(-50%) scale(1.05);
}

.leftArrow {
  left: -25px; /* Posicionar fuera del grid */
}

.rightArrow {
  right: -25px; /* Posicionar fuera del grid */
}

/* Responsive adjustments */
@media (max-width: 1280px) {
  .leftArrow {
    left: 0px; /* Mueve las flechas dentro del padding del contenedor principal */
  }

  .rightArrow {
    right: 0px;
  }
}

@media (max-width: 768px) {
  .featuresSection {
    padding: 30px 0 60px 0; /* Ajuste padding */
  }

  .featuresGrid {
    gap: 20px; /* Reduce el espacio entre tarjetas */
    padding: 15px;
    margin: 0 -15px;
  }

  .featureCard {
    width: 180px; /* Reduce el tamaño de las tarjetas */
    height: 180px;
    padding: 15px;
  }

  .featureIcon {
    width: 50px;
    height: 50px;
  }

  .featureCard h3 {
    font-size: 18px;
  }

  .navArrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .featuresGrid {
    padding: 10px;
    margin: 0 -10px;
  }

  .featureCard {
    width: 150px; /* Aún más pequeñas */
    height: 150px;
  }

  .navArrow {
    display: none; /* Oculta las flechas si el scroll es el método principal */
  }
}

src/components/ContentDetailsSection/ContentDetailsSection.tsx

import React, { useState } from 'react';
import styles from './ContentDetailsSection.module.css';

// Mock component for Play/Pause icon
const PlayIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polygon points="5 3 19 12 5 21 5 3"></polygon>
  </svg>
);
const PauseIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="6" y="4" width="4" height="16"></rect>
    <rect x="14" y="4" width="4" height="16"></rect>
  </svg>
);

const ContentDetailsSection: React.FC = () => {
  const [isPlayingAudio, setIsPlayingAudio] = useState(false);
  const [audioProgress, setAudioProgress] = useState(0);
  const audioIntervalRef = React.useRef<number | undefined>(undefined);

  // Simula la reproducción de audio
  const handlePlayPauseAudio = () => {
    if (isPlayingAudio) {
      // Pausar
      setIsPlayingAudio(false);
      if (audioIntervalRef.current) {
        clearInterval(audioIntervalRef.current);
      }
      setAudioProgress(0); // Reinicia el progreso al pausar
    } else {
      // Reproducir
      setIsPlayingAudio(true);
      let currentProgress = 0;
      audioIntervalRef.current = window.setInterval(() => {
        currentProgress += 10; // Incrementa el progreso
        if (currentProgress > 100) {
          currentProgress = 0;
          setIsPlayingAudio(false);
          if (audioIntervalRef.current) {
            clearInterval(audioIntervalRef.current);
          }
        }
        setAudioProgress(currentProgress);
      }, 500); // Actualiza cada 0.5 segundos
    }
  };

  React.useEffect(() => {
    // Limpieza al desmontar el componente
    return () => {
      if (audioIntervalRef.current) {
        clearInterval(audioIntervalRef.current);
      }
    };
  }, []);

  return (
    <div className={styles.contentDetailsSection}>
      {/* Sección 1: Transmite en vivo o graba podcasts con invitados remotos */}
      <section className={`${styles.contentBlock} ${styles.bgPink}`}>
        <div className={styles.textColumn}>
          <h2>Transmite en vivo o graba podcasts con invitados remotos</h2>
          <p>
            Los invitados pueden unirse fácilmente desde su navegador o teléfono en unos
            pocos clics. No hace falta descargar ningún software.
          </p>
          <a href="#" className={styles.learnMoreLink}>Más información &rarr;</a>
        </div>
        <div className={styles.imageColumn}>
          <img src="https://via.placeholder.com/500x350?text=Remote+Guests" alt="Remote Guests" className={styles.contentImage} />
        </div>
      </section>

      {/* Sección 2: Grabaciones con calidad de estudio, independientemente de tu conexión */}
      <section className={`${styles.contentBlock} ${styles.bgPurple} ${styles.reverseLayout}`}>
        <div className={styles.imageColumn}>
          <div className={styles.audioPlayer}>
            <img src="https://via.placeholder.com/500x350?text=Studio+Quality" alt="Studio Quality" className={styles.contentImage} />
            <div className={styles.audioControls}>
              <button onClick={handlePlayPauseAudio} className={styles.playPauseButton} aria-label={isPlayingAudio ? "Pause audio" : "Play audio"}>
                {isPlayingAudio ? <PauseIcon /> : <PlayIcon />}
              </button>
              <div className={styles.progressBarContainer}>
                <div
                  className={styles.progressBar}
                  style={{ width: `${audioProgress}%` }}
                ></div>
              </div>
              <span className={styles.audioLabel}>Haz clic para oír la diferencia</span>
            </div>
          </div>
        </div>
        <div className={styles.textColumn}>
          <h2>Grabaciones con calidad de estudio, independientemente de tu conexión</h2>
          <p>
            ¿Te cansaste de que tus podcasts queden arruinados con Zoom y Skype?
            Con las grabaciones locales, se graba un archivo de audio y video por separado
            en el dispositivo de cada usuario. Incluso si la persona tiene una conexión
            a Internet débil, las grabaciones no estarán borrosas ni entrecortadas.
          </p>
          <a href="#" className={styles.learnMoreLink}>Descubre más &rarr;</a>
        </div>
      </section>

      {/* Sección 3: Haz transmisiones múltiples a varias plataformas a la vez */}
      <section className={`${styles.contentBlock} ${styles.bgWhite}`}>
        <div className={styles.textColumn}>
          <h2>Haz transmisiones múltiples a varias plataformas a la vez</h2>
          <p>
            Transmite a Facebook, YouTube, Instagram, LinkedIn, X (Twitter), Twitch,
            y más. Haz que tu público se sienta especial mostrando sus comentarios
            en pantalla.
          </p>
          <a href="#" className={styles.learnMoreLink}>Ver todas las integraciones &rarr;</a>
        </div>
        <div className={styles.imageColumn}>
          <img src="https://via.placeholder.com/500x350?text=Multistream" alt="Multistream" className={styles.contentImage} />
        </div>
      </section>

      {/* Sección 4: Lleva tus seminarios web a StreamYard On Air */}
      <section className={`${styles.contentBlock} ${styles.bgBlueish} ${styles.reverseLayout}`}>
        <div className={styles.imageColumn}>
          <img src="https://via.placeholder.com/500x350?text=Webinars" alt="Webinars" className={styles.contentImage} />
        </div>
        <div className={styles.textColumn}>
          <h2>Lleva tus seminarios web a StreamYard On Air</h2>
          <p>
            StreamYard On-Air es una plataforma de seminarios web en vivo.
            Estamos redefiniendo los conceptos de estabilidad, simplicidad
            y calidad de producción para los seminarios web. Incluso puedes
            insertarlos en tu sitio web para una experiencia de marca totalmente
            personalizada.
          </p>
          <a href="#" className={styles.learnMoreLink}>Entérate de por qué todo el mundo está haciendo el cambio &rarr;</a>
        </div>
      </section>
    </div>
  );
};

export default ContentDetailsSection;

src/components/ContentDetailsSection/ContentDetailsSection.module.css

/* src/components/ContentDetailsSection/ContentDetailsSection.module.css */

.contentDetailsSection {
  padding: 0; /* Las secciones internas manejan su propio padding */
}

.contentBlock {
  display: flex;
  align-items: center;
  gap: 80px; /* Espacio entre columnas */
  padding: 100px 0; /* Espaciado vertical entre bloques */
  margin-bottom: 0; /* Cada bloque es una sección, no necesita margen inferior extra */
  flex-wrap: wrap; /* Permite envolver columnas en pantallas pequeñas */
}

/* Fondos de sección */
.bgPink {
  background-color: var(--accent-pink);
}

.bgPurple {
  background-color: var(--accent-purple);
  color: var(--bg-white); /* Texto blanco para fondo oscuro */
}
.bgPurple h2, .bgPurple p, .bgPurple .learnMoreLink {
  color: var(--bg-white);
}

.bgYellow {
  background-color: var(--accent-yellow);
}

.bgBlueish {
  background-color: #EBF7FF; /* Un azul muy claro */
}


.textColumn {
  flex: 1; /* Ocupa el espacio disponible */
  min-width: 300px;
  max-width: 600px; /* Limita el ancho del texto */
}

.imageColumn {
  flex: 1; /* Ocupa el espacio disponible */
  min-width: 300px;
  display: flex;
  justify-content: center; /* Centra la imagen dentro de su columna */
  align-items: center;
}

.contentImage {
  max-width: 100%; /* Asegura que la imagen no se desborde */
  height: auto;
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
}

.reverseLayout {
  flex-direction: row-reverse; /* Invierte el orden de las columnas */
}

.learnMoreLink {
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 15px;
}
.bgPurple .learnMoreLink {
  color: var(--bg-white);
}

.learnMoreLink:hover {
  color: #0047b3; /* Azul más oscuro al pasar el ratón */
}

/* Estilos para el reproductor de audio simulado */
.audioPlayer {
  position: relative;
  width: 100%;
  max-width: 500px; /* Ancho máximo para el reproductor */
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden; /* Asegura que la imagen y los controles respeten el borde */
}

.audioPlayer .contentImage {
  border-radius: 0; /* La imagen no necesita borde-radius si el contenedor ya lo tiene */
  display: block; /* Elimina espacios extra debajo de la imagen */
}

.audioControls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente para los controles */
  border-radius: var(--border-radius-button);
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: var(--shadow-sm);
}

.playPauseButton {
  background: none;
  border: none;
  color: var(--primary-blue);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.playPauseButton svg {
  width: 30px;
  height: 30px;
}

.progressBarContainer {
  flex-grow: 1;
  height: 8px;
  background-color: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.progressBar {
  height: 100%;
  background-color: var(--primary-blue);
  width: 0%; /* Controlado por el estado de React */
  transition: width 0.1s linear; /* Animación suave para el progreso */
}

.audioLabel {
  font-size: var(--font-size-sm);
  color: var(--text-medium);
  white-space: nowrap; /* Evita que el texto se rompa */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .contentBlock {
    flex-direction: column; /* Apila las columnas */
    text-align: center;
    padding: 80px 0;
    gap: 40px;
  }

  .reverseLayout {
    flex-direction: column; /* También apila en layout invertido */
  }

  .textColumn, .imageColumn {
    max-width: 90%; /* Ajusta el ancho para móvil */
    margin: 0 auto; /* Centra las columnas */
  }

  .audioControls {
    bottom: 15px;
    left: 15px;
    right: 15px;
    padding: 8px 10px;
    gap: 10px;
  }

  .playPauseButton svg {
    width: 25px;
    height: 25px;
  }

  .audioLabel {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .contentBlock {
    padding: 60px 0;
    gap: 30px;
  }

  .textColumn h2 {
    font-size: 32px;
  }

  .textColumn p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .textColumn h2 {
    font-size: 28px;
  }
}

src/components/TestimonialsCarousel/TestimonialsCarousel.tsx

import React, { useState, useRef } from 'react';
import styles from './TestimonialsCarousel.module.css';

// Mock data for testimonials
const testimonials = [
  {
    id: 1,
    quote: "Me ENCANTA la simplicidad y la flexibilidad de StreamYard, así como su capacidad de crear y distribuir producciones de buena calidad que se transmiten maravillosamente a través de plataformas de transmisión de TV.",
    author: "Kisa Puckett",
  },
  {
    id: 2,
    quote: "Esto es la razón por la que uso #TheYard. Tuve que reiniciar la computadora en medio de la grabación debido a un ligero pico de tensión, ¡y no perdí nada!",
    author: "Avery Johnson",
  },
  {
    id: 3,
    quote: "Me encanta la combinación de elegancia y la sencillez que ofrece StreamYard. Lo usamos para transmitir nuestro programa semanal de entrevistas de marketing en redes sociales en YouTube, Facebook y LinkedIn. Como presentador, puedo crear sin esfuerzo un programa atractivo sin una persona que se dedique al back-end.",
    author: "Michael Steltzner",
  },
  {
    id: 4,
    quote: "Pasarme de Zoom a StreamYard para mi podcast fue lo mejor que he hecho por mi programa. ¡Gracias por el consejo, Melanie D Brown!",
    author: "Sonali BestLife Jones",
  },
  {
    id: 5,
    quote: "Recomiendo a StreamYard a todo el mundo. Casi dos tercios de mis clientes provienen de mis programas en vivo. Le agradezco de corazón a StreamYard por hacer que las transmisiones en vivo sean tan sencillas, de modo que no tenga que preocuparme por la parte técnica. Solo me enfoco en ejecutar mis programas y hacer mi negocio crezca.",
    author: "Dr. Al Aidyyan Zhang",
  },
  {
    id: 6,
    quote: "StreamYard es un servicio fantástico. La fiabilidad y facilidad para los participantes en pantalla es fenomenal. Además, StreamYard hace que este proceso sea prácticamente infalible.",
    author: "Matt Schick",
  },
];

const TestimonialsCarousel: React.FC = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const carouselRef = useRef<HTMLDivElement>(null);

  const totalSlides = testimonials.length;
  // Asumiendo 3 tarjetas visibles a la vez en escritorio
  const slidesPerPage = 3;

  const goToSlide = (index: number) => {
    setCurrentIndex(index);
    if (carouselRef.current) {
      const cardWidth = carouselRef.current.children[0]?.clientWidth || 0;
      const gap = 30; // Definido en CSS
      carouselRef.current.scrollTo({
        left: index * (cardWidth + gap),
        behavior: 'smooth',
      });
    }
  };

  const nextSlide = () => {
    const nextIndex = (currentIndex + 1) % totalSlides;
    goToSlide(nextIndex);
  };

  const prevSlide = () => {
    const prevIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    goToSlide(prevIndex);
  };

  return (
    <section className={styles.testimonialsSection}>
      <h2>Ya se crearon más de 60 millones de transmisiones y grabaciones en StreamYard</h2>
      <div className={styles.carouselContainer}>
        <button className={`${styles.navArrow} ${styles.leftArrow}`} onClick={prevSlide} aria-label="Previous testimonial">
          &#8249;
        </button>
        <div className={styles.testimonialsGrid} ref={carouselRef}>
          {testimonials.map((testimonial) => (
            <div key={testimonial.id} className={styles.testimonialCard}>
              <p className={styles.quote}>"{testimonial.quote}"</p>
              <p className={styles.author}>{testimonial.author}</p>
            </div>
          ))}
        </div>
        <button className={`${styles.navArrow} ${styles.rightArrow}`} onClick={nextSlide} aria-label="Next testimonial">
          &#8250;
        </button>
      </div>
      <div className={styles.paginationDots}>
        {Array.from({ length: Math.ceil(totalSlides / slidesPerPage) }).map((_, idx) => (
          <span
            key={idx}
            className={`${styles.dot} ${idx === Math.floor(currentIndex / slidesPerPage) ? styles.active : ''}`}
            onClick={() => goToSlide(idx * slidesPerPage)}
            aria-label={`Go to slide ${idx + 1}`}
          ></span>
        ))}
      </div>
    </section>
  );
};

export default TestimonialsCarousel;

src/components/TestimonialsCarousel/TestimonialsCarousel.module.css

/* src/components/TestimonialsCarousel/TestimonialsCarousel.module.css */

.testimonialsSection {
  padding: 100px 0;
  background-color: var(--bg-white);
  text-align: center;
}

.testimonialsSection h2 {
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.carouselContainer {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.testimonialsGrid {
  display: flex;
  overflow-x: hidden; /* Controlado por JS, no scroll nativo */
  gap: 30px;
  padding: 20px;
  margin: 0 -20px;
  -webkit-overflow-scrolling: touch;
}

.testimonialCard {
  flex: 0 0 auto; /* No permite que se encojan */
  width: calc((100% / 3) - 20px); /* Aproximadamente 3 tarjetas por vista con gap */
  max-width: 380px; /* Ancho máximo para una tarjeta individual */
  min-width: 300px; /* Ancho mínimo para la tarjeta en pantallas pequeñas */
  background-color: var(--bg-white);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
  padding: 30px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Espacia la cita y el autor */
  border: 1px solid var(--border-light);
}

.quote {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-medium);
  margin-bottom: 20px;
  font-style: italic;
}

.author {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.navArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.navArrow:hover {
  background-color: var(--bg-light-grey);
  transform: translateY(-50%) scale(1.05);
}

.leftArrow {
  left: -25px;
}

.rightArrow {
  right: -25px;
}

.paginationDots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: var(--border-light);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.dot.active {
  background-color: var(--primary-blue);
  transform: scale(1.2);
}

/* Responsive adjustments */
@media (max-width: 1280px) {
  .leftArrow {
    left: 0px;
  }
  .rightArrow {
    right: 0px;
  }
}

@media (max-width: 1024px) {
  .testimonialCard {
    width: calc((100% / 2) - 15px); /* 2 tarjetas por vista en tablets */
  }
}

@media (max-width: 768px) {
  .testimonialsSection {
    padding: 60px 0;
  }
  .testimonialsSection h2 {
    font-size: 32px;
  }
  .testimonialsGrid {
    gap: 20px;
    padding: 15px;
    margin: 0 -15px;
  }
  .testimonialCard {
    width: 90%; /* 1 tarjeta por vista en móviles, ocupa casi todo el ancho */
    max-width: 400px;
    margin: 0 auto; /* Centra la tarjeta */
    padding: 25px;
  }
  .navArrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .testimonialsSection h2 {
    font-size: 28px;
  }
  .navArrow {
    display: none; /* Oculta flechas en pantallas muy pequeñas, usa el scroll nativo si se habilita */
  }
  .testimonialCard {
    min-width: unset; /* Permite que la tarjeta se encoja más si es necesario */
  }
}

src/components/CallToActionSection/CallToActionSection.tsx

import React from 'react';
import styles from './CallToActionSection.module.css';

const CallToActionSection: React.FC = () => {
  const handleGetStartedClick = () => {
    console.log("Redirecting to signup page from CTA...");
    // En una aplicación real: window.location.href = '/signup';
    alert("Simulando redirección a /signup");
  };

  return (
    <section className={styles.ctaSection}>
      <div className={styles.ctaContent}>
        <h2>Empieza a crear.</h2>
        <button className={styles.ctaButton} onClick={handleGetStartedClick}>¡Empieza, es gratis!</button>
        <p>Únete a millones de usuarios de StreamYard y empieza con tus transmisiones o tu podcast hoy mismo.</p>
      </div>
    </section>
  );
};

export default CallToActionSection;

src/components/CallToActionSection/CallToActionSection.module.css

/* src/components/CallToActionSection/CallToActionSection.module.css */

.ctaSection {
  background-color: var(--primary-blue); /* Fondo azul */
  /* Imagen de fondo sutil con patrón geométrico */
  background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h100v100H0z" fill="none"/><path d="M0 50h50L25 75zM50 0h50L75 25z" fill="rgba(255,255,255,0.05)"/></svg>');
  background-size: 200px 200px; /* Tamaño del patrón */
  color: var(--bg-white); /* Texto blanco */
  text-align: center;
  padding: 120px 20px; /* Espaciado interno */
  margin-top: 100px; /* Espacio superior para separar de la sección anterior */
}

.ctaContent {
  max-width: 700px; /* Ancho máximo para el contenido del CTA */
  margin: 0 auto;
}

.ctaContent h2 {
  font-size: var(--font-size-h2);
  color: var(--bg-white);
  margin-bottom: 25px;
}

.ctaButton {
  background-color: var(--bg-white); /* Botón blanco sobre fondo azul */
  color: var(--primary-blue);
  border: none;
  border-radius: var(--border-radius-button);
  padding: 18px 36px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin-bottom: 20px;
}

.ctaButton:hover {
  background-color: #f0f0f0; /* Ligero cambio de color al pasar el ratón */
  transform: translateY(-2px); /* Pequeño efecto de elevación */
}

.ctaContent p {
  font-size: var(--font-size-p);
  color: rgba(255, 255, 255, 0.8); /* Texto más claro */
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ctaSection {
    padding: 80px 16px;
    margin-top: 80px;
  }

  .ctaContent h2 {
    font-size: 36px;
    margin-bottom: 20px;
  }

  .ctaButton {
    padding: 16px 30px;
    font-size: 18px;
  }

  .ctaContent p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .ctaSection {
    padding: 60px 16px;
    margin-top: 60px;
  }

  .ctaContent h2 {
    font-size: 30px;
  }

  .ctaButton {
    padding: 14px 24px;
    font-size: 16px;
  }
}

src/components/Footer/Footer.tsx

import React, { useState } from 'react';
import styles from './Footer.module.css';

const Footer: React.FC = () => {
  const [selectedLanguage, setSelectedLanguage] = useState('es'); // Default to Spanish

  const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedLanguage(event.target.value);
    console.log(`Language changed to: ${event.target.value}`);
    // En una aplicación real, aquí se actualizaría el contexto de i18n
  };

  return (
    <footer className={styles.footer}>
      <div className={styles.footerContent}>
        <div className={styles.footerLogo}>
          <img src="https://via.placeholder.com/150x40?text=StreamYard+Logo" alt="StreamYard Logo" />
          <p>La manera más sencilla de grabar y transmitir en vivo</p>
        </div>

        <div className={styles.footerColumn}>
          <h3>Producto</h3>
          <ul>
            <li><a href="#">Por qué StreamYard</a></li>
            <li><a href="#">Transmisión múltiple</a></li>
            <li><a href="#">Transmisiones vinculadas a las marcas</a></li>
            <li><a href="#">Grabaciones</a></li>
            <li><a href="#">Entrevistas a invitados</a></li>
            <li><a href="#">Participación de la audiencia</a></li>
            <li><a href="#">Podcasts</a></li>
            <li><a href="#">Seminarios web On-Air</a></li>
            <li><a href="#">Reutilización de videos</a></li>
            <li><a href="#">Estado</a></li>
            <li><a href="#">Seguridad</a></li>
          </ul>
        </div>

        <div className={styles.footerColumn}>
          <h3>Comunidad</h3>
          <ul>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Afiliados</a></li>
            <li><a href="#">Centro de ayuda</a></li>
            <li><a href="#">Novedades</a></li>
          </ul>
        </div>

        <div className={styles.footerColumn}>
          <h3>StreamYard para</h3>
          <ul>
            <li><a href="#">Comercial</a></li>
          </ul>
        </div>

        <div className={styles.footerColumn}>
          <h3>Únete a nosotros</h3>
          <ul className={styles.socialLinks}>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=Webinar" alt="Webinar" /> Webinar</a></li>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=FB" alt="Facebook" /> Facebook</a></li>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=X" alt="X (Twitter)" /> X (Twitter)</a></li>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=YT" alt="YouTube" /> YouTube</a></li>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=IG" alt="Instagram" /> Instagram</a></li>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=LI" alt="LinkedIn" /> LinkedIn</a></li>
          </ul>
        </div>
      </div>

      <div className={styles.footerBottom}>
        <div className={styles.legalLinks}>
          <a href="#">Términos de servicio</a>
          <a href="#">Términos de la Plataforma</a>
          <a href="#">Política de privacidad</a>
          <a href="#">Política de Cookies</a>
          <a href="#">Preferencias de cookies</a>
          <a href="#">Centro de ayuda</a>
        </div>
        <div className={styles.languageSelector}>
          <select value={selectedLanguage} onChange={handleLanguageChange}>
            <option value="en">English</option>
            <option value="es">Español</option>
            <option value="fr">Français</option>
            {/* Add more languages as needed */}
          </select>
        </div>
      </div>
    </footer>
  );
};

export default Footer;

src/components/Footer/Footer.module.css

/* src/components/Footer/Footer.module.css */

.footer {
  background-color: var(--bg-white);
  padding: 80px 20px 40px 20px; /* Padding superior, inferior y lateral */
  border-top: 1px solid var(--border-light); /* Línea divisoria sutil */
}

.footerContent {
  display: flex;
  justify-content: space-between;
  max-width: 1280px; /* Alineado con PageContainer */
  margin: 0 auto;
  gap: 40px; /* Espacio entre columnas */
  flex-wrap: wrap; /* Permite que las columnas se envuelvan */
}

.footerLogo {
  flex: 1 1 200px; /* Permite que el logo tenga un ancho flexible */
  margin-right: 40px; /* Espacio extra a la derecha del logo */
}

.footerLogo img {
  height: 40px;
  width: auto;
  margin-bottom: 15px;
}

.footerLogo p {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  line-height: 1.5;
}

.footerColumn {
  flex: 1 1 180px; /* Cada columna tiene un ancho flexible */
}

.footerColumn h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.footerColumn ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footerColumn ul li {
  margin-bottom: 10px;
}

.footerColumn ul li a {
  text-decoration: none;
  color: var(--text-medium);
  font-size: 15px;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px; /* Espacio para iconos de redes sociales */
}

.footerColumn ul li a:hover {
  color: var(--primary-blue);
}

.socialLinks img {
  width: 20px;
  height: 20px;
}

.footerBottom {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.legalLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.legalLinks a {
  text-decoration: none;
  color: var(--text-light);
  font-size: var(--font-size-sm);
  transition: color 0.3s ease;
}

.legalLinks a:hover {
  color: var(--primary-blue);
}

.languageSelector select {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-input);
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  color: var(--text-medium);
  background-color: var(--bg-white);
  cursor: pointer;
  -webkit-appearance: none; /* Oculta el estilo nativo del select */
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.6c-5%200-9.3%201.8-13.2%205.4A17.6%2017.6%200%200%200%200%2082.6c0%204.8%201.8%209.1%205.4%2013.2l128.8%20128.8c3.9%203.9%208.7%205.8%2013.6%205.8s9.7-1.9%2013.6-5.8l128.8-128.8c3.9-3.9%205.8-8.7%205.8-13.6%200-4.8-1.8-9.1-5.4-13.2z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  padding-right: 30px; /* Espacio para el icono de la flecha */
}

.languageSelector select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.2);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .footerContent {
    gap: 30px;
    justify-content: flex-start; /* Alinea al inicio en pantallas más pequeñas */
  }
  .footerLogo {
    flex-basis: 100%; /* El logo ocupa todo el ancho */
    margin-right: 0;
    text-align: center;
  }
  .footerColumn {
    flex-basis: calc(50% - 15px); /* Dos columnas por fila */
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 60px 16px 30px 16px;
  }
  .footerContent {
    flex-direction: column; /* Columnas apiladas */
    gap: 30px;
  }
  .footerLogo {
    margin-bottom: 20px;
  }
  .footerColumn {
    flex-basis: 100%;
    text-align: center;
  }
  .footerColumn ul li a {
    justify-content: center; /* Centra los enlaces con iconos */
  }
  .footerBottom {
    flex-direction: column; /* Apila los enlaces legales y el selector */
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
  }
  .legalLinks {
    flex-direction: column;
    gap: 10px;
  }
  .languageSelector {
    width: 100%; /* El selector de idioma ocupa todo el ancho */
    text-align: center;
  }
  .languageSelector select {
    width: 80%; /* Ancho del select para móvil */
    max-width: 200px;
  }
}