@extends("front.layout.app")
@section('title', 'Stuck In the Desert Towing AZ | Towing Company in Yuma Arizona')
@section('meta')
    <meta name="title" content="Stuck In the Desert Towing AZ | Towing Company in Yuma Arizona">
    <meta name="description" content="Stuck in The Desert? Our Towing Company in Yuma, Arizona Provides Fast, Reliable Service Across AZ. Trust Us For Expert Recovery And Towing When You Need It Most.">
@endsection
@section("content")

    <section class="inner-banner">
        <img src="{{ $about->cmsImages('banner_image') ?? '' }}" alt="image" class="img-fluid w-100 h-100">
        <div class="container">
            <div class="inner-banner__content">
                <div class="row">
                    <div class="col-lg-6">
                        <h1> {{ $about->content['banner_heading'] ?? '' }} <span class="font-bold">{{ $about->content['banner_imp'] ?? '' }}</span></h1>
                        <p>
                            {{ $about->content['banner_description'] ?? '' }}
                        </p>
                        <div class="btn-group">
                            <a href="{{route('front.about')}}" class="themeBtn">  {{ $about->content['banner_btn1'] ?? '' }}</a>
                            <a href="{{route('front.contact')}}" class="themeBtn">  {{ $about->content['banner_btn2'] ?? '' }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="inner-banner__bottom">
            <div class="container">
                <ul class="bottom__links d-flex align-items-center justify-content-start">
                    <li><a href="{{route('front.index')}}"><span><i class="fas fa-home"></i></span> Home</a></li>
                    <li><a href=""><span><i class="fas fa-angle-right"></i></span> about us</a></li>
                </ul>
            </div>
        </div>
    </section>

    <section class="recoverySec about-inner padd-y">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="recoveryHeading">
                        <div data-aos="fade-up">
                            <span class="smallHeading">{{ $about->content['about_sto_title'] ?? '' }}</span>
                        </div>
                        <h2 class="secHeading" data-aos="fade-up">
                            {{ $about->content['about_sto_heading'] ?? '' }}
                        </h2>
                        <div class="recoveryContent">
                            <p data-aos="fade-up">
                                {{ $about->content['about_sto_des1'] ?? '' }}
                            </p>
                            <p data-aos="fade-up">
                                {{ $about->content['about_sto_des2'] ?? '' }}
                            </p>
                        </div>
                       
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="recoveryImage">
                        <div class="rating">
                            <figure class="ratingStars">
                                <img src="{{ $about->cmsImages('story_image1') ?? '' }}" alt="image" class="img-fluid">
                            </figure>
                            <div class="ratingContent">
                                <h5> {{ $about->content['about_sto_per'] ?? '' }}</h5>
                                <p class="mb-0">
                                    {{ $about->content['about_sto_about'] ?? '' }}
                                </p>
                            </div>
                        </div>
                        <img src="{{ $about->cmsImages('story_image') ?? '' }}" alt="towing fees">
                        <div class="recoveryBox">
                            <img src="{{ $about->cmsImages('story_image2') ?? '' }}" class="img-fluid" alt="">
                            <h3>  {{ $about->content['about_sto_like'] ?? '' }}</h3>
                            <p> {{ $about->content['about_sto_like_about'] ?? '' }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="recoveryHeading mt-2">
                        <div class="recoveryContent">
                            <p data-aos="fade-up">
                                {{ $about->content['about_sto_des3'] ?? '' }}
                            </p>
                            <p data-aos="fade-up">
                                {{ $about->content['about_sto_des4'] ?? '' }}
                            </p>
                            <p data-aos="fade-up">
                                {{ $about->content['about_sto_des5'] ?? '' }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="roadsideSec">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="roadsideHeading" data-aos="fade-up">
                        <span class="smallHeading"> {{ $about->content['how_sec_title'] ?? '' }}</span>
                        <h2 class="secHeading">{{ $about->content['how_sec_heading'] ?? '' }}</h2>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="swiper roadsideSlider" data-aos="fade-up">
                        <div class="swiper-wrapper">
                            @forelse ($ourGoals as $goal)
                                
                            <div class="swiper-slide">
                                <div class="roadsideWrap">
                                    <img src="{{$goal->ourGoalImage('our_goal_image')}}" class="img-fluid" alt="">
                                    <div class="roadsideContent">
                                        <h3>{{ $goal->heading }}</h3>
                                        <p>
                                            {{ $goal->description }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            @empty
                                
                            @endforelse
                        </div>
                    </div>
                    <div class="swiper-button-next"><i class="fal fa-long-arrow-right"></i></div>
                    <div class="swiper-button-prev"><i class="fal fa-long-arrow-left"></i></div>
                    <div class="roadBottoms" data-aos="fade-up">
                        <ul>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                        </ul>
                        <p><span>99.9% Customer Satisfaction </span>based on 750+ reviews of 6,154 Completed Projects,
                            and 2,194 Happy Customers trust us.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- @include('front.include.stories') --}}

    @endsection