Lime Email CTA Card

A bright lime card with one small line, an inline contact-form pill, a huge email address and copy/send buttons.

CTACopy to clipboardMailto

Prompt

Build an email call-to-action card.

Stack: Next.js (App Router), React, TypeScript and Tailwind CSS v4.

DESIGN SYSTEM (use exactly):
- Page background #edeef2. Surface (light cards, light pills) #f6f6f8. Muted (gray cards) #d9d9dc. Border #dcdde2.
- Ink #1e1e1e for text, dark cards and primary buttons. Muted text #8a8a8f. Text on dark: #ffffff.
- Accents: purple #c084fc, lime #a3f207.
- Font: Geist Sans. Headings semibold with tight tracking (-0.04em) and tight leading (0.95–1.05).
- Cards: 28px corner radius. Buttons and chips: fully rounded pills (9999px).
- When a card wraps pills, its radius = pill radius + card padding (e.g. 40px pills + 8px padding → 28px card).
- Side gutter: 30px from 768px up, 20px on phones.
- Links and buttons never change color, background or opacity on hover.

WRAPPER
- A section with the side gutter (30px; 20px on phones) and the same top padding.
- Inside, a card: background lime #a3f207, text #1e1e1e (fixed, so it works on light and dark pages), radius 40px (28px on phones).
- Flex column, centered, text centered. Padding 96px × 40px from 768px, 56px × 20px on phones. Gap 32px (24px on phones).

1. ONE SMALL LINE (not a heading)
- A <p>, max-width 36rem, 20px (18px on phones), leading relaxed: "Need something custom? Fill up the [contact form ↗]".
- [contact form ↗] is an inline link pill to /contact: 36px tall, padding 0 16px, black background, white 16px medium text, a 14px diagonal arrow, vertical-align middle, 2px side margin.
- Then a <br> and "or drop us an email at" at 60% opacity.

2. THE EMAIL — the only big text
- A mailto link: clamp(1.5rem, 6vw, 5.5rem), semibold, leading 1, tracking -0.04em, max-width 100%, break-words.
- Write it as name@<wbr>domain.com, so on phones it wraps after the @ and never splits mid-word.

3. BUTTONS
- "Copy email": #f6f6f8 pill with a copy icon. Uses navigator.clipboard.writeText. On success, shows a check icon and "Copied!" for 2 seconds (aria-live polite). If the clipboard fails, fall back to window.prompt.
- "Send email": black pill with white text, a diagonal arrow, and a mailto link.
- On phones: stacked, full width, 56px tall. From 640px: side by side, 48px tall, min-width 160px, 14px medium text.

No section title or label above it. No hover color changes.

More in UI Components