<section class="relative py-12 px-6 bg-stone-100 md:py-20 md:pl-9 md:pr-0 lg:pl-12 2xl:py-40">
<div class="mx-auto">
<div class="relative z-10 grid gap-y-8 md:grid-cols-12 md:gap-x-8">
<div class="order-2 hidden md:block md:col-start-1 md:col-end-6 md:order-1 xl:mr-40 xl:col-start-2">
<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 Schmidt </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>
<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 11
</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="21.98" height="23.69" viewBox="0 0 21.98 23.69">
<path id="b" d="m4.98,13.92c-.27.03-.55.07-.82.11m.82-.11c3.99-.5,8.02-.5,12.01,0m-12.01,0l-.43,4.74m12.45-4.74c.27.03.55.07.82.11m-.82-.11l.43,4.74m0,0l.26,2.87c.07.7-.45,1.33-1.15,1.39-.04,0-.08,0-.12,0H5.56c-.71,0-1.28-.57-1.28-1.28,0-.04,0-.08,0-.12l.26-2.87m12.88,0h1.24c1.41,0,2.56-1.15,2.56-2.56h0v-7.16c.01-1.23-.88-2.28-2.09-2.47-.72-.11-1.45-.2-2.18-.28m-12.41,12.47h-1.24c-1.41,0-2.56-1.15-2.56-2.56v-7.16c-.01-1.23.88-2.28,2.09-2.47.72-.11,1.45-.2,2.18-.28m11.95,0c-3.97-.43-7.98-.43-11.94,0m11.94,0V2.03c0-.71-.57-1.28-1.28-1.28H6.3c-.71,0-1.28.57-1.28,1.28v4.16m12.8,3.94h0s0,0,0,0h0Zm-3.41,0h0s0,0,0,0h0Z" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
</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>
</div>
<div class="order-1 md:order-2 md:col-start-6 md:col-end-12">
<div>
<div class="mb-10">
<h3 class=" text-left h3 ">
Schreiben Sie <br /> uns eine Nachricht
</h3>
</div>
<form>
<div class="space-y-5">
<div class="space-y-5 md:space-y-0 md:grid md:grid-cols-2 md:gap-5">
<input type="text" placeholder="Vorname*" id="firstname" class="w-full py-3 px-6 text-black placeholder:text-black" />
<input type="text" placeholder="Nachname*" id="lastname" class="w-full py-3 px-6 text-black placeholder:text-black" />
</div>
<div class="space-y-5 md:space-y-0 md:grid md:grid-cols-2 md:gap-5">
<input type="text" placeholder="E-Mail" id="email" class="w-full py-3 px-6 text-black placeholder:text-black" />
<input type="text" placeholder="Telefonnummer" id="phone" class="w-full py-3 px-6 text-black placeholder:text-black" />
</div>
<div class="space-y-5 md:grid md:grid-cols-1">
<input type="text" placeholder="Betreff*" id="salution" class="w-full py-3 px-6 text-black placeholder:text-black" />
</div>
<textarea name="message" id="message" placeholder="Nachricht*" class="w-full h-40 max-h-56 py-3 px-6 text-black placeholder:text-black"></textarea>
<div class="space-y-5 md:space-y-10">
<button class="btn cursor-pointer inline-flex items-center w-full md:w-auto md:mt-5 bg-primary justify-between text-white py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95" type="submit">
<span class="shrink-0">
Formular absenden
</span>
<span class="inline-flex items-center w-4 h-4 ms-9 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
<div class="max-w-3xl">
<p class="default text-sm leading-customText">Mit dem Absenden dieses Formulars wird der <a href="#" class="text-[#424343] italic">Datenschutzerklärung</a> dieser Website und der Speicherung der übermittelten Daten zugestimmt. Die mit * gekennzeichneten Felder sind Pflichtfelder. </p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="relative py-12 px-6 bg-stone-100 md:py-20 md:pl-9 md:pr-0 lg:pl-12 2xl:py-40">
<div class="mx-auto">
<div class="relative z-10 grid gap-y-8 md:grid-cols-12 md:gap-x-8">
<div class="order-2 hidden md:block md:col-start-1 md:col-end-6 md:order-1 xl:mr-40 xl:col-start-2">
{% include '@contact-box' with {
name: "Mario Schmidt",
headline: "Noch Fragen? Gesprächsbedarf? Wir beraten Sie individuell.",
email: "info@apa-gmbh.de",
phone: "+49 6023 9716 0",
fax: "+49 6023 9716 11",
text: "Sie erreichen uns Mo - Fr von 9 - 17 Uhr.",
color: "text-white",
address: "Am Neuen Berg 1 . 63755 Alzenau"
} %}
</div>
<div class="order-1 md:order-2 md:col-start-6 md:col-end-12">
{% render '@contact' %}
</div>
</div>
</div>
</section>
/* No context defined. */
No notes defined.