IntelliFace
A high-converting, bilingual marketing site that turns visitors into trials — built with Next.js 16, Framer Motion, and full English/Arabic RTL support.
The Challenge
Most AI products are marketed with buzzwords. IntelliFace needed a site that did the opposite — explain clearly what the product does, show how it works, and give HR managers enough confidence to start a free trial without speaking to a salesperson.
The secondary challenge: the product serves English-speaking markets in the US and Europe, and Arabic-speaking markets across the Middle East. Both markets needed a fully native experience — not a translation, but a redesign.
What We Built
Bilingual Architecture from the Ground Up
The site is bilingual-first, not bilingual-afterthought. Language choice persists across sessions. Every page, component, and interaction is direction-aware — when the language switches to Arabic, the entire layout mirrors: navigation moves right-to-left, text aligns right, animations reverse direction, and the scrollbar moves to the left.
Achieving true RTL parity required:
- Tailwind CSS with
dir="rtl"on the<html>element - Custom Framer Motion variants that respect text direction
- Icon components with direction-aware defaults (arrows flip, logos stay fixed)
- i18next with namespace-based translation files for every page section
The result: Arabic users see an interface that feels designed for them, not translated for them.
The Hero Section
The hero communicates the core value proposition in 3 seconds: face recognition, automatic attendance, real-time results. An animated industry carousel cycles through use cases — Manufacturing, Healthcare, Banking, Retail, Education — showing the product's breadth without overwhelming the headline.
An embedded demo animation shows the check-in flow: employee approaches, camera activates, face recognized, check-in confirmed. No video to load, no autoplay issues — a pure CSS/Framer Motion animation that runs on every device.
The Conversion Funnel
Every page element is oriented toward one action: start a free trial. The information hierarchy is:
- Hero — clear value proposition + primary CTA
- Social proof — 500+ companies, 2M+ records, specific client testimonials
- How it works — 3-step visual walkthrough (enroll → scan → track)
- Features — grouped by persona (HR manager, employee, finance team)
- Pricing — transparent, self-serve pricing with feature comparison
- FAQ — removes the last objections before signup
Trial signups that arrive via organic search have a 34% higher conversion rate than the previous site. Email-captured visitors have a 61% free trial completion rate.
Content Management
The site integrates with a lightweight CMS (SiteContent) for the blog, testimonials, and stats sections — allowing the IntelliFace marketing team to update content without engineering involvement.
Blog posts are rendered via MDX with reading-time estimates, category filtering, and social sharing. SEO metadata is auto-generated from frontmatter.
Performance
- Lighthouse score: 97 on desktop, 91 on mobile
- First Contentful Paint: 0.8s on a standard connection
- Largest Contentful Paint: 1.4s
- All images served via Next.js Image optimization with responsive
srcset - Web fonts loaded with
font-display: swapto eliminate render-blocking
Technical Stack
Next.js 16 App Router for server-rendered pages with partial prerendering — static where possible, dynamic where needed.
Tailwind CSS with a custom design token system — brand colors, radius, shadow, and typography all defined as CSS variables.
Framer Motion for page transitions, scroll-linked animations, and the hero demo sequence.
i18next with React bindings for client-side language switching with zero page reload.
Resend for email capture and trial invitation flows.
Vercel for deployment with edge caching and analytics.
Results
- Primary acquisition channel — 70% of all free trial signups originate from the website
- 97 Lighthouse score — top 5% of Next.js marketing sites
- 34% higher conversion rate vs. previous site on organic search traffic
- Equal engagement across English and Arabic visitors — language parity achieved
- 3 minutes average time on site — visitors are reading, not bouncing