Sections

NewsletterSection

A dark email signup section with client-side validation, success state, and accessible form markup

Quick Preview

Stay in the loop

Get the latest updates, articles, and resources delivered straight to your inbox.

Custom Copy

Get weekly tips

Short, actionable insights delivered every Tuesday.

Installation

// Copy the component from
src/components/sections/NewsletterSection.tsx

// Note: NewsletterSection is a Client Component ('use client')
// Wire up the form submit handler to your email provider
// (Mailchimp, Resend, ConvertKit, etc.)

Usage

import { NewsletterSection } from '@/components/sections/NewsletterSection'

// Default
export default function Footer() {
  return (
    <>
      {/* ... */}
      <NewsletterSection />
    </>
  )
}

// All props
export default function Footer() {
  return (
    <NewsletterSection
      title="Join our newsletter"
      subtitle="Get product updates and tutorials."
      placeholder="your@email.com"
      ctaLabel="Subscribe now"
      note="No spam. Unsubscribe any time."
    />
  )
}

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a sections component named NewsletterSection in React/Next.js.
Goal: recreate the same overall UI and behavior as the NewsletterSection reference from a component gallery.
What it needs to communicate: A dark email signup section with client-side validation, success state, and accessible form markup.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Treat the result as a full-width section with strong layout rhythm and responsive spacing.
- Preserve headline hierarchy, supporting copy, and clear CTA emphasis.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- title: string — default "Stay in the loop" — Section heading
- subtitle: string — Description text
- placeholder: string — default "Enter your email" — Input placeholder
- ctaLabel: string — default "Subscribe" — Submit button label
- note: string — Fine-print text below the form
- className: string — Additional CSS classes

Reference usage patterns:
- Default

```tsx
<NewsletterSection />
```

- Custom copy

```tsx
<NewsletterSection title="Get weekly tips" ctaLabel="Join now" />
```

Feature expectations:
- Dark gray-900 background
- Client-side email regex validation
- Success state with confirmation message
- Accessible: sr-only label, aria-compliant form
- All copy customizable via props

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`title`	`string`	`"Stay in the loop"`	Section heading
`subtitle`	`string`	-	Description text
`placeholder`	`string`	`"Enter your email"`	Input placeholder
`ctaLabel`	`string`	`"Subscribe"`	Submit button label
`note`	`string`	-	Fine-print text below the form
`className`	`string`	-	Additional CSS classes

Features

✓Dark gray-900 background
✓Client-side email regex validation
✓Success state with confirmation message
✓Accessible: sr-only label, aria-compliant form
✓All copy customizable via props