@extends('website.layouts.index')
@section('content')
<!-- Hero Section -->
<section class="hero-section">			
    <div class="container">
        <div class="home-banner">
            <div class="row align-items-center w-100">
                <div class="col-lg-7 col-md-10 mx-auto">
                    <div class="section-search aos" data-aos="fade-up">
                        <h1>Professional Services For Your Home & Commercial </h1>
                        <p>Australia’s #1 marketplace for home services</p>
                        {{-- <div class="search-box">
                            <form action="https://html.truelysell.com/template3/search.html"> 
                                <div class="search-input line">
                                    <div class="search-group-icon">
                                        <i class="feather-map-pin"></i>
                                    </div>
                                    <div class="form-group mb-0">
                                        <label>Your Location</label>
                                        <input type="text" class="form-control" placeholder="America">
                                    </div>
                                </div>
                                <div class="search-input">
                                    <div class="search-group-icon search-icon">
                                        <i class="feather-search"></i>
                                    </div>
                                    <div class="form-group mb-0">
                                        <label>What are you looking for?</label>
                                        <input type="text" class="form-control" placeholder="Car Repair Services">
                                    </div>
                                </div>
                                <div class="search-btn">
                                    <button class="btn btn-primary" type="submit"><i class="feather-search me-2"></i>Search</button>
                                </div>
                            </form>
                        </div> --}}
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="banner-imgs">
                        <div class="banner-1 shape-1">
                            <img class="img-fluid" alt="banner" src="assets/img/banner1.png">
                        </div>
                        <div class="banner-2 shape-3">
                            <img class="img-fluid" alt="banner" src="assets/img/banner2.png">
                        </div>
                        <div class="banner-3 shape-3">
                            <img class="img-fluid" alt="banner" src="assets/img/banner3.png">
                        </div>
                        <div class="banner-4 shape-2">
                            <img class="img-responsive" alt="banner" src="assets/img/banner4.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>	
    </div>
</section>
<!-- /Hero Section -->

