🌐 نظرة عامة
موقع وكالة رقمية احترافية مبني بـ HTML5 و CSS3 و JavaScript النقي. بيعرض خدمات الوكالة وأعمالها بطريقة عصرية وتفاعلية، ويهدف لبناء الثقة مع العملاء المحتملين.
🎨 التصميم والأسلوب البصري
الثيم داكن أنيق بدرجات الأزرق العميق مع لمسات بنفسجية وحمراء. الخط Segoe UI نظيف وعصري. فيه تدرجات لونية في الـ Hero، Glow بنفسجي خفيف، وبطاقات بظلال ناعمة. الألوان بتعبر عن الثقة (الأزرق)، الإبداع (البنفسجي)، والحيوية (الأحمر).
🛠️ التقنيات المستخدمة
HTML5 للهيكل الدلالي، CSS3 للـ Grid والـ Flexbox والـ Animations، وJavaScript النقي للتفاعلية كاملة بدون أي مكتبات خارجية.
📑 الأقسام الرئيسية
Hero — شعار الوكالة مع عنوان "We Build Digital Success" وزرار CTA.
Services — خدمات رئيسية: Web Development، UI/UX Design، Mobile First، Performance.
Portfolio — مشاريع بارزة: UrbanStore، Horizon Travel، FinTech App.
Stats — أرقام تثبت مصداقية الوكالة: 150+ Project Delivered، 98% Client Satisfaction، 24/7 Support، 15+ Team Members.
Contact — معلومات التواصل (تليفون، إيميل، عنوان) + فورم إرسال رسالة.
⚡ المميزات التفاعلية
Scroll Reveal — الأقسام بتظهر بحركة Fade-in لما تعمل Scroll.
Counter Animation — أرقام الـ Stats بتعدّ من صفر لحد القيمة الحقيقية لما تظهر على الشاشة.
Service Cards Hover — لما تحط الماوس على أي كارت خدمة، بيظهر خط متدرج من تحت والأيقونة بتكبر وتلف شوية.
Portfolio Overlay — لما تعمل hover على أي مشروع، بيظهر overlay داكن مع نص "View Project".
Navbar Scroll — الـ Navbar بيصغر شوية وبياخد ظل لما تعمل Scroll.
Mobile Menu — قائمة همبرجر للشاشات الصغيرة بتتفتح وتتقفل بسلاسة.
Smooth Scroll — كل الروابط الداخلية بتتحرك بسلاسة للقسم المطلوب.
Back to Top — زرار بيظهر لما تنزل شوية وبيوديك لأول الصفحة.
Scroll Progress Bar — شريط رفيع فوق الصفحة بيملى معاك لما تعمل Scroll.
Form Success — لما تبعت الرسالة من الفورم، بيختفي الفورم وبيظهر رسالة تأكيد النجاح.
Auto Year — السنة في الفوتر بتتغير أوتوماتيك كل سنة.
📱 التوافقية
Responsive Design شغال على Desktop و Tablet و Mobile. Mobile Menu منسدلة سهلة الاستخدام. كل الأزرار والروابط مُحسّنة للشاشات اللمسية.
🚀 الأداء
Zero Dependencies — كل التفاعلية مبنية بـ Vanilla JS من غير أي مكتبات خارجية. CSS Variables سهلة التخصيص من مكان واحد. Clean Code منظم وقابل للصيانة.