@extends('front.layout.app')
@section('content')
    <section class="main-slider innerBanner p-0" id="mainSlider" style="background-image: url('{{ $data->cmsImages('banner_image') ?? '' }}');">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-lg-6">
                    <div class="slideOne">
                        <h1 class="mainHeading text-white">{{ $data->content['banner_heading'] ?? '' }}</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="aboutSec aboutInner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="aboutContent">
                        <span>{{ $data->content['about_sto_title'] ?? '' }}</span>
                        <h2 class="mainHeading">{{ $data->content['about_sto_heading'] ?? '' }}</h2>
                        <p data-aos="fade-up">{{$data->content['about_sto_des1'] ?? ''}}</p>
                        <p data-aos="fade-up">{{$data->content['about_sto_des2'] ?? ''}}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <figure class="aboutImg reveal">
                        <img src="{{ $data->cmsImages('story_image1') ?? '' }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-12 mt-3">
                    <div class="aboutContent">
                        <p data-aos="fade-up">{{ $data->content['about_sto_des3'] ?? '' }}</p>
                        <p data-aos="fade-up">{{ $data->content['about_sto_des4'] ?? '' }}</p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-md-6">
                    <figure class="aboutImg reveal">
                        <img src="{{ $data->cmsImages('story_image2') ?? '' }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="aboutContent">
                        <h2 class="mainHeading">{{ $data->content['our_mission_head'] ?? '' }}</h2>
                        <p data-aos="fade-up">{{ $data->content['our_mission_des1'] ?? '' }}</p>
                        <p data-aos="fade-up">{{ $data->content['our_mission_des2'] ?? '' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="helpSec aboutHelp">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="helpWraps">
                        <figure>
                            <img src="{{ $data->cmsImages('reach') ?? '' }}" class="img-fluid" alt="">
                        </figure>
                        <div class="helpBox">
                            <h2>{{ $data->content['rec_sec_head1'] ?? '' }} <br>{{ $data->content['rec_sec_head2'] ?? '' }} </h2>
                            <p>{{ $data->content['rec_sec_des1'] ?? '' }}</p>
                            <a href="{{ route('front.donation') }}" class="themeBtn">{{ $data->content['rec_sec_btn'] ?? '' }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection