<x-layouts.widget>
    <div class="w-full bg-hero-pattern-sm bg-cover bg-no-repeat bg-right-center xl:max-w-[1536px] xl:px-7 xl:m-auto">
        <div class="w-full to-transparent flex relative min-h-[600px]">
            <div class="container mx-auto z-10 md:p-8 p-3 mt-20">
                <h1 class="text-white lg:text-gray-800 text-5xl pb-4 font-bold text-center lg:text-right">غدیر تی وی</h1>
                <div class="w-full block">
                    <p class="text-lg lg:w-1/2 md:w-1/2 text-white lg:text-gray-800 font-normal drop-shadow-md m-auto lg:m-0 text-center lg:text-right leading-8">پلتفرم تماشای آنلاین (VOD) که با محوریت فرهنگ و ارزش‌های مذهبی، مجموعه‌ای متنوع از برنامه‌ها، مستندها و محتوای تصویری الهام‌بخش را در اختیار شما قرار می‌دهد. دسترسی آسان، کیفیت بالا و تجربه‌ای نو از تماشای محتوای اصیل</p>
                </div>

                <div class="w-full flex mt-7 justify-center lg:justify-start">
                    <a href="#" class="text-white lg:bg-brand-500 bg-red-500 focus:ring-4  rounded-lg text-sm px-7 py-2 md:px-12 md:py-2.5 ml-1 md:ml-2 font-bold focus:outline-none shadow-sm">پخش زنده</a>
                    <a href="#" class="text-gray-700 border bg-gray-300 rounded-lg text-sm px-4 py-2 md:px-8 font-bold md:py-2.5 mr-1 md:mr-2 focus:outline-none shadow-sm">آرشیو برنامه‌ها</a>
                </div>

            </div>

            <div>
                <img src="{{theme('/img/bg/ekmal.png')}}" class="absolute w-full max-w-[700px] top-3 right-0 p-5 opacity-5 z-[1]" alt="">
                <img src="{{theme('/img/bg/intro-bg.svg')}}" class="absolute bottom-12 w-[730px] left-0 right-0 lg:right-auto m-auto lg:px-3 px-0" alt="">
                <img src="{{theme('/img/bg/ghadire-khom.png')}}" class="absolute lg:block hidden w-[730px] bottom-12 left-0 right-0 lg:right-auto m-auto lg:px-3 px-0" alt="">
            </div>
        </div>
    </div>
</x-layouts.widget>
