رخام السامة الفاخر (Elsama Luxury Marble)

منصة متعددة اللغات بمستوى تحريري متخصص للرخام والأسطح المعمارية، مصممة لتحويل تجربة التصفح المتميزة إلى استفسارات تجارية مؤهلة.

تُعد منصة "السامة للرخام الفاخر" تطبيقاً مبنياً باستخدام Laravel، موجهاً لمحفظة أعمال مواد البناء الراقية التي تتجاوز مجرد كونها موقعاً استعراضياً. تعرض المنصة المشاريع، والمواد، والمحتوى التحريري، وآراء العملاء، وتحديد مكانة الخدمات بأسلوب يدعم المصداقية التجارية ومعدلات تحويل المبيعات في آنٍ واحد. تم تحسين المنصة لتلائم الجمهور الدولي، مع دعم التوجيه الواعي باللغة (Locale-aware routing)، ودعم اتجاه النص من اليمين إلى اليسار (RTL)، وتخزين المحتوى المترجم مباشرة في نموذج البيانات. من الناحية التشغيلية، تستند نفس قاعدة الأكواد إلى تجربة تفاعلية عبر Inertia React للواجهة العامة، وطبقة Filament CMS للإدارة للتحكم في المحتوى والاستفسارات والتحليلات.

القيمة الجوهرية المقترحة

• الأداء والقابلية للتوسع: يتم تقديم تجربة المستخدم العامة من خلال Inertia v2 مع دعم التقديم من جهة الخادم (SSR)، وعلاقات محملة مسبقاً (Eager-loaded)، وموارد JSON خفيفة، وإعدادات مؤقتة، وطوابير قائمة على قاعدة البيانات، وتحويل الصور إلى تنسيق WebP لسرعة تسليم الصفحات.
• تميز تجربة وواجهة المستخدم (UX/UI): تستخدم الواجهة لغة بصرية فاخرة وتحريرية مع طباعة بحجم كبير، وتخطيطات تعتمد على الصور، وبطاقات متجاوبة، وتفاعلات تحميل إضافي للمدونة، وزر واتساب ثابت للتحويل، وتبديل اتجاه التخطيط الواعي باللغة.
• الأمان والموثوقية: يتم التحقق من صحة طلبات الاستفسار من جانب الخادم، وتحديد معدل الطلبات لكل عنوان IP، وإدراجها في طوابير للتسليم، وعكسها لكل من الفريق الداخلي والعميل المحتمل. واجهة الإدارة محمية خلف نظام مصادقة Filament، بينما يقلل الحذف الناعم (Soft deletes) للمحتوى واستمرار اللغة المستند إلى الجلسة (Session-based) من المخاطر التشغيلية.

البنية التحتية والتقنية

الواجهة الأمامية (Frontend)

• الإطار: React 18 مع Inertia.js v2 ونقاط دخول SSR في resources/js/app.tsx و resources/js/ssr.tsx.
• الحالة والتنقل: جهاز توجيه Inertia، و useForm، ومساعدات المسارات عبر Ziggy، والترقيم/التصفية من جهة العميل لعروض الكتالوج والمدونة.
• التنسيق والحركة: Tailwind CSS، و Headless UI، و Framer Motion، ولوحة ألوان تحريرية داكنة مختارة بعناية لتناسب علامة تجارية للمواد الفاخرة.
• أنماط واجهة المستخدم: هيكل تخطيط عام، بطاقات وعناصر جذب للعملاء (CTAs) قابلة لإعادة الاستخدام، عرض محتوى متعدد اللغات، وتكوين متجاوب للأقسام الرئيسية.
• المحتوى الغني: يتوفر TipTap لتأليف محتوى CMS طويل في لوحة الإدارة.

الواجهة الخلفية / واجهة برمجة التطبيقات (Backend / API)

• الإطار: Laravel 13 مع توجيه MVC كلاسيكي واستجابات Inertia للموقع العام.
• نمذجة البيانات: حقول مترجمة بتنسيق JSON للأسماء، والأوصاف، ونسخ تحسين محركات البحث (SEO)، ومحتوى المدونة؛ ربط نموذج المسار المستند إلى slugs؛ حذف ناعم على كيانات الكتالوج الأساسية.
• الوصول إلى البيانات: تقوم موارد API المخصصة بتطبيع روابط الوسائط، والمحتوى المترجم، وحمولات البيانات العلائقية قبل وصولها إلى الواجهة الأمامية.
• خدمات الأعمال: يحل مساعد الترجمة (Translation helper) بدائل اللغة، ويقوم نموذج الإعدادات بتخزين التكوين العالمي، ويتم حفظ التحليلات من خلال طبقة خدمة، وتتم معالجة الصور إلى WebP قبل التخزين.

