Waqar Ul Wahab
كل المشاريع/SECURITY PORTAL

نظرة عامة

Security Portal هو الباب الرقمي الأمامي لشركة 1 Cerberus Security & Patrol، وهي شركة أمن خاص مرخّصة من BSIS (PPO 121682) تعمل على مستوى ولاية كاليفورنيا بأكملها من مقرّها في منطقة خليج سان فرانسيسكو. وهو يخدم العملاء المحتملين — البنوك والمستشفيات والفنادق ومتاجر التجزئة ومواقع البناء والحرم الجامعية والموانئ ومنظّمي الفعاليات — ممّن يحتاجون إلى فهم خطوط الخدمة الأربعة عشر لدى الشركة، والتحقّق من اعتماداتها، وطلب الحماية سريعًا. وهو واجهة أمامية بـ Next.js مع نقطة وصول واحدة للعملاء المحتملين مُتحقَّق منها على الخادم: موقع تسويقي مهندَس كما يُهندَس المنتج، بناه AmalAxis لعلامة العميل التجارية.

التحدي

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

تصميم النظام

كيف يعمل

01/04
01

التقاط العملاء المحتملين وطلب عرض السعر

نموذج مضمَّن وسهل الوصول يلتقط طلبات عروض الأسعار ويسلّمها إلى مسار API مُتحقَّق منه على الخادم، مع ترشيح للروبوتات وبدائل سلسة عند التعذّر.

  1. 1يصل الزائر إلى أي صفحة؛ فيعرض شريط الحثّ على الإجراء نموذج العميل المحتمل مضمَّنًا، دون حاجة إلى نقرة للبدء.
  2. 2يتحقّق مكوّن LeadForm على جانب العميل عند مغادرة الحقل وعند الإرسال، ويربط الأخطاء عبر aria-invalid وaria-describedby، وينقل التركيز إلى أول حقل غير صالح.
  3. 3يُفحص حقل مصيدة (honeypot) مخفي؛ فإن كان مملوءًا أبلغ النموذج بالنجاح صامتًا دون أن يرسل شيئًا.
  4. 4تُرسَل المدخلات الصالحة عبر POST بصيغة JSON إلى /api/contact.
  5. 5يُعيد Route Handler التحقّق على جانب الخادم، ويُسقط ما يقع في حقل المصيدة، ويُعيد نتيجة بصيغة JSON.
  6. 6وعند النجاح يتحوّل النموذج إلى حالة تأكيد مع بديل tel: متاح على مدار الساعة؛ وعند الخطأ يعرض رسالة لإعادة المحاولة.
02

استكشاف الخدمات والقطاعات

أربعة عشر خطّ خدمة يمكن تصفّحها من قائمة ضخمة مبنيّة على البيانات، وتُصيَّر كصفحات مخصّصة انطلاقًا من طبقة المحتوى مُحدَّدة الأنواع.

  1. 1تعرض قائمة MegaMenu على سطح المكتب ولوحة التنقّل على الجوّال الخدمات الأربع عشرة كلّها من بيانات SERVICES مُحدَّدة الأنواع.
  2. 2اختيار خدمة يفتح مسارها المخصّص، مثل /armed-security/.
  3. 3يُصيّر ServiceDetailPage سجلّ SERVICE_DETAILS الخاص بتلك الخدمة — النظرة العامة والفوائد والصورة الرئيسية المصحّحة الألوان.
  4. 4يربط RelatedServices العروض المجاورة تبادليًا، ويعيد زرّ الحثّ على الإجراء الزائر إلى مسار طلب عرض السعر.
03

البيانات المنظّمة والتصيير المهيّأ لمحرّكات البحث

تُصيَّر الصفحات كـ Server Components ببيانات وصفية غنيّة وJSON-LD بمعيار schema.org مولَّد مباشرةً من طبقة المحتوى.

  1. 1تُصيَّر الصفحات كـ React Server Components باستخدام رموز التصميم، فتشحن أقل قدر ممكن من JavaScript إلى العميل.
  2. 2يضبط التخطيط الجذري بيانات وصفية غنيّة (OpenGraph وTwitter وrobots والرابط الأساسي canonical) ويحقن رسم JSON-LD البياني.
  3. 3يقدّم next/image صيغة WebP، ويقدّم التوجيه بشرطة مائلة ختامية مساراتِ المجلّدات على عناوينها الدقيقة.
  4. 4تقرأ الزواحف مخطّطات LocalBusiness/SecurityService وFAQPage المبنيّة من طبقة المحتوى.
04

خريطة المواقع في كاليفورنيا

ستة مكاتب في كاليفورنيا تُعرض على خرائط Google المباشرة مع إجراءات تواصل محلّي مباشر.

  1. 1يقرأ LocationsSection مجموعة بيانات LOCATIONS بمكاتبها الستة.
  2. 2يُصيّر @vis.gl/react-google-maps كل مكتب بمفتاح Maps مقيَّد بالنطاق.
  3. 3يُتيح كل موقع زرّي tel: وطلب عرض السعر للتواصل المحلّي المباشر.

أبرز الميزات

  • أربع عشرة صفحة خدمة مخصّصة وتسعة قطاعات صناعية، تُدار جميعها من كتالوج واحد مُحدَّد الأنواع
  • نموذج التقاط عملاء محتملين سهل الوصول ومحمي بحقل مصيدة (honeypot)، مع تحقّق على جانبَي العميل والخادم وبديل tel:
  • منظومة رموز تصميم بـ Tailwind v4 في وضع CSS أولًا تُبقي نحو 26 مسارًا متّسقة بصريًا
  • طقم واجهة من نحو 20 مكوّنًا يعمل على الخادم أولًا، موثَّق بعقد تكامل في FOUNDATION-API.md
  • بيانات JSON-LD بمعيار schema.org (LocalBusiness/SecurityService وFAQPage) مولَّدة من بيانات المحتوى الحقيقية
  • خرائط Google مباشرة مضمَّنة لستة مكاتب في كاليفورنيا عبر @vis.gl/react-google-maps
  • مدوّنة منظّمة بمسارات [slug] ديناميكية، وشريط تقدّم القراءة، وفهرس لكل مقال
  • حركة آمنة مع تفضيل تقليل الحركة، ورابط تخطٍّ، وحلقات تركيز، وأهداف لمس لا تقلّ عن 44 بكسل، كحدّ أدنى لإمكانية الوصول

Outcomes

  • بوّابة تسويقية والتقاط عملاء محتملين متماسكة عبر نحو 26 مسارًا، مُصيَّرة في معظمها كـ Server Components لصفحات سريعة بأقل قدر من JavaScript.
  • منظومة تصميم مبنيّة على الرموز وعقد واجهة موثَّق، يتيحان تطوير الأقسام بالتوازي دون انحراف بصري.
  • مصداقية قابلة للقراءة آليًا عبر مخطّطات JSON-LD كاملة للنشاط التجاري وكتالوج الخدمات والترخيص والأسئلة الشائعة، مبنيّة من محتوى حقيقي.
  • مسار التقاط للعملاء المحتملين صامد ومراعٍ لمعايير WCAG، مع تحقّق على جانب الخادم وترشيح للروبوتات، جاهز للربط بنظام CRM الخلفي.

أعمال أخرى