Clarity - Digital Solutions Platform

مشروع "Clarity" - واجهة ويب لشركة خدمات رقمية وتقنية

هذا العمل عبارة عن واجهة أمامية (Frontend) لصفحة هبوط (Landing Page) حديثة واحترافية، مصممة خصيصاً لشركة تقنية تقدم حلولاً برمجية وخدمات رقمية متكاملة. يتميز المشروع بتصميم عصري (Clean UI)، وتجربة مستخدم سلسة (Smooth UX)، واستجابة كاملة لجميع الشاشات (Fully Responsive).

أهم أقسام ومميزات المشروع:

قائمة تنقل متقدمة (Mega Menu Navbar): شريط علوي يثبت عند التمرير، يحتوي على قائمة منسدلة متطورة (Mega Menu) تعرض خدمات الشركة مقسمة إلى فئات (تطوير، بنية تحتية وذكاء اصطناعي، تسويق) بشكل منظم داخل كروت جذابة مع أيقونة سهم تفاعلية.

قسم التقنيات (Technology Stack): يعرض التقنيات التي تستخدمها الشركة باستخدام تبويبات (Tabs) ديناميكية. كل تقنية معروضة داخل كارت تفاعلي يبرز ويرتفع عند التمرير (Hover Effect)، مع قابلية التمرير الأفقي (Horizontal Scroll) للتبويبات على شاشات الهواتف.

سلايدر تقييمات العملاء (Testimonials Carousel): عرض تفاعلي لآراء العملاء يحتوي على تقييمات بالنجوم، علامات توثيق (Verified)، وإحصائيات بارزة لنجاح المشاريع. السلايدر مزود بأزرار تحكم سفلية (Dots) مخصصة بالكامل تتمدد بسلاسة وتتغير ألوانها عند التفاعل معها.

قسم الأسئلة الشائعة (FAQ): يعتمد على قائمة تفاعلية (Accordion) بتصميم مخصص، حيث تفتح وتغلق الإجابات بنعومة مع أيقونة سهم دائرية مخصصة تدور عند الفتح، مع تغيير طفيف في لون الخلفية وإضافة إطار عند تمرير الماوس (Hover).

قسم التواصل (Contact Us): كارت مركزي متصل ينقسم لجزأين؛ الجزء الأول نموذج اتصال (Form) احترافي يضم حقول إدخال ناعمة وأزرار اختيار للميزانية مصممة ككروت تفاعلية (Hidden Radio Buttons). الجزء الثاني يعرض مميزات الشركة (Why Choose Us) ومعلومات الاتصال المباشر على خلفية برتقالية جذابة تعكس الهوية البصرية.

تذييل الصفحة (Footer): تصميم بسيط ونظيف (Minimalist) يحتوي على شعار الشركة، أزرار لحسابات التواصل الاجتماعي بتأثيرات حركية عند التمرير، وحقوق النشر.

التقنيات المستخدمة:

HTML5: لبناء هيكل تنظيمي واضح ودلالي.

CSS3: لتخصيص التصميم، ضبط الألوان (بناءً على تدرجات البرتقالي والكحلي)، إضافة حركات انتقال ناعمة (Transitions)، وإضافة ظلال (Shadows) تعطي عمقاً للتصميم.

Bootstrap 5: لبناء شبكة متجاوبة (Grid System) تضمن عمل الموقع بكفاءة على الموبايل والتابلت والديسكتوب، بالإضافة لاستخدام وتطويع المكونات التفاعلية مثل (Navbar, Carousel, Accordion).

FontAwesome: لتضمين أيقونات احترافية وعالية الجودة.

الهدف من العمل:

تقديم واجهة تعكس الثقة، الحداثة، والاحترافية، وتسهل على زوار الموقع استكشاف الخدمات والتواصل مع الشركة بأفضل تجربة بصرية ممكنة تعزز من معدلات التحويل (Conversion Rates).