@extends('front.layout.app')
@section('content')

<section class="inner-banner">
    <img src="{{ $data->cmsImages('banner_image') ?? '' }}" alt="front/images" class="img-fluid w-100 h-100">
    <div class="container">
        <div class="inner-banner__content">
            <h1>{{ $data->content['banner_heading'] ?? '' }}</h1>
        </div>
    </div>
</section>

<section class="about-section padd-y">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-5 col-sm-6">
                <figure class="about-img" data-aos="zoom-in">
                    <img src="{{ $data->cmsImages('story_image1') ?? '' }}" alt="front/images" class="img-fluid">
                </figure>
            </div>
            <div class="col-lg-6 col-sm-6">
                <div class="about-content">
                    <h3 class="secHeading mb-3" data-aos="fade-up">{{ $data->content['about_sto1_heading'] ?? '' }}</h3>
                    <p data-aos="fade-up">{{ $data->content['about_sto1_des1'] ?? '' }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
@include('front.include.story')
<section class="about-section padd-y">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 col-sm-6">
                <div class="about-content">
                    <h3 class="secHeading mb-3" data-aos="fade-up">{{ $data->content['about_sto2_heading'] ?? '' }}</h3>
                    <p data-aos="fade-up">{{ $data->content['about_sto2_des1'] ?? '' }}</p>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6">
                <figure class="about-img" data-aos="zoom-in">
                    <img src="{{ $data->cmsImages('story_image2') ?? '' }}" alt="front/images" class="img-fluid">
                </figure>
            </div>
        </div>
    </div>
</section>


<section class="aboutSec">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-5">
                <div class="aboutContent">
                    <h2 class="secHeading" data-aos="fade-up">{{ $data->content['about_sto3_heading'] ?? '' }}</h2>
                    <ul>
                        <li data-aos="fade-up">
                            <img src="{{ asset('front/images/check.webp') }}" class="img-fluid"
                                alt=""><span>{{ $data->content['about_sto3_des1'] ?? '' }}</span>
                        </li>
                        <li data-aos="fade-up">
                            <img src="{{ asset('front/images/check.webp') }}" class="img-fluid"
                                alt=""><span>{{ $data->content['about_sto3_des2'] ?? '' }}</span>
                        </li>
                        <li data-aos="fade-up">
                            <img src="{{ asset('front/images/check.webp') }}" class="img-fluid" alt="">
                            <span>{{ $data->content['about_sto3_des3'] ?? '' }}</span>
                        </li>
                        <li data-aos="fade-up">
                            <img src="{{ asset('front/images/check.webp') }}" class="img-fluid" alt="">
                            <span>{{ $data->content['about_sto3_des4'] ?? '' }}</span>
                        </li>
                        <li data-aos="fade-up">
                            <img src="{{ asset('front/images/check.webp') }}" class="img-fluid" alt="">
                            <span>{{ $data->content['about_sto3_des5'] ?? '' }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-7">
                <div class="aboutImages" data-aos="zoom-in">
                    <img src="{{ $data->cmsImages('story_image3') ?? '' }}" class="img-fluid" alt="">
                    <figure>
                        <img src="{{ $data->cmsImages('story_image4') ?? '' }}" class="img-fluid" alt="">
                        <img src="{{ $data->cmsImages('story_image5') ?? '' }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="aboutBtn">
                    <a href="#">{{ $data->content['about_sto3_btn'] ?? '' }} <img src="{{ asset('front/images/arrow.webp') }}"
                            class="img-fluid" alt=""></a>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="about-section padd-y">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 col-sm-6">
                <figure class="about-img" data-aos="fade-right">
                    <img src="{{ $data->cmsImages('story_image6') ?? '' }}" alt="front/images" class="img-fluid">
                </figure>
            </div>
            <div class="col-lg-6 col-sm-6">
                <div class="about-content">
                    <h3 class="secHeading mb-3" data-aos="fade-up">{{ $data->content['about_sto4_heading'] ?? '' }}</h3>
                    <p data-aos="fade-up">
                        {{ $data->content['about_sto4_des1'] ?? '' }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection