<section class="relative py-12 px-6 md:py-60 md:pl-9 md:pr-0 lg:pl-12 min-h-[60vh]">
<div x-data="{ open: false }" class="mx-auto">
<div class="relative z-10 grid grid-cols-12 gap-y-8 space-y-6">
<div @click=" open = !open " class="w-full col-start-2 col-end-9 flex flex-col">
<h4 class="text-bold">Wonach suchen Sie?</h4>
<div class="[&_input]:bg-gray-100 bg-gray-100 py-2 pr-12 flex items-center relative">
<input type="text" placeholder="Bitte Suchbegriff eingeben" id="search" class="w-full py-3 px-6 text-black placeholder:text-black" />
<span class="absolute top-1/2 -translate-y-1/2 right-4">
<span class="block items-center w-8 h-8 stroke-primary ">
<svg class="w-10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
.red-svg {
fill: none;
stroke-width: 12px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
</style>
<g>
<path class="red-svg" d="M56.09669,177.27364c-18.35368,0-33.37032-15.01665-33.37032-33.37033" />
<path class="red-svg" d="M177.27364,143.90331c0,18.35368-15.01665,33.37033-33.37033,33.37033" />
<path class="red-svg" d="M143.90331,22.72637c18.35368,0,33.37033,15.01664,33.37033,33.37032" />
<path class="red-svg" d="M22.72637,56.09669c0-18.35368,15.01664-33.37032,33.37032-33.37032" />
<circle class="red-svg" cx="98.2375" cy="94.95036" r="34.59236" />
<line class="red-svg" x1="123.56695" y1="118.49943" x2="147.69177" y2="142.62425" />
</g>
</svg>
</span>
</span>
</div>
</div>
<div x-show="!open" class="col-start-2 col-end-9 space-y-4">
<p class="default text-base leading-customText">Häufig gesucht: </p>
<ul class="flex items-center gap-3">
<li>
<button>
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 text-xl">
Produkte & Services
</div>
</button>
</li>
<li>
<button>
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 text-xl">
Jobs & Karriere
</div>
</button>
</li>
<li>
<button>
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 text-xl">
Batterie-Prüfanlagen
</div>
</button>
</li>
</ul>
</div>
<div x-show="open" class="col-start-2 col-end-11 space-y-12">
<p class="default text-xl my-4 leading-customText">Ihre Suche nach "<span style="font-weight: bold">Batterie-Prüfanlagen</span>" lieferte 5 Treffer. </p>
<ul class="space-y-6">
<li>
<div class="bg-gray-100 p-4 relative">
<h5 class="m-o mb-0 font-bold text-left h5 ">
Batterie-Prüfanlagen
</h5>
<p class="default text-sm mb-4 mt-2 leading-customText">/produkte-services/batterie-pruefanlagen </p>
<p class="default text-base w-[75%] py-4 leading-customText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<button class="inline-flex bg-primary p-4 [&_path]:stroke-white absolute bottom-0 right-0">
<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 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>
</li>
<li>
<div class="bg-gray-100 p-4 relative">
<h5 class="m-o mb-0 font-bold text-left h5 ">
Batterie-Prüfanlagen
</h5>
<p class="default text-sm mb-4 mt-2 leading-customText">/produkte-services/batterie-pruefanlagen </p>
<p class="default text-base w-[75%] py-4 leading-customText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<button class="inline-flex bg-primary p-4 [&_path]:stroke-white absolute bottom-0 right-0">
<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 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>
</li>
<li>
<div class="bg-gray-100 p-4 relative">
<h5 class="m-o mb-0 font-bold text-left h5 ">
Batterie-Prüfanlagen
</h5>
<p class="default text-sm mb-4 mt-2 leading-customText">/produkte-services/batterie-pruefanlagen </p>
<p class="default text-base w-[75%] py-4 leading-customText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<button class="inline-flex bg-primary p-4 [&_path]:stroke-white absolute bottom-0 right-0">
<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 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>
</li>
<li>
<div class="bg-gray-100 p-4 relative">
<h5 class="m-o mb-0 font-bold text-left h5 ">
Batterie-Prüfanlagen
</h5>
<p class="default text-sm mb-4 mt-2 leading-customText">/produkte-services/batterie-pruefanlagen </p>
<p class="default text-base w-[75%] py-4 leading-customText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<button class="inline-flex bg-primary p-4 [&_path]:stroke-white absolute bottom-0 right-0">
<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 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>
</li>
</ul>
</div>
</div>
</div>
</section>
{% set tags = tags %}
<section class="relative py-12 px-6 md:py-60 md:pl-9 md:pr-0 lg:pl-12 min-h-[60vh]">
<div x-data="{ open: false }" class="mx-auto">
<div class="relative z-10 grid grid-cols-12 gap-y-8 space-y-6">
<div @click=" open = !open " class="w-full col-start-2 col-end-9 flex flex-col">
<h4 class="text-bold">Wonach suchen Sie?</h4>
{% render "@search-element" %}
</div>
<div x-show="!open" class="col-start-2 col-end-9 space-y-4">
{% render "@text" with {
text: 'Häufig gesucht:'
} %}
<ul class="flex items-center gap-3">
{% for tag in tags %}
<li>
<button>
{% render "@tag" with {
title: tag.label,
style: "gray",
"position": "bottom",
classes: "text-xl"
} %}
</button>
</li>
{% endfor %}
</ul>
</div>
<div x-show="open" class="col-start-2 col-end-11 space-y-12">
{% render "@text" with {
text: 'Ihre Suche nach "<span style="font-weight: bold">Batterie-Prüfanlagen</span>" lieferte 5 Treffer.',
size: "xl",
classes: "my-4"
} %}
<ul class="space-y-6">
{% for i in [1,2,3,4] %}
<li>
{% render "@search-response" with {
"heading": "Batterie-Prüfanlagen",
"path": "/produkte-services/batterie-pruefanlagen",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</section>
{
"tags": [
{
"label": "Produkte & Services",
"value": "produkte_&_services"
},
{
"label": "Jobs & Karriere",
"value": "jobs_&_karriere"
},
{
"label": "Batterie-Prüfanlagen",
"value": "batterie-prüfanlagen"
}
]
}
No notes defined.