@aware(['page'])
<div class="herobg bg-cover bg-no-repeat bg-center" style="background-image: url('{{asset('storage/'.$image)}}');">
    <div class="bg-black bg-opacity-70">
        <div class="theme-max-w mx-auto px-5 relative overflow-visible bg-center bg-cover h-[400px] md:h-[600px] transition-all duration-700 mb-20">
            <div class="absolute inset-0 flex flex-col justify-center px-4 text-white z-10">
                <div class="max-w-3xl">
                    <p class="uppercase text-sm tracking-wider mb-6 sm:mb-10">{{$title}}</p>
                    <div class="text-3xl sm:text-4xl md:text-6xl font-semibold mb-6 sm:mb-10">
                        <div class="mb-0 md:mb-6">{{$line1}}</div>
                        <div>{{$line2}}</div>
                    </div>
                    <a href="{{$link}}">
                        <button class="uppercase inline-block px-6 py-2 border border-white text-white rounded-full hover:bg-white hover:text-black transition mb-4">
                            {{$buttontext}}
                        </button>
                    </a>
                </div>
                <a href="javascript:void(0);" onclick="scrollHeroDown()" class="self-end mt-6 w-12 sm:w-14 md:w-16 h-12 sm:h-14 md:h-16 flex items-center justify-center border border-white text-white rounded-full hover:bg-white hover:text-black transition text-xl">&darr;</a>
            </div>
        </div>
    </div>

    <script>
        function scrollHeroDown() {
            const hero = document.querySelector('.herobg');
            if (!hero) return;
            const height = hero.offsetHeight;
            window.scrollBy({
                top: height,
                left: 0,
                behavior: 'smooth'
            });
        }
    </script>
</div>