Preview

A modern hero section with a prominent badge/alert, email signup form, and feature list displayed over a themed background image. Based on Tailark Hero Section 6, this component combines lead capture functionality with clear value propositions in a visually engaging layout.

Key Features:

• Prominent badge with customizable label and link
• Email signup form with inline submit button
• Feature list with check marks for value propositions
• Background image with light/dark mode variants
• Gradient overlay for enhanced content readability
• Fully responsive with centered mobile layout

Props

The Hero_4 block accepts the following props from PayloadCMS:

Installation

npx shadcn@latest add @uifoundry/hero-4

If you encounter issues, check the registry setup guide for configuration help.

Registry Dependencies

This component uses the following registry components:

• button - Customizable button component with variants
• @uifoundry/header-field - PayloadCMS text field for headers
• @uifoundry/subheader-field - PayloadCMS text field for subheaders
• @uifoundry/media-field - PayloadCMS double upload field (light & dark variants)
• @uifoundry/block-constants - Block slug and group constants for PayloadCMS blocks

Dependencies

This component requires the following NPM packages:

• React - JavaScript library for building user interfaces
• Next.js - React framework for production
• Payload - Headless CMS and application framework
• Lucide React - Beautiful & consistent icon toolkit

Design Notes

Badge Component: The badge includes both a label (styled with muted background) and main text, connected with a separator and arrow icon. It's clickable and links to a customizable URL.

Email Form:

• Inline email input with mail icon
• Responsive submit button (shows text on desktop, icon on mobile)
• Form has focus states with ring styling
• Includes form validation attributes for email input

Features List:

• Displays as an unordered list with bullet points
• Automatically renders from the features array
• Each feature is a simple text item

Background Image:

• Positioned absolutely to cover the entire section
• Includes gradient overlay for better text contrast
• Radial gradient positioned at 65% horizontal, 25% vertical
• Automatically switches between light/dark variants based on theme

Responsive Behavior:

• Mobile: Centered text with full-width form
• Desktop: Left-aligned content with background extending to right side
• Form adapts to show full button text on larger screens

Performance Tips:

• Optimize background images (recommended 2796x2008px)
• Keep background images under 500KB for fast loading
• Use appropriate image formats (WebP with fallback)
• Consider lazy loading for background images