الهدف
بعد هالدرس تقدر تبني landing page كاملة — hero section قوي، 3 feature cards، CTA واضح، و footer — وتعرف ليش كل قرار خذته مهم للـ conversion.
ليش هذا الحين؟
بنيت الـ design system — الحين وقت تبني أهم صفحة في التطبيق. الـ landing page هي أول شي يشوفه المستخدم. عندك 5 ثواني تقنعه إنه في المكان الصح وإلا بيطلع. هذا مو تصميم — هو marketing و clarity. لو ما تقدر تشرح قيمة منتجك في جملة وحدة على الـ hero، المشكلة مو في التصميم.
الفكرة
الـ landing page مو مجرد "welcome page" — هي sales pitch تلقائية تشتغل 24/7.
هيكل الـ landing page:
Hero → Problem/Solution → Features → Social proof → CTA → Footer
في درسنا نبني النسخة البسيطة: Hero + Features + CTA + Footer.
الـ hero section: أهم قطعة. فيه:
- Headline — الـ value prop بكلمات بسيطة. مو "مرحبا بك في [اسم التطبيق]"
- Subheadline — يوضح أكثر
- Primary CTA — زر واحد، فعل واحد
الـ features section: 3 إلى 5 features بس. لكل feature: اسم + جملة وحدة. مو essays. المستخدم يقرأ scannable content.
الـ CTA section: يتكرر في نهاية الصفحة. المستخدم اللي وصل للأسفل مهتم — عطه فرصة يسجل.
الـ footer: Copyright + رابط privacy policy. بسيط.
Tailwind utility classes المهمة للـ layout:
container mx-auto— يضبط الـ max-width ويمركز المحتوىgrid md:grid-cols-3 gap-8— ثلاث أعمدة على desktop، عمود على mobiletext-center— تمركز النصpy-24— padding عمودي كافي