{% 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 %}