<section class="relative py-12 px-6 md:py-20 md:pl-9 md:pr-0 lg:pt-28 lg:pb-12 lg:pl-12 xl:min-h-screen xl:h-px xl:pt-32 xl:pb-16">
<div class="mx-auto flex items-end h-full">
<div class="relative z-10 items-end grid grid-cols-1 gap-y-8 md:grid-cols-12 md:gap-x-8">
<div class="w-full md:col-start-1 md:col-end-6 xl:col-start-2">
<h2 class="text-white mb-8 text-left h3 ">
Ihre Effizienz <br /> im Fokus
</h2>
<p class="default text-base text-lg font-bold text-white mb-8 leading-customText">Unsere maßgeschneiderten Maschinenbau-Lösungen sind darauf ausgerichtet, Ihr Unternehmen auf die nächste Stufe zu heben. </p>
<p class="default text-base text-white mb-8 leading-customText">Mit modernster Technologie, langjähriger Erfahrung und einem engagierten Team entwickeln und implementieren wir effiziente und zuverlässige Produktionsanlagen, um Ihren Anforderungen gerecht zu werden. Vertrauen Sie auf unsere Qualität und Expertise für Ihren geschäftlichen Erfolg. </p>
<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">
Unsere Produkte entdecken
</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>
</a>
</div>
<div class="md:col-start-6 md:col-end-13 h-max md:ml-12">
<div x-data="{swiper: null}" x-init="const swiper = new Swiper($refs.container, {
slidesPerView: 1.2,
spaceBetween: 40,
direction: 'horizontal',
loop: false,
effect: 'slide',
scrollbar: {
el: '.swiper-scrollbar-custom',
dragClass: 'swiper-scrollbar-drag-custom',
draggable: true,
},
breakpoints: {
768: {
spaceBetween: 40,
slidesPerView: 1.3,
},
1024: {
spaceBetween: 40,
slidesPerView: 1.2,
},
1200: {
spaceBetween: 40,
slidesPerView: 1.8,
},
1440: {
spaceBetween: 40,
slidesPerView: 2.2,
}
}
})">
<div class="swiper" x-ref="container">
<div class="swiper-wrapper flex !ease-linear">
<div class="swiper-slide !h-auto overflow-hidden relative">
<a 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">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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 class="swiper-slide !h-auto overflow-hidden relative">
<a 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">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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 class="swiper-slide !h-auto overflow-hidden relative">
<a 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">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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 class="swiper-slide !h-auto overflow-hidden relative">
<a 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">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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 class="swiper-slide !h-auto overflow-hidden relative">
<a 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">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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 class="swiper-slide !h-auto overflow-hidden relative">
<a 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">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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 class="swiper-slide !h-auto overflow-hidden relative">
<a 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">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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>
<div class="pt-8 ">
<div class="swiper-scrollbar-custom w-full h-px bg-white">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
<div class="relative h-full w-full ">
<img class="object-cover w-full h-full" src="/image/placeholder.jpg" alt="" />
<div class="absolute bottom-0 left-0 w-full pointer-events-none h-full bg-gray-600 opacity-80 md:bg-gradient-to-b md:from-transparent md:to-gray-700 md:opacity-90 md:bg-transparent h-full"></div>
</div>
</div>
</div>
</section>
<section class="relative py-12 px-6 md:py-20 md:pl-9 md:pr-0 lg:pt-28 lg:pb-12 lg:pl-12 xl:min-h-screen xl:h-px xl:pt-32 xl:pb-16">
<div class="mx-auto flex items-end h-full">
<div class="relative z-10 items-end grid grid-cols-1 gap-y-8 md:grid-cols-12 md:gap-x-8">
<div class="w-full md:col-start-1 md:col-end-6 xl:col-start-2">
{% render "@headline" with {
headline: 'Ihre Effizienz <br/> im Fokus',
tag: 'h2',
size: 'h3',
classes: 'text-white mb-8 ',
} %}
{% render "@text" with {
text: 'Unsere maßgeschneiderten Maschinenbau-Lösungen sind darauf ausgerichtet, Ihr Unternehmen auf die nächste Stufe zu heben.',
classes: 'text-lg font-bold text-white mb-8'
} %}
{% render "@text" with {
text: 'Mit modernster Technologie, langjähriger Erfahrung und einem engagierten Team entwickeln und implementieren wir effiziente und zuverlässige Produktionsanlagen, um Ihren Anforderungen gerecht zu werden. Vertrauen Sie auf unsere Qualität und Expertise für Ihren geschäftlichen Erfolg.',
classes: 'text-white mb-8'
} %}
{% include '@button' with {
label: "Unsere Produkte entdecken",
style: 'primary',
icon: {
name: 'arrow',
classes: 'ms-9',
strokeColor: 'text-white'
}
} %}
</div>
<div class="md:col-start-6 md:col-end-13 h-max md:ml-12">
{% render '@card-slider' with {
slidesPerViewMd: '1.3',
slidesPerViewLg: '1.2',
slidesPerViewXl: '1.8',
slidesPerViewXXl: '2.2',
NoPaddingScrollbar: true
} %}
</div>
</div>
<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
{% include '@image' with {
src: '/image/placeholder.jpg',
overlay: 'overlay-gradient',
classes: 'object-cover w-full h-full'
} %}
</div>
</div>
</section>
/* No context defined. */
No notes defined.