Construyendo Smartclic Demo

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

Proceso de desarrollo

Smartclic Demo es una landing de agencia para smartclic.mx con React 19, Vite 8, Tailwind CSS v4, GSAP ScrollTrigger y deploy en Vercel.

Landing completa (primer commit)

• Hero con parallax, titular rotativo TextRotate, bento de soluciones, visor 3D (React Three Fiber), stack de blog, formulario de contacto y navbar ES/EN.
• LanguageProvider personalizado con mapas de traducción en lugar de librería i18n pesada.
• Página estructurada como un documento con scroll y secciones con anclas.

Deploy en Vercel

• vercel.json con comando de build Vite y rewrites SPA según docs de deploy estático de Vercel.
• Guía de deploy: import desde GitHub, CLI y pasos de dominio personalizado para smartclic.mx.

Assets de marca y temas

• Placeholders de Unsplash reemplazados por stickers PNG transparentes locales (drop-shadow, sin cajas contenedoras).
• Seis temas de color intercambiables vía CSS custom properties y selector de paleta en navbar.
• Mapa de presencia en las Américas con D3 Geo + TopoJSON y segmentos de scroll GSAP por país.
• Apilado sticky de tarjetas de blog con CSS (sin GSAP pin) y scrollbar en color primario.

Scroll móvil y fixes de layout

• Parallax desactivado en móvil vía useParallaxMotionEnabled; overflow horizontal prevenido.
• Centrado del hero, segmentos pin de presencia y alturas uniformes de tarjetas de portafolio corregidos.
• Scroll interno de sección y efecto cursor blob eliminados; sección Process removida para simplificar el flujo.
• Lenis smooth scroll solo en escritorio.

Pulido en escritorio

• Copy del hero centrado bajo el navbar en pantallas anchas.
• Glow de portafolio extendido a toda la sección #trabajos.
• Clipping de TextRotate corregido para que frases de dos palabras no pierdan letras en los bordes del contenedor.

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.