فصل 23 از 27 درس 2 از 2

طراحی Landing Page پروژه‌محور

Features و Pricing Section

بخشی از آموزش جامع Tailwind CSS

محتوای درس Features و Pricing Section

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

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

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

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

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

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

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

index.html
<section class="mx-auto max-w-7xl p-6">
  <div class="grid gap-6 md:grid-cols-3">
    <article class="rounded-2xl border p-6">Starter</article>
    <article class="rounded-2xl border-2 border-blue-600 p-6 shadow-xl">Professional</article>
    <article class="rounded-2xl border p-6">Business</article>
  </div>
</section>

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

سه Card قیمت‌گذاری با پلن برجسته.

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

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

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

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

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