0%
Aymen
العودة إلى الأعمال
ويبمُنجز2026

Exolimits

موقع وكالة — موقع تسويقي بحركات بصرية، مُدار بالكامل عبر CMS بلا واجهة حتى ينشر الفريق المحتوى دون إعادة نشر.

دَوري
مطور واجهات أمامية
الفترة
فبراير 2026 — يونيو 2026
الحالة
مُنجز
Exolimits
نظرة عامة

موقع تسويقي لوكالة Exolimits، بُني بحيث تحمل الحركةُ هويةَ العلامة بينما يعيش المحتوى كله خارج الكود: كل عنوان وقسم ودراسة حالة فيه عبارة عن مستند في Sanity، يحرّره فريق الوكالة وينشره من نظام إدارة المحتوى مباشرة، فيظهر التغيير على الموقع دون عملية بناء أو تدخّل من مطوّر.

بُنيت الواجهة الأمامية بـ Next.js 16 وReact 19، وتقرأ المحتوى من Sanity مباشرة دون طبقة خلفية وسيطة، فيما تتولى GSAP الهوية البصرية: أقسام تنكشف تباعاً مع تمرير الزائر نحو الأسفل، وأشرطة marquee تتحرك باستمرار.

التحدّي

المشكلة المطلوب حلّها

كان جوهر المشكلة أن للصفحة مالكَين: المحرّرون يتحكمون في المحتوى كاملاً، بينما على طبقة الحركة أن تُخرِج ما ينشرونه أياً كان. في المواقع التسويقية التقليدية تُكتب النصوص داخل الكود، فيتحول كل تعديل إلى مهمة لمطوّر تتبعها إعادة نشر؛ أما هنا فكانت الوكالة بحاجة إلى نشر دراسات الحالة والنصوص بنفسها، في حين تقوم هوية الموقع على عمل مكثّف بـ GSAP — انكشافات مرتبطة بالتمرير وأشرطة متحركة يجب أن تعمل فوق محتوى لا يُعرف طوله ولا شكله مسبقاً.

الحل

كيف بُني

تقرأ الواجهة الأمامية محتوى Sanity مباشرة: المحتوى مُنمذَج كمستندات في نظام إدارة المحتوى، ومكوّنات React 19 تعرض كل نوع مستند كقسم من الصفحة، فلا توجد خلفية برمجية خاصة تُبنى أو تُصان بين النظام والشاشة. ينشر المحرّرون في Sanity فيتحدّث الموقع دون أي عملية نشر برمجية.

أما طبقة الحركة فمبنية بـ GSAP: الانكشافات مربوطة بموضع التمرير فتظهر الأقسام تباعاً مع وصول الزائر إليها، والأشرطة المتحركة تدور دون توقف. والحركة ملحقة بمكوّنات الأقسام لا بالمحتوى نفسه، وبذلك تنفصل الملكيتان — يغيّر المحرّرون الكلمات ودراسات الحالة، وتقرر المكوّنات كيف تتحرك.

أبرز الميزات

ماذا يفعل

📝

النشر من نظام المحتوى

كل النصوص ودراسات الحالة محفوظة في Sanity؛ يحرّر الفريق وينشر من النظام مباشرة فتظهر التغييرات على الموقع دون عملية بناء أو تدخّل مطوّر.

🎬

انكشاف مرتبط بالتمرير

خطوط زمنية في GSAP مربوطة بموضع التمرير تُظهر كل قسم عند وصول الزائر إليه، وهي أساس الطابع الحركي للموقع.

🔁

أشرطة marquee متواصلة

أشرطة marquee تدور باستمرار عبر GSAP وتُبقي أجزاء من الصفحة في حركة دائمة بين المشاهد المرتبطة بالتمرير.

⚡

قراءة مباشرة من Sanity

الواجهة المبنية بـ Next.js تستعلم من Sanity مباشرة، فلا حاجة إلى خادم API وسيط يُبنى ويُنشر ويُوفَّق باستمرار مع نموذج المحتوى.

التقنيات المستخدمة

بُني باستخدام

الواجهة الأمامية

Next.js

يعرض Next.js 16 الصفحات على الخادم انطلاقاً من بيانات Sanity، فيصل الموقع — وغايته أن يُعثر عليه ويُقرأ — على هيئة HTML جاهز لمحركات البحث لا كهيكل يُرسم في المتصفح.

React.js

نموذج المكوّنات في React 19 يقابل كل نوع مستند في Sanity بمكوّن قسم واحد، فيبقى نموذج المحتوى في النظام وبنية الصفحة متطابقين.

GSAP

توفر GSAP خطوطاً زمنية مربوطة بالتمرير تعتمد عليها الانكشافات والأشرطة المتحركة، وهو تسلسل حركي يتجاوز ما تستطيع انتقالات CSS التعبير عنه.

TypeScript

يفرض TypeScript أنواعاً على نتائج استعلامات Sanity، فيظهر أي تغيير في نموذج المحتوى كخطأ ترجمة في الواجهة بدل صفحة تتعطل بصمت.