APA Component Library

Hero: Default 

<section class="relative flex h-[60vh] md:h-screen px-6 md:px-9 lg:px-12">
    <div class="w-full mx-auto grid gap-8 self-center xl:grid-cols-12">
        <div class="relative z-10 xl:col-start-2 xl:col-end-12">

            <h1 class="text-white text-left h1 ">
                pioneers in Automated Precision, Engineered Excellence

            </h1>

            <div class="text-white text-left h4 ">
                Production, assembly & testing systems

            </div>

        </div>

        <div class="absolute top-0 left-0 w-screen h-full md:h-screen">

            <div class="relative h-full w-full ">
                <img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="Alternativer Text" />

            </div>

        </div>
    </div>

    <div class="absolute top-0-0 left-0 w-full bg-gray-700 md:bg-transparent pointer-events-none md:bg-gradient-to-b md:from-transparent md:to-gray-700 opacity-80 md:opacity-90 h-full md:h-screen"></div>
</section>
 
<section class="relative flex h-[60vh] md:h-screen px-6 md:px-9 lg:px-12">
    <div class="w-full mx-auto grid gap-8 self-center xl:grid-cols-12">
        <div class="relative z-10 xl:col-start-2 xl:col-end-12">
            {% render "@headline" with {
                headline: 'pioneers in Automated Precision, Engineered Excellence',
                tag: 'h1',
                size: 'h1',
                classes: 'text-white'
            } %}

            {% render "@headline" with {
                headline: 'Production, assembly & testing systems',
                tag: 'div',
                size: 'h4',
                classes: 'text-white'
            } %}
        </div>

        <div class="absolute top-0 left-0 w-screen h-full md:h-screen">
            {% render "@image" with {
                "src": "/image/placeholder.jpg",
                "alt": "Alternativer Text",
                "classes": "w-full h-full object-cover"
            } %}
        </div>
    </div>

    <div class="absolute top-0-0 left-0 w-full bg-gray-700 md:bg-transparent pointer-events-none md:bg-gradient-to-b md:from-transparent md:to-gray-700 opacity-80 md:opacity-90 h-full md:h-screen"></div>
</section>
 
/* No context defined. */

No notes defined.