Waqar Ul Wahab
كل المشاريع/GLUSHION — BILINGUAL CROSS-BORDER AGENCY SITE

نظرة عامة

Glushion وكالة برمجيات عابرة للحدود تربط باكستان والمكسيك، وهذا موقعها التسويقي — بُني من طرف إلى طرف انطلاقًا من مصدر تصميم ليصبح تطبيق Next.js 15 إنتاجيًا (App Router وReact 19). ويضمّ أربعة عشر قسمًا غنيّ التكوين: واجهة رئيسية ثنائية اللغة مع خريطة متحرّكة تربط باكستان بالمكسيك، وشبكة خدمات، وشبكة قطاعات، ومعرض مشاريع قابل للتصفية، وشريط إحصاءات عالمية، والمنظومة التقنية، وآراء العملاء، ونموذج تواصل، وتذييلًا.

والمتطلّب الحاسم أن تُقدَّم التجربة كاملةً بـلغتين — الإنجليزية والإسبانية — عبر مُبدِّل واحد. النصوص تعيش في وحدات محتوى محدّدة الأنواع باللغتين جنبًا إلى جنب، فيستطيع من ليس مطوّرًا أن يحرّر العناوين والإحصاءات والتسميات دون أن يمسّ كود المكوّنات إطلاقًا.

التحدي

كانت نقطة البداية تصدير تصميم: ملفات تبدو صحيحة لكنها، بنيويًا، طريق مسدود. لا شيء فيها قابل لإعادة الاستخدام — ألوان مضمّنة عند كل موضع استدعاء، ونصوص ملحومة في الوسم، ورسومات غير مُحسَّنة، وتخطيطات لا تتماسك إلا عند أبعاد لوح التصميم بالضبط. شحن ذلك كما هو كان سينتج موقعًا يُعرض مرّة واحدة ثم يقاوم كل تغيير بعدها.

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

تصميم النظام

كيف يعمل

01/03
01

من مصدر التصميم إلى مكوّنات الإنتاج

كيف يتحوّل تصدير التصميم المحفوظ إلى رموز تصميم ومحتوى محدّد الأنواع ومكوّنات React أحادية الغرض.

  1. 1يُحفَظ تصدير التصميم كما هو حرفيًا بوصفه المرجع الأصلي
  2. 2تُستخرج الألوان واستدارات الحواف والظلال والخطوط المتكرّرة مرّة واحدة في صورة رموز تصميم Tailwind
  3. 3يُفكَّك التصميم إلى 42 مكوّنًا أحادي الغرض موزّعة على أربعة عشر مجلّد قسم
  4. 4تُرفَع النصوص الحرفية وعناصر التنقّل والمقاييس إلى 15 وحدة محتوى محدّدة الأنواع
  5. 5يخضع البناء لفحص الأنواع والتصريف تحت TypeScript الصارم، فيكون بوّابةً على النتيجة
02

صفحة واحدة بلغتين

كيف يُعرض الوسم نفسه بالإنجليزية أو الإسبانية دون أي نص مكتوب بشكل ثابت.

  1. 1يقرأ كل قسم نصوصه من وحدة محتوى محدّدة الأنواع تحمل الإنجليزية والإسبانية معًا
  2. 2يضبط مُبدِّل اللغة اللغةَ النشطة بوصفه جزيرة عميل صغيرة
  3. 3تختار المكوّنات النص المطابق للغة النشطة لحظة العرض
  4. 4تتبدّل الواجهة الرئيسية والتنقّل والأقسام والنماذج في مكانها — تخطيط واحد بلغتين
03

من البناء الثابت إلى الحافة العالمية

كيف تبقى صفحة ثنائية اللغة غنيّة بالوسائط سريعة التحميل لزوّار على طرفَي العالم.

  1. 1يُركّب App Router الصفحة من مكوّنات خادم مرتّبة وثابتة في معظمها
  2. 2يُحسّن next/image الرسومات ويستضيف next/font خطّي Inter وPlayfair ذاتيًا
  3. 3يُولّد البناء الصفحات توليدًا ثابتًا ويَنشرها على Vercel
  4. 4يُخدَم الزوّار من أقرب عقدة طرفية، فيبقى الرسم الأول سريعًا حتى بعيدًا عن الأصل

أبرز الميزات

  • ثنائية اللغة بالإنجليزية والإسبانية عبر الأقسام الأربعة عشر كلها، يتبدّل بينها مُبدِّل لغة واحد، مع نصوص محفوظة في وحدات محتوى محدّدة الأنواع
  • واجهة رئيسية عابرة للحدود — خريطة متحرّكة تربط باكستان بالمكسيك، بمؤشّرات مواقع ومعالم وعنوان رئيسي ثنائي اللغة
  • بنية معيارية بالكامل — 42 مكوّنًا أحادي الغرض و15 وحدة بيانات محدّدة الأنواع تُبقي المحتوى والكود منفصلين بوضوح
  • رموز تصميم Tailwind مركزية، مع استضافة ذاتية لخطّي Inter وPlayfair عبر next/font وصور مُحسَّنة عبر next/image في كل مكان
  • نظام أقسام غنيّ — شبكة قطاعات، ومعرض مشاريع قابل للتصفية، وشريط إحصاءات عالمية، والمنظومة التقنية، وآراء العملاء، ونموذج تواصل
  • مكوّنات خادم ثابتة في معظمها، وليس من جزر العميل سوى شريط التنقّل والمُبدِّل، من أجل تقديم سريع ومنخفض التكلفة
  • استجابة مدروسة منذ التصميم — تحافظ الواجهة الرئيسية على نِسَب لوح التصميم على سطح المكتب، وتُعيد التدفّق إلى ترتيب رأسي للجوال دون 680px
  • توليد ثابت وتقديم من شبكة Vercel الطرفية العالمية لتحميل سريع على طرفَي الحدود

Outcomes

  • تسليم تصميم في صورة كود سهل الصيانة وقابل للتوسّع — 42 مكوّنًا و15 وحدة محتوى محدّدة الأنواع، لا صفحة لمرّة واحدة
  • جعل الموقع بأكمله ثنائي اللغة (الإنجليزية / الإسبانية) عبر مُبدِّل واحد، دون أي نص مكتوب بشكل ثابت داخل الوسم
  • إبقاء صفحة غنيّة بالوسائط سريعة عبر التوليد الثابت والخطوط المستضافة ذاتيًا والصور المحسّنة والتقديم من شبكة Vercel الطرفية
  • الحفاظ على مقصد التصميم بدقّة البكسل على سطح المكتب مع إعادة تدفّق نظيفة إلى الجوال

أعمال أخرى

TourAxis preview
منصّة سفر

TourAxis

سوق سياحي مُحوكَم لتخطيط الرحلات وحجزها ودفع تكاليفها

عرض المشروع