Logo
الشامي للحلول التقنية
العودة للمشاريع
عرض محليWEB

KAND — منصة بيت العلامات التجارية ولوحة تحكم المحتوى

منصة مؤسسية ثنائية اللغة مبنية بدون قوالب لمجموعة KAND تعرض رؤيتها وست علامات تجارية وقطاعاتها ومسار الشراكات للمستثمرين والشركاء، مدعومة بنظام إدارة محتوى محمياً بالجلسة. تسعة أقسام سردية، وصفحات قطاعات يحركها قاعدة البيانات، وتجربة عربية/إنجليزية أصيلة بُنيت من الصفر على Next.js 15.

KAND — منصة بيت العلامات التجارية ولوحة تحكم المحتوى
المشكلة
تمتلك المجموعات متعددة العلامات رؤية متناثرة بلا مقر موحّد لسردها: الرسالة موزّعة بين ملفات PDF ومنشورات التواصل، وصفحات القطاعات ثابتة، وكل تعديل نصي يحتاج مطوّراً. وعلاوة على ذلك، يحتاج الجمهور العربي إلى تنضيد RTL أصيل وبيانات ثنائية الاتجاه وصور مشاركة بلغتين، وهي أشياء تتعثر معها القوالب الجاهزة.
الهدف

تسليم موقع مؤسسي يحقّق: (1) ترتيب قصة KAND في تسعة أقسام متتابعة، (2) مسارَي عربي وإنجليزي متطابقين مع اتجاه صحيح، (3) جاهزية SEO كاملة عبر Metadata API وhreflang وcanonical وخريطة الموقع وصور Open Graph باللغتين، (4) لوحة تحكم آمنة لفريق العمل لإدارة الأقسام والمنتجات والوسائط والرسائل وإعدادات الموقع، (5) استمرار نموذج التواصل في العمل على أي استضافة Node.js حتى دون قاعدة بيانات.

نهجي في الحل

هندسة تطبيق Next.js 15 App Router بلغة TypeScript وإطار Tailwind CSS: تسعة مكوّنات أقسام (الهيرو، من نحن، الخط الزمني، الرؤية والرسالة، العلامات، القطاعات، النمو، الشراكات، التواصل) تُقدَّم عبر next-intl تحت وسيط locale. خلفية الهيرو ميدان جزيئات بـ Three.js، والسرد التمريري بـ Framer Motion مع حماية prefers-reduced-motion، وصفحات القطاعات تُبنى من Prisma فوق MariaDB مع بدائل آمنة عند تعذّر الاتصال، ولوحة تحكم NextAuth v4 بمصادقة بيانات اعتماد تفتح معالجات API محمية بالجلسة لإدارة المحتوى ورفع الوسائط والإعدادات.

التحديات التي تم التغلب عليها

إبراز الخطوط العربية الفاخرة (ريم كوفي/المراعي) إلى جانب نظيرتها الإنجليزية (Marcellus/Inter) في قالب واحد متجاوب دون أخطاء ثنائية الاتجاه أو قفزات الخطوط، مع إبقاء خلفية WebGL وحركات التمرير الكثيفة خفيفة على هواتف الفئة المتوسطة — ثم ربط اللوحة والرفع وصفحات القطاعات بـ MariaDB عبر بدائل تجعل الموقع قابلاً للنشر على استضافة بلا قاعدة بيانات.

الأثر التجاري والنتائج

تسليم مسارين مترجمين بالكامل (/ar و/en) مع صور Open Graph تُولَّد باللغتين، وخريطة موقع تشمل مسارات اللغات وصفحات القطاعات، ومساحة إدارة من ست واجهات فوق خمسة نماذج Prisma وثلاث هجرات — رسائل التواصل تُحفظ في MySQL عند توفرها وتبقى ناجحة بدونها.

ملخص المشروع

دوريمطور ويب شامل رئيسي ومصمم واجهات وتجربة مستخدم (Lead Full-Stack Developer & UI/UX Specialist)
الحالةعرض محلي

نسخة تجريبية محلية — تعمل بالكامل في بيئة خاصة.

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

أطر العمل
Next.js 15React 19Tailwind CSSnext-intlFramer MotionPrisma ORMNextAuth v4Three.js
الأدوات
MariaDBmysql2bcryptjsLucide ReactTurbopackGoogle Analytics 4

مشروع مماثل؟

هل تحتاج إلى حل مماثل؟

دعنا نتحدث عن متطلباتك ونبني شيئاً يحقق نتائج حقيقية.

ناقش مشروعك