Demo Bankist Website

الفكرة العامة:

هو موقع "واجهة عرض" (Landing Page) أنيق، تم تصميمه لتسويق تطبيق Bankist.

الهدف منه هو جذب الزائر، شرح المميزات، ودفعه للتسجيل أو تحميل التطبيق.

أهم الأقسام في هذا الموقع:

1. قسم الترحيب (Hero Section)

يحتوي على عنوان كبير جذاب (e.g. “When banking meets minimalist”)

زر "Open your free account" يدفع الزائر مباشرة إلى القسم التالي

صورة لواجهة التطبيق على هاتف محمول

2. قسم الميزات (Features Section)

عرض الميزات واحدة تلو الأخرى باستخدام رسوم بسيطة ونصوص واضحة

يستخدم أيقونات (SVG) وصور توضيحية مثل:

Instant Transfers

Instant Loans

Instant Closing

3. ️ قسم السلايدر (Slider Section)

يُعرف أيضًا باسم Slides أو Testimonials

يحتوي على سلايدر تفاعلي يمكن التنقل فيه بين عدة بطاقات

كل بطاقة تمثل ميزة أو رأي مستخدم (Testimonial)

يحتوي على نقاط تنقل (dots) و أزرار ← → لتبديل الشرائح

مبني باستخدام JavaScript (DOM manipulation + event listeners)

4. مميزات تقنيّة:

استخدام IntersectionObserver لعمل Scroll Effects (Reveal Sections)

تأثيرات تحريك عند تمرير الصفحة (fade in / translate)

Lazy Loading للصور

Navigation يعمل بسلاسة (smooth scroll) عند النقر على روابط القائمة

تغيير شكل الـ nav عند التمرير للأسفل (Sticky Navigation)

واجهة متجاوبة 100% (Responsive Design)

كود نظيف ومنظم باستخدام JavaScript ES6