Footer and Responsive Polish
Add a multi-column footer with links and newsletter signup, then audit the entire page for responsive layout at sm, md, and lg breakpoints.
Footer Layout Structure
A well-structured landing page footer contains a logo and tagline, a multi-column link grid, and a bottom bar with copyright and legal links. Use a dark background like bg-gray-900 text-gray-400 to visually close the page. The footer container should match the rest of the page with mx-auto max-w-7xl px-4.
<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
The footer logo and tagline reinforce the brand as users reach the bottom of the page. Place the logo on the left with a brief description below it. On desktop this column spans two grid columns while link columns each take one. Style the logo mark the same as in the header for brand consistency, and make the tagline text mt-2 text-sm text-gray-500.
<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>All lessons in this course
- Hero and Navigation Section
- Features and Social Proof Sections
- Pricing Table Section
- Footer and Responsive Polish