<div class="bg-purple-background homepage-hero">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 z-100">
<div class="d-flex flex-column animate__animated animate__fadeInDown">
<div class="homepage-hero-title">
{{ pimcore_wysiwyg('hero-title', {
"toolbarGroups": [
{
"name": 'WYSIWYG 1',
"groups": [ 'basicstyles', 'colors', 'links','styles' ]
}
]
}) }}
</div>
<div class="row">
<div class="col-lg-9">
<div class="font-weight-medium mt-5 mt-md-4 mt-sm-4 homepage-hero-intro-content pr-lg-3">
{{ pimcore_wysiwyg('hero-description', {
"toolbarGroups": [
{
"name": 'WYSIWYG 1',
"groups": [ 'basicstyles', 'colors', 'links', 'styles' ]
}
]
}) }}
</div>
</div>
<div class="col-md-8 col-lg-7">
<div class="font-weight-medium mt-4 text-center text-md-left mt-sm-5 homepage-hero-download-label">
{{ pimcore_wysiwyg('hero-download-label', {
"toolbarGroups": [
{
"name": 'WYSIWYG 1',
"groups": [ 'basicstyles', 'colors', 'links', 'styles' ]
}
]
}) }}
</div>
<div class="text-center text-md-left">
<div class="app-buttons app-buttons--hero">
{% include 'components/google-play-button.html.twig' %}
{% include 'components/app-store-button.html.twig' %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{# <img src="{{ asset('static/images/header_illustration.webp') }}" alt="Homepage hero illustration" class="homepage-hero__image"> #}
{% if editmode %}
<div class="homepage-hero__image" {{ editmode ? 'style="right: 0; width: 400px;"' }}>
{{ pimcore_image("homePageHero", {
"min-width": "100%",
"height": 440,
}) }}
</div>
{% elseif not editmode and not pimcore_image('homePageHero').isEmpty() %}
<div class="homepage-hero__image">
{{ pimcore_image("homePageHero").getThumbnail("homePageHero").getHtml({ alt: pimcore_image("aboutHeroImage").getAlt() }) | raw }}
</div>
{% endif %}
</div>
</div>