---
import Header from './Header.astro';
import { Icon } from 'astro-icon/components';
---

<div class="font-secondary">
    <div class="top-16 relative mb container mx-auto">
            <Header />
        </div>
    <div class="h-screen pb-20 max-h-[700px] sm:max-h-[900px] md:max-h-[1080px] container bg-[url(/img/DRJBP-1.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16">

        <div class="grid md:grid-cols-2 h-full px-6">
            <div class="gap-8 md:flex flex-col justify-end">
                    <img
                        src="/img/logo-metalico.webp"
                        alt="Logo Metalico"
                        class="w-20 sm:24 md:w-32 lg:w-58 mb-4 mt-0"
                    />
                <div class="text-colorPrimary font-semibold font-secondary sm:mb-24 mt-8">
                    <h1 class="text-3xl md:text-6xl sm:mb-8">
                        Dr. José Benjamín<br /> Pérez Matos
                    </h1>
                    <div class="flex items-center ">
                        <Icon name="ph:minus" class="text-xl mr-2" />
                        <h6 class="font-primary font-light uppercase text-white">LÍDER FUNDADOR</h6>

                    </div>
                </div>
            </div>
            <div class="order-first md:order-last flex flex-col md:justify-end items-end gap-8 ">
                <div
                    class="md:w-1/2 font-primary font-medium text-2xl text-colorPrimary gap-8 flex flex-col justify-end mb-24"
                >
                    <h2 class="text-[#EAE6D2] text-lg py-8">
                        “El sueño de mi vida es ver cumplida la visión de los
                        profetas: un mundo de justicia y paz para el bien de
                        Israel y de toda la humanidad.”
                    </h2>
                    <div class="w-16 self-end md:mt-64">
                        <img
                            src="/img/white-dove.webp"
                            alt="White Dove"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>