BrewMate – Smart Coffee Maker Landing Page

BrewMate مشروع شخصي على صعيد الواجهة الأمامية — صفحة هبوط لمنتج تخيّلي لماكينة قهوة ذكية. كان الهدف من هذا المشروع تطبيق مبادئ التصميم الواقعي وبناء واجهات متجاوبة باحترافية تُحاكي المواقع التجارية الفعلية.

أقسام الصفحة

القسم الرئيسي — عنوان رئيسي بارز، ووصف للمنتج، وزرّا دعوة إلى الإجراء، إلى جانب صورة للمنتج

قسم المميزات المتميزة — ثلاث بطاقات تعرض مميزات: التخمير التلقائي، والتحكم في درجة الحرارة، والاتصال بالتطبيق

قسم التسعير — بطاقة تسعير واحدة واضحة تتضمن شارة خصم، وقائمة بالمميزات، وزرّ دعوة إلى الإجراء

التذييل — روابط منظّمة تشمل أعمدة المنتج والشركة والقانونية

ما تعلّمته وطبّقته

كان هذا المشروع تمريناً عملياً على التصميم المتجاوب، وتحقيق تخطيطات تتكيّف بسلاسة مع مختلف أحجام الشاشات. كما عمّقت من خلاله فهمي لتركيب واجهات المستخدم، وأنظمة المسافات والألوان، وبناء مكوّنات متّسقة باستخدام React وTailwind CSS.

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

مبني بالكامل على الواجهة الأمامية باستخدام React وTailwind CSS، وقد صُمِّم من الصفر بمساعدة أدوات الذكاء الاصطناعي في استكشاف الخيارات التصميمية.

ملاحظة

يُعدّ هذا المشروع جزءاً من سلسلة صفحات هبوط أنجزتها لصقل مهاراتي في تصميم واجهات المستخدم وتطوير الواجهة الأمامية.