الحالة: منشور. الموقع: advoyagemorocco.com
المشكلة
A&D Voyage منظّم رحلات في شمال المغرب متخصّص في المسارات الجهوية الأصيلة عبر طنجة وشفشاون وتطوان وأقشور والحسيمة. وجمهوره يغطّي ثلاث فئات لغوية متمايزة: المسافرون المغاربة الذين يقرأون العربية، والجالية المغربية الناطقة بالفرنسية والزوّار الفرنكوفونيون، والمسافرون الدوليون الناطقون بالإنجليزية. وكان الموقع يحتاج إلى طباعة عربية سليمة وتخطيط ثنائي الاتجاه (من اليمين إلى اليسار)، وإلى أن يبقى خفيفًا على الهواتف ذات الاتصال الضعيف، ولذلك بنيته دون قالب وكالة جاهز.
دوري
عملت بصفتي المطوّر ومصمّم الواجهة الوحيد للمشروع: أنشأت نظام تصميم الهوية المخصّص («Rif & Strait Field Atelier»)، وصمّمت معمارية محرّك عرض مسبق ثابت من جهة الخادم، ونفّذت المحتوى ثلاثي اللغة وتخطيطات الاتجاه من اليمين إلى اليسار، وبنيت مجموعة اختبارات آلية للتحقّق من تحسين محركات البحث وقت البناء.
ما الذي بنيته
- معمارية خفيفة بـ React 19 وTailwind CSS v4: تجنّبت ترهّل مكتبات المكوّنات والأيقونات الخارجية ببناء عناصر واجهة أساسية يدويًا، قابلة لإعادة الاستعمال ومتاحة للجميع (
ButtonوSectionHeadingوChipوFaqAccordionوItineraryAccordionوأيقونات SVG مضمَّنة). ولا تُحمَّل أي مكتبات خارجية للواجهة أو الأيقونات، ولذلك يكون على المتصفّح تنزيل شيفرة أقل قبل أن تصبح الصفحة قابلة للاستعمال. - سلسلة عرض مسبق ثابت مخصّصة: بنيت مولّدًا ثابتًا داخليًا يعتمد على
renderToStringمنreact-dom/server(entry-server.tsx)، يُصرّف كل مسار عبر اللغات الثلاث إلى ملفات HTML ثابتة وقت البناء (scripts/prerender.tsx)، ويحقن الوسوم القانونية الخاصة بكل مسار، وبدائل hreflang (arوfrوenوx-default)، وبيانات Schema.org بصيغة JSON-LD قبل النشر على Vercel. - بوابة تحقّق آلية من تحسين محركات البحث وقت البناء: أنشأت
scripts/verify-seo-build.tsلإعادة تحليل المخرجات الثابتة المولَّدة كبوابة بناء صارمة. تتحقّق من وجود عنوان H1 واحد ووسم قانوني، وتختبر تطابق hreflang كاملًا، وتؤكّد خلوّ الموقع من بيانات تقييمات زائفة، وتتحقّق من نصوص بديلة للصور، وتُفشل عملية البناء إن وجدت رابطًا داخليًا معطّلًا. - تدويل أصلي ثنائي الاتجاه: نفّذت نظام قواميس i18n مكتوب الأنواع وبلا اعتماديات، مع قلب كامل للتخطيط من اليمين إلى اليسار (
dir="rtl") بالاعتماد على الخصائص المنطقية في Tailwind v4 (ms/meوps/peوstart/end)، مع اقتران خط Noto Kufi Arabic للعربية بخطّي Fraunces وPlus Jakarta Sans للحروف اللاتينية. - تقويم مغادرات تفاعلي وشبكة أسعار: بنيت تقويم مغادرات مهيكلًا وحاسبة أسعار متعدّدة المستويات تدعم التغيّرات الموسمية، والأسعار للفرد، وخيارات السفر الجماعي.
- مسار مباشر لطلب الحجز: صمّمت مسار طلب مبسّطًا يربط إرسال استمارة Formspree بانتقال فوري إلى محادثة واتساب مملوءة مسبقًا.
النتائج
لأنني لا أملك وصولًا مباشرًا إلى Google Analytics الخاص بـ A&D Voyage ولا إلى سجلّات حجوزاتها، لا تُدَّعى هنا أي أرقام زيارات أو حجوزات غير متحقَّق منها.