إطار Tailwind CSS

بناء صفحة هبوط كاملة

30 دقيقة الدرس 34 من 35

بناء صفحة هبوط كاملة

في هذا الدرس الشامل، سنبني صفحة هبوط كاملة وجاهزة للإنتاج من الصفر باستخدام Tailwind CSS. يدمج هذا المشروع الواقعي جميع المفاهيم التي غطيناها: التصميم المستجيب والمكونات وإمكانية الوصول وميزات CSS الحديثة.

ما سنبنيه

صفحة هبوط حديثة لـ SaaS تتضمن:

  • تنقل مستجيب مع قائمة الجوال
  • قسم البطل مع دعوة لاتخاذ إجراء
  • شبكة الميزات مع الأيقونات
  • شهادات الإثبات الاجتماعي
  • جدول مقارنة الأسعار
  • قسم CTA النهائي
  • تذييل بأعمدة متعددة
  • دعم الوضع الداكن
  • إمكانية الوصول الكاملة

إعداد المشروع

قالب HTML الأساسي

<!DOCTYPE html>
<html lang="ar" class="scroll-smooth" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="حوّل سير عملك باستخدام منصة SaaS القوية الخاصة بنا">
  <title>ProductFlow - إدارة سير العمل أصبحت سهلة</title>

  <!-- Tailwind CSS CDN (استخدم عملية البناء في الإنتاج) -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- تكوين Tailwind -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            brand: {
              50: '#eff6ff',
              500: '#3b82f6',
              600: '#2563eb',
              700: '#1d4ed8',
            }
          }
        }
      }
    }
  </script>

  <!-- أنماط مخصصة -->
  <style>
    @layer utilities {
      .text-balance {
        text-wrap: balance;
      }
    }
  </style>
</head>
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <!-- محتوى الصفحة يذهب هنا -->
</body>
</html>

رأس التنقل

شريط تنقل ثابت مع الشعار وعناصر القائمة وزر CTA يعمل على جميع أحجام الشاشات.

تنقل مستجيب

<nav class="
  fixed top-0 left-0 right-0 z-50
  bg-white/80 dark:bg-gray-900/80
  backdrop-blur-md
  border-b border-gray-200 dark:border-gray-800
">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- الشعار -->
      <div class="flex-shrink-0">
        <a href="#" class="flex items-center gap-2">
          <div class="w-8 h-8 bg-gradient-to-br from-brand-500 to-brand-700 rounded-lg"></div>
          <span class="text-xl font-bold">ProductFlow</span>
        </a>
      </div>

      <!-- تنقل سطح المكتب -->
      <div class="hidden md:flex items-center gap-8">
        <a href="#features" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
          الميزات
        </a>
        <a href="#pricing" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
          الأسعار
        </a>
        <a href="#testimonials" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
          الشهادات
        </a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
          حول
        </a>
      </div>

      <!-- أزرار CTA -->
      <div class="hidden md:flex items-center gap-4">
        <button
          onclick="document.documentElement.classList.toggle('dark')"
          class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          aria-label="تبديل الوضع الداكن"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
          </svg>
        </button>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
          تسجيل الدخول
        </a>
        <a href="#" class="
          px-4 py-2
          bg-brand-600 text-white
          rounded-lg font-medium
          hover:bg-brand-700
          transition-colors
        ">
          ابدأ الآن
        </a>
      </div>

      <!-- زر قائمة الجوال -->
      <button
        onclick="document.getElementById('mobile-menu').classList.toggle('hidden')"
        class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
        aria-label="تبديل القائمة"
      >
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>

  <!-- قائمة الجوال -->
  <div id="mobile-menu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800">
    <div class="px-4 py-4 space-y-3">
      <a href="#features" class="block px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">الميزات</a>
      <a href="#pricing" class="block px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">الأسعار</a>
      <a href="#testimonials" class="block px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">الشهادات</a>
      <a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">حول</a>
      <div class="pt-3 border-t border-gray-200 dark:border-gray-800 space-y-2">
        <a href="#" class="block px-3 py-2 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">تسجيل الدخول</a>
        <a href="#" class="block px-3 py-2 text-center bg-brand-600 text-white rounded-lg hover:bg-brand-700">ابدأ الآن</a>
      </div>
    </div>
  </div>
</nav>

قسم البطل

قسم بطل ملفت للنظر مع العنوان والوصف وأزرار CTA والعنصر المرئي.

البطل مع خلفية متدرجة

<section class="
  relative
  pt-24 pb-16
  sm:pt-32 sm:pb-24
  lg:pt-40 lg:pb-32
  overflow-hidden
