mazloum store

📱 الوصف (Description)

منصة "Mazloum Store" هي منصة تجارة إلكترونية متطورة (E-commerce Platform) صُممت خصيصاً لتلبية احتياجات مجتمع اللاعبين (Gamers) في مصر. يهدف الموقع إلى توفير تجربة شراء سلسة، سريعة، وآمنة لألعاب PC (Steam Offline/Online) بأسعار تنافسية، مع دمج كامل لطرق الدفع المحلية الأسهل للعميل المصري (فودافون كاش، انستا باي). تعمل المنصة كواجهة رقمية احترافية تجمع بين التصميم المظلم الجذاب (Dark Gaming Theme) والأداء الفائق، لضمان رحلة عميل ممتازة تبدأ من البحث عن اللعبة وتنتهي باستلامها في أقل من 15 دقيقة.

🌟 أهم المزايا (Key Features)

واجهة مستخدم احترافية (Premium Gaming UX): تصميم عصري يعتمد على الـ Dark Mode مع تأثيرات بصرية متقدمة (Neon Glow, Floating Blobs, Parallax) لتعكس هوية عالم الألعاب، مع شاشات تحميل هيكلية (Skeleton Loaders) تعطي إحساساً بالسرعة المطلقة أثناء جلب البيانات.

توافق مثالي مع الهواتف (Mobile-First Experience): تجربة تصفح تحاكي تطبيقات الموبايل الأصلية بفضل شريط التنقل السفلي الذكي (Bottom Navigation Bar) الذي يسهل التصفح بيد واحدة، مع منع مشاكل التمرير العرضي (Horizontal Overflow).

محرك بحث وفلاتر لحظية (Live Search & Smart Filters): نظام بحث ديناميكي يعرض نتائج الألعاب فور كتابة أول حرف بدون إعادة تحميل الصفحة، مع أزرار سريعة لتصنيف الألعاب وترتيبها (حسب السعر أو الأحدث) بفضل الفلترة الذكية.

دليل الشراء التفاعلي (Visual Purchase Timeline): خط زمني مرئي أنيق يشرح للعميل خطوات الشراء ببساطة متناهية (اختيار ➔ دفع ➔ استلام خلال 15 دقيقة) لكسر حاجز الخوف وتسهيل عملية الطلب.

نظام إثبات المصداقية (Authentic Social Proof): قسم متطور لآراء وتقييمات العملاء (Testimonials) يضم مراجعات واقعية ومتنوعة لبناء ثقة فورية مع العملاء الجدد وتشجيعهم على إتمام الدفع المسبق.

الدعم العائم الذكي (Floating Support Widget): زر تفاعلي مدمج في زاوية الشاشة يربط العميل فوراً بخدمة العملاء عبر WhatsApp، مما يقلل من نسبة التخلي عن السلة (Cart Abandonment) ويرفع المبيعات.

💻 التقنيات المستخدمة (Technologies & Tools)

إطار العمل واللغة (Framework & Language):

تم بناء الموقع باستخدام Next.js (App Router) ومكتبة React مع لغة TypeScript لضمان أداء فائق، أمان عالي للكود (Type Safety)، وتهيئة ممتازة لمحركات البحث (SEO).

قاعدة البيانات والواجهة الخلفية (Backend & Database):

الاعتماد على Supabase (PostgreSQL) كقاعدة بيانات سحابية لامركزية لجلب بيانات الألعاب، الأسعار، وحالة التوافر بسرعة وكفاءة عالية جداً (Real-time data fetching).

التصميم وتجربة المستخدم (UI/UX & Styling):

استخدام أحدث إصدار من Tailwind CSS v4 لبناء واجهة متجاوبة بالكامل. تم تصميم النظام البصري (Design System) بألوان مخصصة تناسب الجيمرز، بالإضافة لتخصيص الـ Scrollbar ومؤشر الماوس (Custom Cursor).

التأثيرات البصرية والحركة (Animations & Interactions):

برمجة حركات مخصصة (Custom CSS Keyframes) وتأثيرات ظهور عند التمرير (AnimateOnScroll) لضمان تفاعل سلس. تصميم كروت ألعاب تفاعلية تستجيب لمرور الماوس (Hover Effects) وتغيير إضاءة الحواف.

إدارة الحالة والأداء (State Management & Optimization):

الاعتماد على React Hooks المتقدمة (useState, useEffect, useMemo) لمعالجة البيانات وفلترتها محلياً (Client-side) بسرعة فائقة، لضمان استجابة لحظية عند البحث أو تغيير التصنيفات بدون أي بطء.