APA Component Library

Hero: Jobdetailpage 

<section class="relative pt-44 pb-10 px-6 md:px-9 xl:pr-0 xl:pl-12 xl:pt-44 xl:pb-32">
    <div class="mx-auto xl:grid xl:grid-cols-12 xl:gap-10">
        <div class="mb-5 w-full xl:col-start-1 xl:col-start-2 xl:col-end-13">
            <a href="#" class="inline-flex underline">

                <span class="inline-flex items-center w-6 h-6     ">
                    <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="28.46" height="12.73" viewBox="0 0 28.46 12.73">
                        <path id="b" d="m6.37,11.98L.75,6.37m0,0L6.37.75M.75,6.37h26.96" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                    </svg>
                </span>

                <span class="ml-4">
                    Karriere & aktuelle Jobs bei APA
                </span>
            </a>
        </div>

        <div class="w-full relative mb-8 z-10 xl:col-start-1 xl:col-end-7 xl:col-start-2">

            <h1 class="normal-case text-left h2 ">
                SPS Programmierer<br />Steuerungstechnik

                <sub class="bottom-0 text-zinc-400 text-lg font-normal normal-case lg:text-2xl">
                    m/w/d
                </sub>

            </h1>

            <p class="default text-base font-bold xl:text-2xl leading-customText">Du entwirfst, entwickelst und optimierst die Steuerungssysteme für unsere industriellen Anlagen.<br />
                Deine Aufgaben umfassen die Programmierung von speicher-programmierbaren Steuerungen (SPS), die Implementierung von Automatisierungslösungen und die Gewährleistung reibungsloser Abläufe in der Produktion. </p>

        </div>

        <div class="relative p-5 bg-gray-100 md:p-10 xl:self-start xl:col-start-9 xl:col-end-13">
            <div>
                <div class="md:flex md:items-center md:space-x-14">

                    <div class="flex items-center mb-6 md:mb-6">

                        <span class="inline-flex items-center w-6 h-6  text-primary  mr-4 shrink-0 ">
                            <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.37 23.37">
                                <path id="b" d="m5.31.75v2.73M18.06.75v2.73M.75,19.88V6.22c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v13.67m-21.87,0c0,1.51,1.22,2.73,2.73,2.73h16.4c1.51,0,2.73-1.22,2.73-2.73m-21.87,0v-9.11c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v9.11" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                            </svg>
                        </span>

                        <p class="default text-base  leading-customText">01.01.2024 </p>

                    </div>

                    <div class="flex items-center mb-6 md:mb-6">

                        <span class="inline-flex items-center w-6 h-6  text-primary  mr-4 shrink-0 ">
                            <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.3 22.3">
                                <path id="b" d="m11.15,4.22v6.93h5.2m5.2,0c0,5.74-4.66,10.4-10.4,10.4S.75,16.89.75,11.15C.75,5.41,5.41.75,11.15.75s10.4,4.66,10.4,10.4h0Z" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                            </svg>
                        </span>

                        <p class="default text-base  leading-customText">Voll- oder Teilzeit </p>

                    </div>
                </div>

                <div>

                    <div class="flex items-center mb-6 md:mb-6">

                        <span class="inline-flex items-center w-6 h-6  text-primary  mr-4 shrink-0 ">
                            <?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="default text-base  leading-customText">63755 Alzenau, Homeoffice </p>

                    </div>
                </div>

                <div class="flex h-16">

                    <a class="btn cursor-pointer inline-flex items-center mr-4 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">
                            Jetzt bewerben
                        </span>

                        <span class="inline-flex items-center w-4 h-4    ml-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 class="flex flex-col-reverse" x-data="{ open: false }">
                        <button @click="open = !open" class="inline-flex bg-gray-600 p-5">

                            <span class="inline-flex items-center w-6 h-6  text-white   ">
                                <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 21">
                                    <path id="b" d="m4.97,9.41c-.6-1.09-1.97-1.48-3.06-.87-1.09.6-1.48,1.97-.87,3.06s1.97,1.48,3.06.87c.37-.2.67-.51.87-.87m0-2.19c.38.68.38,1.51,0,2.19m0-2.19l9.57-5.31m-9.57,7.5l9.57,5.31m0,0c-.6,1.09-.21,2.46.88,3.06,1.09.6,2.46.21,3.06-.88.6-1.09.21-2.46-.87-3.06-1.09-.6-2.46-.21-3.06.87,0,0,0,0,0,0Zm0-12.81c.6,1.09,1.97,1.48,3.06.87,1.09-.6,1.48-1.97.87-3.06s-1.97-1.48-3.06-.87c0,0,0,0,0,0-1.09.6-1.48,1.97-.87,3.06,0,0,0,0,0,0Z" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                </svg>
                            </span>

                        </button>
                        <div class="flex flex-col items-center gap-4 relative transition-opacity bg-white px-2" :class="open ? 'h-auto z-10 border border-[#F2F2F2]' : 'h-0 overflow-hidden' ">
                            <span>Teilen</span>
                            <a target="_blank" href="#">

                                <span class="inline-flex items-center w-8 h-8     [&_*]:stroke-[none!important]">
                                    <?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                        <defs>
                                            <style>
                                                .cls-1 {
                                                    fill: none;
                                                }

                                                .cls-1,
                                                .cls-2 {
                                                    stroke-width: 0px;
                                                }

                                                .cls-2 {
                                                    fill: #b0063e;
                                                    fill-rule: evenodd;
                                                }
                                            </style>
                                        </defs>
                                        <rect class="cls-1" x="31.86" y="31.53" width="136.28" height="136.93" />
                                        <path id="whatsapp" class="cls-2" d="M148.28,51.43c-26.51-26.5-69.48-26.5-95.98,0-21.7,21.7-26.13,55.27-10.81,81.86l-9.63,35.16,35.97-9.44c9.95,5.42,21.1,8.26,32.43,8.26h.03c37.49-.02,67.87-30.43,67.85-67.92-.01-17.97-7.15-35.21-19.85-47.93h0ZM100.28,155.83h0c-10.11,0-20.03-2.73-28.72-7.88l-2.06-1.22-21.35,5.6,5.66-20.79-1.34-2.13c-16.55-26.39-8.58-61.19,17.81-77.74,26.39-16.55,61.19-8.58,77.74,17.81,16.55,26.39,8.58,61.19-17.81,77.74-8.98,5.63-19.37,8.62-29.97,8.62h.03ZM131.22,113.6c-1.69-.85-10.03-4.95-11.59-5.51s-2.69-.85-3.81.85-4.38,5.52-5.37,6.64-1.98,1.27-3.67.42c-5-1.99-9.61-4.84-13.64-8.41-3.71-3.43-6.89-7.39-9.43-11.75-.99-1.69-.1-2.62.74-3.46s1.69-1.98,2.55-2.97c.69-.85,1.26-1.8,1.69-2.82.46-.95.41-2.07-.14-2.97-.42-.86-3.81-9.21-5.23-12.6-1.37-3.31-2.78-2.85-3.81-2.91s-2.12-.06-3.25-.06c-1.73.05-3.36.82-4.5,2.12-3.88,3.67-6.05,8.8-5.96,14.14.55,6.4,2.96,12.49,6.93,17.54,7.27,10.9,17.25,19.72,28.95,25.6,3.16,1.36,6.38,2.55,9.67,3.57,3.46,1.06,7.13,1.29,10.7.68,4.77-.97,8.92-3.9,11.44-8.06,1.11-2.53,1.45-5.34.99-8.06-.42-.7-1.55-1.13-3.25-1.98h-.01Z" />
                                    </svg>
                                </span>

                            </a>
                            <a target="_blank" href="#">

                                <span class="inline-flex items-center w-8 h-8     [&_*]:stroke-[none!important]">
                                    <?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                        <defs>
                                            <style>
                                                .cls-1 {
                                                    fill: none;
                                                }

                                                .cls-1,
                                                .cls-2 {
                                                    stroke-width: 0px;
                                                }

                                                .cls-2 {
                                                    fill: #b0063e;
                                                }
                                            </style>
                                        </defs>
                                        <rect class="cls-1" x="43.26" y="43.26" width="113.48" height="113.48" />
                                        <path id="linkedin" class="cls-2" d="M68.66,156.74h-23.53v-75.75h23.53v75.75ZM56.89,70.64c-7.56.03-13.72-6.07-13.75-13.63-.03-7.56,6.07-13.72,13.63-13.75,7.56-.03,13.71,6.06,13.75,13.62,0,7.55-6.08,13.69-13.63,13.76M156.72,156.74h-23.47v-36.9c0-8.79-.17-20.06-12.23-20.06s-14.1,9.57-14.1,19.43v37.51h-23.51v-75.73h22.56v10.32h.33c4.6-7.87,13.15-12.57,22.26-12.24,23.81,0,28.19,15.68,28.19,36.04v41.62h-.02Z" />
                                    </svg>
                                </span>

                            </a>
                            <a target="_blank" href="#">

                                <span class="inline-flex items-center w-8 h-8   fill-primary  ">
                                    <?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                        <path id="facebook" d="M168.89,100.42c0-38.04-30.85-68.88-68.89-68.88-38.04,0-68.88,30.85-68.88,68.89,0,33.89,24.65,62.74,58.12,68.03v-48.14h-17.49v-19.91h17.49v-15.2c0-17.26,10.28-26.8,26.02-26.8,5.17.07,10.32.52,15.42,1.35v16.98h-8.69c-5.45-.72-10.46,3.11-11.18,8.56-.1.73-.11,1.47-.05,2.2v12.92h19.1l-3.03,19.9h-16.07v48.14c33.47-5.3,58.12-34.16,58.12-68.05Z" />
                                    </svg>
                                </span>

                            </a>
                            <a target="_blank" href="#">

                                <span class="inline-flex items-center w-8 h-8     ">
                                    <?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                        <defs>
                                            <style>
                                                .cls-1 {
                                                    fill: none;
                                                    stroke: #b0063e;
                                                    stroke-linecap: round;
                                                    stroke-linejoin: round;
                                                    stroke-width: 10px;
                                                }
                                            </style>
                                        </defs>
                                        <path id="Pfad_47933" class="cls-1" d="M105.7,84.09c10.77,5.14,15.33,18.03,10.19,28.8-1.06,2.22-2.49,4.24-4.22,5.97l-21.59,21.6c-8.28,8.59-21.95,8.84-30.54.56-8.59-8.28-8.84-21.95-.56-30.54.18-.19.37-.38.56-.56l8.45-8.45M132.02,98.52l8.45-8.45c8.59-8.28,8.84-21.95.56-30.54-8.28-8.59-21.95-8.84-30.54-.56-.19.18-.38.37-.56.56l-21.61,21.58c-8.44,8.43-8.44,22.11,0,30.55,1.74,1.74,3.76,3.17,5.97,4.22" />
                                    </svg>
                                </span>

                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="relative pt-44 pb-10 px-6 md:px-9 xl:pr-0 xl:pl-12 xl:pt-44 xl:pb-32">
    <div class="mx-auto xl:grid xl:grid-cols-12 xl:gap-10">
        <div class="mb-5 w-full xl:col-start-1 xl:col-start-2 xl:col-end-13">
            <a href="#" class="inline-flex underline">
                {% render "@icon" with {
                    name: 'arrow-long',
                    size: 'md'
                } %}

                <span class="ml-4">
                    Karriere & aktuelle Jobs bei APA
                </span>
            </a>
        </div>

        <div class="w-full relative mb-8 z-10 xl:col-start-1 xl:col-end-7 xl:col-start-2">
            {% render "@headline" with {
                headline: 'SPS Programmierer<br/>Steuerungstechnik',
                tag: 'h1',
                size: 'h2',
                classes: 'normal-case',
                sub: 'm/w/d',
                subClasses: 'bottom-0 text-zinc-400 text-lg font-normal normal-case lg:text-2xl'
            } %}

            {% render "@text" with {
                text: "Du entwirfst, entwickelst und optimierst die Steuerungssysteme für unsere industriellen Anlagen.<br/>
                Deine Aufgaben umfassen die Programmierung von speicher-programmierbaren Steuerungen (SPS), die Implementierung von Automatisierungslösungen und die Gewährleistung reibungsloser Abläufe in der Produktion.",
                classes: "font-bold xl:text-2xl"
            } %}
        </div>
        
        <div class="relative p-5 bg-gray-100 md:p-10 xl:self-start xl:col-start-9 xl:col-end-13">
            <div>
                <div class="md:flex md:items-center md:space-x-14">
                    {% include '@icon-text-inline' with {
                        icon: 'calender',
                        strokeColor: "text-primary",
                        text: "01.01.2024"
                    } %}

                    {% include '@icon-text-inline' with {
                        icon: 'clock',
                        strokeColor: "text-primary",
                        text: "Voll- oder Teilzeit"
                    } %}
                </div>

                <div>
                    {% include '@icon-text-inline' with {
                        icon: 'marker',
                        strokeColor: "text-primary",
                        text: '63755 Alzenau, Homeoffice'
                    } %}
                </div>

                <div class="flex h-16">
                    {% include '@button' with {
                        label: 'Jetzt bewerben',
                        style: 'primary',
                        classes: 'mr-4',
                        icon: {
                            name: 'arrow',
                            classes: 'ml-9',
                            strokeColor: 'text-white'
                        }
                    } %}
                    <div class="flex flex-col-reverse" x-data="{ open: false }">
                        <button @click="open = !open" class="inline-flex bg-gray-600 p-5">
                            {% render "@icon" with {
                                name: 'share',
                                size: 'md',
                                strokeColor: 'text-white'
                            } %}
                        </button>
                        <div class="flex flex-col items-center gap-4 relative transition-opacity bg-white px-2" :class="open ? 'h-auto z-10 border border-[#F2F2F2]' : 'h-0 overflow-hidden' ">
                            <span>Teilen</span>
                            <a target="_blank" href="#">
                                {% render "@icon" with {
                                    name: 'whatsapp',
                                    size: 'lg',
                                    notStroke: true
                                } %}
                            </a>
                            <a target="_blank" href="#">
                                {% render "@icon" with {
                                    name: 'linkedin',
                                    size: 'lg',
                                    notStroke: true
                                } %}
                            </a>
                            <a target="_blank" href="#">
                                {% render "@icon" with {
                                    name: 'facebook',
                                    size: 'lg',
                                    fillColor: "fill-primary"
                                } %}
                            </a>
                            <a target="_blank" href="#">
                                {% render "@icon" with {
                                    name: 'link',
                                    size: 'lg'
                                } %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
/* No context defined. */

No notes defined.