parise coffe

واجهة مستخدم (Landing Page) عصرية وتفاعلية مصممة لمقهى "Paris Café". يهدف المشروع إلى تقديم تجربة بصرية جذابة للعملاء لعرض مميزات المقهى، وقائمة المشروبات والمأكولات بطريقة منظمة، مع التركيز على سهولة الاستخدام وتناسق الألوان والخطوط لتعكس الأجواء الدافئة للمكان.

التقنيات المستخدمة في البناء:

HTML5: لبناء هيكل الصفحة بشكل دلالي (Semantic HTML) لضمان سهولة القراءة وتوافق الكود مع محركات البحث.

CSS3: (عبر ملف style.css المرتبط) لتنسيق العناصر، بناء الشبكات (Grid/Flexbox)، وإضافة التأثيرات الحركية (مثل كلاس reveal لظهور العناصر تدريجياً).

Google Fonts: دمج خطوط (Playfair Display) للعناوين لإعطاء طابع كلاسيكي أنيق، و (Poppins) للنصوص العادية لضمان وضوح القراءة.

FontAwesome: لتضمين أيقونات واضحة وخفيفة الحجم (مثل أيقونات السلة، القهوة، المخبوزات).

كيف يعمل التصميم (هيكلة المشروع):

1. شريط التنقل العلوي (Header & Navigation):

شريط تنقل سلس يحتوي على شعار المقهى وروابط سريعة لأقسام الصفحة (#home, #why-us, #menu, #about).

يتضمن واجهة تفاعلية لسلة المشتريات مزودة بعداد رقمي (cart-badge) يتحدث عند إضافة الطلبات.

مهيأ للعمل على الشاشات الصغيرة (Mobile Responsive) من خلال زر مخصص (mobile-menu-toggle) لفتح وإغلاق القائمة الجانبية.

2. قسم المميزات (Why Us Section):

يعتمد على تصميم شبكي (Grid Layout) لعرض ثلاث ميزات تنافسية للمقهى (القهوة العضوية، خبرة الباريستا، الجو المريح).

كل ميزة موضوعة داخل بطاقة (feature-card) مجهزة بتأثيرات حركية لتلفت انتباه المستخدم أثناء التمرير.

3. قائمة المقهى القابلة للفلترة (Menu Section):

مصممة بنظام "التبويبات" (Tabs) لتصنيف المنتجات إلى (الكل، قهوة ساخنة، قهوة باردة، مخبوزات) باستخدام خاصية data-filter.

كل منتج (menu-item) يحمل خاصية data-category لربطه بالتبويب الخاص به، مما يسهل تفعيل الفلترة الديناميكية باستخدام JavaScript لاحقاً لتصفية المشروبات بدون إعادة تحميل الصفحة.

بطاقة المنتج تحتوي على مكان لصورة افتراضية، اسم المنتج، وصف جذاب للمذاق، السعر، وزر (Add to Cart) لطلب المنتج مباشرة.

4. قسم "من نحن" (About Section):

يعتمد على تخطيط منقسم (Split Layout) لدمج النصوص مع الصور بشكل متوازن، مع استخدام كلاسات مساعدة مثل image-composite-placeholder لترتيب الصور بشكل احترافي.

الهدف من بنية الكود:

الكود مكتوب بأسلوب تركيبي (Modular) يعتمد على فئات (Classes) واضحة ومحددة، مما يجعل هذا القالب جاهزاً للربط مع أي لغة برمجة خلفية أو إطار عمل لتحويله إلى تطبيق ويب متكامل مع قاعدة بيانات ديناميكية إذا لزم الأمر في المستقبل