<!-- Service Section -->
<section class="service-section">			
    <div class="container">
        <div class="section-heading">
            <div class="row">
                <div class="col-md-6 aos" data-aos="fade-up">						
                    <h2>Featured Services</h2>
                    <p>Explore the greates our services. You won’t be disappointed</p>
                </div>
                <div class="col-md-6 text-md-end aos" data-aos="fade-up">
                    <div class="owl-nav mynav"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="owl-carousel service-slider">
                    <div class="service-widget aos" data-aos="fade-up">
                        <div class="service-img">
                            <a href="service-details.html">
                                <img class="img-fluid serv-img" alt="Service Image" src="assets/img/services/service-01.jpg">
                            </a>
                            <div class="fav-item">
                                <a href="categories.html"><span class="item-cat">Cleaning</span></a>
                                <a href="javascript:void(0)" class="fav-icon">
                                    <i class="feather-heart"></i>
                                </a>
                            </div>
                            <div class="item-info">
                                <a href="providers.html"><span class="item-img"><img src="assets/img/profiles/avatar-01.jpg" class="avatar" alt=""></span></a>
                            </div>
                        </div>
                        <div class="service-content">
                            <h3 class="title">
                                <a href="service-details.html">Electric Panel Repairing Service</a>
                            </h3>
                            <p><i class="feather-map-pin"></i>New Jersey, USA<span class="rate"><i class="fas fa-star filled"></i>4.9</span></p>
                            <div class="serv-info">
                                <h6>$25.00<span class="old-price">$35.00</span></h6>
                                <a href="service-details.html" class="btn btn-book">Book Now</a>
                            </div>
                        </div>
                    </div>
                    <div class="service-widget aos" data-aos="fade-up">
                        <div class="service-img">
                            <a href="service-details.html">
                                <img class="img-fluid serv-img" alt="Service Image" src="assets/img/services/service-02.jpg">
                            </a>
                            <div class="fav-item">
                                <a href="categories.html"><span class="item-cat">Construction</span></a>
                                <a href="javascript:void(0)" class="fav-icon">
                                    <i class="feather-heart"></i>
                                </a>
                            </div>
                            <div class="item-info">
                                <a href="providers.html"><span class="item-img"><img src="assets/img/profiles/avatar-02.jpg" class="avatar" alt=""></span></a>
                            </div>
                        </div>
                        <div class="service-content">
                            <h3 class="title">
                                <a href="service-details.html">Toughened Glass Fitting Services</a>
                            </h3>
                            <p><i class="feather-map-pin"></i>Montana, USA<span class="rate"><i class="fas fa-star filled"></i>4.9</span></p>
                            <div class="serv-info">
                                <h6>$45.00</h6>
                                <a href="service-details.html" class="btn btn-book">Book Now</a>
                            </div>
                        </div>
                    </div>
                    <div class="service-widget aos" data-aos="fade-up">
                        <div class="service-img">
                            <a href="service-details.html">
                                <img class="img-fluid serv-img" alt="Service Image" src="assets/img/services/service-03.jpg">
                            </a>
                            <div class="fav-item">
                                <a href="categories.html"><span class="item-cat">Carpentry</span></a>
                                <a href="javascript:void(0)" class="fav-icon">
                                    <i class="feather-heart"></i>
                                </a>
                            </div>
                            <div class="item-info">
                                <a href="providers.html"><span class="item-img"><img src="assets/img/profiles/avatar-03.jpg" class="avatar" alt=""></span></a>
                            </div>
                        </div>
                        <div class="service-content">
                            <h3 class="title">
                                <a href="service-details.html">Wooden Carpentry Work</a>
                            </h3>
                            <p><i class="feather-map-pin"></i>Montana, USA<span class="rate"><i class="fas fa-star filled"></i>4.9</span></p>
                            <div class="serv-info">
                                <h6>$45.00</h6>
                                <a href="service-details.html" class="btn btn-book">Book Now</a>
                            </div>
                        </div>
                    </div>
                    <div class="service-widget aos" data-aos="fade-up">
                        <div class="service-img">
                            <a href="service-details.html">
                                <img class="img-fluid serv-img" alt="Service Image" src="assets/img/services/service-11.jpg">
                            </a>
                            <div class="fav-item">
                                <a href="categories.html"><span class="item-cat">Construction</span></a>
                                <a href="javascript:void(0)" class="fav-icon">
                                    <i class="feather-heart"></i>
                                </a>
                            </div>
                            <div class="item-info">
                                <a href="providers.html"><span class="item-img"><img src="assets/img/profiles/avatar-04.jpg" class="avatar" alt=""></span></a>
                            </div>
                        </div>
                        <div class="service-content">
                            <h3 class="title">
                                <a href="service-details.html">Plumbing Services</a>
                            </h3>
                            <p><i class="feather-map-pin"></i>Georgia, USA<span class="rate"><i class="fas fa-star filled"></i>4.9</span></p>
                            <div class="serv-info">
                                <h6>$45.00</h6>
                                <a href="service-details.html" class="btn btn-book">Book Now</a>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="btn-sec aos" data-aos="fade-up">
                <a href="search.html" class="btn btn-primary btn-view">View All<i class="feather-arrow-right-circle"></i></a>
            </div>
        </div>
    </div>
</section>
<!-- /Service Section -->

