@extends('new_layout.app')
@section('content')
    <div class="page-banner-area">
        <div class="container">
            <div class="single-page-banner-content">
                <h1>About Us</h1>
                <ul>
                    <li>
                        <a href="index.html">Home</a>
                    </li>
                    <li>About Us</li>
                </ul>
            </div>
        </div>
    </div>


    <div class="about-area pt-100 pb-100">
        <div class="container">
            @foreach ($about as $r)
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="single-about-image">
                            <img src="{{ asset($r->about_image) }}" alt="about-1">
                            <div class="about-shape">
                                <img src="{{ asset('webtheme/assets/images/about/about-shape-1.webp') }}" alt="about-shape">
                            </div>
                            <div class="about-shape-1">
                                <img src="{{ asset('webtheme/assets/images/about/about-shape-2.webp') }}" alt="about-shape">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="single-about-content">
                            <div class="section-title left-title">
                                <span class="top-title">About Our Company</span>
                                <h2>{{ $r->about_title }}</h2>
                                <p>{!! $r->about_description !!}</p>
                            </div>
                            <div class="about-btn about-page-btn d-flex align-items-center">
                                <div class="call-experts">
                                    <div class="phone-call">
                                        <img src="{{ asset('webtheme/assets/images/phone-call.svg') }}" alt="phone-call">
                                    </div>
                                    <span>Call To Our Experts</span>
                                    <a href="tel:(+0188)76898708">(+0188) 768 98708</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="about-shape3">
            <img src="{{ asset('webtheme/assets/images/about/about-shape-3.webp') }}" alt="image">
        </div>
    </div>


    <div class="services-area pt-100 pb-70">
        <div class="container">
            <div class="services-top-item d-flex align-items-end justify-content-between">
                <div class="section-title left-title">
                    <span class="top-title">Our Services</span>
                    <h2>Inon Best Insurance Services</h2>
                </div>
                <a href="{{ url('services') }}" class="default-btn">All Services</a>
            </div>
            <div class="row" data-cues="slideInUp">
                @foreach ($services as $r)
                    <div class="col-lg-4 col-sm-6 col-md-6">
                        <div class="single-services-card d-flex align-items-center">
                            <div class="services-icon">
                                <img src="{{ asset($r->services_image) }}" alt="couple">
                            </div>
                            <h3><a href="{{ url('services-details', $r->unique_id) }}">{{ $r->services_title }}</a></h3>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </div>


    <div class="free-quote-area pt-100 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="single-free-quote-form">
                        <div class="section-title left-title">
                            <span class="top-title">Free Quote</span>
                            <h2>Get An Insurance Quote To Get Started</h2>
                        </div>
                        <form action="{{ url('quotetstore') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="name" placeholder="Name">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <input type="email" class="form-control" name="email" placeholder="Email">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="insurance"
                                            placeholder="Select Type Of Insurance">
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="form-group">
<div class="range-slider">
<div class="d-flex justify-content-between">
<p>Limits Of Balance:</p>
<div class="dolor">
<p>₹</p>
<span class="range-slider__value">12000</span>
</div>
</div>
<input class="range-slider__range" type="range" name="range" value="6800" min="0" max="12000">
</div>
</div> --}}
                            <button type="submit" class="default-btn">Get A Quote Now</button>
                        </form>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="free-quote-image">
                        <div class="free-quote-main">
                            <img src="{{ asset('webtheme/assets/images/free-quote-1.webp') }}" alt="free-quote">
                        </div>
                        <div class="free-quote-shape">
                            <img src="{{ asset('webtheme/assets/images/free-quote-shape-1.webp') }}" alt="shape3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="free-quote-shape1">
            <img src="{{ asset('webtheme/assets/images/free-quote-shape-2.webp') }}" alt="shape3">
        </div>
        <div class="free-quote-shape2">
            <img src="{{ asset('webtheme/assets/images/free-quote-shape-3.webp') }}" alt="shape3">
        </div>
    </div>


    <div class="odometer-two-area pt-100 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-6 col-sm-6 col-md-3">
                    <div class="odometer-two-content">
                        <h2>
                            <span class="odometer" data-count="89">00</span>
                            <span class="target">+</span>
                        </h2>
                        <p>Gave insurances</p>
                        <div class="odometer-shape">
                            <img src="{{ asset('webtheme/assets/images/odometer/odometer-shape-1.webp') }}" alt="odometer">
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6 col-sm-6 col-md-3">
                    <div class="odometer-two-content">
                        <h2>
                            <span class="odometer" data-count="1120">00</span>
                            <span class="target">+</span>
                        </h2>
                        <p>Experience Members</p>
                        <div class="odometer-shape">
                            <img src="{{ asset('webtheme/assets/images/odometer/odometer-shape-2.webp') }}"
                                alt="odometer">
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6 col-sm-6 col-md-3">
                    <div class="odometer-two-content">
                        <h2>
                            <span class="odometer" data-count="1.9">00</span>
                            <span class="target">k+</span>
                        </h2>
                        <p>Satisfied customers</p>
                        <div class="odometer-shape">
                            <img src="{{ asset('webtheme/assets/images/odometer/odometer-shape-3.webp') }}"
                                alt="odometer">
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6 col-sm-6 col-md-3">
                    <div class="odometer-two-content">
                        <h2>
                            <span class="odometer" data-count="50">00</span>
                            <span class="target">+</span>
                        </h2>
                        <p>Awards Win</p>
                        <div class="odometer-shape">
                            <img src="{{ asset('webtheme/assets/images/odometer/odometer-shape-4.webp') }}"
                                alt="odometer">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="odometer-shape-1">
            <img src="{{ asset('webtheme/assets/images/odometer/odometer-shape-5.webp') }}" alt="odometer">
        </div>
        <div class="odometer-shape-2">
            <img src="{{ asset('webtheme/assets/images/odometer/odometer-shape-6.webp') }}" alt="odometer">
        </div>
    </div>


    <div class="recruitment-area page-recruitment pt-100 pb-100">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="recruitment-img">
                        <img src="{{ asset('webtheme/assets/images/recruitment-2.webp') }}" alt="recruitment1">
                        <div class="recruitment-main1">
                            <img src="{{ asset('webtheme/assets/images/recruitment-1.webp') }}" alt="recruitment1">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="single-recruitment-content">
                        <div class="section-title left-title">
                            <span class="top-title">Recruitment</span>
                            <h2>Personnel Employment In Insurance Company</h2>
                            <p>Dislike men who are so beguiled and demoralized by the charms of pleasure of the moment so
                                blinded by desire, that they cannot foresee the pain and trouble that are bound.</p>
                        </div>
                        <ul>
                            <li class="list-inline">
                                <img src="{{ asset('webtheme/assets/images/about/about-icon-2.svg') }}" alt="about-icon">
                                Have Monthly Bonuses For Good Staff
                            </li>
                            <li class="list-inline">
                                <img src="{{ asset('webtheme/assets/images/about/about-icon-2.svg') }}" alt="about-icon">
                                Participate In The Personal development Courses
                            </li>
                            <li class="list-inline">
                                <img src="{{ asset('webtheme/assets/images/about/about-icon-2.svg') }}" alt="about-icon">
                                Have Complimentary Lunch Paid Holidays
                            </li>
                        </ul>
                        <a href="{{ url('contact') }}" class="default-btn btn-style-2">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="recruitment-shape">
            <img src="{{ asset('webtheme/assets/images/recruitment-3.webp') }}" alt="recruitment2">
        </div>
    </div>



    <div class="testimonials-area testimonials-two-area pt-100 pb-70">
        <div class="container">
            <div class="section-title left-title">
                <span class="top-title">Testimonials</span>
                <h2>What Our Customers Says</h2>
            </div>
            <div class="testimonials-three-slider owl-carousel owl-theme">
                @foreach ($testimonial as $r)
                    <div class="testimonials-item">
                        <div class="testimonials-client d-flex align-items-center">
                            <img src="{{ asset($r->testimonial_image) }}" alt="testimonials">
                            <div class="testimonials-text">
                                <h3>{{ $r->title }}</h3>
                            </div>
                        </div>
                        <div class="testimonials-card testimonials-card-three">
                            <div class="quote-icon">
                                <img src="{{ asset('webtheme/assets/images/testimonials/quote.svg') }}" class="quote1"
                                    alt="quote">
                                <div class="quote-icon-2">
                                    <img src="{{ asset('webtheme/assets/images/quote-two.svg') }}" alt="quote">
                                </div>
                            </div>
                            <p>{!! substr($r->testimonial_description, 0, 300) !!}</p>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
        <div class="testimonials-3-shape" data-cue="zoomIn" data-duration="2000">
            <img src="{{ asset('webtheme/assets/images/testimonials/testimonials-3-shape.webp') }}" alt="testimonials">
        </div>
    </div>
    <div class="footer-area pt-100">
        <div class="container">
            <div class="row pb-100">
                <div class="col-lg-3 col-sm-6 col-md-6" data-cue="slideInUp">
                    <div class="footer-widget">
                        <a href="index.html">
                        @endsection