Case Study

Yaqeen Legal Services

A modern interactive landing page for a legal consulting firm with full Arabic support

Design and development of a complete landing page for a legal consulting firm — showcasing eight legal services with a professional layout, an interactive booking form, and a smooth user experience. Full Arabic support with a native RTL design.

RoleDesign + Full DevelopmentDurationTwo weeksYear2026Live Site

Problem

A law firm with no strong digital presence

Yaqeen Legal relied solely on traditional channels to reach potential clients. Without a professional website, the firm was losing clients who searched online, had no organized way to present its 8 legal specializations, and relied on a time-consuming manual booking process. The challenge was building a digital presence that reflects the firm's quality and simplifies client communication.

Solution

A modern landing page with an integrated booking form

I built a professional landing page combining modern design with practical functionality: a fully responsive interface, organized display of eight services, an interactive booking form connected via EmailJS, professional animations in key sections, full Arabic RTL support, and a FAQ section. All built with React, TypeScript, and Tailwind CSS for clean, maintainable code.

Impact

< 2sLoad timeon standard connections

100%Full compatibilityacross all devices

8Services showcasedlegal specializations

RTLLanguage supportfull Arabic design

Process

Discovery & Analysis

I started by understanding Yaqeen's services and value to clients. I identified the key pillars: legal consulting, litigation representation, contract drafting, and additional services — along with the needs of potential clients in the Saudi market.

Design & Architecture

I built a logical structure: Hero for immediate impact, eight services display, trust-building stats, FAQ, then the booking form. I used the firm's brand palette (blue-teal #407C8C) with RTL support built in from the ground up.

Development & Build

Built with React 18 and TypeScript Strict Mode, Vite 7 for bundling, and Tailwind CSS 4 for styling. A large portion of the code was implemented via Claude Code with continuous review and direct adjustments. Motion was used selectively in interactive sections only.

Launch & Results

Launched successfully with high performance and a professional design. The site runs smoothly across all devices with a clear user journey from discovery to booking. The codebase is organized and easy to extend.

Key Decisions

Challenge

Heavy animation library or plain CSS?

Decision

Motion used selectively in interactive sections only

Why?

Motion gives smoother animations and better control, but overusing it hurts performance. We limited it to Services, Booking, and FAQ sections — static sections stay fast without it.

Challenge

Multilingual support or Arabic only?

Decision

Full focus on Arabic quality for the Saudi market

Why?

The primary audience is Saudi clients. Focusing on one language yields higher quality and a better experience than two average-quality versions. English can be added later if needed.

Challenge

How many FAQ questions?

Decision

Only 6 questions — the most common and most valuable

Why?

A long FAQ overwhelms users. The 6 questions cover cost, booking, online consultations, specializations, confidentiality, and branches. Everything else is answered through direct contact — which legal clients prefer anyway.