Tailwind CSS • المستوى الرابع • الدرس 2

المشروع النهائي - بناء واجهة هبوط متكاملة (SaaS Landing Page)

أهداف المشروع الشامل

دمج مهارات التنسيق، التجاوب، Flexbox، Grid، والتدرجات البصرية في مشروع حي واحد.
بناء واجهة هبوط متجاوبة بالكامل لجميع الشاشات جاهزة للعرض في سوق العمل.
تصميم قسم تسعير (Pricing) ببطاقات مميزة مع شارة "الأكثر شعبية".
إضافة CTA احترافي وتذييل متكامل لإنهاء الصفحة بأناقة.

1. إطلاق تصميم متكامل

يُمثّل هذا المشروع التطبيقي تاج المسار، حيث تُطبّق كل المبادئ السابقة لبناء صفحة هبوط ذات مظهر احترافي جاهزة للربط مع أطر العمل المختلفة (Next.js, React, Vue).

html

<!-- بنية صفحة الهبوط الكاملة -->
<header>...</header>          <!-- شريط تنقل -->
<section>Hero...</section>    <!-- قسم الهيرو -->
<section>Features...</section> <!-- الميزات -->
<section>Pricing...</section>  <!-- الأسعار -->
<section>CTA...</section>      <!-- الدعوة للعمل -->
<footer>...</footer>           <!-- التذييل -->

2. مكونات المشروع السبعة

Header

شريط تنقل بشعار + روابط + زر CTA، مع إخفاء الروابط على الجوال.

Hero

عنوان بتدرج لوني، وصف، وزرين للدعوة للعمل.

Features Grid

شبكة 3 بطاقات متجاوبة بـ grid-cols-1 md:grid-cols-3.

Pricing

بطاقتان مع شارة "الأكثر شعبية" على الخطة المميزة.

CTA

قسم بتدرج لوني مزدوج و backdrop-blur.

Footer

روابط قانونية + حقوق النشر بسيطة.

3. تقنيات Tailwind المستخدمة في المشروع

grid-cols-1 md:grid-cols-3

شبكة متجاوبة

bg-gradient-to-r

تدرج لوني

bg-clip-text

نص متدرج

hover:-translate-y-2

تحويل تفاعلي

backdrop-blur

تأثير زجاجي

active:scale-95

تفاعل الضغط

التطبيق العملي المباشر — التحدي الختامي

تحدي إتمام مسار Tailwind: الصفحة الكاملة

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

غيّر space-y-12 إلى space-y-16 للحصول على تباعد أكبر بين الأقسام.
أضف رابط "الأسعار" إلى قائمة التنقل الحالية.
أضف زرين للدعوة للعمل في قسم الهيرو: "ابدأ مجاناً" (بنفسجي) و "شاهد العرض التوضيحي" (شفاف بحدود).
أضف قسم "المميزات" بشبكة grid-cols-1 md:grid-cols-3 تحتوي على 3 بطاقات (سرعة، أمان، تصميم مرن).
أضف قسم "الأسعار" ببطاقتين، إحداهما بشارة "الأكثر شعبية" مطلقة بـ absolute -top-3.
أضف قسم CTA و Footer في النهاية.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق إتمام مسار Tailwind CSS بالكامل