@aware(['page'])
@props([
'title',
'description',
'image',
'button_text',
'link',
'btn_color',
'btn_hover_color'

])
<div class="px-4 py-4 md:py-8">
    <div class="max-w-7xl mx-auto">
        <section class="text-gray-600 body-font">
            <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
              <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
                <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">{{$title}}
                </h1>
                <p class="mb-8 leading-relaxed">{!! tiptap_converter()->asHTML($description, toc: true, maxDepth: 3)!!}</p>
                <div class="flex justify-center mt-8">
                  <a href="{{$link}}" class="inline-flex text-white border-0 py-2 px-6 focus:outline-none  rounded text-lg " style="background-color: {{$btn_color}};"onmouseover="this.style.backgroundColor='{{$btn_hover_color}}'" 
                  onmouseout="this.style.backgroundColor='{{$btn_color}}'">{{$button_text}}</a>

                </div>
              </div>
              <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
                <img class="object-cover object-center rounded" alt="hero" src="{{asset('storage/'.$image)}}">
              </div>
            </div>
          </section>
    </div>
</div>