دراسة حالة

Yaqeen Legal Services

موقع هبوط حديث وتفاعلي لمكتب استشارات قانونية مع دعم كامل للعربية

تصميم وتطوير موقع هبوط متكامل لمكتب استشارات قانونية يوفر عرضاً احترافياً للخدمات القانونية المتنوعة، مع نموذج حجز تفاعلي وتجربة مستخدم سلسة تماماً. يدعم الموقع اللغة العربية بشكل كامل مع تصميم RTL متوافق.

الدورالتصميم + التطوير الكاملالمدةأسبوعينالسنة2026الموقع الحي

المشكلة

مكتب قانوني بدون حضور رقمي قوي

مكتب Yaqeen للاستشارات القانونية كان يعتمد على الوسائل التقليدية فقط للتواصل مع العملاء المحتملين. غياب موقع ويب احترافي أدى إلى فقدان عملاء يبحثون عن الخدمات عبر الإنترنت، وعدم القدرة على عرض 8 تخصصات قانونية بطريقة منظمة، وعملية حجز يدوية تستغرق وقتاً. التحدي كان بناء وجود رقمي يعكس جودة المكتب ويسهّل التواصل والحجز.

الحل

موقع هبوط حديث مع نموذج حجز متكامل

بنيت موقع هبوط احترافي يجمع بين التصميم العصري والوظائف العملية: واجهة مستجيبة بالكامل، عرض منظم للخدمات الثماني، نموذج حجز تفاعلي متصل بـ EmailJS، حركات احترافية في الأقسام الرئيسية، دعم كامل للعربية مع RTL، وقسم FAQ يجيب على الاستفسارات الشائعة. كل ذلك باستخدام React و TypeScript و Tailwind CSS لكود عالي الجودة وسهل الصيانة.

الأثر بالأرقام

< 2sسرعة التحميلعلى اتصالات عادية

100%التوافق الكاملعلى جميع الأجهزة

8الخدمات المعروضةتخصص قانوني

RTLدعم اللغةتصميم عربي كامل

مراحل العمل

الاكتشاف والتحليل

بدأت بفهم خدمات مكتب Yaqeen وقيمته للعملاء. حددت المحاور الرئيسية: الاستشارات القانونية، التمثيل القضائي، صياغة العقود، والخدمات الإضافية. ودرست احتياجات العملاء المحتملين في السوق السعودي.

التصميم والبنية المعمارية

بنيت هيكلاً منطقياً: Hero للتأثير الفوري، عرض الخدمات الثماني، إحصائيات لبناء الثقة، FAQ، ثم نموذج الحجز. اعتمدت لوحة الألوان الأزرق-تيل (#407C8C) مع دعم RTL مدمج من الأساس.

التطوير والتنفيذ

بنيت الموقع باستخدام React 18 مع TypeScript Strict Mode. استخدمت Vite 7 للبناء وTailwind CSS 4 للتصميم. نفّذت جزءاً كبيراً من الكود عبر Claude Code مع مراجعة مستمرة وتعديلات مباشرة لضمان الدقة. Motion استُخدمت بشكل محدود في الأقسام التفاعلية فقط.

الإطلاق والنتائج

تم إطلاق الموقع بنجاح مع أداء عالٍ وتصميم احترافي. الموقع يعمل بسلاسة على جميع الأجهزة مع رحلة مستخدم واضحة من الاستكشاف إلى الحجز. الكود منظم وقابل للتطوير بسهولة.

قرارات مفصلية

التحدي

هل نستخدم مكتبة حركات ثقيلة أم CSS عادي؟

القرار

Motion بشكل محدود في الأقسام التفاعلية فقط

لماذا؟

Motion توفر حركات أنعم وتحكماً أفضل، لكن استخدامها الشامل يضر بالأداء. قصرناها على Services وBooking وFAQ — والأقسام الثابتة بدون Motion تبقى سريعة.

التحدي

هل ندعم لغات متعددة أم نركز على العربية فقط؟

القرار

تركيز كامل على جودة العربية للسوق السعودي

لماذا؟

السوق الرئيسي عملاء سعوديون. التركيز على لغة واحدة يعطي جودة أعلى وتجربة أفضل بدل نسختين متوسطتي الجودة. الإنجليزية يمكن إضافتها لاحقاً عند الحاجة.

التحدي

كم عدد أسئلة الـ FAQ؟

القرار

6 أسئلة فقط — الأكثر شيوعاً والأكثر قيمة

لماذا؟

FAQ طويلة جداً تربك المستخدم. الـ 6 أسئلة تغطي التكلفة، الحجز، الاستشارات الأونلاين، التخصصات، السرية، والفروع. ما يتبقى يُجاب عليه بالتواصل المباشر — وهو ما يفضله عميل الخدمات القانونية.