<!-- Providers Section -->
<section class="providers-section">			
    <div class="container">
        <div class="section-heading">
            <div class="row">
                <div class="col-md-6 aos" data-aos="fade-up">					
                    <h2>Top Providers</h2>
                    <p>Meet Our Experts</p>	
                </div>
                <div class="col-md-6 text-md-end aos" data-aos="fade-up">
                    <a href="providers.html" class="btn btn-primary btn-view">View All<i class="feather-arrow-right-circle"></i></a>
                </div>
            </div>
        </div>
        <div class="row  aos" data-aos="fade-up">
            <div class="col-lg-3 col-sm-6">
                <div class="providerset">
                    <div class="providerset-img">
                        <a href="provider-details.html">
                            <img src="assets/img/provider/provider-11.jpg" alt="img">
                        </a>
                    </div>
                    <div class="providerset-content">
                        <div class="providerset-price">
                            <div class="providerset-name">
                                <h4><a href="provider-details.html">John Smith</a><i class="fa fa-check-circle" aria-hidden="true"></i></h4>
                                <span>Electrician</span>
                            </div>
                            <div class="providerset-prices">
                                <h6>$20.00<span>/hr</span></h6>
                            </div>
                        </div>
                        <div class="provider-rating">
                            <div class="rating">
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fa-solid fa-star-half-stroke filled"></i><span>(320)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="providerset">
                    <div class="providerset-img">
                        <a href="provider-details.html">
                            <img src="assets/img/provider/provider-12.jpg" alt="img">
                        </a>
                    </div>
                    <div class="providerset-content">
                        <div class="providerset-price">
                            <div class="providerset-name">
                                <h4><a href="provider-details.html">Michael</a><i class="fa fa-check-circle" aria-hidden="true"></i></h4>
                                <span>Carpenter</span>
                            </div>
                            <div class="providerset-prices">
                                <h6>$50.00<span>/hr</span></h6>
                            </div>
                        </div>
                        <div class="provider-rating">
                            <div class="rating">
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fa-solid fa-star-half-stroke filled"></i><span>(228)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="providerset">
                    <div class="providerset-img">
                        <a href="provider-details.html">
                            <img src="assets/img/provider/provider-13.jpg" alt="img">
                        </a>
                    </div>
                    <div class="providerset-content">
                        <div class="providerset-price">
                            <div class="providerset-name">
                                <h4><a href="provider-details.html">Antoinette</a><i class="fa fa-check-circle" aria-hidden="true"></i></h4>
                                <span>Cleaner</span>
                            </div>
                            <div class="providerset-prices">
                                <h6>$25.00<span>/hr</span></h6>
                            </div>
                        </div>
                        <div class="provider-rating">
                            <div class="rating">
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fa-solid fa-star-half-stroke filled"></i><span>(130)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="providerset">
                    <div class="providerset-img">
                        <a href="provider-details.html">
                            <img src="assets/img/provider/provider-14.jpg" alt="img">
                        </a>
                    </div>
                    <div class="providerset-content">
                        <div class="providerset-price">
                            <div class="providerset-name">
                                <h4><a href="provider-details.html">Thompson</a><i class="fa fa-check-circle" aria-hidden="true"></i></h4>
                                <span>Mechanic</span>
                            </div>
                            <div class="providerset-prices">
                                <h6>$25.00<span>/hr</span></h6>
                            </div>
                        </div>
                        <div class="provider-rating">
                            <div class="rating">
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fa-solid fa-star-half-stroke filled"></i><span>(95)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Providers Section -->

