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

    <section class="inner-banner p-0">
        <img src="{{ asset('images/inner-banner__img.png') }}" alt="image" class="img-fluid">
        <div class="container">
            <div class="inner-banner__title">
                <h1>About</h1>
            </div>
        </div>
    </section>

    <style>
        .newInnerAbout figure{
            text-align: center;
        }
        .newInnerAbout .row.left{
            flex-direction: row-reverse;
        }
        .aboutContentWrap .newInnerAbout:nth-child(even){
            background: #f8f9fa;
        }
    </style>
    <div class="aboutContentWrap">

        @forelse($abouts as $about)
            <section class="aboutSec newInnerAbout ">
                <div class="container">
                    <h2 class="text-center mb-5 text-muted">{{$about->section_title ? : ''}}</h2>
                    <div class="row {{$about->image_key ? : ''}}">

                        <div class="{{$about->image_key=="center"?"col-12":"col-md-6"}}">
                            <h2 class="secHeading text-{{$about->heading_key ? : ''}}">{{$about->heading ? : ''}}</h2>
                            <span class="subHead mb-0 d-block text-{{$about->sub_heading_key ? : ''}}">{{$about->sub_heading ? : ''}}</span>
                            <p class="text-{{$about->description_key ? : ''}}">{{$about->description ? : ''}}</p>
                        </div>
                        <div class="{{$about->image_key=="center"?"col-12":"col-md-6"}}">
                            <figure>
                                <img src="{{($about->getFirstMediaUrl('about_image') ? $about->getFirstMediaUrl('about_image') : asset('upload/placeholder.png'))}}" alt="" class="img-fluid">
                            </figure>
                        </div>
                    </div>

                </div>
            </section>
        @empty
            <h2>not</h2>
        @endforelse
    </div>

    @include('front.includes.contact')

@endsection