<section class="md:h-[600px] w-full flex justify-center items-center flex-col">
    <div class="h-full text-center container mx-auto relative z-10 flex flex-col justify-center">
        <x-card class="text-left grid md:grid-cols-4 md:gap-32 gap-8 p-8 border border-helper-outline rounded-lg">
            <div class="col-span-3 space-y-2">
                <span class="text-[#7B5AFF] text-sm font-bold font-secondary">Novo na cidade?</span>
                <h1 class="text-text-high text-3xl font-bold font-secondary first-letter:uppercase">Conheça mais de
                    Cachoeira Paulista</h1>
                <p class="text-text-medium font-primary font-medium leading-5">Ut harum quia doloremque ex in earum. Ad
                    et voluptatibus consequatur. Sequi non omnis nulla numquam qui. Sapiente id quae qui sit voluptatem
                    quis reprehenderit. Nihil aut voluptates nesciunt beatae.</p>
            </div>
            <button
                class="col-span-1 bg-[#7B5AFF] text-white px-6 py-3 rounded-sm h-12 self-center font-button font-bold">
                Conhecer
            </button>
        </x-card>
</section>
