Building Smartclic Demo

Smartclic Demo is the marketing landing page for smartclic.mx, a web development agency in Mexico. It is a single-page React app with parallax hero, animated solutions grid, geographic presence map, portfolio carousel, sticky blog section, and a contact form — all bilingual (Spanish/English) and deployable to Vercel.

What it does

The landing is built as one scrollable page with distinct sections:

• Hero — Parallax background, rotating headline text (TextRotate), transparent product stickers, and brand CTAs.
• Solutions — Bento-style service cards with brand imagery and glow effects.
• Presence map — Interactive Americas map (D3 Geo + TopoJSON) showing partner presence by country, with GSAP scroll-driven transitions.
• Portfolio — Project showcase with uniform cards, carousel navigation, and extended glow on the #trabajos section.
• Blog — Sticky stacked cards that reveal content as the user scrolls (CSS-based, no GSAP pin).
• Contact — Lead capture form with validation.
• Navbar — Responsive navigation, language toggle (ES/EN), and a six-theme color palette selector using CSS custom properties.

Additional polish includes Lenis smooth scrolling (desktop), GSAP ScrollTrigger for section animations, a React Three Fiber 3D product viewer, and React Bits–style components (BlurText, CardSwap, MagnetButton, ScrollFloat).

Tech stack

Development process

Full landing launch

The first commit delivered the complete site: hero with parallax, brand banners, solutions with images, 3D model viewer, blog section, contact form, and a responsive navbar with ES/EN language switching. Built for smartclic.mx as a modern agency showcase.

Vercel deployment setup

Added vercel.json with Vite build settings and SPA rewrites, plus a deployment guide covering GitHub import, CLI deploy, and custom domain configuration for smartclic.mx.

Hero stickers and logo refresh

Replaced Unsplash placeholder cards with local transparent PNG stickers (drop-shadow, no container boxes). Added tech product assets and updated the Smartclic logo.

Themes, blog, and presence map

Major feature pass: six switchable color themes via CSS variables and a navbar palette selector; sticky blog stacking without GSAP pin; brand backgrounds on solutions/bento sections; Americas presence map with GSAP scroll segments; primary-colored scrollbar. Removed the cursor blob effect and the Process section to simplify the flow.

Mobile hero, presence, and portfolio fixes

Fixed mobile hero centering without blocking scroll; presence section pin and per-country scroll segments without duplicate headers; portfolio uniform card heights, carousel spacing, and removal of internal section scroll.

Mobile scroll and visual consistency

Smoothed mobile scrolling (sticky presence, no horizontal overflow, parallax disabled on mobile); refined hero, bento, blog, and portfolio layouts; unified solid backgrounds and glow effects across project cards.

Desktop hero and TextRotate fix

Centered hero copy under the navbar on desktop; extended portfolio section glow to cover the full #trabajos area; fixed TextRotate clipping so two-word rotating phrases no longer lose letters at the edges.

Design decisions

Motion with restraint on mobile. Parallax and heavy scroll effects run on desktop only (useParallaxMotionEnabled); mobile gets a simpler, scroll-friendly experience without horizontal overflow.

Theme system via CSS variables. Six palettes swap brand colors globally through custom properties, so the entire site re-themes from the navbar without reloading.

i18n without a heavy library. A lightweight LanguageProvider + translation map keeps bundle size down while supporting full ES/EN copy across all sections.

Vercel-ready from day one. vercel.json and documented deploy steps mean every push to main can auto-deploy to production.