@extends('includes.layout') <!-- Extend the layout -->

@section('content') <!-- Define the content section -->
<div class="bg-main-body">
      <div class="container-xl">
	  	  
        <div class="row py-5">
	     <div class="col-md-12 ">
	<img src="https://res.cloudinary.com/urbanclap/image/upload/t_high_res_template/images/growth/luminosity/1698216892976-9623f5.jpeg" class="img-responsive">
		
		</div>	
          <div class="col-md-9">
            <div class="row">
              <div class="col-md-3 mb-3">
                <div class="bg-white rounded  ">
                  <div class="border-bottom p-3">
                    <h6 class="pt-2 pb-2 ">Filter</h6>
                    <input type="checkbox" class="btn-check" id="btn1" autocomplete="off">
                    <label class="btn btn-outline-theme mb-2" for="btn1">Haircut</label>
                    <input type="checkbox" class="btn-check" id="btn2" autocomplete="off">
                    <label class="btn btn-outline-theme mb-2" for="btn2">Hair Color</label>
                    <input type="checkbox" class="btn-check" id="btn3" autocomplete="off">
                    <label class="btn btn-outline-theme mb-2" for="btn3">Hair</label>
                  </div>
                  <div class="border-bottom p-3">
                    <h6 class="pt-2 pb-2 ">Gender</h6>
                    <div class="form-check ps-0">
                      <input class="form-check-input float-end" type="checkbox" value="" id="male">
                      <label class="form-check-label  text-start  tx-14 " for="male"> Male </label>
                    </div>
                    <div class="form-check ps-0">
                      <input class="form-check-input float-end" type="checkbox" value="" id="female">
                      <label class="form-check-label text-start  tx-14 " for="female"> Female </label>
                    </div>
                  </div>
                  <div class="border-bottom  p-3">
                    <h6 class="pt-2 pb-2 ">Rating</h6>
                    <div class="stars">
                      <form action="">
                        <input class="star star-5" id="star-5" type="radio" name="star" />
                        <label class="star star-5" for="star-5"></label>
                        <input class="star star-4" id="star-4" type="radio" name="star" />
                        <label class="star star-4" for="star-4"></label>
                        <input class="star star-3" id="star-3" type="radio" name="star" />
                        <label class="star star-3" for="star-3"></label>
                        <input class="star star-2" id="star-2" type="radio" name="star" />
                        <label class="star star-2" for="star-2"></label>
                        <input class="star star-1" id="star-1" type="radio" name="star" />
                        <label class="star star-1" for="star-1"></label>
                      </form>
                    </div>
                  </div>
                  <div class="border-bottom p-3">
                    <h6 class="pt-2 pb-2 ">Price Range</h6>
                    <div class="input-group border-0 mb-3">
                      <input type="number" value="100" class="form-control bg-light tx-14" placeholder="Username" aria-label="Username">
                      <span class="input-group-text bg-white">-</span>
                      <input type="number" value="7000" class="form-control bg-light tx-14" placeholder="Server" aria-label="Server">
                    </div>
                  </div>
                  <div class=" p-3">
                    <h6 class="pt-2 pb-2 ">Discount</h6>
                    <div class="form-check ps-0">
                      <input class="form-check-input float-end" type="checkbox" value="" id="10">
                      <label class="form-check-label  text-start  tx-14 " for="10"> Up to 10% off </label>
                    </div>
                    <div class="form-check ps-0">
                      <input class="form-check-input float-end" type="checkbox" value="" id="20">
                      <label class="form-check-label text-start  tx-14 " for="20"> Up to 20% off </label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-9">
                <div class="row">
                  <!-- card-one start here -->
                  <div class="col-md-4 mb-3">
                    <a class="text-dark text-decoration-none" href="/saloon/artist-view.html">
                      <div class="card shadow-sm border-0 h-100">
                        <div class="position-relative">
                          <div class="images-card">
                            <img src="assets/images/img-1.png" class="card-img-top" alt="..." />
                            <span id="heart" class="whish position-absolute text-center top-0 end-0 p-1 m-2 bg-white rounded-circle">
                              <i class="fa fa-heart-o tx-14" aria-hidden="true"></i>
                            </span>
                          </div>
                          <div class="bg-dark position-absolute bottom-0 end-0 p-1">
                            <div class="d-flex">
                              <h1 class="text-theme mb-0 lh-34">20</h1>
                              <p class="rotate text-white tx-9 mb-0">YEARS</p>
                            </div>
                            <p class="text-white mb-0 tx-9">EXPERIENCE</p>
                          </div>
                        </div>
                        <div class="card-body p-3">
                          <p class="text-dim tx-12 mb-0">Unisex Salon</p>
                          <h6 class="card-title">Rahul Sharma</h6>
                          <div class="d-flex">
                            <div class="stars me-2">
                              <form action="">
                                <input class="star star-6" id="star-6" type="radio" name="star" />
                                <label class="star star-6 tx-15" for="star-6"></label>
                                <input class="star star-7" id="star-7" type="radio" name="star" />
                                <label class="star star-7 tx-15" for="star-7"></label>
                                <input class="star star-8" id="star-8" type="radio" name="star" />
                                <label class="star star-8 tx-15" for="star-8"></label>
                                <input class="star star-9" id="star-9" type="radio" name="star" />
                                <label class="star star-9 tx-15" for="star-9"></label>
                                <input class="star star-10" id="star-10" type="radio" name="star" />
                                <label class="star star-10 tx-15" for="star-10"></label>
                              </form>
                            </div>
                            <p class="card-text tx-14">
                              <i class="fa fa-headphones text-dim" aria-hidden="true"></i> 25,000
                            </p>
                          </div>
                          <div class="button-section mt-2">
                            <a href="#" class="btn btn1 tx-11 rounded-2 mb-1 p-1">Beard</a>
                            <a href="#" class="btn btn2 tx-11 rounded-2 mb-1 p-1">Body</a>
                            <a href="#" class="btn btn3 tx-11 rounded-2 mb-1 p-1">Hair Cut</a>
                            <a href="#" class="btn btn4 tx-11 rounded-2 mb-1 p-1">Spa</a>
                            <a href="#" class="btn btn5 tx-11 rounded-2 mb-1 p-1">Massage</a>
                            <a href="#" class="btn btn6 tx-11 rounded-2 mb-1 p-1">Other</a>
                          </div>
                        </div>
                        <div class="card-footer bg-white d-flex px-3">
                          <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                          <div class="tx-13 ms-2">
                            <i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <!-- card-section close here -->
                  <!-- card-one start here -->
                  <div class="col-md-4 mb-3">
                    <div class="card shadow-sm border-0 h-100">
                      <div class="position-relative">
                        <div class="images-card">
                          <img src="assets/images/img-1.png"  class="card-img-top" alt="..." />
                          <span id="heart" class="whish position-absolute text-center top-0 end-0 p-1 m-2 bg-white rounded-circle">
                            <i class="fa fa-heart-o tx-14" aria-hidden="true"></i>
                          </span>
                        </div>
                        <div class="bg-dark position-absolute bottom-0 end-0 p-1">
                          <div class="d-flex">
                            <h1 class="text-theme mb-0 lh-34">20</h1>
                            <p class="rotate text-white tx-9 mb-0">YEARS</p>
                          </div>
                          <p class="text-white mb-0 tx-9">EXPERIENCE</p>
                        </div>
                      </div>
                      <div class="card-body p-3">
                        <p class="text-dim tx-12 mb-0">Unisex Salon</p>
                        <h6 class="card-title">Rahul Sharma</h6>
                        <div class="d-flex">
                          <div class="stars me-2">
                            <form action="">
                              <input class="star star-6" id="star-6" type="radio" name="star" />
                              <label class="star star-6 tx-15" for="star-6"></label>
                              <input class="star star-7" id="star-7" type="radio" name="star" />
                              <label class="star star-7 tx-15" for="star-7"></label>
                              <input class="star star-8" id="star-8" type="radio" name="star" />
                              <label class="star star-8 tx-15" for="star-8"></label>
                              <input class="star star-9" id="star-9" type="radio" name="star" />
                              <label class="star star-9 tx-15" for="star-9"></label>
                              <input class="star star-10" id="star-10" type="radio" name="star" />
                              <label class="star star-10 tx-15" for="star-10"></label>
                            </form>
                          </div>
                          <p class="card-text tx-14">
                            <i class="fa fa-headphones text-dim" aria-hidden="true"></i> 25,000
                          </p>
                        </div>
                        <div class="button-section mt-2">
                          <a href="#" class="btn btn1 tx-11 rounded-2 mb-1 p-1">Beard</a>
                          <a href="#" class="btn btn2 tx-11 rounded-2 mb-1 p-1">Body</a>
                          <a href="#" class="btn btn3 tx-11 rounded-2 mb-1 p-1">Hair Cut</a>
                          <a href="#" class="btn btn4 tx-11 rounded-2 mb-1 p-1">Spa</a>
                          <a href="#" class="btn btn5 tx-11 rounded-2 mb-1 p-1">Massage</a>
                          <a href="#" class="btn btn6 tx-11 rounded-2 mb-1 p-1">Other</a>
                        </div>
                      </div>
                      <div class="card-footer bg-white d-flex px-3">
                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                        <div class="tx-13 ms-2">
                          <i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- card-section close here -->
                  <!-- card-one start here -->
                  <div class="col-md-4 mb-3">
                    <div class="card shadow-sm border-0 h-100">
                      <div class="position-relative">
                        <div class="images-card">
                          <img src="assets/images/img-1.png" class="card-img-top" alt="..." />
                          <span id="heart" class="whish position-absolute text-center top-0 end-0 p-1 m-2 bg-white rounded-circle">
                            <i class="fa fa-heart-o tx-14" aria-hidden="true"></i>
                          </span>
                        </div>
                        <div class="bg-dark position-absolute bottom-0 end-0 p-1">
                          <div class="d-flex">
                            <h1 class="text-theme mb-0 lh-34">20</h1>
                            <p class="rotate text-white tx-9 mb-0">YEARS</p>
                          </div>
                          <p class="text-white mb-0 tx-9">EXPERIENCE</p>
                        </div>
                      </div>
                      <div class="card-body p-3">
                        <p class="text-dim tx-12 mb-0">Unisex Salon</p>
                        <h6 class="card-title">Rahul Sharma</h6>
                        <div class="d-flex">
                          <div class="stars me-2">
                            <form action="">
                              <input class="star star-6" id="star-6" type="radio" name="star" />
                              <label class="star star-6 tx-15" for="star-6"></label>
                              <input class="star star-7" id="star-7" type="radio" name="star" />
                              <label class="star star-7 tx-15" for="star-7"></label>
                              <input class="star star-8" id="star-8" type="radio" name="star" />
                              <label class="star star-8 tx-15" for="star-8"></label>
                              <input class="star star-9" id="star-9" type="radio" name="star" />
                              <label class="star star-9 tx-15" for="star-9"></label>
                              <input class="star star-10" id="star-10" type="radio" name="star" />
                              <label class="star star-10 tx-15" for="star-10"></label>
                            </form>
                          </div>
                          <p class="card-text tx-14">
                            <i class="fa fa-headphones text-dim" aria-hidden="true"></i> 25,000
                          </p>
                        </div>
                        <div class="button-section mt-2">
                          <a href="#" class="btn btn1 tx-11 rounded-2 mb-1 p-1">Beard</a>
                          <a href="#" class="btn btn2 tx-11 rounded-2 mb-1 p-1">Body</a>
                          <a href="#" class="btn btn3 tx-11 rounded-2 mb-1 p-1">Hair Cut</a>
                          <a href="#" class="btn btn4 tx-11 rounded-2 mb-1 p-1">Spa</a>
                          <a href="#" class="btn btn5 tx-11 rounded-2 mb-1 p-1">Massage</a>
                          <a href="#" class="btn btn6 tx-11 rounded-2 mb-1 p-1">Other</a>
                        </div>
                      </div>
                      <div class="card-footer bg-white d-flex px-3">
                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                        <div class="tx-13 ms-2">
                          <i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- card-section close here -->
                  <!-- card-one start here -->
                  <div class="col-md-4 mb-3">
                    <div class="card shadow-sm border-0 h-100">
                      <div class="position-relative">
                        <div class="images-card">
                          <img src="assets/images/img-1.png" class="card-img-top" alt="..." />
                          <span id="heart" class="whish position-absolute text-center top-0 end-0 p-1 m-2 bg-white rounded-circle">
                            <i class="fa fa-heart-o tx-14" aria-hidden="true"></i>
                          </span>
                        </div>
                        <div class="bg-dark position-absolute bottom-0 end-0 p-1">
                          <div class="d-flex">
                            <h1 class="text-theme mb-0 lh-34">20</h1>
                            <p class="rotate text-white tx-9 mb-0">YEARS</p>
                          </div>
                          <p class="text-white mb-0 tx-9">EXPERIENCE</p>
                        </div>
                      </div>
                      <div class="card-body p-3">
                        <p class="text-dim tx-12 mb-0">Unisex Salon</p>
                        <h6 class="card-title">Rahul Sharma</h6>
                        <div class="d-flex">
                          <div class="stars me-2">
                            <form action="">
                              <input class="star star-6" id="star-6" type="radio" name="star" />
                              <label class="star star-6 tx-15" for="star-6"></label>
                              <input class="star star-7" id="star-7" type="radio" name="star" />
                              <label class="star star-7 tx-15" for="star-7"></label>
                              <input class="star star-8" id="star-8" type="radio" name="star" />
                              <label class="star star-8 tx-15" for="star-8"></label>
                              <input class="star star-9" id="star-9" type="radio" name="star" />
                              <label class="star star-9 tx-15" for="star-9"></label>
                              <input class="star star-10" id="star-10" type="radio" name="star" />
                              <label class="star star-10 tx-15" for="star-10"></label>
                            </form>
                          </div>
                          <p class="card-text tx-14">
                            <i class="fa fa-headphones text-dim" aria-hidden="true"></i> 25,000
                          </p>
                        </div>
                        <div class="button-section mt-2">
                          <a href="#" class="btn btn1 tx-11 rounded-2 mb-1 p-1">Beard</a>
                          <a href="#" class="btn btn2 tx-11 rounded-2 mb-1 p-1">Body</a>
                          <a href="#" class="btn btn3 tx-11 rounded-2 mb-1 p-1">Hair Cut</a>
                          <a href="#" class="btn btn4 tx-11 rounded-2 mb-1 p-1">Spa</a>
                          <a href="#" class="btn btn5 tx-11 rounded-2 mb-1 p-1">Massage</a>
                          <a href="#" class="btn btn6 tx-11 rounded-2 mb-1 p-1">Other</a>
                        </div>
                      </div>
                      <div class="card-footer bg-white d-flex px-3">
                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                        <div class="tx-13 ms-2">
                          <i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- card-section close here -->
                  <!-- card-one start here -->
                  <div class="col-md-4 mb-3">
                    <div class="card shadow-sm border-0 h-100">
                      <div class="position-relative">
                        <div class="images-card">
                          <img src="assets/images/img-1.png" class="card-img-top" alt="..." />
                          <span id="heart" class="whish position-absolute text-center top-0 end-0 p-1 m-2 bg-white rounded-circle">
                            <i class="fa fa-heart-o tx-14" aria-hidden="true"></i>
                          </span>
                        </div>
                        <div class="bg-dark position-absolute bottom-0 end-0 p-1">
                          <div class="d-flex">
                            <h1 class="text-theme mb-0 lh-34">20</h1>
                            <p class="rotate text-white tx-9 mb-0">YEARS</p>
                          </div>
                          <p class="text-white mb-0 tx-9">EXPERIENCE</p>
                        </div>
                      </div>
                      <div class="card-body p-3">
                        <p class="text-dim tx-12 mb-0">Unisex Salon</p>
                        <h6 class="card-title">Rahul Sharma</h6>
                        <div class="d-flex">
                          <div class="stars me-2">
                            <form action="">
                              <input class="star star-6" id="star-6" type="radio" name="star" />
                              <label class="star star-6 tx-15" for="star-6"></label>
                              <input class="star star-7" id="star-7" type="radio" name="star" />
                              <label class="star star-7 tx-15" for="star-7"></label>
                              <input class="star star-8" id="star-8" type="radio" name="star" />
                              <label class="star star-8 tx-15" for="star-8"></label>
                              <input class="star star-9" id="star-9" type="radio" name="star" />
                              <label class="star star-9 tx-15" for="star-9"></label>
                              <input class="star star-10" id="star-10" type="radio" name="star" />
                              <label class="star star-10 tx-15" for="star-10"></label>
                            </form>
                          </div>
                          <p class="card-text tx-14">
                            <i class="fa fa-headphones text-dim" aria-hidden="true"></i> 25,000
                          </p>
                        </div>
                        <div class="button-section mt-2">
                          <a href="#" class="btn btn1 tx-11 rounded-2 mb-1 p-1">Beard</a>
                          <a href="#" class="btn btn2 tx-11 rounded-2 mb-1 p-1">Body</a>
                          <a href="#" class="btn btn3 tx-11 rounded-2 mb-1 p-1">Hair Cut</a>
                          <a href="#" class="btn btn4 tx-11 rounded-2 mb-1 p-1">Spa</a>
                          <a href="#" class="btn btn5 tx-11 rounded-2 mb-1 p-1">Massage</a>
                          <a href="#" class="btn btn6 tx-11 rounded-2 mb-1 p-1">Other</a>
                        </div>
                      </div>
                      <div class="card-footer bg-white d-flex px-3">
                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                        <div class="tx-13 ms-2">
                          <i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- card-section close here -->
                  <!-- card-one start here -->
                  <div class="col-md-4 mb-3">
                    <div class="card shadow-sm border-0 h-100">
                      <div class="position-relative">
                        <div class="images-card">
                          <img src="assets/images/img-1.png" class="card-img-top" alt="..." />
                          <span id="heart" class="whish position-absolute text-center top-0 end-0 p-1 m-2 bg-white rounded-circle">
                            <i class="fa fa-heart-o tx-14" aria-hidden="true"></i>
                          </span>
                        </div>
                        <div class="bg-dark position-absolute bottom-0 end-0 p-1">
                          <div class="d-flex">
                            <h1 class="text-theme mb-0 lh-34">20</h1>
                            <p class="rotate text-white tx-9 mb-0">YEARS</p>
                          </div>
                          <p class="text-white mb-0 tx-9">EXPERIENCE</p>
                        </div>
                      </div>
                      <div class="card-body p-3">
                        <p class="text-dim tx-12 mb-0">Unisex Salon</p>
                        <h6 class="card-title">Rahul Sharma</h6>
                        <div class="d-flex">
                          <div class="stars me-2">
                            <form action="">
                              <input class="star star-6" id="star-6" type="radio" name="star" />
                              <label class="star star-6 tx-15" for="star-6"></label>
                              <input class="star star-7" id="star-7" type="radio" name="star" />
                              <label class="star star-7 tx-15" for="star-7"></label>
                              <input class="star star-8" id="star-8" type="radio" name="star" />
                              <label class="star star-8 tx-15" for="star-8"></label>
                              <input class="star star-9" id="star-9" type="radio" name="star" />
                              <label class="star star-9 tx-15" for="star-9"></label>
                              <input class="star star-10" id="star-10" type="radio" name="star" />
                              <label class="star star-10 tx-15" for="star-10"></label>
                            </form>
                          </div>
                          <p class="card-text tx-14">
                            <i class="fa fa-headphones text-dim" aria-hidden="true"></i> 25,000
                          </p>
                        </div>
                        <div class="button-section mt-2">
                          <a href="#" class="btn btn1 tx-11 rounded-2 mb-1 p-1">Beard</a>
                          <a href="#" class="btn btn2 tx-11 rounded-2 mb-1 p-1">Body</a>
                          <a href="#" class="btn btn3 tx-11 rounded-2 mb-1 p-1">Hair Cut</a>
                          <a href="#" class="btn btn4 tx-11 rounded-2 mb-1 p-1">Spa</a>
                          <a href="#" class="btn btn5 tx-11 rounded-2 mb-1 p-1">Massage</a>
                          <a href="#" class="btn btn6 tx-11 rounded-2 mb-1 p-1">Other</a>
                        </div>
                      </div>
                      <div class="card-footer bg-white d-flex px-3">
                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                        <div class="tx-13 ms-2">
                          <i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- card-section close here -->
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="bg-white p-3">
              <section class="HoverVideo">
                <div class="HoverVideo__wrapper">
                  <div class="HoverVideo__videoBox mb-3 rounded position-relative">
                    <video class="video" loop preload="yes" muted>
                      <source src="https://assets.mixkit.co/videos/1704/1704-720.mp4" type="video/mp4">
                    </video>
                    <span class="position-absolute bottom-0 end-0 p-2 shadow-1">
                      <h6 class="text-theme mb-0">The Belle Salon</h6>
                      <p class="tx-11 text-white mb-0">Sector 125, Sunny Enclave, Kharar, Punjab Region 140301 </p>
                    </span>
                  </div>
                  <div class="HoverVideo__videoBox mb-3 rounded position-relative">
                    <video class="video" loop preload="yes" muted>
                      <source src="https://assets.mixkit.co/videos/1704/1704-720.mp4" type="video/mp4">
                    </video>
                    <span class="position-absolute bottom-0 end-0 p-2 shadow-1">
                      <h6 class="text-theme mb-0">The Belle Salon</h6>
                      <p class="tx-11 text-white mb-0">Sector 125, Sunny Enclave, Kharar, Punjab Region 140301 </p>
                    </span>
                  </div>
                  <div class="HoverVideo__videoBox mb-3 rounded position-relative">
                    <video class="video" loop preload="yes" muted>
                      <source src="https://assets.mixkit.co/videos/1704/1704-720.mp4" type="video/mp4">
                    </video>
                    <span class="position-absolute bottom-0 end-0 p-2 shadow-1">
                      <h6 class="text-theme mb-0">The Belle Salon</h6>
                      <p class="tx-11 text-white mb-0">Sector 125, Sunny Enclave, Kharar, Punjab Region 140301 </p>
                    </span>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
</div>
@endsection