136 lines
4.0 KiB
Markdown
136 lines
4.0 KiB
Markdown
# 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:
|
||
```tsx
|
||
// 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:
|
||
```tsx
|
||
// 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>`:
|
||
|
||
```tsx
|
||
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:
|
||
|
||
```tsx
|
||
{/* 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
|
||
|
||
```bash
|
||
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
|
||
|
||
- [x] Efecto diagonal implementado
|
||
- [x] z-index corregidos
|
||
- [x] Elementos decorativos añadidos
|
||
- [x] Dark mode compatible
|
||
- [x] Responsive design verificado
|
||
- [x] Servidor de desarrollo funcionando
|
||
|
||
---
|
||
|
||
**Última actualización**: 3 de noviembre de 2025
|
||
**Estado**: ✅ Completado y funcionando
|