AI FileSense Website
Bilingual marketing site with Lighthouse 100 and lead capture
Demo Video
The Problem
Most indie software developers and small businesses ship a desktop app and then have nothing — no discoverability, no trust signals, no bilingual reach, no support system, and no conversion path. A download link with no context doesn't convert visitors into users.
The Solution
A 17-page bilingual marketing and support website that handles everything between 'I built an app' and 'I have a business' — SEO-optimized, conversion-focused, with a working contact/lead system and a complete support hub.
Key Features
- 17 pages across 7 sections — full marketing funnel from homepage to terms of service
- Bilingual from day one (EN + ES-MX) — locale-based routing with hreflang sitemap alternates
- Working contact/lead capture — Zod + React Hook Form + Server Actions + Resend + honeypot spam protection
- Complete support hub — Getting Started guide, 11-question FAQ, validated contact form
- Production SEO — dynamic metadata, auto-generated sitemap, Open Graph cards, canonical URLs
Results
Architecture Overview
AI FileSense Website is a Next.js 14 App Router marketing platform that doubles as a software distribution system. Server Components handle all pages by default for fast initial loads, with Client Components scoped to interactive elements (navbar, contact form, language switcher, dark mode toggle). The i18n system uses next-intl with locale-based URL routing (/en/features, /es/features), and every translation string lives in structured JSON files — no hardcoded English anywhere.
The contact pipeline is production-grade: React Hook Form manages client state, Zod schemas validate on both client and server, a Server Action processes the submission (no exposed API routes), a honeypot field silently drops bot submissions, and Resend delivers a professionally templated email via React Email.
Key Engineering Decisions
next-intl over next-i18next: Locale-based routing via [locale] dynamic segments gives clean URLs and proper hreflang support. The auto-generated sitemap produces alternates for every page in both languages with correct x-default fallbacks. Google indexes each locale separately and serves the right version to each audience.
Server Actions over API routes: The contact form uses Next.js Server Actions for form processing. No /api/contact endpoint exists — the form submits directly to a server function with Zod validation, reducing attack surface and keeping the codebase simpler.
CSS variables over theme config: The design system uses CSS custom properties (--color-primary, etc.) with Tailwind's class strategy for dark mode. A flash-prevention script in <head> reads localStorage before paint, eliminating the dark mode FOUC that plagues most theme implementations.
Component library over UI framework: Custom atomic components (Button with 4 variants, Card, Badge, Container with 4 sizes, Section with 4 spacings, PageHero with multiple background variants) matched to the specific design — no shadcn/ui or Radix dependency overhead for a marketing site.
Ready to discuss a similar solution?
Let's explore how AI automation can help your business.
Schedule a Consultation