@extends('layouts.front-layout')
@section('title', 'About')
@section('content')

    <!-- INNER PAGE HERO SECTION -->
<section class="innerpage-main w-100">

    <img src="{{$pageData['About']['top_banner_image'] ? asset('upload/images/'.$pageData['About']['top_banner_image']) : asset('upload/placeholder.png')}}" class="img-fluid zoomAnim w-100 h-100" alt="image">
    <div class="innerpage-main__overlay">
        <div class="container">
            <h1>{{ $pageData['About']['top_banner_heading'] ?? '' }}</h1>
        </div>
    </div>
</section>
<!-- !@INNER PAGE HERO SECTION -->

<!-- ABOUT SECTION -->
<section class="about-section abtinner" id="aboutSec">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-5">
                <figure class="about-figure">
                    <img src="front-web-assets/images/about-img-overlay.webp" alt="" class=" obj">
                    <img src="{{$pageData['About']['first_image'] ? asset('upload/images/'.$pageData['About']['first_image']) : asset('upload/placeholder.png')}}" alt="" data-aos="zoom-out" class="img-fluid">
                    <figure class="img-sm" data-aos="zoom-in">
                        <img src="{{$pageData['About']['second_image'] ? asset('upload/images/'.$pageData['About']['second_image']) : asset('upload/placeholder.png')}}" alt="" class="img-fluid">
                        <img src="front-web-assets/images/about-img-obj.webp" alt="" class="img-fluid obj">
                    </figure>
                </figure>
            </div>
            <div class="col-md-7">
                <h6 class="subtitle" data-aos="fade-up">{{ $pageData['About']['heading'] ?? '' }} </h6>
                <h2 class="heading" data-aos="fade-up">{{ $pageData['About']['sub_heading'] ?? '' }}</h2>
                <p data-aos="fade-up">
                    {!! $pageData['About']['description'] ?? '' !!}
                </p>


{{--                <div class="btngrp" data-aos="fade-up">--}}
{{--                    <a href="contact.php" class="themeBtn">Read More</a>--}}
{{--                    <a href="tel:+3038502695" class="btn btn-phone">--}}
{{--                        <figure>--}}
{{--                            <img src="front-web-assets/images/icons/icon-phone.webp" class="img-fluid" alt="">--}}
{{--                        </figure>--}}
{{--                        <div>--}}
{{--                            <small>QUICK CALL</small>--}}
{{--                            <span>{{$setting->phone_num ? : ''}}</span>--}}
{{--                        </div>--}}
{{--                    </a>--}}
{{--                </div>--}}
            </div>
            <div class="col-12">
                <div class="icon-list inner">
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="50">
                        <figure>
                            <img src="front-web-assets/images/about-icon1.webp" class="img-fluid" alt="">
                        </figure>
                        <p>Individual therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="100">
                        <figure>
                            <img src="{{$pageData['About']['family_therapy'] ? asset('upload/images/'.$pageData['About']['family_therapy']) : asset('front-web-assets/images/about-icon4.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Family Therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="150">
                        <figure>
                            <img src="{{$pageData['About']['filial_therapy'] ? asset('upload/images/'.$pageData['About']['filial_therapy']) : asset('front-web-assets/images/about-icon3.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Filial Therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="200">
                        <figure>
                            <img src="{{$pageData['About']['sibling_therapy'] ? asset('upload/images/'.$pageData['About']['sibling_therapy']) : asset('front-web-assets/images/about-icon4.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Sibling Therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="250">
                        <figure>
                            <img src="{{$pageData['About']['play_therapy'] ? asset('upload/images/'.$pageData['About']['play_therapy']) : asset('front-web-assets/images/about-icon6.webp')}}" class="img-fluid" alt="">

                        </figure>
                        <p>Play Therapy </p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="50">
                        <figure>
                            <img src="{{$pageData['About']['theraplay_therapy'] ? asset('upload/images/'.$pageData['About']['theraplay_therapy']) : asset('front-web-assets/images/about-icon6.webp')}}" class="img-fluid" alt="">

                        </figure>
                        <p>Theraplay Therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="100">
                        <figure>
                            <img src="{{$pageData['About']['group_therapy'] ? asset('upload/images/'.$pageData['About']['group_therapy']) : asset('front-web-assets/images/about-icon7.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Group therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="150">
                        <figure>
                            <img src="{{$pageData['About']['havening_technique'] ? asset('upload/images/'.$pageData['About']['havening_technique']) : asset('front-web-assets/images/about-icon8.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Havening Technique</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="200">
                        <figure>
                            <img src="{{$pageData['About']['couple_therapy'] ? asset('upload/images/'.$pageData['About']['couple_therapy']) : asset('front-web-assets/images/about-icon9.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Couple's Therapy</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- !@ABOUT SECTION -->



