تصميم وتطوير موقع تعريفي تفاعلي لشركة "المصطفى" للاستيراد والتصدير (Multilingual)

تم تطوير منصة رقمية متكاملة لشركة "المصطفى للاستيراد والتصدير"، وهي شركة رائدة تعمل في المجال منذ أكثر من 15 عاماً. يهدف الموقع إلى تعزيز التواجد الرقمي للشركة وعرض منتجاتها الزراعية (فواكه، خضروات، موالح) للأسواق العالمية والمحلية.

الموقع مصمم ليكون واجهة تسويقية قوية تدعم تعدد اللغات (العربية والإنجليزية) لاستهداف العملاء في الدول العربية والأوروبية، مع التركيز على تجربة مستخدم (UX) سلسة وتصميم عصري يعكس هوية الشركة.

أبرز مميزات المشروع:

دعم كامل لتعدد اللغات (Localization):

بناء نظام ترجمة مخصص (Custom Language Provider) يتيح للزوار التبديل الفوري بين العربية (RTL) والإنجليزية (LTR) مع ضبط اتجاهات النصوص والتصميم تلقائياً.

كتالوج منتجات تفاعلي وذكي:

عرض المنتجات مقسمة حسب الفئات (موالح، فواكه، خضروات) مع إمكانية الفلترة السريعة (Filtering System) دون إعادة تحميل الصفحة.

ميزة عرض "مواسم الحصاد" (Seasonality Availability)، حيث يوضح الموقع للعميل الشهور التي يتوفر فيها كل منتج أو ما إذا كان متاحاً طوال العام.

واجهة مستخدم حديثة وجذابة (Modern UI):

تصميم متجاوب (Responsive) يعمل بكفاءة على جميع الأجهزة (موبايل، تابلت، ديسكتوب).

استخدام تأثيرات بصرية وانيميشن (Animations) انسيابية عند التمرير ولعناصر الـ Hero Section لإعطاء طابع حيوي للموقع.

الأداء والسرعة:

الموقع مبني بتقنية Single Page Application (SPA) مما يضمن سرعة تنقل فائقة بين الأقسام.

تحسين عرض الصور والأصول لضمان سرعة التحميل.

أقسام تعريفية وخدمية:

عرض احترافي لخدمات الشركة اللوجستية (الشحن البحري، الجوي، والتخليص الجمركي).

نموذج تواصل وتكامل مع بيانات الاتصال.

التقنيات والأدوات المستخدمة (Tech Stack):

حرصت في هذا المشروع على استخدام أحدث التقنيات لضمان الجودة وقابلية التوسع:

مكتبة الواجهة: React.js (Vite)

لغة البرمجة: TypeScript (لضمان كود خالٍ من الأخطاء وسهل الصيانة).

التنسيق والتصميم: Tailwind CSS (للتصميم المخصص).

مكتبات المكونات: Shadcn/UI & Radix UI (لبناء عناصر واجهة احترافية وقابلة للوصول - Accessible).

إدارة النماذج: React Hook Form + Zod (للتحقق من صحة البيانات في النماذج).

الأنيميشن: Tailwindcss-animate & Lucide React (للأيقونات والتأثيرات الحركية).

التوجيه: React Router Dom.