صفحة هبوط احترافية باستخدام Html&CSS

عنوان المشروع

تصميم وبرمجة صفحة هبوط (Landing Page) احترافية بـ HTML / CSS (ويمكن إضافة Vanilla JS خفيف عند الحاجة)

نبذة عن المشروع (الهدف)

أريد صفحة هبوط احترافية، نظيفة وسريعة التحميل، مشابهة لتصميم مرجعي سأرفقه، ولكن تُعرض بصورة المنتج التي سأزوّدها (نانو بانانا). الصفحة ستكون واجهة ترويجية لمنتج/عرض—تركّز على الـ hero image، عنوان جذاب، دعوة لاتخاذ إجراء (CTA)، وشريط تنقّل علوي بسيط.

متطلبات المشروع (تفصيلية)

تقنيات: HTML5, CSS3 (Prefer: CSS Grid & Flexbox). JavaScript خفيف فقط للـ interactions إن لزم (مثلاً Nav toggle أو slider صغير).

تصميم مطابق للمرجع: نفس التوزيع العام (nav شفاف/مظلل، هيرو fullscreen أو شبه fullscreen، عنوان كبير، CTA، مقتطف نصي، أيقونات تواصل/عربة).

استخدام الصورة المرفوعة كصورة رئيسية (hero) مع معالجة بسيطة إن لزم (cropping، object-fit).

استجابة كاملة (Responsive): تصميم متجاوب على شاشات Desktop / Tablet / Mobile. نقاط توقف (breakpoints) مناسبة.

توافق متصفّحات: Chrome, Firefox, Edge, Safari (إصدارات حديثة).

أداء وسرعة: CSS مُظبط لتقليل إعادة التدفق، صور مضغوطة (أحجام WebP/AVIF إن أمكن)، lazy-loading للصور.

قابلية التعديل: كود منظم ومقروء مع تعليقات. استخدام أسماء أصناف واضحة (BEM أو نمط مشابه).

الوصولية الأساسية (a11y): عناصر قابلة للقراءة (contrast مناسب)، استخدام عناصر semantic (header, nav, main, footer)، عناوين H1..Hn، alt للصور، تركيز للـ keyboard.

خطوط وأيقونات: استخدم Google Fonts أو خطوط مرفقة. أيقونات (SVG أو Font Awesome) خفيفة.

عدم الاعتماد على أطر عمل مطوّلة (Bootstrap إلخ) إلا إذا طلبتِ صراحة.

التسليمات المتوقعة

مجلد المشروع يحتوي على:

index.html

css/style.css (أو ملفات منفصلة حسب التنظيم)

js/main.js (إن وُجد)

مجلد assets/ يحتوي الصور المستخدمة (بمنصّات WebP/AVIF إن أمكن) وSVGs

نسخة جاهزة للفتح محلياً (works offline).

ملف تعليمات قصير يشرح كيفية استبدال الصورة أو تعديل النص (README.md).

(اختياري) نسخة مُصغّرة (minified) للـ CSS/JS إن رغبتِ.

معاينة على بيئة استضافة بسيطة (مثلاً GitHub Pages) — لو حابّة المطوّر يرفعها.

متطلبات من العميل (ما يجب أن توفّريه للمُنَفّذ)

الصورة/الصور الأصلية (أنت رفعتِ صورة نانو بانانا — ممتاز).

أي شعارات/لوغو بصيغة SVG أو PNG عالية الجودة.

نصوص الـ headline، CTA، وصف موجز.

ألوان مفضّلة أو دليل ألوان إن وُجد.

أمثلة/مراجع إضافية إن رغبتِ.

معايير قبول العمل (Definition of Done)

الصفحة تعمل محلياً بدون أخطاء.

تظهر وتعمل بشكل جيد على الشاشات: Desktop (≥ 1366px), Tablet (~768–1024px), Mobile (≤ 480–420px).

سرعة تحميل معقولة (صور مضغوطة، لا موارد كبيرة غير ضرورية).

الكود نظيف ومعلّق ويوضّح أين يتم تغيير النص/الصورة.

لا أخطاء في Console بالمتصفحات المذكورة.

التصميم مطابق للمرجع من حيث التوزيع والأولوية البصرية، مع تعديلات بسيطة لتناسب الصورة.

وقت التنفيذ المقترح

تصميم وبرمجة صفحة واحدة متجاوبة: 2–5 أيام عمل (حسب تعدد التعديلات والمتطلبات الإضافية).