English 中文 العربية 日本語 Português

Tailwind CSS: المشروع

1. متطلبات المشروع

قم بإنشاء صفحة رئيسية كاملة لمنتج SaaS تتضمن شريط التنقل، وقسم العنصر البارز، وعرض الميزات، وخطط الأسعار، والشهادات، وتذييل الصفحة، مع دعم الوضع الداكن والتوافق مع الأجهزة المحمولة وأجهزة سطح المكتب.

2. المتطلبات الفنية

3. التنفيذ خطوة بخطوة

▶ مثال: الخطوة 1 - شريط التنقل المتجاوب

يشتمل شريط التنقل على شعار، وروابط القائمة، وزر دعوة لاتخاذ إجراء. وعلى الأجهزة المحمولة، يتحول إلى قائمة «هامبرغر».

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - Smart Workflow Platform</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class'
    }
  </script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">

  <!-- Navbar -->
  <nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
            <span class="text-white font-bold text-sm">CF</span>
          </div>
          <span class="text-xl font-bold">CloudFlow</span>
        </div>

        <!-- Desktop menu -->
        <div class="hidden md:flex items-center gap-8">
          <a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Features</a>
          <a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Pricing</a>
          <a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Testimonials</a>
        </div>

        <!-- CTA buttons -->
        <div class="hidden md:flex items-center gap-4">
          <button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <span class="dark:hidden">🌙</span>
            <span class="hidden dark:inline">☀️</span>
          </button>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Sign In</a>
          <a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Free Trial</a>
        </div>

        <!-- Mobile menu button -->
        <button id="menuToggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
          <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>

    <!-- Mobile menu -->
    <div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
      <div class="px-4 py-4 space-y-3">
        <a href="#features" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">Features</a>
        <a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">Pricing</a>
        <a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">Testimonials</a>
        <div class="pt-3 border-t border-gray-200 dark:border-gray-800">
          <a href="#" class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Free Trial</a>
        </div>
      </div>
    </div>
  </nav>

  <script>
    const themeToggle = document.getElementById('themeToggle');
    themeToggle?.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
    });
    const menuToggle = document.getElementById('menuToggle');
    const mobileMenu = document.getElementById('mobileMenu');
    menuToggle?.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });
  </script>

</body>
</html>
67 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

▶ مثال: الخطوة 2 - قسم «Hero»

عنوان كبير مع عنوان فرعي، وزران لدعوة المستخدم إلى اتخاذ إجراء، وقائمة أيقونات الميزات.

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - Smart Workflow Platform</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">

  <!-- Hero section -->
  <section class="pt-32 pb-20 px-4">
    <div class="max-w-7xl mx-auto text-center">
      <!-- Badge -->
      <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 rounded-full text-sm mb-8">
        <span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
        New version v3.0 is live
      </div>

      <!-- Headline -->
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
        <span class="text-blue-600 dark:text-blue-400">Automate</span> your workflows
        <br class="hidden sm:block">
        Unleash team productivity
      </h1>

      <!-- Subtitle -->
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
        CloudFlow helps you connect 200+ apps, visually orchestrate workflows, and automate business processes without writing a single line of code.
      </p>

      <!-- CTA buttons -->
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
        <a href="#" class="w-full sm:w-auto px-8 py-3.5 bg-blue-600 text-white text-lg rounded-xl hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/25 transition-all">
          Get Started Free
        </a>
        <a href="#" class="w-full sm:w-auto px-8 py-3.5 border border-gray-300 dark:border-gray-700 text-lg rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
          </svg>
          Watch Demo
        </a>
      </div>

      <!-- Feature icons -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
          </div>
          <span class="text-sm text-gray-600 dark:text-gray-400">Lightning Fast</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center">
            <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>
          </div>
          <span class="text-sm text-gray-600 dark:text-gray-400">Secure & Reliable</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center">
            <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
          </div>
          <span class="text-sm text-gray-600 dark:text-gray-400">200+ Integrations</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center">
            <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
          </div>
          <span class="text-sm text-gray-600 dark:text-gray-400">Data Insights</span>
        </div>
      </div>
    </div>
  </section>

</body>
</html>
75 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

▶ مثال: الخطوة 3 - بطاقات الميزات

