Dana Doors

لمحة سريعة

• نوع المشروع: موقع تسويقي وكتالوج ومنصة استفسارات باللغتين
• اللغات: العربية والإنجليزية، بتخطيطات RTL وLTR
• الكتالوج: أبواب وشبابيك ودرابزين ومطابخ وغرف ملابس وأعمال خشب
• المسارات: اكتشاف المنتج وتفاصيله والمعرض والمشاريع وعرض السعر والاستشارة والتواصل والتوظيف
• الوسائط: صور الكتالوج والمعرض عبر Cloudinary

المطلوب

Dana Doors كانت محتاجة موقعًا عامًا لمنتجات واسعة تعتمد على الصورة. الزائر غالبًا محتاج يفهم المنتج ويفحص تفاصيله ويتكلم عن مشروعه قبل قرار الشراء، لذلك المطلوب كتالوج واستفسار بدل متجر قائم على الدفع أولًا.

الموقع كمان لازم يشتغل طبيعي بالعربي والإنجليزي. المسارات حسب اللغة والواجهة من اليمين للشمال والمحتوى والبيانات الوصفية والخطوط جزء من التنفيذ، مش ترجمة اتضافت بعد التصميم.

تجربة المنتج

المسار بيبدأ بتصفح فئة، ثم فحص المنتج ومواصفاته، ومراجعة الصور والمشاريع ومعلومات الطلب، ثم طلب عرض سعر أو استشارة. العربية هي اللغة الافتراضية، والمسارات الأساسية موجودة تحت /ar و/en. التطبيق له مسارات من الخادم مع تفاعل محدود للقوائم والثيمات والنماذج والمعارض، وليس تطبيق صفحة واحدة.

اللي قدّمناه

• موقع ثنائي اللغة (عربي وإنجليزي) بتوجيه حسب اللغة، واجهة RTL، وخطوط محلية للغتين
• كتالوج منتجات كامل: أبواب، شبابيك، درابزين، مطابخ، غرف ملابس، ومجموعات تانية، بصفحات فئات وتفاصيل
• معرض صور قابل للفلترة مدعوم بـ Cloudinary
• نماذج عرض سعر واستشارة وتواصل وتقديم وظائف مع إيميلات تأكيد مخصصة
• أساسيات SEO: بيانات وصفية، صور مشاركة اجتماعية، قواعد robots، خرائط مواقع متعددة اللغات، وبيانات مُهيكلة
• تنقل متجاوب وثيمات فاتحة وداكنة ومعرض يدعم لوحة المفاتيح والحركة المخففة
• صفحات مشاريع وتعريف وطلب وسياسة خصوصية وشروط ومعلومات الشركة

تفاصيل النظام

بيانات المنتجات والترجمة في المستودع، وCloudinary للوسائط. مساعدات مشتركة بتحافظ على اتساق المسارات والبحث عن المنتجات وحل الصور وتطبيع المعرض. النماذج متحققة بـ Zod ومحمية بـ honeypot وحدود الإرسال، ورسائلها عبر Resend. Upstash Redis يدعم الحماية وعدّاد الزيارات عند توفر إعدادات الخادم.

النتيجة

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

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

Next.js وReact وTypeScript، بتصميم Tailwind CSS وshadcn/ui. Cloudinary بيدير صور المنتجات والمشاريع، Resend بيبعت الإيميلات، وUpstash Redis بيحمي النماذج ويشغّل عدّاد الزوار. الموقع شغال على Vercel.