Hero Section حرفه‌ای

Hero Section حرفه‌ای را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Landing Page باید پیام اصلی، ارزش پیشنهادی و CTA را در اولین Viewport روشن کند. Features و Pricing باید قابل اسکن باشند و یک انتخاب پیشنهادی را بدون فریب کاربر برجسته کنند.

روش پیاده‌سازی

1. Hero را با عنوان نتیجه‌محور و CTA واضح بسازید.
2. ویژگی‌ها را با Grid واکنش‌گرا ارائه کنید.
3. Pricing را با تفاوت واقعی پلن‌ها و CTA مرتبط کامل کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

<section class="bg-slate-950 text-white">
  <div class="mx-auto grid max-w-7xl items-center gap-10 px-6 py-20 lg:grid-cols-2">
    <div>
      <span class="text-sm font-bold text-sky-400">آموزش رایگان</span>
      <h1 class="mt-3 text-4xl font-black leading-tight sm:text-5xl">Tailwind CSS را پروژه‌محور یاد بگیر</h1>
      <p class="mt-5 max-w-xl text-lg leading-8 text-slate-300">از Utilityها تا ساخت رابط واقعی.</p>
      <a href="#start" class="mt-8 inline-flex rounded-xl bg-sky-500 px-6 py-3 font-bold text-slate-950">شروع آموزش</a>
    </div>
  </div>
</section>

خروجی مورد انتظار

Hero تیره و Responsive با CTA واضح.

نکات مهم و خطاهای رایج

• ارتفاع زیاد Hero می‌تواند CTA را در موبایل پنهان کند.
• تعداد زیاد رنگ و Shadow تمرکز بصری را از بین می‌برد.

تمرین پیشنهادی

Landing را در عرض 360px بررسی و CTA را در اولین Viewport قابل مشاهده کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS