landing page for honey foods

هذا الموقع ليس مجرد صفحة هبوط عادية، بل هو تجربة بصرية غامرة تم تصميمها لتنقل إحساس الطبيعة والجودة العالية. تم الاعتماد بشكل كلي على البرمجة الصرفة (Vanilla JS) لضمان أعلى مستويات الأداء والتحكم الكامل في الحركة.

✨ الميزات التصميمية والتقنية

تجربة المستخدم (UX/UI):

تصميم يعتمد على الألوان الدافئة (تدرجات الذهبي والأبيض الكريمي) لتعزيز هوية المنتج الطبيعية.

استخدام Typography (خطوط) عصرية توازن بين الفخامة والبساطة.

الأنميشن العصري (Vanilla JS):

تأثير التمرير الذكي (Scroll Revel): تظهر العناصر (صور برطمانات العسل، الفوائد، الأسعار) بانسيابية مذهلة أثناء التمرير لأسفل باستخدام Intersection Observer API.

تأثير البارالاكس (Parallax Effect): جزيئات صغيرة من "شمع العسل" تتحرك في الخلفية بسرعات مختلفة عن المحتوى، مما يعطي عمقاً بصرياً (3D Feel).

تفاعل العناصر (Hover Effects): أزرار "اطلب الآن" تتفاعل بلمسات ناعمة مع حركة الماوس، مع تحريك قطرات عسل رقمية تم إنشاؤها برمجياً.

الأداء والسرعة:

صفر مكتبات خارجية: تم بناء كل الأنميشن من الصفر دون الاعتماد على jQuery أو GSAP، مما جعل حجم الصفحة صغيراً جداً وسرعة التحميل فائقة.

تصميم متجاوب بالكامل: الأنميشن يتكيف بذكاء مع شاشات الجوال لضمان تجربة سلسة دون استهلاك موارد الجهاز.

?️ الأدوات المستخدمة

HTML5 & CSS3: لبناء الهيكل وتنسيق الشبكة (Grid & Flexbox).

Vanilla JavaScript: للتحكم في المنطق البرمجي، التحقق من المدخلات، وصناعة الحركات المعقدة.

SVG Animations: لتحريك أيقونات النحل والزهور بوضوح عالٍ.

? الهدف من المشروع

تحويل الزائر إلى عميل من خلال سرد بصري يبدأ من "الخلية" وينتهي بـ "سلة المشتريات"، مع التركيز على أن تكون الحركة خادمة للمحتوى وليست مجرد زينة.

"البساطة هي قمة التعقيد، وهذا ما يجسده استخدام Vanilla JS في هذا المشروع؛ أداء خام بلمسة عصرية."