Landing page

Landing Page (Demo)احترافية تم تطويرها باستخدام Bootstrap 5 مع دمج تأثيرات تفاعلية وانسيابية عبر JavaScript وCSS.

تم تنفيذ المشروع بواجهة نظيفة وسريعة الاستجابة (Responsive) على جميع الأجهزة باستخدام نظام الشبكات المدمج في Bootstrap، مع تنظيم المحتوى داخل أقسام واضحة ومترابطة.

مواصفات المشروع:

الهيكل العام:

الصفحة تتكوّن من أقسام أساسية:

Hero section – About – Features/Services – Testimonials – Contact – Footer.

تصميم متجاوب بالكامل (Responsive)

باستخدام Bootstrap 5، لضمان ظهور مريح على الهواتف، التابلت، وأجهزة سطح المكتب.

أنيميشن عند الظهور (On Scroll Animation):

تم استخدام JavaScript مع IntersectionObserver لإضافة كلاس مخصص للعناصر عند دخولها في نطاق الرؤية، مما يفعّل تأثيرات حركية ناعمة مثل:

Fade In

تحسين تجربة المستخدم (UX):

تم ضبط التفاعل عند تمرير الصفحة بشكل سلس باستخدام CSS Transitions وJavaScript بسيط لتفعيل الكلاسات.

مؤثرات Hover مخصصة:

البطاقات والعناصر التفاعلية تحتوي على تأثير عند المرور عليها (Hover) باستخدام CSS وJavaScript.

نموذج تواصل (Contact Form):

تم تصميم نموذج تواصل بسيط بدون باك إند حالياً، لكن قابل للتوصيل بـ PHP أو أي API لاحقًا.

تنظيم الكود:

تم كتابة الكود بطريقة منظمة وسهلة التعديل، باستخدام أقسام وتعليقات واضحة داخل ملفات HTML – CSS – JavaScript.

النشر:

تم نشر المشروع على Netlify ويمكن عرضه مباشرة عبر الرابط:

https://landing-page-thre...

ملاحظة :

يمكن تحويل الصفحة لاحقًا إلى نظام ديناميكي باستخدام PHP أو دمجها في لوحة تحكم (Admin Panel) عند الطلب.