مشروع: بناء صفحة هبوط SaaS باستخدام Tailwind CSS
متطلبات المشروع
بناء صفحة هبوط كاملة لمنتج SaaS تتضمن شريط تنقل، قسم البطل، عرض المميزات، خطط التسعير، الشهادات، وتذييل الصفحة، مع دعم الوضع الداكن واستجابة من الهاتف إلى سطح المكتب.
المتطلبات التقنية
- Tailwind CSS v4 CDN
- تصميم متجاوب (الهاتف أولاً)
- الوضع الداكن (بادئة
dark:) - تخطيط مختلط Flexbox + Grid
- حالات تفاعلية وانتقالات
التنفيذ خطوة بخطوة
مثال: الخطوة 1 - شريط التنقل المتجاوب
يتضمن شريط التنقل شعاراً وروابط قائمة وزر CTA. على الهاتف، يتحول إلى قائمة هامبرغر.
HTML
<!DOCTYPE html>
<html lang="ar" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudFlow - منصة سير عمل ذكية</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">
<!-- شريط التنقل -->
<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">المميزات</a>
<a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">التسعير</a>
<a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">الشهادات</a>
</div>
<!-- أزرار CTA -->
<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">تسجيل الدخول</a>
<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">تجربة مجانية</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 hover:text-blue-600">المميزات</a>
<a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">التسعير</a>
<a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">الشهادات</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">تجربة مجانية</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>
مثال: الخطوة 2 - قسم البطل
عنوان رئيسي كبير مع عنوان فرعي، وزرا CTA مزدوجين، وقائمة أيقونات المميزات.
HTML
<!DOCTYPE html>
<html lang="ar" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudFlow - منصة سير عمل ذكية</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">
<!-- قسم البطل -->
<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>
الإصدار الجديد v3.0 متاح الآن
</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">أتمت</span> سير عملك
<br class="hidden sm:block">
أطلق إنتاجية فريقك
</h1>
<!-- العنوان الفرعي -->
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
يساعدك CloudFlow على ربط أكثر من 200 تطبيق، وتنظيم سير العمل بصرياً، وأتمتة العمليات التجارية دون كتابة سطر واحد من الكود.
</p>
<!-- أزرار CTA -->
<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">
ابدأ مجاناً
</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>
شاهد العرض التوضيحي
</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">سريع كالبرق</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">آمن وموثوق</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 تكامل</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">تحليلات البيانات</span>
</div>
</div>
</div>
</section>
</body>
</html>
مثال: الخطوة 3 - بطاقات المميزات
استخدام تخطيط Grid لعرض 4 بطاقات مميزات مع الأيقونات والأوصاف.
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>بطاقات المميزات</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">
<!-- عنوان القسم -->
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">لماذا تختار CloudFlow</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">مميزات قوية لجعل سير عملك أكثر كفاءة</p>
</div>
<!-- شبكة بطاقات المميزات -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- البطاقة 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">المنشئ المرئي</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">واجهة سحب وإفلات لبناء سير عمل معقد دون كتابة كود</p>
</div>
<!-- البطاقة 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">التعاون الجماعي</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">تحرير متزامن، إدارة الأذونات، وملكية مشتركة لسير العمل</p>
</div>
<!-- البطاقة 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">التحليلات الذكية</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">لوحة تحليلات مدمجة لمراقبة أداء سير العمل في الوقت الفعلي</p>
</div>
<!-- البطاقة 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">الأمان المؤسسي</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">شهادة SOC 2، تشفير شامل، يلبي متطلبات الامتثال المؤسسي</p>
</div>
</div>
</div>
</section>
</body>
</html>
مثال: الخطوة 4 - جدول التسعير
3 بطاقات خطط تسعير مع تمييز الخطة الوسطى كموصى بها.
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>جدول التسعير</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">
<!-- عنوان القسم -->
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">تسعير بسيط وشفاف</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">اختر الخطة المناسبة لفريقك. قم بالترقية أو التخفيض في أي وقت.</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">مجانية</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">للأفراد في البداية</p>
<div class="mb-6">
<span class="text-4xl font-bold">$0</span>
<span class="text-gray-500">/شهرياً</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 سير عمل
</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 تشغيل/شهرياً
</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>
دعم المجتمع
</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">
ابدأ الآن
</a>
</div>
<!-- خطة Pro (موصى بها) -->
<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">
الأكثر شعبية
</div>
<h3 class="text-lg font-semibold mb-2">Pro</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">للفرق المتنامية</p>
<div class="mb-6">
<span class="text-4xl font-bold">$19</span>
<span class="text-gray-500">/شهرياً</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>
سير عمل غير محدود
</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 تشغيل/شهرياً
</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>
دعم أولوية عبر البريد الإلكتروني
</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>
تحليلات متقدمة
</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">
قم بالترقية الآن
</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">المؤسسات</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">للمنظمات الكبيرة</p>
<div class="mb-6">
<span class="text-4xl font-bold">$49</span>
<span class="text-gray-500">/شهرياً</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>
كل مميزات 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>
تشغيل غير محدود
</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>
مدير حساب مخصص
</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
</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">
تواصل مع المبيعات
</a>
</div>
</div>
</div>
</section>
</body>
</html>
مثال: الخطوة 5 - الشهادات وتذييل الصفحة
عرض الدليل الاجتماعي (شهادات المستخدمين) وتذييل صفحة كامل مع الروابط.
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الشهادات وتذييل الصفحة</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="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">فرق العمل في كل مكان تثق بنا</h2>
<p class="text-gray-600 dark:text-gray-400">أكثر من 10,000 شركة تختار CloudFlow</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- الشهادة 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 وفر لنا 20 ساعة من العمل المتكرر كل أسبوع. أخيراً يمكن للفريق التركيز على ما يهم فعلاً."</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">مدير التكنولوجيا، TechCorp</p>
</div>
</div>
</div>
<!-- الشهادة 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">"المنشئ المرئي بديهي جداً لدرجة أن حتى أعضاء الفريق غير التقنيين يمكنهم البدء فوراً. إنه يغير قواعد اللعبة."</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">نائب رئيس العمليات، ShopDirect</p>
</div>
</div>
</div>
<!-- الشهادة 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">"مميزات الامتثال المؤسسي أعطتنا الثقة لنقل عملياتنا الأساسية إلى السحابة. أنصح بشدة."</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">مدير تكنولوجيا المعلومات، FinEdge Capital</p>
</div>
</div>
</div>
</div>
<!-- شعارات العلامات التجارية -->
<div class="mt-16 text-center">
<p class="text-gray-500 text-sm mb-6">موثوق من قبل قادة الصناعة</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 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">المنتج</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">المميزات</a></li>
<li><a href="#" class="hover:text-white transition-colors">التسعير</a></li>
<li><a href="#" class="hover:text-white transition-colors">التكاملات</a></li>
<li><a href="#" class="hover:text-white transition-colors">سجل التغييرات</a></li>
</ul>
</div>
<!-- الموارد -->
<div>
<h4 class="text-white font-semibold mb-4">الموارد</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">التوثيق</a></li>
<li><a href="#" class="hover:text-white transition-colors">API</a></li>
<li><a href="#" class="hover:text-white transition-colors">الدروس التعليمية</a></li>
<li><a href="#" class="hover:text-white transition-colors">المدونة</a></li>
</ul>
</div>
<!-- الشركة -->
<div>
<h4 class="text-white font-semibold mb-4">الشركة</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">من نحن</a></li>
<li><a href="#" class="hover:text-white transition-colors">الوظائف</a></li>
<li><a href="#" class="hover:text-white transition-colors">اتصل بنا</a></li>
</ul>
</div>
<!-- القانوني -->
<div>
<h4 class="text-white font-semibold mb-4">القانوني</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">سياسة الخصوصية</a></li>
<li><a href="#" class="hover:text-white transition-colors">شروط الخدمة</a></li>
<li><a href="#" class="hover:text-white transition-colors">الأمان والامتثال</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">© 2025 CloudFlow. جميع الحقوق محفوظة.</p>
</div>
</div>
</footer>
</body>
</html>
مثال: صفحة الهبوط الكاملة
دمج جميع الأقسام أعلاه في ملف صفحة هبوط واحد:
HTML
<!DOCTYPE html>
<html lang="ar" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudFlow - منصة أتمتة سير عمل ذكية</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">
<!-- شريط التنقل -->
<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">المميزات</a>
<a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">التسعير</a>
<a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">الشهادات</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">تسجيل الدخول</a>
<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">تجربة مجانية</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">المميزات</a>
<a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400">التسعير</a>
<a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400">الشهادات</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">تجربة مجانية</a>
</div>
</div>
</div>
</nav>
<!-- البطل -->
<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>
الإصدار الجديد v3.0 متاح الآن
</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">أتمت</span> سير عملك
<br class="hidden sm:block">أطلق إنتاجية فريقك
</h1>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
يساعدك CloudFlow على ربط أكثر من 200 تطبيق، وتنظيم سير العمل بصرياً، وأتمتة العمليات التجارية دون كتابة سطر واحد من الكود.
</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">ابدأ مجاناً</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>
شاهد العرض التوضيحي
</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">سريع كالبرق</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">آمن وموثوق</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 تكامل</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">تحليلات البيانات</span>
</div>
</div>
</div>
</section>
<!-- المميزات -->
<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">لماذا تختار CloudFlow</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">مميزات قوية لجعل سير عملك أكثر كفاءة</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">المنشئ المرئي</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">واجهة سحب وإفلات لبناء سير عمل معقد دون كتابة كود</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">التعاون الجماعي</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">تحرير متزامن، إدارة الأذونات، وملكية مشتركة لسير العمل</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">التحليلات الذكية</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">لوحة تحليلات مدمجة لمراقبة أداء سير العمل في الوقت الفعلي</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">الأمان المؤسسي</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">شهادة SOC 2، تشفير شامل، يلبي متطلبات الامتثال المؤسسي</p>
</div>
</div>
</div>
</section>
<!-- التسعير -->
<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">تسعير بسيط وشفاف</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">اختر الخطة المناسبة لفريقك. قم بالترقية أو التخفيض في أي وقت.</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">مجانية</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">للأفراد في البداية</p>
<div class="mb-6"><span class="text-4xl font-bold">$0</span><span class="text-gray-500">/شهرياً</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 سير عمل</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 تشغيل/شهرياً</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>دعم المجتمع</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">ابدأ الآن</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">الأكثر شعبية</div>
<h3 class="text-lg font-semibold mb-2">Pro</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">للفرق المتنامية</p>
<div class="mb-6"><span class="text-4xl font-bold">$19</span><span class="text-gray-500">/شهرياً</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>سير عمل غير محدود</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 تشغيل/شهرياً</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>دعم أولوية عبر البريد الإلكتروني</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>تحليلات متقدمة</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">قم بالترقية الآن</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">المؤسسات</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">للمنظمات الكبيرة</p>
<div class="mb-6"><span class="text-4xl font-bold">$49</span><span class="text-gray-500">/شهرياً</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>كل مميزات 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>تشغيل غير محدود</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>مدير حساب مخصص</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</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">تواصل مع المبيعات</a>
</div>
</div>
</div>
</section>
<!-- الشهادات -->
<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">فرق العمل في كل مكان تثق بنا</h2>
<p class="text-gray-600 dark:text-gray-400">أكثر من 10,000 شركة تختار 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 وفر لنا 20 ساعة من العمل المتكرر كل أسبوع. أخيراً يمكن لفريق التركيز على ما يهم فعلاً."</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">مدير التكنولوجيا، 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">"المنشئ المرئي بديهي جداً لدرجة أن حتى أعضاء الفريق غير التقنيين يمكنهم البدء فوراً. إنه يغير قواعد اللعبة."</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">نائب رئيس العمليات، 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">"مميزات الامتثال المؤسسي أعطتنا الثقة لنقل عملياتنا الأساسية إلى السحابة. أنصح بشدة."</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">مدير تكنولوجيا المعلومات، FinEdge Capital</p></div>
</div>
</div>
</div>
</div>
</section>
<!-- تذييل الصفحة -->
<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">المنتج</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">المميزات</a></li>
<li><a href="#" class="hover:text-white transition-colors">التسعير</a></li>
<li><a href="#" class="hover:text-white transition-colors">التكاملات</a></li>
<li><a href="#" class="hover:text-white transition-colors">سجل التغييرات</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">الموارد</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">التوثيق</a></li>
<li><a href="#" class="hover:text-white transition-colors">API</a></li>
<li><a href="#" class="hover:text-white transition-colors">الدروس التعليمية</a></li>
<li><a href="#" class="hover:text-white transition-colors">المدونة</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">الشركة</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">من نحن</a></li>
<li><a href="#" class="hover:text-white transition-colors">الوظائف</a></li>
<li><a href="#" class="hover:text-white transition-colors">اتصل بنا</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">القانوني</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">سياسة الخصوصية</a></li>
<li><a href="#" class="hover:text-white transition-colors">شروط الخدمة</a></li>
<li><a href="#" class="hover:text-white transition-colors">الأمان والامتثال</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">© 2025 CloudFlow. جميع الحقوق محفوظة.</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>
معايير القبول
- [ ] يعرض شريط التنقل قائمة هامبرغر على الهاتف، وروابط كاملة على سطح المكتب
- [ ] عنوان قسم البطل يكون مركزاً، وأزرار CTA تظهر بالعرض الكامل على الشاشات الصغيرة
- [ ] بطاقات المعميات تعرض في عمود واحد على الهاتف، و2 على الجهاز اللوحي، و4 على سطح المكتب
- [ ] بطاقة التسعير الوسطى تكون مميزة بتأثير الظل
- [ ] بطاقات الشهادات تتكدس عمودياً على الهاتف، و3 أعمدة على سطح المكتب
- [ ] جميع الأقسام تعرض تغييرات الألوان الصحيحة عند تبديل الوضع الداكن
- [ ] جميع العناصر التفاعلية تحتوي على تغذية راجعة للحالة التفاعلية (تحويم/نشط)
التوسعات
- إضافة تنقل بالتمرير السلس مع تمييز القسم النشط
- دمج Alpine.js للانتقالات المتحركة لقائمة الهاتف
- إضافة حركات الدخول للعرض (مكتبة AOS أو
animate.css) - تنفيذ تبديل التسعير الشهري/السنوي
- إضافة مزيد من الدليل الاجتماعي (شعارات العملاء المتحركة، عدادات الإحصائيات)