الانتقال إلى المحتوى الرئيسي
  • إعادة تصميم موقع
  • تصميم الحركة
  • تصدير ثابت

CybrForge

القطاع
الأمن السيبراني
سُلّم في شكل
  • موقع إلكتروني
السنة
2025
اللغات
FR / EN

“Your Security • Our Priority”

(المشروع)

إعادة تصميم كاملة لموقع مكتب مستقل في الأمن السيبراني: صفحة واحدة داكنة مستوحاة من الحدادة، بتمرير سلس وحركة يقودها التمرير وطبقة محتوى ثنائية اللغة أُعيد بناؤها من الموقع الأصلي.

(السياق)

موقع يضع المصداقية أولًا لمكتب أمني.

يقدّم CybrForge مكتبًا مغربيًا مستقلًا في الأمن السيبراني: رؤيته ورسالته، وفريقه القيادي، وخمسة خطوط خدمات، وشهاداته، ومراجع عملائه، ومنشوراته، في صفحة طويلة تنتهي بنموذج تواصل.

أعدنا بناء الموقع الأصلي من الصفر كتطبيق Next.js مُصدَّر بشكل ثابت بطابع داكن مستوحى من الحدادة، وأعدنا تنظيم محتواه الفرنسي والإنجليزي في طبقة محتوى محدّدة الأنواع.

(أرقام أساسية)

أقسام متحرّكة
10
شارة اعتماد
13
محتوى ثنائي اللغة
FR / EN
تصدير ثابت
100%

القرارات التي صنعت المشروع

  1. تصدير ثابت

    تُنتج نسخة الإنتاج حزمة ثابتة بالكامل تُنشر على أي استضافة، بمسارات ملفات تبقى صالحة حتى داخل مجلد فرعي.

    استضافة دون خادم

  2. المحتوى كبيانات

    تعيش القائمة والخدمات والفريق والشهادات والمنشورات في طبقة محتوى محدّدة الأنواع بدل الترميز الثابت، فتبقى الترجمة والتعديل بسيطين.

    مصدر واحد للحقيقة

  3. التحكّم في الحركة قسمًا بقسم

    يفعّل إعداد مركزي مؤثرات التمرير أو يوقفها لكل قسم، ما سمح بعزل التقطّع وإزالته.

    التحكّم في الأداء

  4. حركة يقودها التمرير

    تشكّل Lenis للتمرير السلس، وظهور العناصر بـ GSAP، والعدّادات المتحرّكة، والأزرار المغناطيسية طبقة تفاعل متماسكة.

    نظام الحركة

(كيف يعمل)

تركيب الصفحة

  1. طبقة المحتوى

    يُرتَّب كل نص حسب القسم واللغة، ويختار مزوّد اللغة الفرنسية أو الإنجليزية أثناء التشغيل.

  2. مكوّنات الأقسام

    يقرأ كل قسم طبقة المحتوى وعناصر واجهة مشتركة: أزرار مغناطيسية، وظهور متدرّج، وعدّادات.

  3. التصدير الثابت

    تُعرض كل الصفحات مسبقًا كملفات ثابتة، دون حاجة إلى خادم في الإنتاج.

لقطات من النسخة المُسلَّمة، مجمّعة حسب المنتج. اختاروا لقطة لعرضها بحجمها الكامل.

التقنيات

إطار العمل
  • Next.js 14
  • App Router
  • Static export
الواجهة
  • React 18
  • TypeScript
  • Tailwind CSS 3
الحركة
  • GSAP
  • Framer Motion
  • Lenis
المحتوى
  • Typed content layer
  • FR / EN provider

(المشروع التالي)

LIPACK

الصناعة, 2025

قد يكون مشروعكم النظام التالي الذي نبنيه.