موقع شركة سياحية

🌐 نظرة عامة

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

🎨 التصميم والأسلوب البصري

الثيم فاتح ومنعش بدرجات الأزرق السماوي والأبيض النقي. الخط Segoe UI بسيط وعصري. فيه خلفية Hero بصورة سفر immersive مع overlay أزرق شفاف. البطاقات بزوايا دائرية ناعمة وظلال خفيفة. الألوان بتعبر على الاسترخاء (الأزرق) والطاقة (الأصفر/البرتقالي).

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

HTML5 للهيكل الدلالي. CSS3 للـ Grid والـ Flexbox والـ Animations والـ Backdrop Filter. JavaScript النقي للتفاعلية كاملة بدون أي مكتبات خارجية.

📑 الأقسام الرئيسية

Hero — عنوان "Explore Beyond Limits" مع وصف مختصر وزرار "Discover Now" بيودي لقسم الوجهات.

Destinations — وجهات سفر بارزة: Paris, Maldives, Istanbul, Dubai, Thailand, Egypt. كل وجهة بصورة، وصف، سعر، سعر قديم مشطوب، Badge (Popular, Hot Deal, Trending...)، وزرار "Book Now".

Offers — عروض حصرية: Flight + Hotel (Save 30%), Free Night, Early Bird (20% off), Family Pack.

About — نبذة عن الشركة منذ 2014 مع إحصائيات: 28K+ Travelers، 110+ Countries، 98% Satisfaction.

Footer — حقوق النشر مع رابط رجوع للبورتفوليو.

⚡ المميزات التفاعلية

Scroll Reveal — الأقسام والبطاقات بتظهر بحركة Fade-in من تحت لما تعمل Scroll.

Counter Animation — أرقام الـ Stats بتعدّ من صفر لحد القيمة الحقيقية لما تظهر على الشاشة.

Card Hover Effects — لما تحط الماوس على أي بطاقة وجهة، الصورة بتكبر شوية، overlay داكن بيظهر، والـ Badge بيطلع من فوق.

Price Tags — ظهور سعر قديم مشطوب جنب السعر الحقيقي عشان يبان الخصم.

Book Now Button — زرار "Book Now" بيظهر لما تعمل hover على الكارت، ولما تدوس عليه بيظهر Toast Notification بتأكيد الحجز.

Navbar Scroll — الـ Navbar بيصغر وبياخد ظل أقوى لما تعمل Scroll.

Mobile Menu — قائمة همبرجر للشاشات الصغيرة.

Smooth Scroll — كل الروابط الداخلية بتتحرك بسلاسة.

Back to Top — زرار ثابت بيوديك لأول الصفحة.

Scroll Progress Bar — شريط متدرج فوق الصفحة بيملى معاك.

Toast Notification — إشعار خفيف بيظهر لما تدوس "Book Now".

Auto Year — السنة في الفوتر بتتغير أوتوماتيك.

📱 التوافقية

Responsive Design شغال على Desktop و Tablet و Mobile. Mobile Menu منسدلة سهلة. كل الأزرار والروابط مُحسّنة للشاشات اللمسية.

🚀 الأداء

Zero Dependencies — كل التفاعلية مبنية بـ Vanilla JS. CSS Variables سهلة التخصيص. Clean Code منظم وقابل للصيانة.