🌟 مقدمة تحفيزية:
“أهلاً بك يا بطل في مسك ختام المستوى المتوسط! اليوم لن نبني جزءاً صغيراً ، بل سنبني ‘واجهة النجاح’. صفحة الهبوط هي الصفحة التي تستقبل زوار ‘أكاديمية قياوي’، وهي التي تحكي قصتنا وتقنع الطلاب بالانضمام إلينا.

اليوم، ستتحول من متعلم للأكواد إلى مهندس واجهات . سنصمم معاً صفحة تحتوي على عنوان جذاب، وصف مقنع، وصورة احترافية ، وأزرار تدفع الزائر للبدء فوراً !”

🏗️ 1. الهيكل الأساسي (HTML)
سنقسم الصفحة إلى قسمين رئيسيين (نص وصورة) باستخدام نظام Flexbox .

انسخ الكود التالي في ملف HTML :

<section class="hero-section">
    <div class="hero-content">
        <h1>ابدأ رحلتك في عالم البرمجة مع <span class="highlight">أكاديمية قياوي</span></h1>
        <p>نحن لا نعلّمك البرمجة فقط، بل نعلّمك كيف تفكر كمبرمج محترف لتبني مستقبلك الرقمي.</p>
        <div class="hero-buttons">
            <a href="#" class="btn-main">ابدأ التعلم الآن</a>
            <a href="#" class="btn-secondary">اكتشف المسارات</a>
        </div>
    </div>
    <div class="hero-image">
        <img src="programming-image.jpg" alt="تعلم البرمجة">
    </div>
</section>

🎨 2. لمسة الإبداع (CSS)
هنا سنعطي الصفحة بريقها الاحترافي ونجعلها مريحة للعين.

انسخ الكود التالي في ملف CSS :

.hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 10% ;
    background-color: #f4f7f6; /* لون خلفية هادئ */
    min-height: 80vh;
}

.hero-content {
    flex: 1;
    padding-left: 50px;
}

.hero-content h1 {
    font-size: 3rem;
    color: #2c3e50;
    line-height: 1.2;
}

.highlight {
    color: #e67e22; /* لون برتقالي لتمييز اسم الأكاديمية */
}

.hero-content p {
    font-size: 1.2rem;
    color: #7f8c8d;
    margin: 20px 0;
}

.hero-buttons .btn-main {
    background-color: #e67e22;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    transition: 0.3s;
}

.btn-main:hover {
    background-color: #d35400;
    transform: translateY(-5px); /* حركة خفيفة للأعلى عند التمرير */
}

.hero-image flex: 1; {
    text-align: center;
}

.hero-image img {
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

💡 لماذا هذا الدرس هو الأهم في المستوى المتوسط؟
الدمج الشامل : يطبق الطالب هنا التنسيق ، الخطوط، الصور ، والأزرار التفاعلية في مشروع واحد .

الاحترافية : يتعلم الطالب أهمية “المساحات البيضاء” (White Space) وكيف تجعل الموقع يبدو أغلى وأكثر ثقة .

التأثير : بانتهاء هذا الدرس، يملك الطالب أول مشروع “حقيقي” يمكنه عرضه في معرض أعماله .

🎯 تحدي التخرج:
“يا بطل ، حان وقت بصمتك الخاصة ! قم بتغيير النصوص لتناسب قسم ‘الاستشارات القانونية’ في موقعك ، وغير الألوان لتناسب الهوية القانونية (مثلاً الذهبي والأسود) . هل يمكنك إضافة ‘تأثير حركة’ للصور أيضاً ؟”

ما هي صفحة الهبوط؟

Landing Page

هي صفحة مصممة خصيصاً لجذب الزائر وإقناعه باتخاذ إجراء .

Landing Page

Une landing page (ou page d’atterrissage) est une page web autonome conçue pour convertir les visiteurs en prospects ou clients. Elle sert généralement à capter des informations, encourager un achat, ou inciter à une action spécifique après un clic sur une publicité ou un lien promotionnel.

Faits clés

• Objectif principal : Conversion (achat, inscription, téléchargement, etc.)
• Composants typiques : Titre, texte persuasif, image/vidéo, formulaire, appel à l’action
• Origine du trafic : Campagnes publicitaires, e-mails marketing, réseaux sociaux
• Indicateur clé : Taux de conversion

Fonctionnement et structure

Une landing page est construite autour d’un appel à l’action clair (CTA). Son contenu est limité à un message ou une offre unique pour éviter les distractions. Elle s’appuie sur des éléments visuels attrayants, une preuve sociale (témoignages, logos clients) et une promesse de valeur immédiate. L’efficacité se mesure par le pourcentage de visiteurs réalisant l’action souhaitée.

Types de landing pages

Deux formats dominent :

• Page de génération de leads : contient un formulaire pour recueillir des contacts ou inscriptions.
• Page de clic (click-through) : prépare l’utilisateur avant de le rediriger vers une offre d’achat ou une page produit.
  Certaines variantes intègrent des vidéos, des comptes à rebours ou des offres limitées pour stimuler la conversion.

Optimisation et test

L’optimisation de conversion repose sur des tests A/B : on compare différentes versions (titres, couleurs de boutons, images) pour identifier celle qui maximise les résultats. L’analyse de la performance (taux de rebond, durée de session, conversions) permet d’affiner le design et le message.

Importance en marketing digital

Outil central des campagnes de publicité en ligne, la landing page relie le message promotionnel à une action mesurable. En réduisant les frictions et en ciblant un besoin précis, elle améliore le retour sur investissement (ROI) des canaux payants comme Google Ads ou Meta Ads .

🟢 الخطوة 1 : إنشاء الهيكل في HTML
افتح ملف index.html وضع هذا الكود داخل <body> :

<section class="hero">

<h1>تعلم البرمجة بسهولة</h1>

<p>دورات مبسطة لتعلم HTML و CSS من الصفر</p>

<button>ابدأ التعلم الآن</button>

</section>

🟢 الخطوة 2 : تصميم الصفحة بالألوان
أضف هذا الكود داخل <style> :

.hero{

height:90vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:#f4f6fb;

text-align:center;

}

.hero h1{

font-size:40px;

color:#2c7be5;

}

.hero p{

font-size:18px;

color:#333;

margin:10px;

}

.hero button{

background:#2c7be5;

color:white;

border:none;

padding:15px 25px;

font-size:18px;

border-radius:5px;

cursor:pointer;

}

🟢 إضافة تأثير Hover للزر :

.hero button:hover{

background:#1a5edb;

}

الزر سيصبح أغمق عند مرور الماوس .

🟢 النتيجة
ستحصل على:  ✔ عنوان كبير في الوسط  ، ✔ وصف واضح  ،  ✔ زر جذاب  ، ✔ تصميم بسيط واحترافي  .

🧠 عناصر صفحة هبوط ناجحة  :

اللهمَّ صلِّ على محمَّد وعلى آل محمَّد، كما صليتَ على إبراهيم وعلى آل إبراهيم؛ إنَّك حميدٌ مجيد. اللهمَّ بارِك على محمَّد وعلى آل محمَّد، كما باركتَ على إبراهيم وعلى آل إبراهيم؛ إنَّك حميدٌ مجيد.