<!-- ABOUT SECTION -->
<section class="about-section inner storySect">
    <div class="container">
        <div class="row align-items-center flex-row-reverse">
            <div class="col-md-7">
                <figure class="about-figure">
                    <!-- <img src="images/about-img-overlay.webp" alt="" class=" obj"> -->
                    <img src="{{$pageData['About']['story_first_image'] ? asset('upload/images/'.$pageData['About']['story_first_image']) : asset('upload/placeholder.png')}}" alt="" data-aos="zoom-out" class="img-fluid">
                    <figure class="img-sm" data-aos="zoom-in">
                        <img src="f{{$pageData['About']['story_second_image'] ? asset('upload/images/'.$pageData['About']['story_second_image']) : asset('upload/placeholder.png')}}" alt="" class="img-fluid">
                        <img src="front-web-assets/images/about-img-obj.webp" alt="" class="img-fluid obj abtobj">
                    </figure>
                </figure>
            </div>
            <div class="col-md-5">
                <h2 class="heading" data-aos="fade-up">{{ $pageData['About']['story_heading'] ?? '' }} </h2>
                {!! $pageData['About']['story_description'] ?? '' !!}


{{--                <div class="btngrp" data-aos="fade-up">--}}
{{--                    <a href="{{route('front.contact')}}" class="themeBtn">Read More</a>--}}
{{--                    <a href="tel:+3038502695" class="btn btn-phone">--}}
{{--                        <figure>--}}
{{--                            <img src="front-web-assets/images/icons/icon-phone.webp" class="img-fluid" alt="">--}}
{{--                        </figure>--}}
{{--                        <div>--}}
{{--                            <small>QUICK CALL</small>--}}
{{--                            <span>{{$setting->phone_num ? : ''}}</span>--}}
{{--                        </div>--}}
{{--                    </a>--}}
{{--                </div>--}}
            </div>
        </div>
    </div>
</section>
<!-- !@ABOUT SECTION -->

<!-- VIDEO SECTION -->
{{--<section class="video-section">--}}
{{--    <div class="container">--}}
{{--        <div class="text-center">--}}
{{--            <h6 class="subtitle" data-aos="fade-up">{{ $pageData['About']['video_heading'] ?? '' }} </h6>--}}
{{--            <h2 class="heading mx-auto" data-aos="fade-up">{{ $pageData['About']['video_sub_heading'] ?? '' }}</h2>--}}

{{--            <p data-aos="fade-up">{{ $pageData['About']['video_short_description'] ?? '' }}</p>--}}
{{--            <figure class="video-box" data-aos="fade-up">--}}
{{--                <img src="{{$pageData['About']['video_first_image'] ? asset('upload/images/'.$pageData['About']['video_first_image']) : asset('upload/placeholder.png')}}" class="img-fluid" alt="">--}}
{{--                <div class="control-box">--}}
{{--                    <a href="{{ $pageData['About']['Video'] ?? '' }}" data-fancybox="">--}}
{{--                        <i class="fas fa-play"></i>--}}
{{--                    </a>--}}

{{--                    <img src="front-web-assets/images/icons/left-icon.webp" class="img-fluid" alt="">--}}
{{--                </div>--}}
{{--            </figure>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</section>--}}
<!-- !@VIDEO SECTION -->

    @include('front.include.contact')

@endsection