<div class=" fade-in">
    <div class="relative isolate pt-14">
        <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40">
            <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
                <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
                <h1 class="mt-10 text-4xl font-semibold tracking-tight text-black lg:text-6xl">
                    This is Hero5.html
                </h1>
                <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
                <p class="mt-8 text-lg font-light text-gray-50 sm:text-xl">
                    Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. 
                    Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
                </p>
                <div class="mt-10 flex items-center gap-x-6">
                    <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
                        Get started
                    </a>
                    <a href="#" class="text-sm font-semibold text-black hover:text-gray-200">
                        Learn more <span aria-hidden="true">→</span>
                    </a>
                </div>
            </div>
            <div class="mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="https://images.unsplash.com/photo-1622615875737-0d959726e947?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
                    alt="Mobile App Screenshot">
            </div>
        </div>
    </div>
</div>