استخدم تخطيط الشبكة لعرض 4 بطاقات ميزات مع أيقونات وأوصاف.

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feature Cards</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">

  <section id="features" class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
      <!-- Section heading -->
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">Why Choose CloudFlow</h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Powerful features to make your workflows more efficient</p>
      </div>

      <!-- Feature card grid -->
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Card 1 -->
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2">Visual Builder</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Drag-and-drop interface to build complex workflows without writing code</p>
        </div>

        <!-- Card 2 -->
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors">
            <svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2">Team Collaboration</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Real-time co-editing, permission management, and shared workflow ownership</p>
        </div>

        <!-- Card 3 -->
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors">
            <svg class="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2">Smart Analytics</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Built-in analytics dashboard to monitor workflow performance in real time</p>
        </div>

        <!-- Card 4 -->
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-600 transition-colors">
            <svg class="w-6 h-6 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2">Enterprise Security</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">SOC 2 certified, end-to-end encryption, meeting enterprise-grade compliance requirements</p>
        </div>
      </div>
    </div>
  </section>

</body>
</html>
60 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

▶ مثال: الخطوة 4 - جدول الأسعار

3 بطاقات لخطط الأسعار، مع تمييز الخطة المتوسطة باعتبارها الخطة الموصى بها.

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Table</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">

  <section id="pricing" class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
      <!-- Section heading -->
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Choose the plan that fits your team. Upgrade or downgrade anytime.</p>
      </div>

      <!-- Pricing cards -->
      <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        <!-- Free plan -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold mb-2">Free</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For individuals getting started</p>
          <div class="mb-6">
            <span class="text-4xl font-bold">$0</span>
            <span class="text-gray-500">/mo</span>
          </div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              5 workflows
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              1,000 runs/mo
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              Community support
            </li>
          </ul>
          <a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            Get Started
          </a>
        </div>

        <!-- Pro plan (recommended) -->
        <div class="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-blue-600 shadow-xl shadow-blue-600/10 scale-105">
          <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-sm rounded-full">
            Most Popular
          </div>
          <h3 class="text-lg font-semibold mb-2">Pro</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For growing teams</p>
          <div class="mb-6">
            <span class="text-4xl font-bold">$19</span>
            <span class="text-gray-500">/mo</span>
          </div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              Unlimited workflows
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              50,000 runs/mo
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              Priority email support
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              Advanced analytics
            </li>
          </ul>
          <a href="#" class="block w-full py-3 text-center bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">
            Upgrade Now
          </a>
        </div>

        <!-- Enterprise plan -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold mb-2">Enterprise</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For large organizations</p>
          <div class="mb-6">
            <span class="text-4xl font-bold">$49</span>
            <span class="text-gray-500">/mo</span>
          </div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              Everything in Pro
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              Unlimited runs
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              Dedicated account manager
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              SLA guarantee
            </li>
          </ul>
          <a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            Contact Sales
          </a>
        </div>
      </div>
    </div>
  </section>

</body>
</html>
132 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

▶ مثال: الخطوة 5 - الشهادات وتذييل الصفحة

اعرض أدلة اجتماعية (شهادات المستخدمين) وتذييلًا كاملاً يحتوي على الروابط.

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testimonials and Footer</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">

  <!-- Testimonials -->
  <section id="testimonials" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">Trusted by Teams Everywhere</h2>
        <p class="text-gray-600 dark:text-gray-400">Over 10,000 companies choose CloudFlow</p>
      </div>

      <div class="grid md:grid-cols-3 gap-8">
        <!-- Testimonial 1 -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4">
            <span class="text-yellow-400">★★★★★</span>
          </div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"CloudFlow saved us 20 hours of repetitive work every week. The team can finally focus on what really matters."</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center font-semibold text-blue-600">S</div>
            <div>
              <p class="font-medium text-sm">Sarah Chen</p>
              <p class="text-gray-500 text-xs">CTO, TechCorp</p>
            </div>
          </div>
        </div>

        <!-- Testimonial 2 -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4">
            <span class="text-yellow-400">★★★★★</span>
          </div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"The visual builder is so intuitive that even non-technical team members can jump right in. It's a game changer."</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center font-semibold text-green-600">M</div>
            <div>
              <p class="font-medium text-sm">Michael Rivera</p>
              <p class="text-gray-500 text-xs">VP of Operations, ShopDirect</p>
            </div>
          </div>
        </div>

        <!-- Testimonial 3 -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4">
            <span class="text-yellow-400">★★★★★</span>
          </div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"The enterprise-grade compliance features gave us the confidence to migrate our core processes to the cloud. Highly recommended."</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center font-semibold text-purple-600">J</div>
            <div>
              <p class="font-medium text-sm">James Walker</p>
              <p class="text-gray-500 text-xs">IT Director, FinEdge Capital</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Brand logos -->
      <div class="mt-16 text-center">
        <p class="text-gray-500 text-sm mb-6">Trusted by industry leaders</p>
        <div class="flex flex-wrap items-center justify-center gap-8 opacity-50">
          <span class="text-2xl font-bold text-gray-400">TechCorp</span>
          <span class="text-2xl font-bold text-gray-400">DataFlow</span>
          <span class="text-2xl font-bold text-gray-400">CloudBase</span>
          <span class="text-2xl font-bold text-gray-400">NetPro</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4">
    <div class="max-w-7xl mx-auto">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
        <!-- Product -->
        <div>
          <h4 class="text-white font-semibold mb-4">Product</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">Features</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Integrations</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
          </ul>
        </div>
        <!-- Resources -->
        <div>
          <h4 class="text-white font-semibold mb-4">Resources</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">Documentation</a></li>
            <li><a href="#" class="hover:text-white transition-colors">API</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Tutorials</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
          </ul>
        </div>
        <!-- Company -->
        <div>
          <h4 class="text-white font-semibold mb-4">Company</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">About Us</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
          </ul>
        </div>
        <!-- Legal -->
        <div>
          <h4 class="text-white font-semibold mb-4">Legal</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Security & Compliance</a></li>
          </ul>
        </div>
      </div>

      <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
            <span class="text-white font-bold text-sm">CF</span>
          </div>
          <span class="text-white font-bold">CloudFlow</span>
        </div>
        <p class="text-sm">&copy; 2025 CloudFlow. All rights reserved.</p>
      </div>
    </div>
  </footer>

