AvanzaCast/docs/hero_diagonal_implementacion.md

Implementación del Hero con Fondo Diagonal - AvanzaCast Landing Page

📋 Resumen

Se migró exitosamente el efecto de fondo diagonal del template Techwind index-saas.html al componente StreamingHeroSection de la landing page de AvanzaCast.

🎨 Cambios Realizados

1. Ajustes en el Efecto Diagonal del Hero

Archivo: packages/landing-page/src/components/StreamingHeroSection.tsx

Correcciones de z-index:

// ANTES:
before:z-1
z-2

// DESPUÉS:
before:z-0  // El fondo diagonal en el nivel más bajo
z-10        // El contenido principal por encima
z-20        // Elementos decorativos y preview en el nivel superior

Simplificación de la rotación:

// ANTES:
ltr:before:-rotate-12 rtl:before:rotate-12

// DESPUÉS:
before:-rotate-12  // Rotación consistente en todas direcciones

2. Clases Tailwind CSS del Efecto Diagonal

El efecto diagonal se logra con las siguientes clases en el <section>:

className="relative 
  before:content-[''] 
  before:absolute 
  xl:before:-top-[30%] 
  lg:before:-top-[50%] 
  sm:before:-top-[80%] 
  before:-top-[90%] 
  before:-start-80 
  before:end-0 
  before:w-[140rem] 
  before:h-[65rem] 
  before:-rotate-12 
  before:bg-indigo-600/5 
  dark:before:bg-indigo-600/10 
  before:z-0 
  items-center 
  overflow-hidden 
  pt-32 md:pt-44 pb-16"

3. Elementos Decorativos

Se mantuvieron los 4 elementos decorativos del diseño original de Techwind:

{/* Esquina inferior izquierda */}
<div className="bg-indigo-600 w-8 h-16 z-20 absolute start-2 lg:bottom-28 md:bottom-36 sm:bottom-40 bottom-16"></div>
<div className="bg-indigo-600/20 dark:bg-indigo-600/40 w-8 h-16 z-20 absolute start-12 lg:bottom-32 md:bottom-40 sm:bottom-44 bottom-20"></div>

{/* Esquina inferior derecha */}
<div className="bg-indigo-600/20 dark:bg-indigo-600/40 w-8 h-16 z-20 absolute end-12 xl:bottom-[420px] lg:bottom-[315px] md:bottom-[285px] sm:bottom-80 bottom-32"></div>
<div className="bg-indigo-600 w-8 h-16 z-20 absolute end-2 xl:bottom-[440px] lg:bottom-[335px] md:bottom-[305px] sm:bottom-[340px] bottom-36"></div>

🔧 Configuración Técnica

Tailwind CSS

• Dark Mode: Habilitado con class strategy
• Plugins:
  • @tailwindcss/forms
  • @tailwindcss/typography

Breakpoints Responsivos

El efecto diagonal se adapta a diferentes tamaños de pantalla:

• XL: -top-[30%]
• LG: -top-[50%]
• SM: -top-[80%]
• Mobile: -top-[90%]

🎯 Resultado Visual

Efecto Diagonal:

• Fondo rotado -12 grados
• Color: indigo-600 con opacidad 5% (light mode)
• Color Dark: indigo-600 con opacidad 10% (dark mode)
• Dimensiones: 140rem × 65rem
• Posicionamiento: Absoluto, superior derecha

Elementos Decorativos:

• 4 barras verticales (8px × 64px)
• Colores: indigo-600 (sólido) y indigo-600/20 (semitransparente)
• Ubicación: Esquinas inferiores (izquierda y derecha)
• Adaptables al dark mode

🚀 Servidor de Desarrollo

cd packages/landing-page
npm run dev -- --port 3001

URL Local: http://localhost:3001/

📝 Notas Importantes

1. Compatibilidad: El efecto funciona correctamente en light y dark mode
2. Responsive: Totalmente adaptable a todos los breakpoints
3. Performance: Usa pseudo-elemento ::before para evitar elementos DOM adicionales
4. Accesibilidad: El fondo es puramente decorativo y no afecta la legibilidad del contenido

🔗 Referencias

• Template Original: Techwind v2.2.0 - HTML/Landing/src/index-saas.html
• Componente Modificado: packages/landing-page/src/components/StreamingHeroSection.tsx
• Documentación Tailwind: https://tailwindcss.com/docs/content

✅ Checklist de Migración

• Efecto diagonal implementado
• z-index corregidos
• Elementos decorativos añadidos
• Dark mode compatible
• Responsive design verificado
• Servidor de desarrollo funcionando

---

Última actualización: 3 de noviembre de 2025 Estado: ✅ Completado y funcionando