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:

// 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:

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:

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):

<div className="mover">
  <img src="icon.svg" alt="Floating icon" />
</div>

.background-effect

Círculos animados de fondo (para hero sections):

<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):

<div className="image-wrap overflow-hidden">
  <img src="business-photo.jpg" alt="Business" />
</div>

Utilidades

.scrollbar-hide

Oculta scrollbars sin afectar funcionalidad:

<div className="overflow-x-auto scrollbar-hide">
  {/* Contenido scrollable */}
</div>

.carousel-smooth

Scroll suave para carruseles (ya usado en TestimonialsSection):

<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