من البرومبت إلى صفحة الهبوط
ابنِ قسم الهيرو الأول لك
قسم الهيرو (Hero) هو أهم جزء في صفحة هبوط معرض الأعمال — فهو أول ما يراه الزوار. في هذا الدرس ستنشئ قسم هيرو احترافياً يجذب الانتباه ويحفّز الزوار على معرفة المزيد عنك.
ستبدأ بـ HTML بسيط ثم تضيف التنسيق باستخدام Tailwind CSS لإنشاء هيرو عصري بخلفية متدرجة، مع عنوان رئيسي جذاب وعنوان فرعي وزر دعوة لاتخاذ إجراء (CTA). هذا هو الأساس لكل موقع معرض أعمال ناجح.
التعليمات
أضف div حاوية للهيرو مع min-h-screen وخلفية متدرجة (من from-purple-900 إلى gray-900) وتوسيط باستخدام flex
تلميح: استخدم: `<div class="min-h-screen bg-gradient-to-br from-purple-900 via-gray-900 to-gray-900 flex items-center justify-center px-4">` — هذا ينشئ قسماً بارتفاع الشاشة كاملة مع التدرج اللوني
داخل الهيرو، أضف عنواناً رئيسياً h1 باسمك وفقرة p فرعية بمسمّاك الوظيفي
أضف فقرة وصفية (وسم p) بجملة تعريفية عمّا تفعله (بحد أقصى 300 حرف)
أضف زر CTA بتنسيق متدرج وتأثيرات عند التمرير (hover)
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أضف div حاوية للهيرو مع min-h-screen وخلفية متدرجة (من from-purple-900 إلى gray-900) وتوسيط باستخدام flex