{% extends "base.html.twig" %}{% block content %} {{ include('@components/hero-header.html.twig', { image: content.image ? content.image.url, text: content.heroImageText }) }} {% if (content.teaserUrlTitle1 and content.teaserUrl1) %} {{ include('@components/image-text-section.html.twig', { image: content.teaserImage1.url|default('/website/images/placeholder-image.png'), text: content.teaserText1, order: { text: '1', image: '2' }, button: { withIcon: true, text: content.teaserUrlTitle1, link: content.teaserUrl1 } }) }} {% else %} {{ include('@components/image-text-section.html.twig', { image: content.teaserImage1.url|default('/website/images/placeholder-image.png'), text: content.teaserText1, order: { text: '1', image: '2' } }) }} {% endif %} <div class="bg-neutral-grey py-5"> <div class="container"> <div class="row"> <div class="col-12 mb-4"> <h2 class="point light">{{ content.teaserBlocksTitle }}</h2> </div> </div> <div class="row gy-5 gap-lg-0"> {% for teaserBlock in content.teaserBlocks %} <div class="col-12 col-lg-4"> <div class="bg-white white-box h-100"> <div class="p-3 p-lg-5"> {{ teaserBlock.text|raw }} {% if (teaserBlock.outerUrl and teaserBlock.outerUrlTitle) %} {{ include('@components/button-with-icon.html.twig', { text: teaserBlock.outerUrlTitle, link: { href: teaserBlock.outerUrl }, order: { icon: '2', text: '1' }, }) }} {% endif %} </div> </div> </div> {% endfor %} </div> </div> </div> <div class="py-5 mt-7"> <div class="container"> {{ include('@components/image-text-section.html.twig', { text: content.textImageText, image: content.textImageImage.url|default('/website/images/placeholder-image.png'), }) }} </div> </div> <div class="py-5 bg-neutral-grey mt-7" id="angebot"> <div class="container"> <div class="row mb-5"> <div class="col-12"> <h2 class="point light">{{ content.registerProcessTitle }}</h2> <hr> {{ content.registerProcessText|raw }} </div> </div> <div class="row gy-5 gap-lg-0"> {% for registerProcessBlock in content.registerProcessBlocks %} <div class="col-12 col-lg-6 col-xl-4"> <div class="slide-up-rounded-border-box-shadow register-process-card text-center icon-white-box-with-buttons p-3 p-xl-5 d-flex justify-content-between flex-column h-100"> <div> <img class="icon mb-4" src="{{ registerProcessBlock.icon is not empty ? registerProcessBlock.icon.formats["sulu-100x100"] : '' }}" alt=""> {{ registerProcessBlock.text1|raw }} <div class="py-4"> {% if (registerProcessBlock.available) %} {{ include('@components/button-with-icon.html.twig', { text: registerProcessBlock.checkPermissionButtonText, link: { href: registerProcessBlock.checkPermissionButtonLink }, order: { icon: '2', text: '1' }, color: 'check-permission-button', iconColor: 'text-dark' }) }} <div class="pt-4">{{ registerProcessBlock.text2|raw }}</div> {% else %} {{ include('@components/button.html.twig', { text: 'Bald verfügbar', color: 'bg-neutral-grey', disabled: true }) }} {% endif %} </div> </div> {% if (registerProcessBlock.available) %} <div> {% if (registerProcessBlock.copyCode) %} <div class="py-4"> <div data-controller="copy-to-clipboard" data-action="click->copy-to-clipboard#copy" data-copy-to-clipboard-code-value="{{ registerProcessBlock.copyCode }}" data-copy-to-clipboard-copy-text-value="{{ registerProcessBlock.copyCodeButtonText }}" data-copy-to-clipboard-target="button" class="copy-button"> {{ include('@components/button-with-icon.html.twig', { text: registerProcessBlock.copyCodeButtonText, color: 'text-white bg-yellow', icon: 'fa-copy', iconColor: 'text-white', order: { icon: '2', text: '1' } }) }} </div> </div> {% endif %} {% if (registerProcessBlock.orderButtonLink) %} <div class="mt-4"> {{ include('@components/button-with-icon.html.twig', { text: registerProcessBlock.orderButtonText, link: { href: registerProcessBlock.orderButtonLink }, order: { icon: '2', text: '1' } }) }} </div> {% endif %} </div> {% endif %} </div> </div> {% endfor %} </div> </div> <div class="container"> <div class="row mb-5"> <div class="col-12"> {{ content.directOrderText|raw }} </div> </div> <div class="row gy-5 gap-lg-0"> {% for directOrderBlock in content.directOrderBlocks %} {% if directOrderBlock.type == 'directOrderBlock' %} <div class="col-12 col-lg-6"> <div class="slide-up-rounded-border-box-shadow register-process-card icon-white-box-with-buttons p-3 p-xl-5 d-flex justify-content-between flex-column h-100"> <div> {{ directOrderBlock.text1|raw }} <div class="pt-4">{{ directOrderBlock.text2|raw }}</div> <div class="py-4"> {{ include('@components/button-with-icon.html.twig', { text: directOrderBlock.checkPermissionButtonText, link: { href: directOrderBlock.checkPermissionButtonLink }, order: { icon: '2', text: '1' }, color: 'check-permission-button', iconColor: 'text-dark' }) }} </div> </div> <div> <div class="pt-4">{{ directOrderBlock.text3|raw }}</div> {% if (directOrderBlock.copyCode) %} <div class="py-4"> <div data-controller="copy-to-clipboard" data-action="click->copy-to-clipboard#copy" data-copy-to-clipboard-code-value="{{ directOrderBlock.copyCode }}" data-copy-to-clipboard-copy-text-value="{{ directOrderBlock.copyCodeButtonText }}" data-copy-to-clipboard-target="button" class="copy-button"> {{ include('@components/button-with-icon.html.twig', { text: directOrderBlock.copyCodeButtonText, color: 'text-white bg-yellow', icon: 'fa-copy', iconColor: 'text-white', order: { icon: '2', text: '1' } }) }} </div> </div> {% endif %} <div class="pt-4">{{ directOrderBlock.text4|raw }}</div> {% if (directOrderBlock.orderButtonLink) %} <div class="mt-4"> {{ include('@components/button-with-icon.html.twig', { text: directOrderBlock.orderButtonText, link: { href: directOrderBlock.orderButtonLink }, order: { icon: '2', text: '1' } }) }} </div> {% endif %} <div class="pt-4">{{ directOrderBlock.text5|raw }}</div> </div> </div> </div> {% else %} <div class="col-12 col-lg-6"> <div class="slide-up-rounded-border-box-shadow register-process-card icon-white-box-with-buttons p-3 p-xl-5 d-flex justify-content-between flex-column h-100"> <div> {{ directOrderBlock.text1|raw }} </div> </div> </div> {% endif %} {% endfor %} </div> </div> </div> <div class="bg-yellow py-5" id="newsletter"> <div class="container"> <div class="row"> <div class="col-12 mb-5"> <h2 class="point dark">{{ content.newsletterTitle }}</h2> {{ content.newsletterText|raw }} </div> <div class="col-12"> {% if content.form %} {% if app.request.get('send') != 'true' %} {% form_theme content.form 'components/forms/newsletter.html.twig' %} {{ form(content.form) }} {% else %} {{ include('@components/alert.html.twig', { type: 'success', text: view.form.entity.successText }) }} {% endif %} {% endif %} </div> </div> </div> </div> <div class="container py-5"> <div class="row"> <div class="col-12 mb-4"> <h2 class="point light">{{ content.teaserBlocksTitle1 }}</h2> </div> </div> <div class="row gy-5 gap-lg-0"> {% for teaserBlock in content.teaserBlocks1 %} <div class="col-12 col-md-6 col-lg-4"> <div class="white-box h-100"> <div class="p-3 p-lg-5"> <img class="mb-4 d-block mx-auto" src="{{ teaserBlock.icon is not empty ? teaserBlock.icon.formats["sulu-100x100"] : '' }}" alt=""> {{ teaserBlock.text|raw }} </div> </div> </div> {% endfor %} </div> </div> <div class="container my-5"> <div class="row"> <div class="col-12"> <h2 class="point light">{{ content.appsTitle }}</h2> <p>{{ content.appsText|raw }}</p> </div> <div class="col-12"> <div class="accordion" id="appsInIt"> {% for item in content.appsBlock %} {% set itemId = ["appsInIt", item.title|slug]|join('-')|lower %} <div class="accordion-item yellow my-2 border-0 rounded-0"> <div class="accordion-header" id="{{ itemId }}"> <button class="d-flex align-items-center accordion-button icon collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ itemId }}" aria-expanded="false" aria-controls="collapse-{{ itemId }}"> <span class="fw-bolder">{{ item.title }}</span> </button> </div> <div id="collapse-{{ itemId }}" class="accordion-collapse collapse" aria-labelledby="{{ itemId }}" data-bs-parent="#appsInIt"> <div class="accordion-body"> {{ item.text|raw }} </div> </div> </div> {% endfor %} </div> </div> </div> <div class="row mt-6"> <div class="col-12"> <img class="d-none d-lg-block w-100" src="{{ asset('build/website/images/diagram.svg') }}" alt=""> <img class="d-lg-none w-100" src="{{ asset('build/website/images/diagram-mobile.svg') }}" alt=""> </div> </div> {{ include('@components/table-section.html.twig', { table: content.tabel, }) }} <div class="row"> <div class="col-12"> {{ content.additionalInfoBlock|raw }} </div> </div> </div>{% endblock %}{% block custom_javascripts %} {{ encore_entry_script_tags('forms') }}{% endblock %}