<div class="relative w-full ">
<div class="h-full flex flex-col justify-end pt-60 px-6 pb-6 md:px-8 md:pb-8 xl:px-10 xl:pb-10">
<div class="absolute top-0 left-0 w-full h-full">
<div class="relative h-full w-full ">
<img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="" />
</div>
</div>
<div class="relative flex flex-col z-10">
<p class="text-white text-sm mb-2 text-white leading-customText">Mario Henzler </p>
<h5 class="h5 text-white text-left text-white">
Noch Fragen? Gesprächsbedarf? Wir beraten Sie individuell.
</h5>
<div class="flex flex-col items-start">
<div class="flex flex-row flex-wrap">
<a class="btn cursor-pointer inline-flex items-center text-white font-bold mb-4 mr-6 flex-row-reverse justify-end rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
info@apa-gmbh.de
</span>
<span class="inline-flex items-center w-4 h-4 w-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="18.93" height="18.94" viewBox="0 0 18.93 18.94">
<path id="b" d="m8.22,10.72L.75,6.77C6.18,3.78,12.07,1.75,18.18.75c-1,6.11-3.03,12.01-6.01,17.44l-3.96-7.47h0Zm0,0l4.83-4.83" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
<a class="btn cursor-pointer inline-flex items-center text-white font-bold mb-4 flex-row-reverse justify-end rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
+49 6023 9716 0
</span>
<span class="inline-flex items-center w-4 h-4 w-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="13.5" height="22.5" viewBox="0 0 13.5 22.5">
<path id="b" d="m5.25.75h-2.25C1.76.75.75,1.76.75,3v16.5c0,1.24,1.01,2.25,2.25,2.25h7.5c1.24,0,2.25-1.01,2.25-2.25V3c0-1.24-1.01-2.25-2.25-2.25h-2.25m-3,0v1.5h3V.75m-3,0h3m-3,18.75h3" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
</div>
</div>
<div class="flex items-center mb-6">
<span class="inline-flex items-center w-4 h-4 text-white w-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 20.25">
<g id="b">
<path id="c" d="m11.25,8.25c0,1.66-1.34,3-3,3s-3-1.34-3-3,1.34-3,3-3,3,1.34,3,3Z" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
<path id="d" d="m15.75,8.25c0,7.14-7.5,11.25-7.5,11.25,0,0-7.5-4.11-7.5-11.25C.75,4.11,4.11.75,8.25.75s7.5,3.36,7.5,7.5Z" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</g>
</svg>
</span>
<p class="text-white text-sm font-normal leading-customText">Am Neuen Berg 1 . 63755 Alzenau </p>
</div>
<p class="text-white text-sm text-white opacity-50 leading-customText">Sie erreichen uns Mo - Fr von 9 - 17 Uhr. </p>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-gray-700 opacity-90 pointer-events-none"></div>
</div>
{% set image = image %}
{% set name = name %}
{% set headline = headline %}
{% set link = link %}
{% set linkLabel = linkLabel %}
{% set email = email %}
{% set phone = phone %}
{% set fax = fax %}
{% set address = address %}
{% set text = text %}
{% set color = color %}
{% set aspectRatio = aspectRatio %}
<div class="relative w-full {{ aspectRatio ? aspectRatio : "h-full"}}">
<div class="h-full flex flex-col justify-end pt-60 px-6 pb-6 md:px-8 md:pb-8 xl:px-10 xl:pb-10">
<div class="absolute top-0 left-0 w-full h-full">
{% include '@image' with {
classes: 'w-full h-full object-cover',
} %}
</div>
<div class="relative flex flex-col z-10">
{% include '@text' with {
size: "sm",
text: name,
classes: 'mb-2 text-white'
} %}
{% include '@headline' with {
tag: "h5",
headline: headline,
classes: 'h5 text-white'
} %}
<div class="flex flex-col items-start">
{% if link %}
{% include '@button' with {
label: linkLabel,
link: link,
style: 'primary',
size: 'sm',
tag: 'a',
classes: 'mb-4'
} %}
{% endif %}
<div class="flex {% if link or address %}flex-row flex-wrap{% else %}flex-col{% endif %}">
{% include '@button' with {
label: email,
style: 'link',
classes: 'text-white font-bold mb-4 mr-6',
size: 'none',
tag: button.tag,
icon: {
name: 'send',
classes: 'w-8'
}
} %}
{% include '@button' with {
label: phone,
style: 'link',
classes: 'text-white font-bold mb-4',
size: 'none',
tag: button.tag,
icon: {
name: 'phone',
classes: 'w-8'
}
} %}
</div>
{% if fax %}
{% include '@button' with {
label: fax,
style: 'link',
classes: 'text-white font-bold mb-4',
size: 'none',
tag: button.tag,
icon: {
name: 'fax',
classes: 'w-8'
}
} %}
{% endif %}
</div>
{% if address %}
<div class="flex items-center mb-6">
{% render "@icon" with {
name: 'marker',
size: 'sm',
classes: 'w-8',
strokeColor: 'text-white'
} %}
{% include '@text' with {
size: "sm",
text: address,
color: color,
classes: "font-normal"
} %}
</div>
{% endif %}
{% include '@text' with {
size: "sm",
text: text,
classes: 'text-white opacity-50'
} %}
</div>
</div>
<div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-gray-700 opacity-90 pointer-events-none"></div>
</div>
{
"name": "Mario Henzler",
"headline": "Noch Fragen? Gesprächsbedarf? Wir beraten Sie individuell.",
"email": "info@apa-gmbh.de",
"phone": "+49 6023 9716 0",
"text": "Sie erreichen uns Mo - Fr von 9 - 17 Uhr.",
"color": "text-white",
"address": "Am Neuen Berg 1 . 63755 Alzenau"
}
No notes defined.