Reflection media
A Saudi personal-branding agency site: full design and build, Arabic RTL, static export
A marketing site for a Saudi agency that builds personal brands for professionals and business owners. Designed and built end to end: a CSS-variable design system on Tailwind v4 with no off-the-shelf UI kit, full Arabic copy, a GSAP hero animation, and three working contact forms on top of a 100% static, serverless site.
Problem
An agency selling digital presence, and its own site is the first credibility test
The audience is professionals: doctors, lawyers, consultants, realtors, coaches. They have real expertise, but it is silent: no digital presence reflects it, so they lose opportunities to people with less experience and more visibility. The bind is doubled: the agency was in the same position, unable to sell presence without a front that proves it practices what it sells. So the site is not a services page; it is the sample.
Solution
A methodology that lets visitors self-select, and a page that names their profession
Instead of a flat services list, the content is built around a three-stage methodology (Foundation, Growth, Influence), each with a defined audience and six supporting points, so visitors place themselves in the right stage automatically. Then an If-you-are-a section addresses six professions by name with portrait imagery, so visitors literally see themselves on the page instead of a generic message. On top of that: a GSAP hero, a full CSS-variable design system on Tailwind v4, and a 100% static site that stays fast and costs almost nothing to run.
Impact
Process
Positioning before design
The first question here is a sales question, not a visual one: why does a professional hesitate to pay for presence? Because the market is full of people selling followers and vanity metrics. So the site opens with an explicit on-page position: we do not sell followers or vanity numbers. Everything after it backs that promise.
Building the methodology and copy
The Arabic copy is structured around three stages (Foundation, Growth, Influence), each with its own audience and six supporting points, followed by the If-you-are-a section for six professions.
Design system and motion
A full CSS-variable design system on Tailwind v4: color tokens, gradient scenes, and layers, with no shadcn, no MUI, no pre-built components. Typography is IBM Plex Sans Arabic for Arabic and Space Grotesk for Latin. The hero runs a GSAP animation: a mask reveal with three tilted stage cards, plus an interactive tabbed stages section with portraits and an animated arc.
Build and ship
Built with Next.js (App Router), React, and TypeScript as a full static export, deployed on Cloudflare. It includes a complete SEO layer (metadata, OG/Twitter cards, sitemap, robots), plus contact, FAQ, privacy, and terms pages, and a three-way form system that runs without a dedicated backend server.
Stack & Tools
Next.jsApp Router + static export
ReactUI layer
TypeScriptType Safety
Tailwind v4CSS-variable design system
GSAPHero animation
Framer MotionUI transitions
CloudflareHosting
Experience Decisions
Three design and code decisions that made the page sell instead of showcase.
Three stages instead of a services list
A services list forces visitors to assess their own needs, the thing they are worst at. A Foundation to Growth to Influence methodology hands them a ruler to measure where they stand, so they self-select in seconds and land on the right offer without feeling sold to.
"Time for the world to see you": six professions stacking on scroll
Instead of a grid visitors skim past, each profession is a full card that pins to the top of the screen; the next one slides over it, the previous card shrinks slightly and its coloured edge stays visible above. Visitors watch the professions stack up one after another, and scrolling back fans them out again. Each profession has its own colour (gold for doctors, bronze for lawyers, emerald for real estate…) so every card stays distinct even folded into the stack. For visitors who prefer reduced motion, the shrinking stops and the cards stay full size.
A smooth experience on every device, not just the designer's
A site isn't tested on one fast screen and shipped. I tested it on mid-range devices, traced every stutter in scrolling or motion back to its cause in the code, and removed what weighed the browser down without changing anything visually. Visitors never see these details, but they feel them: a page that moves smoothly signals an agency that knows its craft.
Results
“An agency that sells digital presence needs a professional site of its own, one that presents it the way it deserves.”
Like this project?
I'd be happy to explain any design or technical decision in detail.