AvanzaCast/packages/landing-page/TECHWIND_MIGRATION.md

# Migración de Estilos y Comportamientos de Techwind

## Archivos Creados

### 1. `src/styles/techwind-animations.css`
Archivo CSS global con animaciones y helpers migrados desde Techwind SCSS.

**Contenido incluido:**
- **Tipografía**: `::selection`, defaults de `<p>` y headings
- **Animaciones**:
  - `mover`: Animación de flotación vertical (1.5s infinite alternate)
  - `animate`: Círculos animados que suben y rotan (para efectos de fondo hero)
  - `ppb_kenburns`: Efecto Ken Burns para imágenes (zoom + pan)
  - `sk-bounce`: Animación de rebote para spinner/preloader
  - `scroll`: Scroll infinito horizontal para sliders de logos
- **Utilidades**:
  - `.scrollbar-hide`: Oculta scrollbars nativas
  - `.carousel-smooth`: Scroll suave para carruseles
  - `.background-effect .circles li`: Círculos animados de fondo
  - `.image-wrap`: Wrapper para efecto Ken Burns
  - `.spinner`: Spinner de carga con double-bounce
- **Navegación de testimonios**:
  - `.tns-nav`: Estilos para dots de paginación
  - `.slider .slide-track`: Track de slider infinito

**Uso:**
```tsx
// Ya importado globalmente en main.tsx
import './styles/techwind-animations.css'
```

### 2. `src/components/BackToTop.tsx`
Botón "Volver arriba" que aparece al hacer scroll > 500px.

**Características:**
- Aparece/desaparece automáticamente según scroll
- Scroll suave al hacer clic
- Diseño responsive con Tailwind
- Icono SVG de flecha arriba

**Uso:**
```tsx
import BackToTop from '../components/BackToTop'

function Layout() {
  return (
    <>
      {/* Tu contenido */}
      <BackToTop />
    </>
  )
}
```

### 3. `src/hooks/useScrollSticky.ts`
Hook para detectar scroll y hacer navbar sticky.

**Características:**
- Retorna `true` cuando scroll > 50px
- Event listener optimizado con `passive: true`
- Limpieza automática de listeners

**Uso:**
```tsx
import { useScrollSticky } from '../hooks/useScrollSticky'

function Navbar() {
  const isSticky = useScrollSticky()
  
  return (
    <nav className={`${isSticky ? 'nav-sticky bg-white shadow' : 'bg-transparent'}`}>
      {/* Contenido del navbar */}
    </nav>
  )
}
```

## Clases CSS Disponibles

### Animaciones

#### `.mover`
Flotación vertical suave (usar en iconos, ilustraciones):
```tsx
<div className="mover">
  <img src="icon.svg" alt="Floating icon" />
</div>
```

#### `.background-effect`
Círculos animados de fondo (para hero sections):
```tsx
<section className="relative background-effect">
  <ul className="circles">
    {Array.from({ length: 10 }).map((_, i) => (
      <li key={i}></li>
    ))}
  </ul>
  {/* Contenido hero */}
</section>
```

#### `.image-wrap`
Efecto Ken Burns en imágenes (zoom + pan lento):
```tsx
<div className="image-wrap overflow-hidden">
  <img src="business-photo.jpg" alt="Business" />
</div>
```

### Utilidades

#### `.scrollbar-hide`
Oculta scrollbars sin afectar funcionalidad:
```tsx
<div className="overflow-x-auto scrollbar-hide">
  {/* Contenido scrollable */}
</div>
```

#### `.carousel-smooth`
Scroll suave para carruseles (ya usado en TestimonialsSection):
```tsx
<div className="flex overflow-x-auto carousel-smooth scrollbar-hide">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>
```

## Estilos SCSS Migrados (Referencia Original)

Los siguientes archivos de Techwind fueron analizados y migrados:

1. **`custom/_general.scss`**: Tipografía, selección
2. **`custom/_fonts.scss`**: Imports de Google Fonts (Nunito, etc.)
3. **`custom/pages/_helper.scss`**: Animaciones (mover, kenburns, preloader, cookies)
4. **`custom/pages/_hero.scss`**: Background effects, círculos animados
5. **`custom/plugins/_testi.scss`**: Navegación de testimonios, slider infinito
6. **`custom/plugins/_swiper-slider.scss`**: Swiper pagination
7. **`custom/structure/_topnav.scss`**: Navbar sticky, menú responsive
8. **`assets/js/app.js`**: Back to top, scroll sticky, dark mode toggle

## Funcionalidades NO Migradas (Manuales)

Las siguientes funcionalidades del `app.js` de Techwind requieren implementación manual según necesidad:

- **Toggle Menu**: Menú hamburguesa (implementar según diseño del navbar)
- **Active Menu**: Resaltado de item activo según URL (usar React Router `useLocation`)
- **Dark Mode Toggle**: Switch de modo oscuro (implementar con contexto/estado global)
- **RTL Mode**: Cambio LTR/RTL (agregar si se necesita soporte multiidioma RTL)
- **Contact Form**: Validación de formulario (implementar con React Hook Form o similar)
- **Preloader**: Pantalla de carga inicial (agregar si se desea)

## Próximos Pasos Recomendados

1. **Aplicar `.mover` a iconos/ilustraciones** en Features y Hero sections
2. **Agregar círculos animados** de fondo en StreamingHeroSection
3. **Implementar navbar sticky** con `useScrollSticky` en ModernSaasHeader
4. **Aplicar efecto Ken Burns** a imágenes hero si se usan
5. **Verificar paginación de testimonios** con estilos `.tns-nav` si se cambia diseño

## Notas

- Los errores de linter en `techwind-animations.css` sobre `@apply` son normales; Vite + Tailwind los procesan correctamente
- El archivo CSS se carga globalmente en `main.tsx`, no requiere importarlo en componentes
- Los componentes BackToTop y useScrollSticky son drop-in replacements listos para usar