<footer>
<section class="relative pt-6 pb-12 px-6 md:pt-12 md:pb-24 md:px-9 lg:px-12">
<div class="mx-auto relative grid grid-cols-1 md:grid-cols-12 md:gap-x-8">
<div class="order-2 md:order-1 md:grid md:col-start-1 md:col-end-7 xl:col-start-2">
<div class="md:self-center xl:col-start-2 xl:col-end-[-1]">
<div class=" text-left h3 ">
ihr Projekt unser antrieb
</div>
<div class="md:pt-6">
<a class="btn cursor-pointer inline-flex items-center bg-primary justify-between text-white py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
Kontakt
</span>
<span class="inline-flex items-center w-4 h-4 ms-9 lg:ms-16 ">
<?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>
</a>
</div>
<div class="mt-8 md:mt-16">
<nav>
<ul class="grid grid-cols-2">
<li x-data="{ activeFooterAccordion: false }" aria-controls="accordion-panel-1" class="font-bold mb-4 text-sm lg:text-base">
<div class="flex flex-wrap items-center">
<a href="#" title="Produkte" class="relative ">
<span>
Produkte
</span>
</a>
</div>
</li>
<li x-data="{ activeFooterAccordion: false }" aria-controls="accordion-panel-2" class="font-bold mb-4 text-sm lg:text-base">
<div class="flex flex-wrap items-center">
<a href="#" title="Casestudies" class="relative ">
<span>
Casestudies
</span>
</a>
<button @click="activeFooterAccordion = ! activeFooterAccordion" :aria-expanded="activeFooterAccordion" id="accordion-header-2" class="flex items-center ml-3">
<span class="inline-flex items-center w-4 h-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
<path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
<ul class="w-full" x-cloak x-show="activeFooterAccordion" x-collapse aria-labelledby="accordion-header-2">
<li class="mt-4">
<a href="#" title="Jobs" class="font-normal ">Jobs</a>
</li>
<li class="mt-4">
<a href="#" title="LinkedIn" class="font-normal ">LinkedIn</a>
</li>
</ul>
</li>
<li x-data="{ activeFooterAccordion: false }" aria-controls="accordion-panel-3" class="font-bold mb-4 text-sm lg:text-base">
<div class="flex flex-wrap items-center">
<a href="#" title="Über uns" class="relative ">
<span>
Über uns
</span>
</a>
<button @click="activeFooterAccordion = ! activeFooterAccordion" :aria-expanded="activeFooterAccordion" id="accordion-header-3" class="flex items-center ml-3">
<span class="inline-flex items-center w-4 h-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
<path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
<ul class="w-full" x-cloak x-show="activeFooterAccordion" x-collapse aria-labelledby="accordion-header-3">
<li class="mt-4">
<a href="#" title="Jobs" class="font-normal ">Jobs</a>
</li>
<li class="mt-4">
<a href="#" title="LinkedIn" class="font-normal ">LinkedIn</a>
</li>
</ul>
</li>
<li x-data="{ activeFooterAccordion: false }" aria-controls="accordion-panel-4" class="font-bold mb-4 text-sm lg:text-base">
<div class="flex flex-wrap items-center">
<a href="#" title="APA TeamViewer" class="relative ">
<span>
APA TeamViewer
</span>
</a>
<button @click="activeFooterAccordion = ! activeFooterAccordion" :aria-expanded="activeFooterAccordion" id="accordion-header-4" class="flex items-center ml-3">
<span class="inline-flex items-center w-4 h-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
<path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
<ul class="w-full" x-cloak x-show="activeFooterAccordion" x-collapse aria-labelledby="accordion-header-4">
<li class="mt-4">
<a href="#" title="Jobs" class="font-normal ">Jobs</a>
</li>
<li class="mt-4">
<a href="#" title="LinkedIn" class="font-normal ">LinkedIn</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="flex mb-12 order-1 md:order-2 md:mb-0 md:col-start-7 md:col-end-13 md:row-start-1 md:row-end-3">
<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">
<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 . Jetzt Route planen </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="flex items-center justify-between mt-6 md:mt-auto lg:col-start-1 lg:col-end-7 order-3">
<div>
<nav>
<ul class="flex ">
<li class="relative text-xs mr-6 last:mr-0 shrink-0 after:content-['.'] after:block after:absolute after:-right-3 after:bottom-0 last:after:hidden lg:text-sm">
<div class="flex flex-wrap items-center">
<a href="#" title="APA © 2023" class="relative text-[#424343]">
<span>
APA © 2023
</span>
</a>
</div>
</li>
<li class="relative text-xs mr-6 last:mr-0 shrink-0 after:content-['.'] after:block after:absolute after:-right-3 after:bottom-0 last:after:hidden lg:text-sm">
<div class="flex flex-wrap items-center">
<a href="#" title="AGB" class="relative text-[#424343]">
<span>
AGB
</span>
</a>
</div>
</li>
<li class="relative text-xs mr-6 last:mr-0 shrink-0 after:content-['.'] after:block after:absolute after:-right-3 after:bottom-0 last:after:hidden lg:text-sm">
<div class="flex flex-wrap items-center">
<a href="#" title="Datenschutz" class="relative text-[#424343]">
<span>
Datenschutz
</span>
</a>
</div>
</li>
<li class="relative text-xs mr-6 last:mr-0 shrink-0 after:content-['.'] after:block after:absolute after:-right-3 after:bottom-0 last:after:hidden lg:text-sm">
<div class="flex flex-wrap items-center">
<a href="#" title="Impressum" class="relative text-[#424343]">
<span>
Impressum
</span>
</a>
</div>
</li>
</ul>
</nav>
</div>
<div>
<button x-data="{ open: false }" @click="open = !open" class="bg-gray-600 w-max items-center py-2 px-4 text-white flex gap-6 relative text-sm lg:text-base">
<div class="flex items-center gap-2">
<span class="inline-flex items-center w-8 h-8 ">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st4 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st5 {
fill: none;
stroke: #1D1E1C;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st6 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st7 {
fill: none;
stroke: #333333;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st8 {
fill: none;
stroke: #AF1B43;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st9 {
fill: none;
stroke: #FFFFFF;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st10 {
fill: none;
stroke: #333333;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st11 {
fill: none;
stroke: #AF1B43;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st12 {
fill: none;
stroke: #FFFFFF;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st13 {
fill: #FFFFFF;
}
.st14 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.11154;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st15 {
fill: none;
stroke: #AF1B43;
stroke-width: 11.01703;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st16 {
fill: #FFFFFF;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st17 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.11154;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st18 {
fill: none;
stroke: #FFFFFF;
stroke-width: 11.01703;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st19 {
fill: #FFFFFF;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st20 {
fill: none;
stroke: #333333;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st21 {
fill: none;
stroke: #333333;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st22 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st23 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st24 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st25 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st26 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st27 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st28 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
</style>
<g>
<circle class="st4" cx="200" cy="200" r="168.90668" />
<line class="st4" x1="31.09333" y1="200" x2="348.98587" y2="200" />
<line class="st4" x1="200" y1="31.09333" x2="200" y2="368.90668" />
<ellipse class="st4" cx="200" cy="200" rx="86.05878" ry="168.90668" />
<path class="st4" d="M84.50507,100.5538c86.32178,26.70246,165.8439,24.67728,244.36984-5.50942" />
<path class="st4" d="M67.65932,304.95563c91.3526-31.23828,178.50104-31.79688,261.21558,0" />
</g>
</svg>
</span>
<div class="max-sm:hidden">
Deutsch
</div>
</div>
<div class="relative w-4 max-sm:hidden">
<div class="bg-white w-full h-[1.5px] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
<div :class="open ? 'w-0 left-full' : 'w-full left-1/2' " class="bg-white h-[1.5px] transition-all absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90"></div>
</div>
<div :class="open ? 'opacity-100' : 'opacity-0'" class="absolute bottom-[100%] left-0 gap-4 max-sm:w-[164px] max-sm:translate-x-[-100px] transition-opacity pt-2 pb-4 px-4 text-black border border-[#F2F2F2] bg-white flex flex-col justify-start">
<a class="w-[8.5rem] items-center flex justify-between" href="/de">
<span>
Deutsch
</span>
<span>
<span class="inline-flex items-center w-8 h-8 stroke-primary fill-primary ">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="20px" width="20px" version="1.1" id="Layer_1" viewbox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path d="M40.267,14.628L20.974,33.921l-9.293-9.293c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l10,10 c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l20-20c0.391-0.391,0.391-1.023,0-1.414S40.657,14.237,40.267,14.628z " />
</svg>
</span>
</span>
</a>
<a class="w-[8.5rem] items-center flex justify-between" href="/en">
<span>
English
</span>
</a>
</div>
</button>
</div>
</div>
</div>
</section>
</footer>
<footer>
<section class="relative pt-6 pb-12 px-6 md:pt-12 md:pb-24 md:px-9 lg:px-12">
<div class="mx-auto relative grid grid-cols-1 md:grid-cols-12 md:gap-x-8">
<div class="order-2 md:order-1 md:grid md:col-start-1 md:col-end-7 xl:col-start-2">
<div class="md:self-center xl:col-start-2 xl:col-end-[-1]">
{% render "@headline" with {
headline: 'ihr Projekt unser antrieb',
tag: 'div',
size: 'h3',
} %}
<div class="md:pt-6">
{% include '@button' with {
label: "Kontakt",
style: 'primary',
size: 'default',
icon: {
name: 'arrow',
classes: 'ms-9 lg:ms-16',
strokeColor: 'text-white'
}
} %}
</div>
<div class="mt-8 md:mt-16">
{% render '@nav' with {
style: 'footer',
items: [
{
name: 'Produkte',
link: '#',
},
{
name: 'Casestudies',
link: '#',
children: [
{
name: 'Jobs',
link: '#',
},
{
name: 'LinkedIn',
link: '#',
}
]
},
{
name: 'Über uns',
link: '#',
children: [
{
name: 'Jobs',
link: '#',
},
{
name: 'LinkedIn',
link: '#',
}
]
},
{
name: 'APA TeamViewer',
link: '#',
children: [
{
name: 'Jobs',
link: '#',
},
{
name: 'LinkedIn',
link: '#',
}
]
}
]
} %}
</div>
</div>
</div>
<div class="flex mb-12 order-1 md:order-2 md:mb-0 md:col-start-7 md:col-end-13 md:row-start-1 md:row-end-3">
{% include '@contact-box' with {
name: "Mario Schmidt",
headline: "Interesse? Fragen?<br />Wir sind gerne für Sie da.",
email: "info@apa-gmbh.de",
phone: "+49 6023 9716 0",
address: "Am Neuen Berg 1 . 63755 Alzenau . Jetzt Route planen",
text: "Sie erreichen uns Mo - Fr von 9 - 17 Uhr.",
color: "text-white"
} %}
</div>
<div class="flex items-center justify-between mt-6 md:mt-auto lg:col-start-1 lg:col-end-7 order-3">
<div>
{% render '@nav' with {
style: 'service',
classes: "text-[#424343]",
items: [
{
name: 'APA © 2023',
link: '#'
},
{
name: 'AGB',
link: '#'
},
{
name: 'Datenschutz',
link: '#'
},
{
name: 'Impressum',
link: '#'
}
]
} %}
</div>
<div>
{% render '@language-switch' with {
Activelanguage: "Deutsch",
languages: [
{
"label": "Deutsch",
"link": "/de",
"active": true
},
{
"active": false,
"label": "English",
"link": "/en"
}
]
} %}
</div>
</div>
</div>
</section>
</footer>
/* No context defined. */
No notes defined.