<section class="relative py-12 px-6 md:py-20 md:px-9 lg:py lg:py-28 lg:px-12 xl:py-32">
<div class="w-full mx-auto xl:grid xl:gap-y-8 xl:grid-cols-12 xl:gap-x-8">
<div class="grid gap-6 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:col-start-2 xl:col-end-12">
<a href="#" class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 aspect-square transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prozessüberwachung
</div>
</div>
<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 z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Schraubautomaten
</div>
<div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<span class="inline-flex items-center w-6 h-6 [&_*]:!stroke-white ">
<?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>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
</div>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Schraubautomaten
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Produkte & Services
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<span class="inline-flex items-center w-6 h-6 [&_*]:!stroke-white ">
<?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>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
</div>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Schraubautomaten
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prozessüberwachung
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<span class="inline-flex items-center w-6 h-6 [&_*]:!stroke-white ">
<?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>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
</div>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Schraubautomaten
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prozessüberwachung
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<span class="inline-flex items-center w-6 h-6 [&_*]:!stroke-white ">
<?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>
</div>
</div>
</a>
<div class="bg-primary aspect-square overflow-hidden">
<div class="py-10 px-5 md:py-15 md:px-10">
<h5 class="text-white text-left h5 ">
Unser Service für Ihr Projekt
</h5>
<div>
<ol class="font-bold text-white">
<li class="relative py-2 flex items-center w-full after:absolute after:bottom-0 after:left-0 after:w-full after:h-px after:bg-white after:opacity-20 last:after:hidden">
<span class="shrink-0 mr-2">
1.
</span>
<a href="/" class="flex items-center justify-between w-full text-white">
<span>
Jobs & Ausbildung
</span>
<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>
</a>
</li>
<li class="relative py-2 flex items-center w-full after:absolute after:bottom-0 after:left-0 after:w-full after:h-px after:bg-white after:opacity-20 last:after:hidden">
<span class="shrink-0 mr-2">
2.
</span>
<span>
Homeoffice
</span>
</li>
<li class="relative py-2 flex items-center w-full after:absolute after:bottom-0 after:left-0 after:w-full after:h-px after:bg-white after:opacity-20 last:after:hidden">
<span class="shrink-0 mr-2">
3.
</span>
<a href="/" class="flex items-center justify-between w-full text-white">
<span>
Jobs & Ausbildun
</span>
<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>
</a>
</li>
</ol>
</div>
</div>
</div>
<a href="#" class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
</div>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Schraubautomaten
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prozessüberwachung
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<span class="inline-flex items-center w-6 h-6 [&_*]:!stroke-white ">
<?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>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
</div>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Schraubautomaten
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prozessüberwachung
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<span class="inline-flex items-center w-6 h-6 [&_*]:!stroke-white ">
<?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>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
</div>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Schraubautomaten
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prozessüberwachung
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<span class="inline-flex items-center w-6 h-6 [&_*]:!stroke-white ">
<?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>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
</div>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Schraubautomaten
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prozessüberwachung
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<span class="inline-flex items-center w-6 h-6 [&_*]:!stroke-white ">
<?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>
</div>
</div>
</a>
</div>
</div>
</section>
<section class="relative py-12 px-6 md:py-20 md:px-9 lg:py lg:py-28 lg:px-12 xl:py-32">
<div class="w-full mx-auto xl:grid xl:gap-y-8 xl:grid-cols-12 xl:gap-x-8">
<div class="grid gap-6 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:col-start-2 xl:col-end-12">
{% render "@card" with {
title: 'Schraubautomaten',
style: 'media-full',
link: true,
linkHref: "#",
tags: [
{
title: 'Prozessüberwachung',
}
],
tagPosition: 'top',
} %}
{% render "@card" with {
title: 'Schraubautomaten',
link: true,
linkHref: "#",
style: 'media-freehand',
tag: 'Herstellung',
} %}
{% render "@card" with {
title: 'Schraubautomaten',
link: true,
linkHref: "#",
style: 'media-freehand',
tags: [
{
title: 'Prozessüberwachung',
}
]
} %}
{% render "@card" with {
title: 'Schraubautomaten',
link: true,
linkHref: "#",
style: 'media-freehand',
tags: [
{
title: 'Prozessüberwachung',
}
]
} %}
{% render "@card-links-collection" %}
{% render "@card" with {
title: 'Schraubautomaten',
link: true,
linkHref: "#",
style: 'media-freehand',
tags: [
{
title: 'Prozessüberwachung',
}
]
} %}
{% render "@card" with {
title: 'Schraubautomaten',
link: true,
linkHref: "#",
style: 'media-freehand',
tags: [
{
title: 'Prozessüberwachung',
}
]
} %}
{% render "@card" with {
title: 'Schraubautomaten',
link: true,
linkHref: "#",
style: 'media-freehand',
tags: [
{
title: 'Prozessüberwachung',
}
]
} %}
{% render "@card" with {
title: 'Schraubautomaten',
link: true,
linkHref: "#",
style: 'media-freehand',
tags: [
{
title: 'Prozessüberwachung',
}
]
} %}
</div>
</div>
</section>
/* No context defined. */
No notes defined.