Features With Screenshots

Fetch pattern JSON: curl https://webspire.de/patterns/features/with-screenshots.json

with-screenshots.html

<section class="ws-features bg-[var(--ws-features-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-features-icon-color)]">Features</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">See what makes us different</h2>
    </div>
    <div class="mt-16 space-y-20">
      <div class="grid items-center gap-10 lg:grid-cols-2">
        <div>
          <h3 class="text-2xl font-bold text-[var(--ws-features-text)]">Lightning-fast builds</h3>
          <p class="mt-4 text-base leading-relaxed text-[var(--ws-features-text-soft)]">Our optimized pipeline processes thousands of components in seconds. No more waiting around for builds to finish — ship with confidence, faster than ever.</p>
          <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-features-icon-color)] hover:underline">
            Learn more
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
          </a>
        </div>
        <div class="flex aspect-[3/2] items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-100 to-indigo-200" aria-label="Build performance screenshot">
          <svg class="h-12 w-12 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
        </div>
      </div>
      <div class="grid items-center gap-10 lg:grid-cols-2">
        <div class="order-2 lg:order-1">
          <div class="flex aspect-[3/2] items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-100 to-emerald-200" aria-label="Collaboration screenshot">
            <svg class="h-12 w-12 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
          </div>
        </div>
        <div class="order-1 lg:order-2">
          <h3 class="text-2xl font-bold text-[var(--ws-features-text)]">Real-time collaboration</h3>
          <p class="mt-4 text-base leading-relaxed text-[var(--ws-features-text-soft)]">Work together with your team in real time. Changes sync instantly across all editors, so everyone stays aligned without merge conflicts.</p>
          <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-features-icon-color)] hover:underline">
            Learn more
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
          </a>
        </div>
      </div>
      <div class="grid items-center gap-10 lg:grid-cols-2">
        <div>
          <h3 class="text-2xl font-bold text-[var(--ws-features-text)]">Built-in analytics</h3>
          <p class="mt-4 text-base leading-relaxed text-[var(--ws-features-text-soft)]">Track component adoption, usage metrics, and performance insights — all from one dashboard. Make data-driven decisions about your design system.</p>
          <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-features-icon-color)] hover:underline">
            Learn more
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
          </a>
        </div>
        <div class="flex aspect-[3/2] items-center justify-center rounded-2xl bg-gradient-to-br from-amber-100 to-amber-200" aria-label="Analytics dashboard screenshot">
          <svg class="h-12 w-12 text-amber-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
        </div>
      </div>
    </div>
  </div>
</section>

Details

Family

features

Tier

enhanced

Kind

section

Extends

features/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

featuresscreenshotsalternatingzigzagproductlanding-page

Slots

Name	Required	Description
heading	No	Section title and subtitle.
features	Yes	Alternating feature rows with text (title, description, link) and screenshot placeholder.

Three alternating feature rows. Each row has text (title, description, learn-more link) on one side and a rounded screenshot placeholder on the other, alternating left/right. Stacks vertically on mobile.