Hero Simple

<div class="min-h-[600px] lg:min-h-[800px] h-[70vh] lg:h-screen  flex items-center justify-center w-full relative overflow-hidden pt-[130px] pb-48 xl:pb-64">
    <div class="bg-gradient-to-r from-alpha to-alpha-700 absolute w-full left-0 top-0 h-full z-10 mix-blend-color"></div>
    <div class="z-20 w-full flex justify-center px-6 lg:px-24">
        <div class="container mx-auto">
            <p class="max-w-[900px] font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
                Faster
            </p>
            <p class="max-w-[900px] font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
                broadband for
            </p>
            <p class="max-w-[900px] font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
                rural britain
            </p>
            <div class="max-w-[900px] mt-6 font-extrabold italic  text-[clamp(1rem,3vw,32px)] text-white rotate-[-10.75deg] leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
                For the best speed, home connectivity and service
            </div>
        </div>
    </div>
</div>