Chapter 23 — Yakuniy Loyiha: SaaS Landing Page

Bu — butun kursda o'rganilgan barcha bilimlarni (Flexbox, Grid, Responsive, States, Animation, Dark Mode, Component Architecture) birlashtirgan yakuniy amaliy loyiha.

---

23.1 Loyiha Tuzilishi

Real-World Usage

Loyiha 5 asosiy bo'limdan iborat: Sticky Navbar, Hero Section, Feature Grid, Pricing Cards, Footer.

code.text
TEXTNusxalash
01┌─────────────────────────────┐
02│   Sticky Navbar             │  ← Part 9 (Flexbox) + Part 11 (Positioning)
03├─────────────────────────────┤
04│   Hero Section (gradient)   │  ← Part 5 (Backgrounds) + Part 12 (Responsive)
05├─────────────────────────────┤
06│   Feature Grid (3 ustun)    │  ← Part 10 (Grid)
07├─────────────────────────────┤
08│   Pricing Cards (3 ta)      │  ← Part 9 (Flexbox) + Part 6 (Borders)
09├─────────────────────────────┤
10│   Footer (4 ustunli grid)   │  ← Part 10 (Grid)
11└─────────────────────────────┘

23.2 Navbar va Hero

Example

index.html
HTMLNusxalash
01<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md shadow-sm">
02  <nav class="flex justify-between items-center max-w-6xl mx-auto px-6 py-4">
03    <span class="font-bold text-xl">Brand</span>
04    <div class="hidden md:flex gap-8">
05      <a href="#" class="hover:text-blue-600 transition-colors">Xizmatlar</a>
06      <a href="#" class="hover:text-blue-600 transition-colors">Narxlar</a>
07    </div>
08    <button class="bg-blue-500 hover:bg-blue-600 text-white px-5 py-2 rounded-lg transition">
09      Ro'yxatdan o'tish
10    </button>
11  </nav>
12</header>
13 
14<section class="bg-gradient-to-br from-slate-900 to-indigo-900 text-white py-24 px-6 text-center">
15  <h1 class="text-4xl md:text-6xl font-extrabold mb-4">Mahsulotingiz Bosh Sahifasi</h1>
16  <p class="text-lg md:text-xl text-slate-300 max-w-2xl mx-auto mb-8">
17    Qisqa va ta'sirli tavsif shu yerda joylashadi.
18  </p>
19  <div class="flex flex-col sm:flex-row gap-4 justify-center">
20    <button class="bg-white text-slate-900 px-8 py-3 rounded-lg font-medium hover:scale-105 transition">
21      Bepul boshlash
22    </button>
23    <button class="border border-white/30 px-8 py-3 rounded-lg font-medium hover:bg-white/10 transition">
24      Demo ko'rish
25    </button>
26  </div>
27</section>

23.3 Feature Grid va Pricing Cards

Example

index.html
HTMLNusxalash
01<section class="max-w-6xl mx-auto py-20 px-6">
02  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
03    <div class="p-6 border rounded-xl hover:shadow-lg transition">
04      <h3 class="font-bold text-lg mb-2">Xususiyat 1</h3>
05      <p class="text-gray-600">Tavsif matni.</p>
06    </div>
07  </div>
08</section>
09 
10<section class="max-w-6xl mx-auto py-20 px-6">
11  <div class="flex flex-col md:flex-row gap-8 justify-center">
12    <div class="flex flex-col p-8 border rounded-2xl w-full md:w-80">
13      <h3 class="text-xl font-bold">Basic</h3>
14      <p class="text-3xl font-extrabold my-4">$9/oy</p>
15      <ul class="flex-1 space-y-2 text-gray-600 mb-6">
16        <li>✓ 5 loyiha</li>
17      </ul>
18      <button class="bg-gray-900 text-white py-3 rounded-lg">Tanlash</button>
19    </div>
20    <div class="flex flex-col p-8 border-2 border-blue-500 rounded-2xl w-full md:w-80 scale-105 shadow-xl">
21      <span class="text-xs font-bold text-blue-500 mb-2">MASHHUR</span>
22      <h3 class="text-xl font-bold">Pro</h3>
23      <p class="text-3xl font-extrabold my-4">$29/oy</p>
24      <ul class="flex-1 space-y-2 text-gray-600 mb-6">
25        <li>✓ Cheksiz loyiha</li>
26      </ul>
27      <button class="bg-blue-500 text-white py-3 rounded-lg">Tanlash</button>
28    </div>
29  </div>
30</section>

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Yuqoridagi Navbar'ni to'liq yozing va brauzerda scroll qilib, sticky effektni tekshiring.

🟡 Exercise 2 — Medium

Task: Feature Grid'ga 3 ta xususiyat qo'shing, har biriga ikonka (masalan emoji) qo'shing, hover:shadow-lg transition bilan.

🔴 Exercise 3 — Hard

Task: To'liq landing page'ni yasang: Navbar + Hero + Feature Grid + Pricing (3 ta tarif) + Footer (4 ustunli grid), dark mode qo'llab-quvvatlagan holda.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div class="flex justify-center">
02  <div class="w-80">Basic</div>
03  <div class="w-80 scale-105">Pro</div>
04  <div class="w-80">Enterprise</div>
05</div>

Your Task: "Pro" karta scale-105 bilan kattalashtirilgan, lekin u qo'shni kartalarga "kirib ketayotgandek" ko'rinadi. Nega, va qanday tuzatasiz?

<details> <summary>Solution</summary> `scale-*` transform CSS xususiyati orqali ishlaydi va layout oqimidagi boshqa elementlarning joyini "hisobga olmaydi" — vizual ravishda kattalashadi, lekin atrofidagilarni itarmaydi. Yechim: kartalar orasiga yetarli `gap` qo'shish (masalan `gap-8` yoki ko'proq) yoki `Pro` kartasiga qo'shimcha `z-10` va margin berish. </details>

---

📌 Chapter Summary

Bu capstone loyiha orqali siz Flexbox, Grid, Positioning, Responsive Design, Animation, va Component tamoyillarini bitta yaxlit, real-world SaaS landing page'da birlashtirdingiz.

🎯 Key Takeaways

• Real loyihalar kamdan-kam faqat bitta Tailwind mavzusiga tayanadi — ular ko'p qismlarning kombinatsiyasi
• Vizual ierarxiya (masalan "mashhur" tarif) bir nechta kichik signal orqali yaratiladi
• scale-* kabi transform xususiyatlari layout oqimiga ta'sir qilmaydi — gap orqali muvozanat saqlash kerak

⚡ Quick Cheat Sheet — Landing Page Anatomiyasi

code.text
TEXTNusxalash
01Navbar:   sticky top-0 + flex justify-between items-center
02Hero:     bg-gradient-to-br + text-center + flex-col sm:flex-row (tugmalar)
03Features: grid grid-cols-1 md:grid-cols-3 gap-8
04Pricing:  flex flex-col md:flex-row + flex-1 (ichki ro'yxat)
05Footer:   grid grid-cols-2 md:grid-cols-4 gap-8

---