التطوير والعمليات (DevOps & Infrastructure)

• بيئة التشغيل المحلية: تم تصميم المشروع لأدوات PHP + Node القياسية و Laravel Herd. لا يتم تضمين Docker في المستودع.
• الطوابير والبريد: يعد ترتيب الطوابير في قاعدة البيانات هو المسار الافتراضي، مع إشعارات استفسار مدرجة في الطوابير وبريد قائم على السجلات تم تكوينه للتطوير المحلي.
• التخزين: تتم كتابة الوسائط العامة على قرص public ويتم تقديمها من storage/app/public.
• مسار الإنشاء (Build Pipeline): يقوم Vite بتجميع حزمة العميل وحزمة SSR، بينما تقوم نصوص المستودع أيضاً بتشغيل خادم التطبيقات، ومستمع الطوابير، ومتابع السجلات معاً أثناء التطوير.
• التخزين المؤقت: يُستخدم تخزين Laravel المؤقت للإعدادات العالمية، ويمكن تبديل التكوين إلى برامج تشغيل أخرى مدعومة عندما تتطلب البيئة ذلك.

تدفق البنية التحتية

flowchart LR
	Browser[المتصفح العام] --> Inertia[صفحات Inertia React]
	Inertia --> Controllers[وحدات تحكم Laravel]
	Controllers --> Resources[موارد API + مدير اللغة]
	Controllers --> Models[نماذج Eloquent + الخدمات]
	Models --> DB[(MySQL / SQLite)]
	Models --> Cache[(Laravel Cache)]
	Controllers --> Queue[(قائمة انتظار قاعدة البيانات)]
	Queue --> Mail[رسائل الاستفسار الإلكترونية]
	Controllers --> Storage[(التخزين العام / وسائط WebP)]
	Admin[إدارة Filament] --> Controllers
	Admin --> Models
	Controllers --> Analytics[(سجلات التحليلات)]

تعمق في الجوانب الهندسية الرئيسية

1. تقديم المحتوى الواعي باللغة

التحدي لا يكمن ببساطة في ترجمة النصوص؛ بل في الحفاظ على ثبات المسارات (URLs)، واتجاه التخطيط، وحمولات المحتوى عبر ست لغات مع الحفاظ على slugs صديقة لمحركات البحث (SEO) ونصوص تجارية مفهومة. يستخدم الحل بادئة مسار {locale}، واستمرار اللغة المدعوم بالجلسة، و LocaleManager الذي يحل القيم المترجمة من أعمدة JSON مع بدائل منطقية. تُعامل اللغة العربية على أنها RTL في طبقة التخطيط، لذا يقوم الغلاف العام بتحديث اتجاه المستند ديناميكياً بدلاً من الاعتماد على قوالب مكررة.

2. خط أنابيب استفسار يركز على التحويل

يجب أن يكون نموذج الاستفسار عالي القيمة سريعاً، وجديراً بالثقة، ومقاوماً للإساءة. يقوم متحكم الاتصال (Contact controller) بالتحقق من صحة الحمولة من جانب الخادم، وتخزينها كسجل استفسار، وإدراج رسالتين في الطوابير: واحدة للفريق الداخلي وأخرى كرد تلقائي على العميل المحتمل. تعمل برمجية وسيطة مخصصة لتحديد معدل الطلبات (Rate-limiting middleware) على تقييد عمليات الإرسال لكل عنوان IP، مما يحمي إمكانية التسليم ويحافظ على نظافة صندوق بريد المبيعات دون إضافة احتكاك للعملاء المحتملين الحقيقيين.

3. كتالوج غني بالوسائط ونظام إدارة محتوى تحريري

يعرض الموقع المواد، والمشاريع، والمقالات ككتالوج مرئي، وليس كسجلات قاعدة بيانات مسطحة. تقوم وحدات التحكم بتحميل بيانات الصور والعلاقات مسبقاً، وتقوم الموارد بتطبيع روابط الوسائط والمحتوى المترجم، وتقوم الواجهة الأمامية بعرض فلاتر الفئات، والتحميل التدريجي للمدونة، وبطاقات مرئية كبيرة بأقل تعقيد من جهة العميل. من جانب الإدارة، يوفر Filament نظام CMS مهيكلاً ولوحة تحكم للتحليلات حتى يتمكن غير المطورين من تحديث المحتوى، وإدارة الاستفسارات، ومراقبة أنماط حركة المرور دون الحاجة إلى التعامل مع أكواد التطبيق.