Besterra Group

الموقع الرئيسي لمجموعة Besterra، صمّمتُه وبنيتُه من الصفر: صفحة هبوط ثابتة بالكامل بثلاث لغات لمنظومة أعمال من 14 وحدة، مبنية بـ Next.js 16 داخل مستودع Turborepo موحّد.

المسار المهني

بُني خلالها ·Besterra

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

خاص

معاينة مباشرة

1 / 3

نظرة عامة على المشروع

تقف مجموعة Besterra على رأس منظومة أعمال من أربع عشرة وحدة تمتد عبر الإعلام والبرمجيات والدراسات والتدريب والأمن والتجارة. ولموقعها مهمة واحدة: أن يجعل هذا الحجم يبدو متماسكاً منذ اللحظة التي يصل فيها الشريك أو المستثمر أو الباحث عن عمل، وبلغته.

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

صمّمتُها وبنيتُها من الصفر. تجمع لغتها البصرية بين خلفية داكنة عميقة وأقسام ورقية فاتحة، وخط IBM Plex بالعربية واللاتينية، ولوناً مميزاً لكل وحدة، فتحتفظ العلامات الأربع عشرة بهويتها داخل نظام واحد هادئ ودقيق. وفي العمق، هي تطبيق Next.js 16 ثابت بالكامل داخل مستودع Turborepo الموحّد لـ Besterra، على حزم التصميم وتحسين محركات البحث والتنقّل المشتركة نفسها التي تقوم عليها بقية مواقع Besterra.

الميزات الرئيسية

واجهة المنظومة: شبكة SVG تربط المجموعة بالوحدات الأربع عشرة، بخطوط إشارة متحركة بلون كل وحدة وثلاثة تخطيطات مصمَّمة خصيصاً للشاشات العريضة والمتوسطة والضيقة
صفحة بإيقاع: تتناوب الأقسام الداكنة والورقية على امتداد الصفحة، وتعيد الترويسة الثابتة ضبط ألوانها لتوافق القسم الذي تحتها
خريطة الهيكل التشغيلي: مخطط من ثلاث طبقات (المنظومة، والهيكل، ومجموعات الوحدات) يتكشّف من منتصف كل مجموعة نحو الخارج عند ظهوره أثناء التمرير
دليل وحدات الأعمال: أربع عشرة وحدة في ثلاث مجموعات، لكلٍّ منها شعارها واختصاصها ووصفها ورابط إلى موقعها الخاص
القطاعات والنموذج والحضور: اثنا عشر قطاعاً سوقياً، ونموذج عمل من أربع خطوات، وبطاقات للأسواق في المملكة المتحدة وتركيا وفلسطين
مسارات الشراكة: مساران منفصلان للشركاء الاستراتيجيين والمستثمرين، مع طريق مباشر إلى الوظائف
ثلاث لغات وثلاثة نطاقات: العربية (من اليمين إلى اليسار) والإنجليزية والتركية، لكلٍّ منها نطاقه، مع مبدّل لغة ينتقل بينها

أبرز الجوانب التقنية

ثابت بطبيعته: كل لغة مُعدّة مسبقاً وكل قسم مكوّن خادم (React Server Component)؛ والشيفرة الوحيدة الخاصة بالصفحة على جهة العميل مراقِب صغير يتحكّم بالترويسة
الحركة بـ CSS: تظهر الأقسام بحركات مرتبطة بالتمرير، وتتحرك إشارات الواجهة بتحريك مسارات SVG، دون أي مكتبة حركة
المحتوى ظاهر دائماً: لا تعمل حركات الظهور إلا حين يدعمها المتصفح ولم يطلب الزائر تقليل الحركة؛ وإلا يُعرض كل شيء ثابتاً
لغة حسب النطاق: وسيط يربط كل نطاق بلغته، وترجمات مُتحقَّق منها بالأنواع تجعل النص الناقص خطأً عند البناء، وروابط hreflang متبادلة تربط النطاقات الثلاثة
أسس مشتركة: الرموز التصميمية والخطوط والترويسة والتذييل وتحسين محركات البحث والتوجيه تأتي من الحزم المشتركة في المستودع، وهي نفسها وراء بقية مواقع Besterra
جاهز لمحركات البحث: بيانات وصفية وOpen Graph لكل لغة، وبيانات منظَّمة Organization وWebSite وWebPage، وخريطة موقع تغطي النطاقات الثلاثة، وملف Web Manifest
بنية سهلة الوصول: رابط تخطٍّ إلى المحتوى، وعنوان h1 واحد، وأقسام معنونة، وقوائم دلالية، وتسميات مترجمة للشبكة، وحلقة تركيز ظاهرة على كل عنصر تفاعلي

مساهماتي

صمّمتُ الصفحة وبنيتُها من الصفر، من شبكة الواجهة حتى القسم الختامي
صمّمتُ اللغة البصرية: إيقاع الأقسام الداكنة والورقية، ونظام الألوان الخاص بكل وحدة، والخطوط بالعربية واللاتينية
صمّمتُ ونفّذتُ شبكة المنظومة ومخطط الهيكل التشغيلي بـ SVG وCSS، بتخطيطات منفصلة لكل حجم شاشة
أعددتُ التوجيه حسب النطاق للغات الثلاث، بما يشمل تحويلات دائمة من الروابط القديمة القائمة على المسار
ربطتُ الصفحة بحزم نظام التصميم والترويسة والتذييل وتحسين محركات البحث المشتركة
كتبتُ الحركة المرتبطة بالتمرير مع بدائل لتقليل الحركة ولدعم المتصفحات
حفظتُ كل المحتوى في وحدات مُنمَّطة، فتوجد كل وحدة وقطاع وقسم باللغات الثلاث

التحديات والحلول

التحدي: كان من السهل أن تتحول أربع عشرة وحدة واثنا عشر قطاعاً وثلاثة أسواق إلى جدار من الشعارات.

الحل: البدء بالبنية: شبكة حيّة في الواجهة، ثم خريطة هيكل من ثلاث طبقات وصفوف وحدات مجمّعة توضّح كيف ترتبط الأجزاء ببعضها.

النتيجة: تُقرأ المجموعة كمنظومة واحدة مترابطة، وكل وحدة على بُعد نقرة من موقعها الخاص.

التحدي: الحركة الغنية تعني عادةً JavaScript ثقيلاً، وقد تُبقي المحتوى مخفياً إن لم تعمل.

الحل: حركات CSS مرتبطة بالتمرير على أقسام تُعرض من الخادم، مشروطة بتفضيل تقليل الحركة ودعم المتصفح معاً.

النتيجة: تتحرك الصفحة حيث يدعم المتصفح ذلك وتبقى مقروءة بالكامل في كل مكان آخر، دون مكتبة حركة.

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

Frontend: Next.js 16، React 19، TypeScript، Tailwind CSS 4، حركات CSS المرتبطة بالتمرير، SVG، Lenis

المستودع الموحّد: Turborepo، مساحات عمل pnpm، حزم مشتركة للرموز التصميمية والخطوط والواجهة وتحسين محركات البحث والتوجيه والتدويل

البنية التحتية: Vercel، Vercel Analytics

الأدوات: ESLint، Vitest، sharp

تحتاج شيئاً مشابهاً؟أخبرني عن مشروعك