Features Breakdown: Hero Banner (Fade Effect) This section is a visually engaging hero banner that features a unique text animation. The main headline includes a cycling/fading word slot (e.g., "Achieve visibly [brighter / smoother / clearer] skin"), perfect for highlighting multiple benefits in a single view.

1. Layout & Dimensions

• Height Modes: Choose how the banner height is calculated:

  • Fullscreen: Forces the banner to cover 100% of the viewport height.

  • Fixed Pixel Height: Set specific heights for Mobile and Desktop.

  • Fixed Ratio: Lock the aspect ratio (e.g., 16:9, 4:3, Square).

• Alignment Matrix: Total control over content positioning.

  • Vertical: Top, Middle, Bottom.

  • Horizontal: Left, Center, Right.

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

  • Note: Alignment settings are completely independent for Mobile and Desktop.

2. Background & Media

• Device Specifics: Upload a separate Desktop Image (wide) and Mobile Image (tall) for perfect framing.

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

3. Animated Heading (The Core Feature)

• Structure: The headline is built in three parts:

  • Text Before: Static text (e.g., "Achieve visibly").

  • Animated Words: Up to 4 distinct words that cycle through with a smooth fade/slide effect (e.g., "brighter", "smoother", "clearer").

  • Text After: Static text (e.g., "skin").

• Animation Control: Set the Duration of the cycle (how fast the words change).

• Styling: Distinct controls for Color and Font Size for the Static Text vs. the Animated Words.

4. Additional Content Blocks

• Star Rating: Display a rating (e.g., "4.6 Excellent") with custom star color and size.

• Bullet List: A feature list (one item per line) with custom checkmark icons.

• Buttons: Add call-to-action buttons with support for Solid or Outline styles and custom colors/radius.

• Text Paragraph: Standard description text with adjustable sizing.

5. Typography & Spacing

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

• Layout Logic: Each block has a "Force New Line" checkbox.

  • Usage: If unchecked, blocks (like buttons) will sit side-by-side. If checked, the block pushes to a new row.

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

6. Visibility

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