</body>
</html>
121 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

▶ مثال: صفحة هبوط كاملة

اجمع جميع الأقسام المذكورة أعلاه في ملف واحد لصفحة الهبوط:

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - Smart Workflow Automation Platform</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">

  <!-- Navbar -->
  <nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 z-50">
    <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 items-center gap-2">
          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
            <span class="text-white font-bold text-sm">CF</span>
          </div>
          <span class="text-xl font-bold">CloudFlow</span>
        </div>
        <div class="hidden md:flex items-center gap-8">
          <a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Features</a>
          <a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Pricing</a>
          <a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Testimonials</a>
        </div>
        <div class="hidden md:flex items-center gap-4">
          <button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <span class="dark:hidden">🌙</span>
            <span class="hidden dark:inline">☀️</span>
          </button>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 transition-colors">Sign In</a>
          <a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Free Trial</a>
        </div>
        <button id="menuToggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
          <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="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
      <div class="px-4 py-4 space-y-3">
        <a href="#features" class="block py-2 text-gray-600 dark:text-gray-400">Features</a>
        <a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400">Pricing</a>
        <a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400">Testimonials</a>
        <div class="pt-3 border-t border-gray-200 dark:border-gray-800">
          <a href="#" class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg">Free Trial</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <section class="pt-32 pb-20 px-4">
    <div class="max-w-7xl mx-auto text-center">
      <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 rounded-full text-sm mb-8">
        <span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
        New version v3.0 is live
      </div>
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
        <span class="text-blue-600 dark:text-blue-400">Automate</span> your workflows
        <br class="hidden sm:block">Unleash team productivity
      </h1>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
        CloudFlow helps you connect 200+ apps, visually orchestrate workflows, and automate business processes without writing a single line of code.
      </p>
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
        <a href="#" class="w-full sm:w-auto px-8 py-3.5 bg-blue-600 text-white text-lg rounded-xl hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/25 transition-all">Get Started Free</a>
        <a href="#" class="w-full sm:w-auto px-8 py-3.5 border border-gray-300 dark:border-gray-700 text-lg rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/></svg>
          Watch Demo
        </a>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">Lightning Fast</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">Secure & Reliable</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">200+ Integrations</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">Data Insights</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Features -->
  <section id="features" class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">Why Choose CloudFlow</h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Powerful features to make your workflows more efficient</p>
      </div>
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors"><svg class="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg></div>
          <h3 class="text-lg font-semibold mb-2">Visual Builder</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Drag-and-drop interface to build complex workflows without writing code</p>
        </div>
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors"><svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
          <h3 class="text-lg font-semibold mb-2">Team Collaboration</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Real-time co-editing, permission management, and shared workflow ownership</p>
        </div>
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors"><svg class="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
          <h3 class="text-lg font-semibold mb-2">Smart Analytics</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Built-in analytics dashboard to monitor workflow performance in real time</p>
        </div>
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-600 transition-colors"><svg class="w-6 h-6 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
          <h3 class="text-lg font-semibold mb-2">Enterprise Security</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">SOC 2 certified, end-to-end encryption, meeting enterprise-grade compliance requirements</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Pricing -->
  <section id="pricing" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Choose the plan that fits your team. Upgrade or downgrade anytime.</p>
      </div>
      <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold mb-2">Free</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For individuals getting started</p>
          <div class="mb-6"><span class="text-4xl font-bold">$0</span><span class="text-gray-500">/mo</span></div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>5 workflows</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>1,000 runs/mo</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Community support</li>
          </ul>
          <a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Get Started</a>
        </div>
        <div class="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-blue-600 shadow-xl shadow-blue-600/10 md:scale-105">
          <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-sm rounded-full">Most Popular</div>
          <h3 class="text-lg font-semibold mb-2">Pro</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For growing teams</p>
          <div class="mb-6"><span class="text-4xl font-bold">$19</span><span class="text-gray-500">/mo</span></div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Unlimited workflows</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>50,000 runs/mo</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Priority email support</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Advanced analytics</li>
          </ul>
          <a href="#" class="block w-full py-3 text-center bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">Upgrade Now</a>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold mb-2">Enterprise</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For large organizations</p>
          <div class="mb-6"><span class="text-4xl font-bold">$49</span><span class="text-gray-500">/mo</span></div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Everything in Pro</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Unlimited runs</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Dedicated account manager</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>SLA guarantee</li>
          </ul>
          <a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Contact Sales</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials -->
  <section id="testimonials" class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">Trusted by Teams Everywhere</h2>
        <p class="text-gray-600 dark:text-gray-400">Over 10,000 companies choose CloudFlow</p>
      </div>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"CloudFlow saved us 20 hours of repetitive work every week. The team can finally focus on what really matters."</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center font-semibold text-blue-600">S</div>
            <div><p class="font-medium text-sm">Sarah Chen</p><p class="text-gray-500 text-xs">CTO, TechCorp</p></div>
          </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"The visual builder is so intuitive that even non-technical team members can jump right in. It's a game changer."</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center font-semibold text-green-600">M</div>
            <div><p class="font-medium text-sm">Michael Rivera</p><p class="text-gray-500 text-xs">VP of Operations, ShopDirect</p></div>
          </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"The enterprise-grade compliance features gave us the confidence to migrate our core processes to the cloud. Highly recommended."</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center font-semibold text-purple-600">J</div>
            <div><p class="font-medium text-sm">James Walker</p><p class="text-gray-500 text-xs">IT Director, FinEdge Capital</p></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4">
    <div class="max-w-7xl mx-auto">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
        <div>
          <h4 class="text-white font-semibold mb-4">Product</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">Features</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Integrations</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-4">Resources</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">Documentation</a></li>
            <li><a href="#" class="hover:text-white transition-colors">API</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Tutorials</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-4">Company</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">About Us</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-4">Legal</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Security & Compliance</a></li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"><span class="text-white font-bold text-sm">CF</span></div>
          <span class="text-white font-bold">CloudFlow</span>
        </div>
        <p class="text-sm">&copy; 2025 CloudFlow. All rights reserved.</p>
      </div>
    </div>
  </footer>

  <script>
    document.getElementById('themeToggle')?.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
    });
    document.getElementById('menuToggle')?.addEventListener('click', () => {
      document.getElementById('mobileMenu').classList.toggle('hidden');
    });
  </script>

