@extends('frontend.layouts.app')
@section('title', __('message-from-director.page_title'))
@section('meta', __('message-from-director.meta_description'))
@section('content')


 <!-- banner-section -->
 <section class="relative">
  <div class="mb-10">
    <img src="{{ asset('assets/images/become-an-agent/breadcrumb-serv.jpg') }}" 
         alt="{{ __('message-from-director.banner.image_alt') }}"
         class="h-60 w-full object-cover"
    />
  </div>
  <div class="absolute w-full top-20">
    <div class="flex flex-col space-y-8 ml-10">
      <h3 class="text-2xl md:text-4xl font-extrabold text-white">{{ __('message-from-director.banner.title') }}</h3>
      <div class="flex space-x-5 items-center">
        <a href="{{ route('homepage') }}" class="text-white font-bold">{{ __('message-from-director.breadcrumb.home') }}</a>
        <p class="text-white text-base fony-bold hover:cursor-pointer">></p>
        <a href="{{ route('messageFromDirector') }}" class="text-accent font-bold">{{ __('message-from-director.breadcrumb.message_from_director') }}</a>
      </div>
    </div>
  </div>
</section>
<!-- banner-section -->

    <!-- Main Container -->

    <div class="container mx-auto px-6 md:px-16 lg:px-24 py-12">

        <!-- Content Wrapper -->
        <div class="bg-white rounded-lg p-8 md:p-12 flex flex-col md:flex-row items-center gap-6">
            <div class="flex flex-col lg:flex-row">
                <!-- Director's Image -->
                <div class="">
                    <img src="https://www.1stformationsblog.co.uk/wp-content/uploads/2022/09/Shutterstock_1361250623-2.jpg"
                        alt="{{ __('message-from-director.main_section.director_image_alt') }}" 
                        class="md:w-2xl lg:w-full rounded-lg" />
                    <hr class="w-full border-t-4 border-accent mt-4" />
                </div>

                <!-- Director's Message -->
                <div class="lg:pl-10 text-base">
                    <p class="text-gray-700 mt-4 lg:text-justify leading-relaxed w-full md:w-full">
                        {{ __('message-from-director.main_section.welcome_message') }}
                    </p>
                    <p class="text-gray-700 mt-4 text-justify leading-relaxed">
                        {{ __('message-from-director.main_section.thank_you_message') }}
                    </p>
                    <br />
                    <p class="text-gray-800 font-bold">{{ __('message-from-director.main_section.director_name') }}</p>
                    <p class="text-gray-600">{{ __('message-from-director.main_section.company_name') }}</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Main Container -->

@endsection


@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
@endpush