ส่วนท้ายและการปรับแต่งให้รองรับทุกหน้าจอ

Footer Layout Structure

<footer class="bg-gray-900 px-4 py-16 text-gray-400">
  <div class="mx-auto max-w-7xl">
    <!-- Logo + tagline row -->
    <!-- Link columns grid -->
    <!-- Newsletter signup -->
    <!-- Bottom bar -->
  </div>
</footer>

Footer Logo and Tagline

<div class="grid grid-cols-2 gap-12 lg:grid-cols-5">
  <!-- Logo column spans 2 on large screens -->
  <div class="col-span-2">
    <a href="/" class="flex items-center gap-2 font-bold text-white">
      <div class="h-8 w-8 rounded-lg bg-blue-500"></div>
      Launchify
    </a>
    <p class="mt-4 max-w-xs text-sm text-gray-400 leading-relaxed">
      The all-in-one platform for indie makers to build and ship faster.
    </p>
    <!-- Social links -->
  </div>
  <!-- Link columns here -->
</div>

Multi-Column Link Grid

<!-- Product column -->
<div>
  <h4 class="text-sm font-semibold uppercase tracking-widest text-white">Product</h4>
  <ul class="mt-4 space-y-3">
    <li><a href="/features" class="text-sm transition-colors hover:text-white">Features</a></li>
    <li><a href="/pricing" class="text-sm transition-colors hover:text-white">Pricing</a></li>
    <li><a href="/changelog" class="text-sm transition-colors hover:text-white">Changelog</a></li>
    <li><a href="/roadmap" class="text-sm transition-colors hover:text-white">Roadmap</a></li>
  </ul>
</div>

Newsletter Signup in Footer

<div class="mt-12 border-t border-gray-800 pt-12">
  <h4 class="text-sm font-semibold text-white">Stay in the loop</h4>
  <p class="mt-1 text-sm text-gray-400">Get product updates and tips, no spam.</p>
  <form class="mt-4 flex gap-2">
    <input
      type="email"
      placeholder="you@example.com"
      class="flex-1 rounded-lg bg-gray-800 px-4 py-2 text-sm text-white
             placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
    <button type="submit"
            class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold
                   text-white transition hover:bg-blue-700">
      Subscribe
    </button>
  </form>
</div>

Social Media Icons

<div class="mt-6 flex gap-4">
  <a href="https://twitter.com/launchify"
     class="text-gray-400 transition-colors hover:text-white"
     aria-label="Twitter">
    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
      <!-- Twitter/X icon path -->
    </svg>
  </a>
  <a href="https://github.com/launchify"
     class="text-gray-400 transition-colors hover:text-white"
     aria-label="GitHub">
    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
      <!-- GitHub icon path -->
    </svg>
  </a>
</div>

Bottom Bar With Copyright

<div class="mt-16 flex flex-col items-center justify-between gap-4
           border-t border-gray-800 pt-8 sm:flex-row">
  <p class="text-xs text-gray-500">
    &copy; 2026 Launchify, Inc. All rights reserved.
  </p>
  <div class="flex gap-6">
    <a href="/privacy" class="text-xs text-gray-500 hover:text-white">Privacy Policy</a>
    <a href="/terms" class="text-xs text-gray-500 hover:text-white">Terms of Service</a>
    <a href="/cookies" class="text-xs text-gray-500 hover:text-white">Cookie Policy</a>
  </div>
</div>

Responsive Polish: Mobile Review

<!-- Touch target minimum size check -->
<!-- Buttons should have at minimum py-2.5 px-4 for adequate tap area -->
<button class="rounded-lg px-4 py-2.5 text-sm font-semibold">
  <!-- min height ~40px on most browsers -->
</button>

<!-- Even better: use min-h-[44px] to guarantee iOS HIG compliance -->
<button class="flex min-h-[44px] items-center rounded-lg px-4 text-sm font-semibold">
  Tap me
</button>

Responsive Polish: Tablet Review

<!-- Tailwind breakpoint reminder -->
<!-- sm: 640px  md: 768px  lg: 1024px  xl: 1280px  2xl: 1536px -->

<!-- Feature grid: 1 col → 2 col → 3 col -->
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">

<!-- Pricing grid: 1 col → 3 col at lg only (not md) -->
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">

Responsive Polish: Typography Scaling

<!-- Responsive hero heading -->
<h1 class="text-3xl font-extrabold tracking-tight text-gray-900
           sm:text-4xl md:text-5xl lg:text-6xl">
  Ship faster with Launchify
</h1>

<!-- Responsive section heading -->
<h2 class="text-2xl font-bold tracking-tight text-gray-900
           md:text-3xl lg:text-4xl">
  Features that scale with you
</h2>

Final Spacing and Padding Audit

<!-- Responsive vertical padding -->
<section class="px-4 py-16 md:py-24">
  <!-- Less vertical space on mobile, more on desktop -->
</section>

<!-- Responsive grid gap -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8 lg:grid-cols-3 lg:gap-10">
  <!-- Gap scales up as more horizontal space is available -->
</div>

Performance and Accessibility Final Check

<!-- Common accessibility fixes -->

<!-- 1. Alt text on all images -->
<img src="/hero.png" alt="Launchify dashboard showing project overview">

<!-- 2. aria-label on icon-only buttons -->
<button aria-label="Open navigation menu" class="p-2 md:hidden">
  <svg><!-- hamburger icon --></svg>
</button>

<!-- 3. Logical heading structure -->
<!-- h1: Hero headline -->
<!-- h2: Features, Testimonials, Pricing -->
<!-- h3: Each feature card title, each plan name -->

Quick Check

Lesson Recap