</body>
</html>
259 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

4. معايير القبول

5. الإضافات

❓ أسئلة شائعة

س متى يجب عليّ استخدام توجيه @apply في Tailwind؟
ج استخدم @apply عندما تحتاج إلى إعادة استخدام نفس مجموعة الأدوات المساعدة عبر عناصر متعددة. لكن تجنب الإفراط في استخدامها — فقوة Tailwind تكمن في الأدوات المساعدة المضمنة.
س كيف يمكنني تخصيص السمة الافتراضية لـ Tailwind؟
ج قم بتحرير ملف tailwind.config.js وقم بتوسيع كائن theme. يمكنك إضافة ألوان وخطوط ومسافات ونقاط توقف مخصصة.
س هل يُعد Tailwind CSS خيارًا جيدًا للمشاريع الكبيرة؟
ج نعم! إن نهج «الأدوات أولاً» الذي يتبعه Tailwind قابل للتوسع بشكل جيد. استخدم استخراج المكونات، و@apply للأنماط المتكررة، وتنظيم الملفات بشكل سليم.

📖 ملخص

📝 تمارين

  1. أساسي (مستوى الصعوبة: ⭐): قم بإنشاء مكون بطاقة متجاوب باستخدام أدوات flex و gap في Tailwind.
  2. المستوى المتوسط (الصعوبة: ⭐⭐): قم بإنشاء شريط تنقل مع قائمة «هامبرغر» مخصصة للجوال باستخدام Alpine.js وTailwind.
  3. المستوى المتقدم (الصعوبة: ⭐⭐⭐): قم بإنشاء صفحة هبوط كاملة تتضمن أقسام «الملصق الرئيسي» و«الميزات» و«الأسعار» و«التذييل».
Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%