Use this skill when designing and building high-conversion landing pages — hero sections, social proof, feature grids, CTAs, FAQ accordions, responsive layout, copywriting patterns, and performance optimization with Tailwind CSS.
A high-conversion landing page follows a proven information hierarchy:
<section class="relative overflow-hidden bg-white dark:bg-gray-950">
<div class="mx-auto max-w-4xl px-6 py-24 text-center sm:py-32 lg:py-40">
<!-- Eyebrow -->
<p class="text-sm font-semibold tracking-wider text-indigo-600 uppercase">
Now available
</p>
<!-- Headline -->
<h1
class="mt-4 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl lg:text-7xl"
>
Ship faster without<br class="hidden sm:inline" />
breaking things
</h1>
<!-- Subheadline -->
<p
class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-gray-600 dark:text-gray-400"
>
The deployment platform that gives your team confidence. Push to
production in minutes, roll back in seconds.
</p>
<!-- CTA Group -->
<div
class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center"
>
<a
href="#"
class="inline-flex items-center rounded-full bg-indigo-600 px-8 py-3.5 text-sm font-semibold text-white shadow-lg hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition-colors"
>
Start free trial
</a>
<a
href="#"
class="inline-flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:text-indigo-600 transition-colors"
>
Watch demo <span aria-hidden="true">→</span>
</a>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-950">
<div
class="mx-auto grid max-w-7xl items-center gap-12 px-6 py-20 lg:grid-cols-2 lg:py-32"
>
<!-- Text Column -->
<div>
<h1
class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl lg:text-6xl"
>
Design to code,<br />
in one click
</h1>
<p class="mt-6 text-lg leading-relaxed text-gray-600 dark:text-gray-400">
Transform your design files into production-ready components. No more
pixel-pushing handoffs.
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a
href="#"
class="rounded-lg bg-gray-900 px-6 py-3 text-sm font-semibold text-white hover:bg-gray-800 transition-colors dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200"
>
Get started
</a>
<a
href="#"
class="rounded-lg border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-900"
>
Learn more
</a>
</div>
</div>
<!-- Image Column -->
<div class="relative">
<img
src="/hero-screenshot.png"
alt="Product dashboard screenshot"
class="rounded-2xl shadow-2xl ring-1 ring-gray-200 dark:ring-gray-800"
width="800"
height="600"
loading="eager"
/>
</div>
</div>
</section>
<section
class="border-y border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900"
>
<div class="mx-auto max-w-7xl px-6 py-8">
<p class="text-center text-sm font-medium text-gray-500 dark:text-gray-400">
Trusted by 2,000+ teams worldwide
</p>
<div
class="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6"
>
<!-- Replace with client logos -->
<img
src="/logos/company-a.svg"
alt="Company A"
class="h-8 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition"
/>
<img
src="/logos/company-b.svg"
alt="Company B"
class="h-8 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition"
/>
<img
src="/logos/company-c.svg"
alt="Company C"
class="h-8 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition"
/>
<img
src="/logos/company-d.svg"
alt="Company D"
class="h-8 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition"
/>
<img
src="/logos/company-e.svg"
alt="Company E"
class="h-8 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition"
/>
</div>
</div>
</section>
<section class="bg-white py-20 dark:bg-gray-950 sm:py-28">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<h2
class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
>
Everything you need to ship
</h2>
<p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
Built for modern teams that move fast and demand reliability.
</p>
</div>
<div class="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Feature Card -->
<div class="rounded-2xl border border-gray-200 p-8 dark:border-gray-800">
<div
class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950 dark:text-indigo-400"
>
<!-- Icon SVG here -->
<svg
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
/>
</svg>
</div>
<h3 class="mt-6 text-lg font-semibold text-gray-900 dark:text-white">
Lightning deploys
</h3>
<p
class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400"
>
Push to production in under 30 seconds with zero-downtime deployments
and automatic rollbacks.
</p>
</div>
<!-- Repeat for additional features -->
</div>
</div>
</section>
<section class="bg-gray-50 py-20 dark:bg-gray-900 sm:py-28">
<div class="mx-auto max-w-7xl px-6">
<h2
class="text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
>
Loved by developers
</h2>
<div class="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Testimonial Card -->
<figure
class="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700"
>
<blockquote
class="text-sm leading-relaxed text-gray-700 dark:text-gray-300"
>
“We cut our deployment time by 80%. The team ships with
confidence now and our release cadence tripled.”
</blockquote>
<figcaption class="mt-6 flex items-center gap-4">
<img
src="/avatars/jane.jpg"
alt=""
class="h-10 w-10 rounded-full object-cover"
/>
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-white">
Jane Smith
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
CTO, Acme Corp
</p>
</div>
</figcaption>
</figure>
<!-- Repeat for more testimonials -->
</div>
</div>
</section>
<section class="bg-indigo-600 py-20 sm:py-28">
<div class="mx-auto max-w-4xl px-6 text-center">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
Ready to ship faster?
</h2>
<p class="mx-auto mt-4 max-w-xl text-lg text-indigo-100">
Start your free 14-day trial. No credit card required.
</p>
<div
class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center"
>
<a
href="#"
class="rounded-full bg-white px-8 py-3.5 text-sm font-semibold text-indigo-600 shadow-lg hover:bg-indigo-50 transition-colors"
>
Start free trial
</a>
<a
href="#"
class="text-sm font-semibold text-white hover:text-indigo-100 transition-colors"
>
Talk to sales <span aria-hidden="true">→</span>
</a>
</div>
</div>
</section>
<section class="bg-white py-20 dark:bg-gray-950 sm:py-28">
<div class="mx-auto max-w-3xl px-6">
<h2
class="text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
>
Frequently asked questions
</h2>
<dl class="mt-12 divide-y divide-gray-200 dark:divide-gray-800">
<!-- FAQ Item — uses <details> for no-JS accordion -->
<details class="group py-6">
<summary
class="flex cursor-pointer items-center justify-between text-left text-base font-semibold text-gray-900 dark:text-white"
>
What happens when my trial ends?
<span
class="ml-4 flex-shrink-0 transition-transform group-open:rotate-45"
>
<svg
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15"
/>
</svg>
</span>
</summary>
<dd
class="mt-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"
>
Your projects remain accessible in read-only mode. Upgrade anytime to
restore full functionality — no data is ever deleted.
</dd>
</details>
<!-- Repeat for more FAQ items -->
</dl>
</div>
</section>
<footer
class="border-t border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900"
>
<div class="mx-auto max-w-7xl px-6 py-12 lg:py-16">
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
<!-- Column 1 — Brand -->
<div>
<p class="text-lg font-bold text-gray-900 dark:text-white">
ProductName
</p>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Ship faster, sleep better.
</p>
</div>
<!-- Column 2 — Product -->
<div>
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
Product
</h3>
<ul class="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li>
<a
href="#"
class="hover:text-gray-900 dark:hover:text-white transition-colors"
>Features</a
>
</li>
<li>
<a
href="#"
class="hover:text-gray-900 dark:hover:text-white transition-colors"
>Pricing</a
>
</li>
<li>
<a
href="#"
class="hover:text-gray-900 dark:hover:text-white transition-colors"
>Changelog</a
>
</li>
</ul>
</div>
<!-- Column 3 — Company -->
<div>
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
Company
</h3>
<ul class="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li>
<a
href="#"
class="hover:text-gray-900 dark:hover:text-white transition-colors"
>About</a
>
</li>
<li>
<a
href="#"
class="hover:text-gray-900 dark:hover:text-white transition-colors"
>Blog</a
>
</li>
<li>
<a
href="#"
class="hover:text-gray-900 dark:hover:text-white transition-colors"
>Careers</a
>
</li>
</ul>
</div>
<!-- Column 4 — Legal -->
<div>
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
Legal
</h3>
<ul class="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li>
<a
href="#"
class="hover:text-gray-900 dark:hover:text-white transition-colors"
>Privacy</a
>
</li>
<li>
<a
href="#"
class="hover:text-gray-900 dark:hover:text-white transition-colors"
>Terms</a
>
</li>
</ul>
</div>
</div>
<div class="mt-12 border-t border-gray-200 pt-8 dark:border-gray-800">
<p class="text-center text-xs text-gray-500 dark:text-gray-400">
© 2026 ProductName. All rights reserved.
</p>
</div>
</div>
</footer>
| Formula | Example |
|---|---|
| Outcome without pain | "Ship faster without breaking things" |
| Number + benefit | "3x faster deployments, zero downtime" |
| Question | "Still deploying manually?" |
| How to | "How 2,000+ teams deploy with confidence" |
| Contrast | "From 30-minute deploys to 30-second deploys" |
| Weak | Strong |
|---|---|
| Submit | Start free trial |
| Click here | Get started — it's free |
| Learn more | See how it works |
| Sign up | Create your first project |
sm:.text-base on mobile, scale up with sm:text-lg, lg:text-xl.srcset and sizes attributes; serve WebP/AVIF.100vh on mobile (address bar issues). Use min-h-[calc(100dvh-4rem)] or similar dynamic viewport units.loading="eager"), defer everything else.font-display: swap, subset to required characters.width/height attributes to prevent CLS.alt text (or alt="" for decorative images).<header>, <main>, <section>, <footer>, <nav>.<details> handles this).<a> for navigation or <button> for actions — never <div>.