Smartclic Demo es la landing page de marketing para smartclic.mx, una agencia de desarrollo web en México. Es una SPA en React con hero parallax, grid animado de soluciones, mapa de presencia geográfica, carrusel de portafolio, sección de blog sticky y formulario de contacto — todo bilingüe (español/inglés) y desplegable en Vercel.
Qué hace
La landing se construye como una sola página con scroll y secciones distintas:
- Hero — Fondo parallax, headline rotatorio (
TextRotate), stickers de producto transparentes y CTAs de marca. - Solutions — Tarjetas de servicio estilo bento con imágenes de marca y efectos glow.
- Presence map — Mapa interactivo de las Américas (D3 Geo + TopoJSON) mostrando presencia de partners por país, con transiciones impulsadas por scroll GSAP.
- Portfolio — Showcase de proyectos con tarjetas uniformes, navegación en carrusel y glow extendido en la sección
#trabajos. - Blog — Tarjetas apiladas sticky que revelan contenido mientras el usuario hace scroll (basado en CSS, sin GSAP pin).
- Contact — Formulario de captura de leads con validación.
- Navbar — Navegación responsiva, toggle de idioma (ES/EN) y selector de paleta de seis temas con CSS custom properties.
Pulido adicional incluye scroll suave Lenis (escritorio), GSAP ScrollTrigger para animaciones de sección, visor 3D de producto con React Three Fiber y componentes estilo React Bits (BlurText, CardSwap, MagnetButton, ScrollFloat).
Stack tecnológico
| Capa | Elección |
|---|---|
| Framework | React 19 + TypeScript |
| Build | Vite 8 |
| Estilos | Tailwind CSS v4 + shadcn/ui |
| Animación | GSAP + ScrollTrigger, Framer Motion / Motion |
| Scroll | Lenis (smooth scroll) |
| 3D | React Three Fiber + Drei + Three.js |
| Mapas | D3 Geo + TopoJSON |
| i18n | LanguageProvider personalizado con traducciones ES/EN |
| Deploy | Vercel (vercel.json SPA rewrites) |
Proceso de desarrollo
Lanzamiento de landing completa
El primer commit entregó el sitio completo: hero con parallax, banners de marca, soluciones con imágenes, visor de modelo 3D, sección de blog, formulario de contacto y navbar responsiva con cambio de idioma ES/EN. Construido para smartclic.mx como showcase moderno de agencia.
Setup de deploy en Vercel
Se agregó vercel.json con configuración de build Vite y rewrites SPA, más una guía de deploy que cubre import desde GitHub, deploy por CLI y configuración de dominio personalizado para smartclic.mx.
Stickers del hero y refresh de logo
Se reemplazaron tarjetas placeholder de Unsplash con stickers PNG transparentes locales (drop-shadow, sin cajas contenedoras). Se agregaron assets de productos tech y se actualizó el logo de Smartclic.
Temas, blog y mapa de presencia
Pase mayor de features: seis temas de color intercambiables vía CSS variables y selector de paleta en navbar; apilado sticky del blog sin GSAP pin; fondos de marca en secciones solutions/bento; mapa de presencia en las Américas con segmentos de scroll GSAP; scrollbar en color primario. Se eliminó el efecto cursor blob y la sección Process para simplificar el flujo.
Fixes de hero móvil, presencia y portafolio
Corrección de centrado del hero móvil sin bloquear scroll; pin de sección de presencia y segmentos de scroll por país sin headers duplicados; alturas uniformes de tarjetas de portafolio, espaciado del carrusel y eliminación de scroll interno de sección.
Scroll móvil y consistencia visual
Scroll móvil más suave (presencia sticky, sin overflow horizontal, parallax desactivado en móvil); layouts refinados de hero, bento, blog y portafolio; fondos sólidos unificados y efectos glow en tarjetas de proyecto.
Hero en escritorio y fix de TextRotate
Copy del hero centrado bajo el navbar en escritorio; glow de sección de portafolio extendido para cubrir toda el área #trabajos; fix de clipping de TextRotate para que frases rotativas de dos palabras ya no pierdan letras en los bordes.
Decisiones de diseño
Motion con moderación en móvil. Parallax y efectos pesados de scroll corren solo en escritorio (useParallaxMotionEnabled); móvil recibe una experiencia más simple y amigable al scroll sin overflow horizontal.
Sistema de temas vía CSS variables. Seis paletas intercambian colores de marca globalmente mediante custom properties, así todo el sitio se re-tematiza desde el navbar sin recargar.
i18n sin librería pesada. Un LanguageProvider ligero + mapa de traducciones mantiene el bundle pequeño mientras soporta copy completo ES/EN en todas las secciones.
Listo para Vercel desde el día uno. vercel.json y pasos de deploy documentados significan que cada push a main puede auto-desplegarse a producción.
Construyendo Smartclic Demo