@extends('layouts.front_app')
@section('content')

    <div class="innerBan">
        <img src="{{ asset('images/innerbnr1.png') }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <div class="slideOne text-center">
                            <h1 class="mainHeading" data-swiper-parallax="-200">About Us</h1>
{{--                            <h1 class="mainHeading" data-swiper-parallax="-200"><span>Welcome to--}}
{{--                                                the</span>Sandy's 4PAWS <br>--}}
{{--                                Care by the Beach</h1>--}}
{{--                            <a href="{{ route('front.about.us') }}" class="themeBtn">Book A rESERVATION</a>--}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="aboutSec">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-5 col-md-6">
                    <div class="aboutContent" data-aos="fade-right">
                        <h2 class="mainHeading">{{ $data['section1_heading'] ?? '' }}</h2>
                        <span>{{ $data['section1_title'] ?? '' }}</span>
                        <p{!! $data['section1_detail'] ?? '' !!}</p>
                        <div class="btn-group">
                            <a href="{{ route('front.contact') }}" class="themeBtn">Contact us</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6" data-aos="fade-up">
                    <div class="aboutImg">
                        <img src="{{ asset('storage/' . $data['section1_image']) }}" class="img-fluid" alt="">
                    </div>
                </div>
            </div>
        </div>
        <img src="{{ asset('images/path1.webp') }}" data-aos="zoom-in" class="img-fluid pathOne" alt="">
    </section>

    <section class="aboutSec walkingSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6" data-aos="fade-right">
                    <div class="aboutImg">
                        <img src="{{ asset('storage/' . $data['section2_image']) }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="aboutContent" data-aos="fade-left">
                        <h2 class="mainHeading">{{ $data['section2_heading'] ?? '' }}</h2>
                        <span>{{ $data['section2_title'] ?? '' }}</span>
                        <p{!! $data['section2_detail'] ?? '' !!}</p>
                        <div class="btn-group">
                            <a href="{{ route('front.contact') }}" class="themeBtn">Contact us</a>
                            <a href="{{ route('front.services') }}" class="themeBtn themeBtn1">Read More</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{ asset('images/path3.webp') }}" data-aos="zoom-in" class="img-fluid pathOne" alt="">
    </section>

    @include('front.include.contact-form')
@endsection