VITEC-website/packages/vitec/ContentBlocks/ContentElements/hero-section/config.yaml

name: vitec/herosection
group: vitec_custom_components
prefixFields: true
prefixType: vendor

fields:
  # ──────────────────────────────────────────────────────────────────────
  - identifier: tab_content
    type: Tab
    label: Content

  - identifier: eyebrow
    type: Text
    max: 50

  - identifier: header_section
    type: Palette
    label: Header
    fields:
      - identifier: header
        useExistingField: true
        required: true
      - type: Linebreak
      - identifier: header_layout
        useExistingField: true
      - identifier: header_position
        useExistingField: true
      - identifier: date
        useExistingField: true
      - type: Linebreak
      - identifier: header_link
        useExistingField: true
      - type: Linebreak
      - identifier: subheader
        useExistingField: true

  - identifier: bodytext
    useExistingField: true
    enableRichtext: true

  - identifier: cta
    type: Link
    allowedTypes:
      - page
      - url
      - file
      - email

  - identifier: cta_label
    type: Text
    default: 'Learn more'
    max: 30

  - identifier: secondary_cta
    type: Link
    allowedTypes:
      - page
      - url
      - file
      - email

  - identifier: secondary_cta_label
    type: Text
    max: 30

  - identifier: Vitec/ButtonStyle
    type: Basic

  - identifier: Vitec/SecondaryButtonStyle
    type: Basic

  - identifier: hero_layout_variant
    type: Select
    renderType: selectSingle
    default: fullscreen
    items:
      - label: Fullscreen
        value: fullscreen
      - label: Medium
        value: md
      - label: Small
        value: sm
      - label: Extra Small
        value: xs

  - identifier: show_logo_wall
    type: Checkbox
    default: 0

  - identifier: debug
    type: Checkbox
    default: 0

  # ──────────────────────────────────────────────────────────────────────
  - identifier: tab_images
    type: Tab
    label: Images

  - identifier: hero_bgimage
    type: File
    minitems: 0
    maxitems: 1
    allowed: common-image-types
    extendedPalette: true

  - identifier: hero_image
    type: File
    minitems: 0
    maxitems: 1
    allowed: common-image-types
    extendedPalette: true

  - identifier: hero_image_alignment
    type: Select
    renderType: selectSingle
    default: center
    items:
      - label: Left
        value: left
      - label: Center
        value: center
      - label: Right
        value: right
      - label: Fullwidth
        value: fullwidth

  # ──────────────────────────────────────────────────────────────────────
  - identifier: tab_video
    type: Tab
    label: Video

  - identifier: hero_video
    type: File
    minitems: 0
    maxitems: 1
    allowed: mp4,webm,ogv,mov,m4v

  - identifier: hero_video_poster
    type: File
    minitems: 0
    maxitems: 1
    allowed: common-image-types

  - identifier: hero_video_alignment
    type: Select
    renderType: selectSingle
    default: center
    items:
      - label: Left
        value: left
      - label: Center
        value: center
      - label: Right
        value: right
      - label: Fullwidth
        value: fullwidth

  - identifier: hero_video_autoplay
    type: Checkbox
    default: 0

  - identifier: hero_video_loop
    type: Checkbox
    default: 0

  - identifier: hero_video_muted
    type: Checkbox
    default: 1

  # --- Background video with overlay layer ---
  - identifier: hero_bgvideo
    type: File
    label: Background Video
    description: 'Fullscreen background video behind the hero content.'
    minitems: 0
    maxitems: 1
    allowed: mp4,webm,ogv,mov,m4v

  - identifier: hero_bgvideo_poster
    type: File
    minitems: 0
    maxitems: 1
    allowed: common-image-types

  - identifier: hero_overlay_color
    type: Color
    label: Overlay Color
    description: 'Overlay layer on top of the background video/image.'

  - identifier: hero_overlay_opacity
    type: Number
    label: 'Overlay Opacity (0–1)'
    format: decimal
    default: 0.4
    range:
      lower: 0
      upper: 1
    slider:
      step: 0.05
      width: 200