@extends('front.include.app')
@section('title') About @endsection

@section('content')
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="images/innerbnr2.jpg" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>{{ $AboutPage->banner_title ?? '' }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <section class="about-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-4" data-aos="fade-up">
                    <figure>
                        <img src="{{ $data->CmsImage('about_sec_image' ?? '') }}  " class="img-fluid" alt="">
                    </figure>
                    <div class="about-content mt-5">
                        <p  style="font-size: 1.125rem !important;">{{ $AboutPage->about_me_sec_img_des ?? '' }}
                        </p>
                    </div>

                </div>
                <div class="col-md-7" data-aos="fade-up">
                    <div class="about-content">
                        <h4>{{ $AboutPage->about_me_sec_heading ?? '' }}</h4>
                        <h2>{{ $AboutPage->about_me_sec_sub_title ?? '' }}</h2>
{!! $AboutPage->about_me_sec_des !!}


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


    {{-- <section class="insta-section">
        <div class="container">
            <h2>{{ $AboutPage->instagram_section_heading ?? '' }}</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper instaSlider" data-aos="fade-up">
                        <div class="swiper-wrapper">
                            @foreach ($insta as $post)
                                <div class="swiper-slide">
                                    <figure>
                                        <img src="{{ $post->getFirstMediaUrl('images') }}" class="img-fluid" alt="{{ $post->name }}">
                                    </figure>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="instbtn" data-aos="fade-up">
                        <a href="" class="themeBtn"> <i class="fab fa-instagram"></i> Instagram</a>
                    </div>
                </div>
            </div>

        </div>
    </section> --}}

    <script>
        ClassicEditor
          .create(document.querySelector('#about_me_sec_des'), {
              link: {
                  decorators: {
                      addTargetBlank: true,  // Automatically adds target="_blank" for external links
                  },
              },
          })
          .catch(error => {
              console.error(error);
          });
      </script>
@endsection