Features Breakdown: Banner Advanced (Crave Style) This section is a highly modular, block-based hero banner designed for modern D2C brands. It supports video or image backgrounds and includes specialized blocks for "Social Proof" (e.g., "50k+ Happy Customers"), making it perfect for high-conversion landing pages.

1. Modular Block Structure

• Flexible Content: Unlike standard banners, you build the content stack using blocks:

  • Social Proof: Displays customer avatars, a star rating (e.g., ★★★★★), and a text claim (e.g., "Rated 4.9/5").

  • Heading: Main title with adjustable spacing.

  • Paragraph: Description text.

  • Buttons: A group block containing up to two call-to-action buttons.

2. Background & Media

• Media Options: Choose between a Solid Color, Image, or Video (MP4) background.

• Responsive Images: Upload separate images for Desktop and Mobile to ensure critical content isn't cropped.

• Positioning: Adjust the focal point (Top/Center/Bottom or Left/Center/Right) of the background image independently for mobile and desktop.

• Overlay: Add a colored layer with adjustable opacity to improve text readability.

3. Layout & Sizing

• Height Modes:

  • Fullscreen: Forces the banner to 100vh.

  • Fixed Pixel: Set specific heights (e.g., 600px).

  • Fixed Ratio: Lock proportions (e.g., 16:9, 1:1, 4:5).

  • Auto: Adapts to the content size.

• Alignment Matrix: Total control over content positioning (Vertical, Horizontal, and Text Alignment) separately for Mobile and Desktop.

• Width Control: Toggle "Full Width" or constrain content to a specific Max-Width.

4. Typography & Styling

• Font Source: Use the global Theme Font or force specific Custom Fonts for Headings and Body text.

• Granular Sizing: Independent font-size sliders for Desktop and Mobile for every text element (Heading, Body, Social Proof Text, Ratings).

• Colors: Complete color control for Text, Stars, Buttons, and Backgrounds (supports gradients).

5. Button Customization

• Grouping: Buttons are contained in a single block.

• Styles: Choose between Solid (filled) or Outline (transparent with border) for each button.

• Appearance: Customize the Button Background, Text Color, Border, and Corner Radius.

6. Visibility & Spacing

• Padding: Fine-tune margins (Top/Bottom) and side padding (Desktop/Mobile).

• Device Targeting: Options to hide the section on Mobile Only or Desktop Only.