<div class="relative">
<button @click="showContact = !showContact; showMenu = false; showOverlay = false;" class="inline-flex bg-primary p-5 lg:p-7">
<span class="inline-flex items-center w-6 h-6 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.84 27.66">
<path id="b" d="m10.02,10.56c0,.3-.24.55-.55.55s-.55-.24-.55-.55.24-.55.55-.55.55.24.55.55h0Zm0,0h-.55m6,0c0,.3-.24.55-.55.55s-.55-.24-.55-.55.24-.55.55-.55c.3,0,.54.25.54.55h0Zm0,0h-.55m6,0c0,.3-.24.55-.55.55s-.55-.24-.55-.55.24-.55.55-.55c.3,0,.54.25.54.55h0Zm0,0h-.55M.75,14.94c-.04,2.32,1.64,4.32,3.93,4.69,1.58.23,3.18.41,4.79.54v6.75l6.08-6.08c.3-.3.71-.47,1.13-.48,2.84-.07,5.67-.31,8.47-.72,2.3-.37,3.97-2.37,3.94-4.69V6.19c.04-2.32-1.64-4.32-3.93-4.69-6.79-.99-13.68-.99-20.47,0C2.39,1.86.71,3.86.75,6.19v8.75h0Z" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
<div x-show="showContact" x-transition x-transition.duration.200ms class="fixed top-0 left-0 w-screen h-[75vh] max-w-md z-50 sm:h-auto lg:left-auto lg:right-0">
<div class="relative h-full max-w-md">
<button @click="showContact = !showContact; showMenu = false; showOverlay = false;" class="absolute top-9 left-10 text-white lg:top-12 lg:left-auto lg:right-12 z-10">
<span class="inline-flex items-center w-6 h-6 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 22.5">
<path id="b" d="m.75,21.75L21.75.75M.75.75l21,21" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
<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">
Interesse? Fragen?<br />Wir sind gerne für Sie da.
</h5>
<div class="flex flex-col items-start">
<a href="/" class="btn cursor-pointer inline-flex items-center mb-4 bg-primary justify-between text-white py-2 px-4 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
Kontakt aufnehmen
</span>
</a>
<div class="flex flex-row flex-wrap">
<a href="/" 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 href="/" 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>
<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>
</div>
<div class="relative">
<button @click="showContact = !showContact; showMenu = false; showOverlay = false;"
class="inline-flex bg-primary p-5 lg:p-7">
{% render "@icon" with {
name: 'speech-bubble-dots',
size: 'md'
} %}
</button>
<div x-show="showContact"
x-transition
x-transition.duration.200ms
class="fixed top-0 left-0 w-screen h-[75vh] max-w-md z-50 sm:h-auto lg:left-auto lg:right-0">
<div class="relative h-full max-w-md">
<button @click="showContact = !showContact; showMenu = false; showOverlay = false;"
class="absolute top-9 left-10 text-white lg:top-12 lg:left-auto lg:right-12 z-10">
{% render "@icon" with {
name: 'cross',
size: 'md'
} %}
</button>
{% include '@contact-box' with {
name: "Mario Schmidt",
headline: "Interesse? Fragen?<br />Wir sind gerne für Sie da.",
linkLabel: "Kontakt aufnehmen",
link: "/",
email: "info@apa-gmbh.de",
phone: "+49 6023 9716 0",
text: "Sie erreichen uns Mo - Fr von 9 - 17 Uhr.",
color: "text-white"
} %}
</div>
</div>
</div>
/* No context defined. */
No notes defined.