ONO — Drop Culture E-Commerce Landing Page

صفحة هبوط متطورة لمتجر إلكتروني لبراند ملابس عصري، تعتمد على الهوية البصرية بنمط Cyberpunk / Neon مع تجربة مستخدم ديناميكية وتفاعلية بالكامل.

A sleek, highly interactive e-commerce landing page tailored for a modern streetwear clothing brand. Built with a vibrant Cyberpunk / Neon aesthetic and an optimized user experience.

✨ الميزات الأساسية | Key Features

تصميم سيبربانك احترافي (Cyberpunk Visuals): واجهة مستخدم مظلمة مع لمسات نيون جذابة (--neon, --neon2, --neon3) وتأثيرات بصرية حركية دقيقة تناسب أحدث صيحات الويب.

عرض ديناميكي للمنتجات (Dynamic Product Catalog): نظام عرض مرن للمنتجات يعتمد على مصفوفة بيانات في الجافا سكريبت، مما يسهل عملية التحديث والتعديل.

سلة مشتريات تفاعلية فمرنة (Interactive Shopping Cart Drawer): سلة جانبية منزلقة (Drawer) تضيف وتزيل المنتجات، وتحدث الأسعار، والعدد الإجمالي تلقائياً وبشكل فوري دون الحاجة لإعادة تحميل الصفحة.

فلاتر ذكية وتصنيف فوري (Smart Categories Filtering): ميزة فرز وتصفية المنتجات (Classic, Graphic, Oversized, Limited) لتسهيل التصفح على العميل.

مؤثرات بصرية متطورة (Advanced UI/UX FX):

مؤشر ماوس مخصص ومتحرك (Custom Animated Cursor & Ring).

شريط قطار متحرك للنصوص (Infinite Text Marquee / Ticker).

تأثيرات حركية عند التمرير (Scroll Reveal Animations).

شريط علوي يوضح تقدم القراءة/التصفح (Scroll Progress Bar).

متوافق مع الصور الحقيقية (Real Product Images Integration): تم إعداد الكود ليقرأ ويعرض صور المنتجات الحقيقية بدقة عالية وبأبعاد متناسقة باستخدام خاصية object-fit: cover.

🛠️ التقنيات المستخدمة | Tech Stack

HTML5: بناء هيكل الصفحة بشكل دلالي (Semantic HTML).

CSS3: التنسيق الكامل، المتغيرات (CSS Variables)، الأنيميشن الـ Keyframes والتأثيرات النيون.

Pure JavaScript (ES6+): معالجة منطق السلة، الفلترة، تحديث واجهة المستخدم (DOM Manipulation)، والـ Intersection Observer لتأثيرات الظهور.

Google Fonts: استخدام خط "القاهرة" (Cairo) و "Black Ops One" لدمج الهوية الشرقية مع النمط الرقمي الحديث.