<!-- Work Section -->
<section class="work-section pt-0">		
    <div class="container">
        <div class="row  aos" data-aos="fade-up">
            <div class="col-md-12">
                <div class="offer-paths">
                    <div class="offer-pathimg">
                        <img src="assets/img/offer.png" alt="img">
                    </div>
                    <div class="offer-path-content">
                        <h3>We Are Offering 14 Days Free Trial</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore minim veniam, quis nostrud exercitation ullamco magna aliqua. </p>
                        <a href="free-trial.html" class="btn btn-primary btn-views">Try 14 Days Free Trial<i class="feather-arrow-right-circle"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>	
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <div class="section-heading aos" data-aos="fade-up">
                    <h2>How It Works</h2>
                    <p>Aliquam lorem ante, dapibus in, viverra quis</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="work-box aos" data-aos="fade-up">
                    <div class="work-icon">
                        <span>
                            <img src="assets/img/icons/work-icon.svg" alt="img">
                        </span>
                    </div>
                    <h5>Book your service online or over the phone</h5>
                    <h4>01</h4>
                </div>						
            </div>
            <div class="col-md-4">
                <div class="work-box aos" data-aos="fade-up">
                    <div class="work-icon">
                        <span>
                            <img src="assets/img/icons/find-icon.svg" alt="img">
                        </span>
                    </div>
                    <h5>Manage your booking
                        online</h5>
                    <h4>02</h4>
                </div>						
            </div>
            <div class="col-md-4">
                <div class="work-box aos" data-aos="fade-up">
                    <div class="work-icon">
                        <span>
                            <img src="assets/img/icons/place-icon.svg" alt="img">
                        </span>
                    </div>
                    <h5>Relax as we
                        service your home</h5>
                    <h4>03</h4>
                </div>						
            </div>
        </div>
    </div>
</section>
<!-- /Work Section -->

<!-- Service Section -->
<section class="service-section">			
    <div class="container">
        <div class="section-heading">
            <div class="row">
                <div class="col-md-6 aos" data-aos="fade-up">
                    <h2>Most Popular Services</h2>
                    <p>Explore the greates our services. You won’t be disappointed</p>
                </div>
                <div class="col-md-6 text-md-end aos" data-aos="fade-up">
                    <div class="owl-nav mynav1"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="owl-carousel popular-slider">
                        
                    <div class="service-widget aos" data-aos="fade-up">
                        <div class="service-img">
                            <a href="service-details.html">
                                <img class="img-fluid serv-img" alt="Service Image" src="assets/img/services/service-04.jpg">
                            </a>
                            <div class="fav-item">
                                <a href="categories.html"><span class="item-cat">Car Wash</span></a>
                                <a href="javascript:void(0)" class="fav-icon">
                                    <i class="feather-heart"></i>
                                </a>
                            </div>
                            <div class="item-info">
                                <a href="providers.html"><span class="item-img"><img src="assets/img/profiles/avatar-01.jpg" class="avatar" alt=""></span></a>
                            </div>
                        </div>
                        <div class="service-content">
                            <h3 class="title">
                                <a href="service-details.html">Car Repair Services</a>
                            </h3>
                            <p><i class="feather-map-pin"></i>Maryland City, MD, USA<span class="rate"><i class="fas fa-star filled"></i>4.9</span></p>
                            <div class="serv-info">
                                <h6>$20.00<span class="old-price">$35.00</span></h6>
                                <a href="service-details.html" class="btn btn-book">Book Now</a>
                            </div>
                        </div>
                    </div>
                    <div class="service-widget aos" data-aos="fade-up">
                        <div class="service-img">
                            <a href="service-details.html">
                                <img class="img-fluid serv-img" alt="Service Image" src="assets/img/services/service-05.jpg">
                            </a>
                            <div class="fav-item">
                                <a href="categories.html"><span class="item-cat">Cleaning</span></a>
                                <a href="javascript:void(0)" class="fav-icon">
                                    <i class="feather-heart"></i>
                                </a>
                            </div>
                            <div class="item-info">
                                <a href="providers.html"><span class="item-img"><img src="assets/img/profiles/avatar-02.jpg" class="avatar" alt=""></span></a>
                            </div>
                        </div>
                        <div class="service-content">
                            <h3 class="title">
                                <a href="service-details.html">Commercial Painting Services</a>
                            </h3>
                            <p><i class="feather-map-pin"></i>Alabama, USA<span class="rate"><i class="fas fa-star filled"></i>4.9</span></p>
                            <div class="serv-info">
                                <h6>$500.00</h6>
                                <a href="service-details.html" class="btn btn-book">Book Now</a>
                            </div>
                        </div>
                    </div>
                    <div class="service-widget aos" data-aos="fade-up">
                        <div class="service-img">
                            <a href="service-details.html">
                                <img class="img-fluid serv-img" alt="Service Image" src="assets/img/services/service-06.jpg">
                            </a>
                            <div class="fav-item">
                                <a href="categories.html"><span class="item-cat">Computer</span></a>
                                <a href="javascript:void(0)" class="fav-icon">
                                    <i class="feather-heart"></i>
                                </a>
                            </div>
                            <div class="item-info">
                                <a href="providers.html"><span class="item-img"><img src="assets/img/profiles/avatar-03.jpg" class="avatar" alt=""></span></a>
                            </div>
                        </div>
                        <div class="service-content">
                            <h3 class="title">
                                <a href="service-details.html">Computer & Server AMC Service</a>
                            </h3>
                            <p><i class="feather-map-pin"></i>California, USA<span class="rate"><i class="fas fa-star filled"></i>4.9</span></p>
                            <div class="serv-info">
                                <h6>$80.00<span class="old-price">$96.00</span></h6>
                                <a href="service-details.html" class="btn btn-book">Book Now</a>
                            </div>
                        </div>
                    </div>
                    <div class="service-widget aos" data-aos="fade-up">
                        <div class="service-img">
                            <a href="service-details.html">
                                <img class="img-fluid serv-img" alt="Service Image" src="assets/img/services/service-08.jpg">
                            </a>
                            <div class="fav-item">
                                <a href="categories.html"><span class="item-cat">Cleaning</span></a>
                                <a href="javascript:void(0)" class="fav-icon">
                                    <i class="feather-heart"></i>
                                </a>
                            </div>
                            <div class="item-info">
                                <a href="providers.html"><span class="item-img"><img src="assets/img/profiles/avatar-04.jpg" class="avatar" alt=""></span></a>
                            </div>
                        </div>
                        <div class="service-content">
                            <h3 class="title">
                                <a href="service-details.html">Steam Car Wash</a>
                            </h3>
                            <p><i class="feather-map-pin"></i>Texas, USA<span class="rate"><i class="fas fa-star filled"></i>4.9</span></p>
                            <div class="serv-info">
                                <h6>$500.00</h6>
                                <a href="service-details.html" class="btn btn-book">Book Now</a>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="btn-sec aos" data-aos="fade-up">
                <a href="search.html" class="btn btn-primary btn-view">View All<i class="feather-arrow-right-circle"></i></a>
            </div>
        </div>
    </div>
