<section class="relative py-12 bg-gray-700 md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12">
<div class="mx-auto">
<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 px-6 md:col-start-1 md:col-end-5 xl:col-start-2">
<h2 class="text-white mb-8 text-left h3 ">
jobs
</h2>
<p class="default text-base font-bold text-white mb-8 leading-customText">Leidenschaft für Technik? </p>
<p class="default text-base text-white mb-8 leading-customText">Auf der Suche nach spannenden Projekten & beruflicher Entwicklung? Jetzt bewerben! </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">
alle Jobangebote
</span>
</a>
</div>
<div class="md:col-start-5 md:col-end-13 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: 2.2,
},
1200: {
spaceBetween: 40,
slidesPerView: 2.6,
},
1440: {
spaceBetween: 40,
slidesPerView: 3.6,
}
}
})">
<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-600 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-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</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>
</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-600 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-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</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>
</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-600 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-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</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>
</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-600 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-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</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>
</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-600 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-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</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>
</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-600 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-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</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>
</div>
</div>
<div class="pt-8 ">
<div class="swiper-scrollbar-custom w-full h-px bg-white">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="relative py-12 bg-gray-700 md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12">
<div class="mx-auto">
<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 px-6 md:col-start-1 md:col-end-5 xl:col-start-2">
{% render "@headline" with {
headline: 'jobs',
tag: 'h2',
size: 'h3',
classes: 'text-white mb-8',
} %}
{% render "@text" with {
text: 'Leidenschaft für Technik?',
classes: 'font-bold text-white mb-8'
} %}
{% render "@text" with {
text: 'Auf der Suche nach spannenden Projekten & beruflicher Entwicklung? Jetzt bewerben!',
classes: 'text-white mb-8'
} %}
{% include '@button' with {
label: "alle Jobangebote",
style: 'primary'
} %}
</div>
<div class="md:col-start-5 md:col-end-13 md:ml-12">
{% render '@card-slider' with {
slidesPerViewMd: '1.3',
slidesPerViewLg: '2.2',
slidesPerViewXl: '2.6',
slidesPerViewXXl: '3.6',
NoPaddingScrollbar: true,
cards: [
{
title: 'Mechaniker',
style: 'default',
tags: [
{
title: 'Voll- oder Teilzeit'
}
],
alignContent: 'top',
tagPosition: "top",
afterTitle: "m/w/d"
},
{
title: 'Mechaniker',
style: 'default',
tags: [
{
title: 'Voll- oder Teilzeit'
}
],
alignContent: 'top',
tagPosition: "top",
afterTitle: "m/w/d"
},
{
title: 'Mechaniker',
style: 'default',
tags: [
{
title: 'Voll- oder Teilzeit'
}
],
alignContent: 'top',
tagPosition: "top",
afterTitle: "m/w/d"
},
{
title: 'Mechaniker',
style: 'default',
tags: [
{
title: 'Voll- oder Teilzeit'
}
],
alignContent: 'top',
tagPosition: "top",
afterTitle: "m/w/d"
},
{
title: 'Mechaniker',
style: 'default',
tags: [
{
title: 'Voll- oder Teilzeit'
}
],
alignContent: 'top',
tagPosition: "top",
afterTitle: "m/w/d"
},
{
title: 'Mechaniker',
style: 'default',
tags: [
{
title: 'Voll- oder Teilzeit'
}
],
alignContent: 'top',
tagPosition: "top",
afterTitle: "m/w/d"
}
]
} %}
</div>
</div>
</div>
</section>
/* No context defined. */
No notes defined.