<main class="flex flex-row flex-wrap justify-center items-center gap-10 py-10">
    <div class="lg:w-[40%] w-[80%] text-center lg:text-left"
            pAnimateOnScroll
            enterClass="animate-enter fade-in-10 slide-in-from-{{ isMobile() ? 't' : 'l' }}-8 animate-duration-1000"
            leaveClass="animate-leave fade-out-0">
        <span class="block text-[3rem]/[1.1] lg:text-[4rem]/[1.1] font-bold mb-4" [innerHTML]="'home.header' | translate"></span>
        <span class="block text-[1rem]/[1.3] lg:text-[1.5rem]/[1.3] text-gray">{{ 'home.subheader' | translate }}</span>
        <a class="block mt-5" href="https://www.google.com/maps/place/Dobersberg,+Nieder%C3%B6sterreich" target="_blank"><p-chip label="Dobersberg, Niederösterreich" icon="fa-solid fa-location-dot"/></a>
    </div>
    <div class="lg:w-[30%] w-[80%] text-center"
            pAnimateOnScroll
            enterClass="animate-enter fade-in-10 slide-in-from-{{ isMobile() ? 'b' : 'r' }}-8 animate-duration-1000"
            leaveClass="animate-leave fade-out-0">
        <img src="img/me.png" alt="">
        <div class="pt-5 p-3 flex gap-3 flex-wrap justify-center">
            <a pButton outlined severity="secondary" label="nico@td-haider.at" icon="fa-solid fa-envelope" href="mailto:nico@td-haider.at"></a>
            <a pButton outlined severity="secondary" label="+43 670 2060140" icon="fa-solid fa-phone" href="tel:+436702060140"></a>
        </div>
        <div class="flex gap-3 justify-center text-[1.5rem] text-gray">
            <a pButton text severity="secondary" icon="fa-brands fa-linkedin" href="https://www.linkedin.com/in/nico-haider-164444316/" target="_blank"></a>
            <a pButton text severity="secondary" icon="fa-brands fa-instagram" href="https://www.instagram.com/nico.hdr8/" target="_blank"></a>
            <a pButton text severity="secondary" icon="fa-brands fa-facebook" href="https://www.facebook.com/nico.haider.33" target="_blank"></a>
        </div>
    </div>
</main>
