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

Smartclic Demo is a React 19 agency landing for smartclic.mx, built with Vite 8, Tailwind CSS v4, GSAP ScrollTrigger, and deploy on Vercel.

Full landing (first commit)

• Shipped hero with parallax, rotating TextRotate headline, solutions bento, 3D product viewer (React Three Fiber), blog stack, contact form, and ES/EN navbar toggle.
• Built custom LanguageProvider with translation maps instead of a heavy i18n library.
• Structured the page as one scrollable document with anchor-linked sections.

Vercel deployment

• Added vercel.json with Vite build command and SPA rewrites per Vercel static deploy docs.
• Wrote deployment guide: GitHub import, CLI deploy, and custom domain steps for smartclic.mx.

Brand assets and themes

• Replaced Unsplash placeholders with local transparent PNG stickers (drop-shadow, no box containers).
• Added six switchable color themes via CSS custom properties and a navbar palette picker.
• Built Americas presence map with D3 Geo + TopoJSON and GSAP scroll-driven country segments.
• Implemented sticky blog card stacking with CSS (no GSAP pin) and primary-colored scrollbar.

Mobile scroll and layout fixes

• Disabled parallax on mobile via useParallaxMotionEnabled; prevented horizontal overflow.
• Fixed hero centering, presence section pin segments, and portfolio uniform card heights.
• Removed internal section scroll and cursor blob effect; dropped Process section to simplify flow.
• Used Lenis smooth scroll on desktop only.

Desktop polish

• Centered hero copy under the navbar on wide screens.
• Extended portfolio glow to the full #trabajos section.
• Fixed TextRotate clipping so two-word phrases no longer lose letters at container 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.