</section>
<!-- /Service Section -->

<!-- Client Section -->
<section class="client-section">			
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <div class="section-heading aos" data-aos="fade-up">
                    <h2>What our client says</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur elit</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="owl-carousel testimonial-slider">
                        
                    <div class="client-widget aos" data-aos="fade-up">
                        <div class="client-img">
                            <a href="#">
                                <img class="img-fluid" alt="Image" src="assets/img/profiles/avatar-01.jpg">
                            </a>
                        </div>
                        <div class="client-content">
                            <div class="rating">
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p>
                            <h5>Sophie Moore</h5>
                            <h6>Director</h6>
                        </div>
                    </div>
                    <div class="client-widget aos" data-aos="fade-up">
                        <div class="client-img">
                            <a href="#">
                                <img class="img-fluid" alt="Image" src="assets/img/profiles/avatar-02.jpg">
                            </a>
                        </div>
                        <div class="client-content">
                            <div class="rating">
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p>
                            <h5>Mike Hussy</h5>
                            <h6>Lead</h6>
                        </div>
                    </div>
                    <div class="client-widget aos" data-aos="fade-up">
                        <div class="client-img">
                            <a href="#">
                                <img class="img-fluid" alt="Image" src="assets/img/profiles/avatar-03.jpg">
                            </a>
                        </div>
                        <div class="client-content">
                            <div class="rating">
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p>
                            <h5>John Doe</h5>
                            <h6>CEO</h6>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /Client Section -->

@endsection