مياه صحتين

📌 نبذة عن المشروع:

مشروع تطوير صفحة هبوط (Landing Page) عصرية وتفاعلية لعلامة "مياه صحتين" التجارية، تهدف إلى إبراز نقاء المنتج ومميزاته باستخدام تقنيات العرض ثلاثي الأبعاد (3D Web Interaction) لتقديم تجربة مستخدم مستقبلية وتفاعلية تزيد من معدل التحويل (Conversion Rate).

🛠️ الميزات والخصائص التقنية:

عرض ثلاثي الأبعاد تفاعلي (3D Canvas): بناء مجسم واقعي لعبوة المياه باستخدام Three.js مع محاكاة خامات الزجاج والشفافية والانعكاسات والإضاءة بشكل واقعي.

حركة مرتبطة بالتمرير (Scroll-Driven Animations): ربط دوران وحركة وتكبير العبوة الـ 3D بسلاسة أثناء نزول المستخدم في الصفحة باستخدام مكتبة GSAP & ScrollTrigger.

تفاعل مع حركة المؤشر (Mouse Tracking): استجابة المجسم ثلاثي الأبعاد لحركة ماوس المستخدم لزيادة التفاعلية والجاذبية Visual Dynamics.

مؤشر تقدم مبتكر (Water Gauge Indicator): شريط جانبي مبتكر على شكل أنبوب مياه يمتلئ تدريجياً مع تقدم المستخدم في قراءة الصفحة.

تصميم متجاوب بالكامل (Fully Responsive & RTL): دعم كامل للغة العربية والاتجاه من اليمين لليسار، مع استجابة مائة بالمائة لجميع الشاشات والأجهزة الذكية.

تحسين الأداء (Performance Optimization): أداء ناعم بمعدل 60 إطاراً في الثانية (60 FPS) مع معالجة حكيمة لموارد المتصفح للعمل بكفاءة على الأجهزة المتوسطة والضعيفة.

تجربة مستخدم وتدعيم المبيعات (UX & CTA): توزيع ذكي لأزرار الدعوة لاتخاذ إجراء (Call to Action) المربوطة مباشرة برابط واتساب لتسهيل عملية الطلب المباشر.

💻 التقنيات المستخدمة (Tech Stack):

Front-End: HTML5, CSS3 (Modern Flexbox & Grid, CSS Variables)

3D Graphics: JavaScript, Three.js (WebGL, LatheGeometry, MeshPhysicalMaterial)

Animations: GSAP (GreenSock), ScrollTrigger

Typography: Google Fonts (Tajawal & Almarai)