Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A two-column CTA card with a decorative "footer shelf" behind it. The CTA carries the headline, supporting copy and a primary button on the left, plus a decorative two-window product mockup on the right. Behind the CTA's lower half sits a wider, empty bg-card shelf that visually mounts the CTA on a wider plate — same light theme surface as the CTA, no inverted dark theme.
Key Features:
aria-hidden so screen readers skip itbg-card text-card-foreground — same light card surface-mt-48 on mobile, -mt-60 on md, -mt-40 on lg+z-10 so it stays in front of the shelf; the shelf is aria-hidden and decorativerepeating-linear-gradient for the diagonal-stripe body and mask-b-from-50% to fade the bottom into the card surfacelg+ the mockup floats absolutely over the right portion of the CTA; below it stacks beneath the copylgfooter={false}--color-card / --color-border design tokens| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Build interfaces, faster" | Headline text. |
description | string | Generic community line | Supporting copy beneath the heading. |
cta | { label, href? } | null | Get started | Primary CTA. Pass null to render the card without a button. |
footer | boolean | true | Render the empty decorative shelf behind the CTA's lower half. |
className | string | undefined | Additional CSS classes on the outer <section>. |
Two bg-card rounded cards:
max-w-5xl mx-auto, rounded-xl, ring-1 ring-border, shadow-lg, z-10.max-w-7xl mx-auto (wider, exposing the visible "plate" past the CTA on each side at lg+), rounded-xl, ring-1 ring-border, shadow-lg, no content, aria-hidden.The shelf overlaps the CTA's lower half via a breakpoint-aware negative margin that tracks the CTA's actual height per breakpoint:
| Breakpoint | CTA layout | Approx CTA height | Negative margin | Shelf height | Visible below CTA |
|---|---|---|---|---|---|
<md | mockup stacks under copy | ~24rem | -mt-48 (12rem) | h-[26rem] | ~14rem |
md | full p-20 + mockup still stacked (tallest) | ~30rem | -mt-60 (15rem) | h-[28rem] | ~13rem |
lg+ | mockup is absolute (out of flow) | ~20rem | -mt-40 (10rem) | h-96 (24rem) | ~14rem |
Note the non-monotonic pattern: md needs the largest overlap because that's where the CTA is tallest — full p-20 padding and the mockup still stacking inline. lg+ needs less overlap because the absolute-positioned mockup pulls out of flow. Tailwind's md:-mt-60 lg:-mt-40 cascade handles this cleanly.
Drop this at the bottom of a marketing or pricing page where you want a final "talk to us" prompt that visually rests on a wider plate. The mockup is intentionally non-specific — depth and texture, not a product screenshot — so it works for any product category without retouching.
If you need the mockup to show a real screenshot, replace the diagonally-hatched body in the source with an <img> and remove the [repeating-linear-gradient] background. To render the CTA without the shelf, pass footer={false}.