coffee website

مشروع: Cinder Roasting Co. – واجهة موقع إلكتروني سينمائية

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

واجهة هبوط (Landing Page) فاخرة وتفاعلية مصممة لعلامة تجارية متخصصة في تحميص وإعداد القهوة المختصة. اعتمد التصميم على استخدام الخلفيات السينمائية المظلمة (Dark Mode)، والفيديوهات الدقيقة (Macro Videography)، مع الربط التفاعلي بين حركة الصفحة والسرد البصري لعرض تفاصيل ودقة عملية تحضير القهوة.

أبرز المميزات والسرد البصري (Key Features)

سرد بصري تفاعلي (Immersive Storytelling): استعراض مراحل التحضير خطوة بخطوة بالتزامن مع التمرير (الجرعة، مصدر البن، درجة الحرارة، ضغط الإسبريسو، وإيحاءات المذاق).

تصميم عصري وراقٍ (Dark & Cinematic UI): ألوان دافئة ومظلمة تعكس فخامة العلامة التجارية، مع اختيار خطوط تجمع بين العصرية والأصالة (Serif & Sans-serif).

مؤشرات تفاعلية للوقت والتحضير: شريط تحكم وتتبع زمني دقيق للتحضير (PULL 2.1s حتى PULL 24.5s) يعرض بيانات الاستخلاص لحظة بلحظة.

دعوة واضحة لاتخاذ إجراء (Call to Action): أزرار تفاعلية واضحة للطلب الفوري ("Order the Roast") أو الاطلاع على سجل التحميص ("Read the Roast Log").

التقنيات المستخدمة (Technologies Used)

HTML5 | CSS3 / Tailwind CSS | JavaScript (GSAP / ScrollTrigger) | Responsive Design