موقعٌ لشركة محاماة، بثقلِ مكتبٍ حقيقي
زيارة الموقع الحيالرصانة لا تعني الجمود
مواقع شركات المحاماة في المنطقة تتشابه: قالبٌ جاهز، صورة مبنى زجاجي، ونصٌّ عن «الثقة والاحترافية». العميلة أرادت العكس — حضوراً بصرياً يوازي مكانة المكتب، دون أن ينزلق إلى الاستعراض الذي يُفقد المهنة وقارها.
فكانت الفرضية: مجسّم برونزي لسيدة العدالة يخرج من العتمة مع تمرير الصفحة، كأنّ الزائر يدخل قاعةً ويقترب من التمثال. حركة واحدة مدروسة تحمل الافتتاحية، وما تبقّى هادئ ومقروء — الفخامة في الانضباط لا في كثرة المؤثرات. والقيد الأصعب لم يكن جمالياً: العربية هي اللغة الافتراضية بكامل اتجاهها، والإنجليزية نظيرٌ كامل لها لا ترجمة ملحقة.
حجم المجسّم قبل التحسين وبعده
18 مليون رأس هندسي — يستحيل نشره على الويب.
ضغط meshopt دون أي تبسيط — التفاصيل كاملة كما هي.
تبسيط طفيف يُدرَك على شاشة صغيرة — والفارق في السرعة هائل.
الجهاز يختار نسخته عند التحميل. الزائر على الجوال ينزّل 3.1MB بدل 191MB — أقلّ من 2% من الأصل، بمشهدٍ يبدو للعين هو ذاته.
أربع مشكلات استهلكت أغلب الوقت
مشهدٌ سينمائي لا يُثقل الجهاز
الكاميرا تتحرك عبر مسار مفاتيح مضبوط على تمرير بطول ست شاشات: تقترب من الوجه في العتمة، ثم تتراجع بينما ترتفع الإضاءة الذهبية تدريجياً حتى ينكشف التمثال كاملاً — بإطارٍ يُرسَم عند الحاجة فقط لا في حلقة دائمة. والخامة أُعيدت معايرتها في الكود لا في برنامج النمذجة، حتى طابقت لون التمثال البرونزي الحقيقي في مكتب الشركة.
نسختان من الملف حسب الجهاز، وحدّ أقصى لكثافة البكسل على الجوال، وتحميل مؤجّل للمشهد كلّه.
عربيةٌ أصلية، لا واجهة مقلوبة
الاتجاه يتبدّل على مستوى المستند، والتخطيط مبنيّ على الخصائص المنطقية بدل يمين/يسار الثابتة. الحركات الأفقية تعكس اتجاهها تلقائياً، وإلا لانزلق النص إلى الجهة الخاطئة في العربية. خطّان مختلفان لكل لغة، و250 مفتاح ترجمة لكل منهما، وروابط hreflang تُعرِّف جوجل بأن النسختين نظيرتان لا نسخة مكرّرة.
تفصيلة كلّفت وقتاً: أطراف الحروف العربية النازلة كانت تُقصّ داخل أقنعة الحركة — عولجت بمساحة سفلية مخصّصة.
النموذج يقول «نجح»، والجدول فارغ
أخطر عطل في المشروع كان صامتاً. طلبات الاستشارة تصل من الموقع وتظهر للزائر علامة نجاح — ولا يصل شيء إلى جدول الشركة. أي أن عملاء حقيقيين كانوا يضيعون دون أن يعلم أحد. السبب: حقل مخفي لاصطياد الروبوتات اسمه company كان متصفّح الزائر يملؤه تلقائياً بالإكمال الذاتي، فيُصنَّف الطلب الحقيقي كروبوت ويُهمَل بصمت.
أُعيد تسمية الحقل باسم لا يعرفه الإكمال الذاتي، وحُذف مسار «النجاح الوهمي»: لا رسالة نجاح إلا بعد تأكيد الجدول للكتابة فعلياً.
ثبات الصورة على الجوال
عند التمرير على الهاتف يختفي شريط عنوان المتصفح، فيتغيّر ارتفاع النافذة، فتُعاد معايرة الكاميرا — وتظهر «قفزة» في المجسّم. عُولجت بتثبيت اللوحة على أكبر ارتفاع ممكن، وتجاهل أي تغيّر في الارتفاع وحده. وعلى مستوى الصفحة: الصوت المحيط لا يُحمَّل إلا عند الطلب، والصور بأبعاد محجوزة مسبقاً.
إزاحة التخطيط التراكمية عادت إلى الاستقرار بعد التراجع عن تحميل خطٍّ غير متزامن كان يُعيد تدفّق النص دفعة واحدة.
الأدوات
الأساس
- Next.js 16 · App Router
- React 19
- Tailwind CSS v4
- JavaScript لا TypeScript
الحركة والثلاثي الأبعاد
- GSAP ScrollTrigger · SplitText
- Three.js + React Three Fiber
- drei + postprocessing
- Lenis — تمرير ناعم
المحتوى والتشغيل
- next-intl — ar · en
- Google Apps Script — استقبال الطلبات
- Vercel — نشر وتحليلات
- Schema.org LegalService
ما سُلِّم فعلياً
- صفحة رئيسية بمشهد ثلاثي الأبعاد
- ميثاق الشركة وقصّة الاسم
- 20 عضو فريق بعرض سينمائي
- 19 مجال ممارسة
- مدوّنة «بصائر» وقسم المستجدّات
- 26 شعار عميل بشريط متحرك
- الشروط والأحكام وسياسة الخصوصية
- نموذج استشارة بحدٍّ للإرسال المتكرر
- خريطة مدمجة وتواصل واتساب مباشر
- شاشة تحميل ترسم شعار الشركة
- خيارات السداد بالتقسيط في التذييل
- خريطة موقع وبيانات منظّمة للبحث
من داخل الموقع
الدرس الذي بقي
المشهد ثلاثي الأبعاد استغرق وقتاً طويلاً، لكن أكثر ساعة كانت قيمةً في هذا المشروع صُرفت على عطلٍ لا يراه أحد: نموذجٌ يبتسم للزائر بينما تضيع رسالته. الواجهة الجميلة تجذب الزائر، وموثوقية ما خلفها هي ما يحوّله إلى عميل.
لا رسالة نجاح إلا بعد تأكيدٍ حقيقي بالوصول.
بدك تجربة مشابهة لمشروعك؟
خلينا نبني موقعاً يوقّف زوارك مثل ما وقّفك هذا المشروع — ويوصل كل طلب فعلياً.
احكيلي عن مشروعك