@extends('layouts.app')

 @section('content')
     <div class="page-content pt-xxl">
         <div class="mb-xl">
             <div class="container">
                 <h2 class="title-xxl title-animation font-primary-bd text-primary-color mb-md"><span>
                         @lang('site.about_us')
                         <span class="text-secondary-color">.</span></span></h2>
                 <div class="d-flex flex-column row-gap-4 text-xxl">
                     <div class="wow fadeInUp" data-wow-duration="1s">
                         {!! getAboutUs()->description_by_lang !!}
                     </div>



                 </div>
             </div>
         </div>

         <div class="mb-xl">
             <div class="container">
                 <div class="row">
                     <div class="col-lg-6">
                         <div class="mb-lg-0 mb-xl">
                             <h3 class="title-custom title-animation font-primary-bd text-primary-color">
                                 <span>@lang('site.enhancing_wifi_and_maintenance')</span>
                             </h3>
                             <p class="text-xxl wow fadeInUp" data-wow-duration="1s">
                                 @lang('site.click_to_learn_more')
                             </p>
                             <a download='{{ getSettings()->more_configs['guideline_file_name'] }}' data-wow-duration="1s"
                                 href="{{ asset('storage/' . getSettings()->more_configs['guideline_file']) ?? '#' }} "
                                 class="btn btn-hover btn-secondary-color rounded-pill py-3 wow fadeInUp"
                                 style="min-width: 50%;" data-wow-duration="1s">@lang('site.Guideline')</a>
                         </div>
                     </div>
                     <div class="col-lg-6">
                         <div class="image-ingredients wow fadeInUp mb-md h-100" data-wow-duration="1s">
                             <img src="{{ asset('assets/media/home/about.webp') }}" alt="about" loading="lazy"
                                 class="w-100 h-100 object-fit-cover rounded-5">
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 @endsection