Engage with empathy. Adapt instantly.

{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Engage with empathy. Adapt instantly.',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Keeping pace with a changing market doesn’t have to be complicated. With Pega, you can hyper-personalize every interaction to stay timely and relevant – no matter what happens next.',
    tag: 'h2',
    size: 'xlarge',
  } only %}
  {% include '@bolt-components-list/list.twig' with {
    display: 'inline',
    align: 'center',
    separator: 'solid',
    items: [
      '<small>Exlpainer</small>',
      '<small>0:16</small>',
    ],
  } only %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Watch it come to life',
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content,
    attributes: {
      class: 'u-bolt-text-align-center'
    }
  } only %}
{% endset %}

{% set background %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      alt: 'Image alt text',
      src: '/images/heros/live-assets/pega-ES-header-bg-1-max-value.jpg',
      loading: 'eager',
      width: '100vw'
    },
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  padding_top: 'large',
  padding_bottom: 'large',
  background: background,
  align_items: 'center',
  template: [
    '67@from-medium'
  ],
  attributes: {
    class: 't-bolt-gray-xlight'
  }
} only %}