Project description
Public site for Architex, a digital marketing agency. It includes a home page with hero, services catalog, portfolio, testimonials, and contact form, plus per-service detail pages with overview, features, process, FAQ, and CTA sections. It implements Spanish and English internationalization with next-intl, content loaded from JSON data modules, Motion animations, direct WhatsApp contact, and Vercel Analytics / Speed Insights metrics. SEO is reinforced with per-locale metadata, structured data (JSON-LD), and hero-image preload.
Key features
Next.js 16 App Router with localized `[locale]` routes and JSON message catalogs for English and Spanish, managed via next-intl
Home with hero, services grid, portfolio with gallery modal, testimonials with modal, and contact form integrated with WhatsApp
Per-service detail pages (`/services/[serviceId]`) with hero, overview, features, process, stats, FAQ, and CTA
Internal API routes that expose the services catalog and portfolio from typed data modules
Entry animations and micro-interactions with Motion plus a centralized provider to keep the client bundle small
SEO with per-locale metadata, structured data (StructuredData), and priority preload of the hero image
Tailwind CSS 4 UI with Lucide icons; accessible mobile menu, sticky navigation, and language switcher
Vercel Analytics and Speed Insights loaded in a deferred way to avoid hurting LCP
Challenges and solutions
Internationalization with rich content
Coordinating next-intl dictionaries with JSON data modules (services, details, portfolio, testimonials) so every locale shares structure without duplicating layout or breaking per-locale URL SEO.
Performance on a visual landing
An agency needs a flashy site without sacrificing Core Web Vitals: analytics scripts are deferred, the hero image is preloaded, Motion animations are scoped, and unnecessary JS is kept out of server components.
Scalable per-service detail pages
Each service has reusable sections (overview, features, process, FAQ, CTA) fed from data modules, so adding new service lines does not require touching the UI.
Screenshots
Technologies used
Other projects
Leberp — ERP ecosystem
B2B cloud ERP (sales, warehouse, logistics, treasury, purchasing, analytics, and POS): React SPA, Electron desktop client, and .NET backend on Azure.
Beauty website — lash extensions
Static marketing site for a beauty business: services, pricing, contact, map, and bilingual content (English / Spanish).