Features Breakdown: Hero Banner + Marquee This section combines a high-impact visual banner with a dynamic scrolling text bar. It is designed for maximum layout flexibility, allowing you to position content anywhere over the image and control dimensions precisely for every device.

1. Dimensions & Ratios (Smart Sizing)

• Independent Aspect Ratios: Define the shape of the banner separately for Desktop (e.g., Fullscreen, Cinema 21:9, Standard 16:9) and Mobile (e.g., Fullscreen, Vertical 9:16, Square 1:1).

• Fixed Height Control: Option to override ratios and set a specific Pixel Height (e.g., 600px) for precise alignment.

• Side Margins: Choose between the global Theme Margins or set Custom Padding (px) to control how close the banner edges are to the screen.

2. Alignment Matrix (9-Point System)

• Total Position Control: You can place the text block anywhere over the image. Controls are completely independent for Mobile and Desktop:

  • Vertical: Top, Middle, Bottom.

  • Horizontal: Left, Center, Right.

  • Text Align: Left, Center, Right text justification.

  • Example: You can center the text on Mobile but push it to the Bottom-Left on Desktop.

3. Marquee (Scrolling Bar)

• Placement: Position the scrolling text bar at the absolute Top or Bottom of the banner.

• Animation: Control Speed (50 to 500), Direction (Left/Right), and Text Size (Desktop/Mobile).

• Styling: Toggle Uppercase, set a Separator symbol (e.g., •), and choose between a Solid Background or Transparent mode.

4. Buttons (Primary & Secondary)

• Dual Styles:

  • Primary Button: Solid background (supports Gradients), text color, and border.

  • Secondary Button: Transparent background (Outline style) with custom text and border colors.

• Global Shape: Adjust the Corner Radius (0-50px) and Text Size for both buttons simultaneously.

5. Typography & Content

• Font Control: Use the global Theme Font or force a specific Custom Font.

• Hierarchy: Dedicated fields for Heading (with a "Bold" toggle) and Subheading.

• Responsive Sizing: Individual sliders for Desktop and Mobile font sizes.

• Overlay: Add a colored layer over the background image with adjustable Opacity % to improve text readability.

6. Visibility

• Device Targeting: Simple checkboxes to Hide the section on Desktop or Mobile.