Preview

Props

The Hero_2 block accepts the following props from PayloadCMS:

Installation

npx shadcn@latest add @uifoundry/hero-2

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
• Media Field - PayloadCMS dual upload field (light/dark variants)
• Header Field - PayloadCMS text field for headers
• Subheader Field - PayloadCMS text field for subheaders
• Style Utils - Tailwind utility functions including cn() class merger

Dependencies

This component requires the following NPM packages:

• React - JavaScript library for building user interfaces
• Next.js - React framework for production
• Payload CMS - Headless CMS for block configuration

Design Notes

Hero_2 features a modern two-column layout inspired by Tailark's Hero Section 4, optimized for marketing landing pages.

Layout Structure

• Desktop: Two-column grid with content on the left (60%) and image on the right (40%)
• Mobile: Single-column stack with content first, image below
• Breakpoint: Layout switches at medium screen size (768px)

Content Section

The left column contains:

• Heading: Large, bold text using text-balance utility for optimal line breaks
• Subheader: Muted description text with text-pretty for improved readability
• CTA Buttons: Two actions with different visual hierarchy
  • Primary: Solid background with shadow, size "lg"
  • Secondary: Outline style with transparent background

Image Section

The right column displays:

• Media Field: Theme-aware image with light/dark variants
• Container: Rounded corners with shadow for depth
• Aspect Ratio: Maintains 16:10 ratio for consistent layout
• Responsive Sizing: Scales proportionally on different screens

Visual Enhancements

• Decorative Gradients: Subtle background gradients for visual interest
• Shadows: Multiple shadow layers for depth perception
• Border Radius: Consistent rounded corners using CSS variables
• Spacing: Generous padding and gaps for breathing room

Responsive Behavior

• Desktop (1024px+): Full two-column layout with large typography
• Tablet (768px-1023px): Two columns maintained, reduced spacing
• Mobile (below 768px): Single column, stacked layout, smaller text sizes

Performance Considerations

• Uses Next.js Image optimization via MediaField component
• Lazy loads images below the fold
• Minimal re-renders with proper React component structure
• CSS-only animations for better performance

Customization Tips

1. Image Position: Modify grid column widths to adjust content/image ratio
2. CTA Hierarchy: Swap button variants to change visual emphasis
3. Background: Add custom background colors or patterns to decorative divs
4. Typography: Adjust text size scales for different brand personalities