">
  <!-- التدرجات الخلفية -->
  <div class="absolute inset-0 bg-gradient-to-br from-brand-50 to-blue-50 dark:from-gray-900 dark:to-gray-800"></div>
  <div class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-96 h-96 bg-brand-500/20 rounded-full blur-3xl"></div>
  <div class="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/2 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl"></div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-4xl mx-auto">
      <!-- الشارة -->
      <div class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full mb-6">
        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
        <span class="text-sm font-medium">الآن مع رؤى مدعومة بالذكاء الاصطناعي</span>
      </div>

      <!-- العنوان الرئيسي -->
      <h1 class="
        text-4xl sm:text-5xl lg:text-6xl
        font-bold
        text-balance
        mb-6
        bg-gradient-to-r from-gray-900 to-gray-700
        dark:from-white dark:to-gray-300
        bg-clip-text text-transparent
      ">
        حوّل سير عملك بالأتمتة الذكية
      </h1>

      <!-- الوصف -->
      <p class="
        text-lg sm:text-xl
        text-gray-600 dark:text-gray-300
        text-balance
        mb-8
        max-w-2xl mx-auto
      ">
        قم بتبسيط إنتاجية فريقك بمنصتنا الشاملة. وفر الوقت، وقلل الأخطاء، وقم بالتوسع بسهولة.
      </p>

      <!-- أزرار CTA -->
      <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
        <a href="#" class="
          inline-flex items-center justify-center gap-2
          px-8 py-4
          bg-brand-600 text-white
          rounded-lg font-semibold
          hover:bg-brand-700
          shadow-lg shadow-brand-600/30
          transition-all
          hover:shadow-xl hover:shadow-brand-600/40
          hover:-translate-y-0.5
        ">
          ابدأ التجربة المجانية
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
          </svg>
        </a>
        <a href="#" class="
          inline-flex items-center justify-center gap-2
          px-8 py-4
          bg-white dark:bg-gray-800
          text-gray-900 dark:text-white
          rounded-lg font-semibold
          border-2 border-gray-200 dark:border-gray-700
          hover:border-gray-300 dark:hover:border-gray-600
          transition-all
        ">
          شاهد العرض التوضيحي
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </a>
      </div>

      <!-- الإثبات الاجتماعي -->
      <div class="flex flex-wrap items-center justify-center gap-8 text-sm text-gray-500 dark:text-gray-400">
        <div class="flex items-center gap-2">
          <div class="flex -space-x-2">
            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 border-2 border-white dark:border-gray-900"></div>
            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 border-2 border-white dark:border-gray-900"></div>
            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-pink-400 to-pink-600 border-2 border-white dark:border-gray-900"></div>
          </div>
          <span>أكثر من 10,000 فريق</span>
        </div>
        <div class="flex items-center gap-1">
          <span>⭐⭐⭐⭐⭐</span>
          <span>تقييم 4.9/5</span>
        </div>
        <span>لا حاجة لبطاقة ائتمان</span>
      </div>
    </div>
  </div>
</section>

مبادئ التصميم المطبقة

  • مسافات متسقة: استخدام p-6 لحشوة البطاقة في جميع أنحاء
  • التسلسل الهرمي البصري: أيقونة ← عنوان ← وصف
  • ترميز الألوان: ألوان خلفية أيقونة مختلفة لإضفاء الاهتمام البصري
  • حالات تفاعلية: تأثيرات التمرير لتجربة مستخدم أفضل
  • شبكة مستجيبة: عمود واحد للجوال، 2 للجهاز اللوحي، 3 لسطح المكتب

تمرين عملي 1: إضافة قسم CTA

أنشئ قسم دعوة لاتخاذ إجراء نهائي مع:

  • خلفية متدرجة
  • عنوان ونص فرعي مقنع
  • حقل إدخال البريد الإلكتروني مع زر إرسال
  • مؤشرات الثقة (شارة الأمان، لا حاجة لبطاقة ائتمان)

تمرين عملي 2: بناء التذييل

صمم تذييلاً شاملاً يتضمن:

  • الشعار ووصف الشركة
  • شبكة روابط من 4 أعمدة (المنتج، الشركة، الموارد، القانونية)
  • أيقونات وسائل التواصل الاجتماعي
  • نموذج الاشتراك في النشرة الإخبارية
  • حقوق النشر والروابط القانونية

تمرين عملي 3: تعزيز الاستجابة

اختبر صفحة الهبوط على جميع نقاط الكسر وأضف:

  • مسافات محسّنة للجوال
  • أحجام أزرار صديقة للمس
  • تنقل محسّن للجوال
  • تحسينات الأداء (التحميل البطيء للصور)

الخلاصة

في هذا الدرس، بنينا صفحة هبوط كاملة وجاهزة للإنتاج باستخدام Tailwind CSS تتضمن:

  • تنقل ثابت: رأس مستجيب مع قائمة الجوال وتبديل الوضع الداكن
  • قسم البطل: تصميم ملفت للنظر مع تدرجات وCTAs والإثبات الاجتماعي
  • شبكة الميزات: تخطيط مستجيب يعرض الفوائد الرئيسية مع الأيقونات
  • الشهادات: إثبات اجتماعي مع تقييمات ومراجعات العملاء
  • جدول الأسعار: مقارنة واضحة مع تسليط الضوء على الخطة المميزة
  • التصميم المستجيب: يعمل بسلاسة من الجوال إلى سطح المكتب
  • الوضع الداكن: دعم السمة الكامل في جميع أنحاء
  • الأداء: محسّن باستخدام نهج الأدوات أولاً من Tailwind

في الدرس الأخير، سنقارن Tailwind CSS مع النهج الأخرى ونناقش خطواتك التالية في إتقان Tailwind.

الدرس السابق Tailwind CSS v4 والميزات الحديثة
الدرس التالي Tailwind مقابل النُهج الأخرى والخطوات التالية
العودة للدورة