Category: Vue3

Vue js Vue 3 Free Admin Dashboard Template

Vuejs admin free template, vue admin website, free admin dashboard vuejs, vue 3 dashboard .

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue js Vue 3 Free Admin Dashboard Template.

Live working demo

Vue 3 came and if you are new then you must check below link:
Vuejs Tutorials

Friends now I proceed onwards and here is the working code snippet for eStore – Free Vue 3 Bootstrap 5 eCommerce Templateand please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can skip this first step if you already have vuejs fresh setup:

vue create project-name

2. Guys now run below command to install node modules and run the project:

cd <your-project-name>

3. Now guys please create assets folder inside plublic folder and download zip(in this zip file there are js, css and images for admintemplate) file from below path and extract zip inside public/assets folder and get all the folders:

Git Repo Link

4. In the end please add below code inside scr/App.vue file:

<template>
  <div class="container-scroller">
  <!-- partial:partials/_sidebar -->
  <nav class="sidebar sidebar-offcanvas" id="sidebar">
    <ul class="nav">
      <li class="nav-item nav-profile border-bottom">
        <a href="#" class="nav-link flex-column">
          <div class="nav-profile-image">
            <img src="assets/images/faces/face1.jpg" alt="profile" />
            <!--change to offline or busy as needed-->
          </div>
          <div class="nav-profile-text d-flex ml-0 mb-3 flex-column">
            <span class="font-weight-semibold mb-1 mt-2 text-center">Antonio Olson</span>
            <span class="text-secondary icon-sm text-center">$3499.00</span>
          </div>
        </a>
      </li>
      <li class="nav-item pt-3">
        <a class="nav-link d-block" href="#">
          <img class="sidebar-brand-logo" src="assets/images/logo.svg" alt="" />
          <img class="sidebar-brand-logomini" src="assets/images/logo-mini.svg" alt="" />
          <div class="small font-weight-light pt-1">Responsive Dashboard</div>
        </a>
        <form class="d-flex align-items-center" action="#">
          <div class="input-group">
            <div class="input-group-prepend">
              <i class="input-group-text border-0 mdi mdi-magnify"></i>
            </div>
            <input type="text" class="form-control border-0" placeholder="Search" />
          </div>
        </form>
      </li>
      <li class="pt-2 pb-1">
        <span class="nav-item-head">Template Pages</span>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="mdi mdi-compass-outline menu-icon"></i>
          <span class="menu-title">Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
          <i class="mdi mdi-crosshairs-gps menu-icon"></i>
          <span class="menu-title">UI Elements</span>
          <i class="menu-arrow"></i>
        </a>
        <div class="collapse" id="ui-basic">
          <ul class="nav flex-column sub-menu">
            <li class="nav-item">
              <a class="nav-link" href="#">Buttons</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Dropdowns</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Typography</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="mdi mdi-contacts menu-icon"></i>
          <span class="menu-title">Icons</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="mdi mdi-format-list-bulleted menu-icon"></i>
          <span class="menu-title">Forms</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="mdi mdi-chart-bar menu-icon"></i>
          <span class="menu-title">Charts</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="mdi mdi-table-large menu-icon"></i>
          <span class="menu-title">Tables</span>
        </a>
      </li>
      <li class="nav-item pt-3">
        <a class="nav-link" href="#" target="_blank">
          <i class="mdi mdi-file-document-box menu-icon"></i>
          <span class="menu-title">Documentation</span>
        </a>
      </li>
    </ul>
  </nav>
  <!-- partial -->
  <div class="container-fluid page-body-wrapper">
    <!-- partial:partials/_settings-panel -->
    <div id="settings-trigger"><i class="mdi mdi-settings"></i></div>
    <div id="theme-settings" class="settings-panel">
      <i class="settings-close mdi mdi-close"></i>
      <p class="settings-heading">SIDEBAR SKINS</p>
      <div class="sidebar-bg-options selected" id="sidebar-default-theme">
        <div class="img-ss rounded-circle bg-light border mr-3"></div>Default
      </div>
      <div class="sidebar-bg-options" id="sidebar-dark-theme">
        <div class="img-ss rounded-circle bg-dark border mr-3"></div>Dark
      </div>
      <p class="settings-heading mt-2">HEADER SKINS</p>
      <div class="color-tiles mx-0 px-4">
        <div class="tiles default primary"></div>
        <div class="tiles success"></div>
        <div class="tiles warning"></div>
        <div class="tiles danger"></div>
        <div class="tiles info"></div>
        <div class="tiles dark"></div>
        <div class="tiles light"></div>
      </div>
    </div>
    <!-- partial -->
    <!-- partial:partials/_navbar -->
    <nav class="navbar default-layout-navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
      <div class="navbar-menu-wrapper d-flex align-items-stretch">
        <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
          <span class="mdi mdi-chevron-double-left"></span>
        </button>
        <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
          <a class="navbar-brand brand-logo-mini" href="#"><img src="assets/images/logo-mini.svg" alt="logo" /></a>
        </div>
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
              <i class="mdi mdi-email-outline"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-left navbar-dropdown preview-list" aria-labelledby="messageDropdown">
              <h6 class="p-3 mb-0 font-weight-semibold">Messages</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <img src="assets/images/faces/face1.jpg" alt="image" class="profile-pic">
                </div>
                <div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
                  <h6 class="preview-subject ellipsis mb-1 font-weight-normal">Mark send you a message</h6>
                  <p class="text-gray mb-0"> 1 Minutes ago </p>
                </div>
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <img src="assets/images/faces/face6.jpg" alt="image" class="profile-pic">
                </div>
                <div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
                  <h6 class="preview-subject ellipsis mb-1 font-weight-normal">Cregh send you a message</h6>
                  <p class="text-gray mb-0"> 15 Minutes ago </p>
                </div>
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <img src="assets/images/faces/face7.jpg" alt="image" class="profile-pic">
                </div>
                <div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
                  <h6 class="preview-subject ellipsis mb-1 font-weight-normal">Profile picture updated</h6>
                  <p class="text-gray mb-0"> 18 Minutes ago </p>
                </div>
              </a>
              <div class="dropdown-divider"></div>
              <h6 class="p-3 mb-0 text-center text-primary font-13">4 new messages</h6>
            </div>
          </li>
          <li class="nav-item dropdown ml-3">
            <a class="nav-link" id="notificationDropdown" href="#" data-toggle="dropdown">
              <i class="mdi mdi-bell-outline"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-left navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
              <h6 class="px-3 py-3 font-weight-semibold mb-0">Notifications</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <div class="preview-icon bg-success">
                    <i class="mdi mdi-calendar"></i>
                  </div>
                </div>
                <div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
                  <h6 class="preview-subject font-weight-normal mb-0">New order recieved</h6>
                  <p class="text-gray ellipsis mb-0"> 45 sec ago </p>
                </div>
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <div class="preview-icon bg-warning">
                    <i class="mdi mdi-settings"></i>
                  </div>
                </div>
                <div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
                  <h6 class="preview-subject font-weight-normal mb-0">Server limit reached</h6>
                  <p class="text-gray ellipsis mb-0"> 55 sec ago </p>
                </div>
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <div class="preview-icon bg-info">
                    <i class="mdi mdi-link-variant"></i>
                  </div>
                </div>
                <div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
                  <h6 class="preview-subject font-weight-normal mb-0">Kevin karvelle</h6>
                  <p class="text-gray ellipsis mb-0"> 11:09 PM </p>
                </div>
              </a>
              <div class="dropdown-divider"></div>
              <h6 class="p-3 font-13 mb-0 text-primary text-center">View all notifications</h6>
            </div>
          </li>
        </ul>
        <ul class="navbar-nav navbar-nav-right">
          <li class="nav-item nav-logout d-none d-md-block mr-3">
            <a class="nav-link" href="#">Status</a>
          </li>
          <li class="nav-item nav-logout d-none d-md-block">
            <button class="btn btn-sm btn-danger">Trailing</button>
          </li>
          <li class="nav-item nav-profile dropdown d-none d-md-block">
            <a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
              <div class="nav-profile-text">English </div>
            </a>
            <div class="dropdown-menu center navbar-dropdown" aria-labelledby="profileDropdown">
              <a class="dropdown-item" href="#">
                <i class="flag-icon flag-icon-bl mr-3"></i> French </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">
                <i class="flag-icon flag-icon-cn mr-3"></i> Chinese </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">
                <i class="flag-icon flag-icon-de mr-3"></i> German </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">
                <i class="flag-icon flag-icon-ru mr-3"></i>Russian </a>
            </div>
          </li>
          <li class="nav-item nav-logout d-none d-lg-block">
            <a class="nav-link" href="#">
              <i class="mdi mdi-home-circle"></i>
            </a>
          </li>
        </ul>
        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
          <span class="mdi mdi-menu"></span>
        </button>
      </div>
    </nav>
    <!-- partial -->
    <div class="main-panel">
      <div class="content-wrapper pb-0">
        <div class="page-header flex-wrap">
          <div class="header-left">
            <button class="btn btn-primary mb-2 mb-md-0 mr-2"> Create new document </button>
            <button class="btn btn-outline-primary bg-white mb-2 mb-md-0"> Import documents </button>
          </div>
          <div class="header-right d-flex flex-wrap mt-2 mt-sm-0">
            <div class="d-flex align-items-center">
              <a href="#">
                <p class="m-0 pr-3">Dashboard</p>
              </a>
              <a class="pl-3 mr-4" href="#">
                <p class="m-0">ADE-00234</p>
              </a>
            </div>
            <button type="button" class="btn btn-primary mt-2 mt-sm-0 btn-icon-text">
              <i class="mdi mdi-plus-circle"></i> Add Prodcut </button>
          </div>
        </div>
        <!-- first row starts here -->
        <div class="row">
          <div class="col-xl-9 stretch-card grid-margin">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between flex-wrap">
                  <div>
                    <div class="card-title mb-0">Sales Revenue</div>
                    <h3 class="font-weight-bold mb-0">$32,409</h3>
                  </div>
                  <div>
                    <div class="d-flex flex-wrap pt-2 justify-content-between sales-header-right">
                      <div class="d-flex mr-5">
                        <button type="button" class="btn btn-social-icon btn-outline-sales">
                          <i class="mdi mdi-inbox-arrow-down"></i>
                        </button>
                        <div class="pl-2">
                          <h4 class="mb-0 font-weight-semibold head-count"> $8,217 </h4>
                          <span class="font-10 font-weight-semibold text-muted">TOTAL SALES</span>
                        </div>
                      </div>
                      <div class="d-flex mr-3 mt-2 mt-sm-0">
                        <button type="button" class="btn btn-social-icon btn-outline-sales profit">
                          <i class="mdi mdi-cash text-info"></i>
                        </button>
                        <div class="pl-2">
                          <h4 class="mb-0 font-weight-semibold head-count"> 2,804 </h4>
                          <span class="font-10 font-weight-semibold text-muted">TOTAL PROFIT</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="text-muted font-13 mt-2 mt-sm-0"> Your sales monitoring dashboard template. <a class="text-muted font-13" href="#"><u>Learn more</u></a>
                </p>
                <div class="flot-chart-wrapper">
                  <div id="flotChart" class="flot-chart">
                    <canvas class="flot-base"></canvas>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 stretch-card grid-margin">
            <div class="card card-img">
              <div class="card-body d-flex align-items-center">
                <div class="text-white">
                  <h1 class="font-20 font-weight-semibold mb-0"> Get premium </h1>
                  <h1 class="font-20 font-weight-semibold">account!</h1>
                  <p>to optimize your selling prodcut</p>
                  <p class="font-10 font-weight-semibold"> Enjoy the advantage of premium. </p>
                  <button class="btn bg-white font-12">Get Premium</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- chart row starts here -->
        <div class="row">
          <div class="col-sm-6 stretch-card grid-margin">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <div class="card-title"> Customers <small class="d-block text-muted">August 01 - August 31</small>
                  </div>
                  <div class="d-flex text-muted font-20">
                    <i class="mdi mdi-printer mouse-pointer"></i>
                    <i class="mdi mdi-help-circle-outline ml-2 mouse-pointer"></i>
                  </div>
                </div>
                <h3 class="font-weight-bold mb-0"> 2,409 <span class="text-success h5">4,5%<i class="mdi mdi-arrow-up"></i></span>
                </h3>
                <span class="text-muted font-13">Avg customers/Day</span>
                <div class="line-chart-wrapper">
                  <canvas id="linechart" height="80"></canvas>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 stretch-card grid-margin">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <div class="card-title"> Conversions <small class="d-block text-muted">August 01 - August 31</small>
                  </div>
                  <div class="d-flex text-muted font-20">
                    <i class="mdi mdi-printer mouse-pointer"></i>
                    <i class="mdi mdi-help-circle-outline ml-2 mouse-pointer"></i>
                  </div>
                </div>
                <h3 class="font-weight-bold mb-0"> 0.40% <span class="text-success h5">0.20%<i class="mdi mdi-arrow-up"></i></span>
                </h3>
                <span class="text-muted font-13">Avg customers/Day</span>
                <div class="bar-chart-wrapper">
                  <canvas id="barchart" height="80"></canvas>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- image card row starts here -->
        <div class="row">
          <div class="col-sm-4 stretch-card grid-margin">
            <div class="card">
              <div class="card-body p-0">
                <img class="img-fluid w-100" src="assets/images/dashboard/img_1.jpg" alt="" />
              </div>
              <div class="card-body px-3 text-dark">
                <div class="d-flex justify-content-between">
                  <p class="text-muted font-13 mb-0">ENTIRE APARTMENT</p>
                  <i class="mdi mdi-heart-outline"></i>
                </div>
                <h5 class="font-weight-semibold"> Cosy Studio flat in London </h5>
                <div class="d-flex justify-content-between font-weight-semibold">
                  <p class="mb-0">
                    <i class="mdi mdi-star star-color pr-1"></i>4.60 (35) </p>
                  <p class="mb-0">$5,267/night</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4 stretch-card grid-margin">
            <div class="card">
              <div class="card-body p-0">
                <img class="img-fluid w-100" src="assets/images/dashboard/img_2.jpg" alt="" />
              </div>
              <div class="card-body px-3 text-dark">
                <div class="d-flex justify-content-between">
                  <p class="text-muted font-13 mb-0">ENTIRE APARTMENT</p>
                  <i class="mdi mdi-heart-outline"></i>
                </div>
                <h5 class="font-weight-semibold"> Victoria Bedsit Studio Ensuite </h5>
                <div class="d-flex justify-content-between font-weight-semibold">
                  <p class="mb-0">
                    <i class="mdi mdi-star star-color pr-1"></i>4.83 (12) </p>
                  <p class="mb-0">$6,144/night</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4 stretch-card grid-margin">
            <div class="card">
              <div class="card-body p-0">
                <img class="img-fluid w-100" src="assets/images/dashboard/img_3.jpg" alt="" />
              </div>
              <div class="card-body px-3 text-dark">
                <div class="d-flex justify-content-between">
                  <p class="text-muted font-13 mb-0">ENTIRE APARTMENT</p>
                  <i class="mdi mdi-heart-outline"></i>
                </div>
                <h5 class="font-weight-semibold">Fabulous Huge Room</h5>
                <div class="d-flex justify-content-between font-weight-semibold">
                  <p class="mb-0">
                    <i class="mdi mdi-star star-color pr-1"></i>3.83 (15) </p>
                  <p class="mb-0">$5,267/night</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- table row starts here -->
        <div class="row">
          <div class="col-xl-4 grid-margin">
            <div class="card card-stat stretch-card mb-3">
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <div class="text-white">
                    <h3 class="font-weight-bold mb-0">$168.90</h3>
                    <h6>This Month</h6>
                    <div class="badge badge-danger">23%</div>
                  </div>
                  <div class="flot-bar-wrapper">
                    <div id="column-chart" class="flot-chart"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card stretch-card mb-3">
              <div class="card-body d-flex flex-wrap justify-content-between">
                <div>
                  <h4 class="font-weight-semibold mb-1 text-black"> Member Profit </h4>
                  <h6 class="text-muted">Average Weekly Profit</h6>
                </div>
                <h3 class="text-success font-weight-bold">+168.900</h3>
              </div>
            </div>
            <div class="card stretch-card mb-3">
              <div class="card-body d-flex flex-wrap justify-content-between">
                <div>
                  <h4 class="font-weight-semibold mb-1 text-black"> Total Profit </h4>
                  <h6 class="text-muted">Weekly Customer Orders</h6>
                </div>
                <h3 class="text-success font-weight-bold">+6890.00</h3>
              </div>
            </div>
            <div class="card mt-3">
              <div class="card-body d-flex flex-wrap justify-content-between">
                <div>
                  <h4 class="font-weight-semibold mb-1 text-black"> Issue Reports </h4>
                  <h6 class="text-muted">System bugs and issues</h6>
                </div>
                <h3 class="text-danger font-weight-bold">-8380.00</h3>
              </div>
            </div>
          </div>
          <div class="col-xl-8 stretch-card grid-margin">
            <div class="card">
              <div class="card-body pb-0">
                <h4 class="card-title mb-0">Financial management review</h4>
              </div>
              <div class="card-body p-0">
                <div class="table-responsive">
                  <table class="table custom-table text-dark">
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>Sale Rate</th>
                        <th>Actual</th>
                        <th>Variance</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <img src="assets/images/faces/face2.jpg" class="mr-2" alt="image" /> Jacob Jensen </td>
                        <td>
                          <div class="d-flex">
                            <span class="pr-2 d-flex align-items-center">85%</span>
                            <select id="star-1" name="rating" autocomplete="off">
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                            </select>
                          </div>
                        </td>
                        <td>32,435</td>
                        <td>40,234</td>
                      </tr>
                      <tr>
                        <td>
                          <img src="assets/images/faces/face3.jpg" class="mr-2" alt="image" /> Cecelia Bradley </td>
                        <td>
                          <div class="d-flex">
                            <span class="pr-2 d-flex align-items-center">55%</span>
                            <select id="star-2" name="rating" autocomplete="off">
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                            </select>
                          </div>
                        </td>
                        <td>4,36780</td>
                        <td>765728</td>
                      </tr>
                      <tr>
                        <td>
                          <img src="assets/images/faces/face4.jpg" class="mr-2" alt="image" /> Leah Sherman </td>
                        <td>
                          <div class="d-flex">
                            <span class="pr-2 d-flex align-items-center">23%</span>
                            <select id="star-3" name="rating" autocomplete="off">
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                            </select>
                          </div>
                        </td>
                        <td>2300</td>
                        <td>22437</td>
                      </tr>
                      <tr>
                        <td>
                          <img src="assets/images/faces/face5.jpg" class="mr-2" alt="image" /> Ina Curry </td>
                        <td>
                          <div class="d-flex">
                            <span class="pr-2 d-flex align-items-center">44%</span>
                            <select id="star-4" name="rating" autocomplete="off">
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                            </select>
                          </div>
                        </td>
                        <td>53462</td>
                        <td>1,75938</td>
                      </tr>
                      <tr>
                        <td>
                          <img src="assets/images/faces/face7.jpg" class="mr-2" alt="image" /> Lida Fitzgerald </td>
                        <td>
                          <div class="d-flex">
                            <span class="pr-2 d-flex align-items-center">65%</span>
                            <select id="star-5" name="rating" autocomplete="off">
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                            </select>
                          </div>
                        </td>
                        <td>67453</td>
                        <td>765377</td>
                      </tr>
                      <tr>
                        <td>
                          <img src="assets/images/faces/face2.jpg" class="mr-2" alt="image" /> Stella Johnson </td>
                        <td>
                          <div class="d-flex">
                            <span class="pr-2 d-flex align-items-center">49%</span>
                            <select id="star-6" name="rating" autocomplete="off">
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                            </select>
                          </div>
                        </td>
                        <td>43662</td>
                        <td>96535</td>
                      </tr>
                      <tr>
                        <td>
                          <img src="assets/images/faces/face9.jpg" class="mr-2" alt="image" /> Maria Ortiz </td>
                        <td>
                          <div class="d-flex">
                            <span class="pr-2 d-flex align-items-center">65%</span>
                            <select id="star-7" name="rating" autocomplete="off">
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                            </select>
                          </div>
                        </td>
                        <td>76555</td>
                        <td>258546</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <a class="text-black font-13 d-block pt-2 pb-2 pb-lg-0 font-weight-bold pl-4" href="#">Show more</a>
              </div>
            </div>
          </div>
        </div>
        <!-- doughnut chart row starts -->
        <div class="row">
          <div class="col-sm-12 stretch-card grid-margin">
            <div class="card">
              <div class="row">
                <div class="col-md-4">
                  <div class="card border-0">
                    <div class="card-body">
                      <div class="card-title">Channel Sessions</div>
                      <div class="d-flex flex-wrap">
                        <div class="doughnut-wrapper w-50">
                          <canvas id="doughnutChart1" width="100" height="100"></canvas>
                        </div>
                        <div id="doughnut-chart-legend" class="pl-lg-3 rounded-legend align-self-center flex-grow legend-vertical legend-bottom-left"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="card border-0">
                    <div class="card-body">
                      <div class="card-title">News Sessions</div>
                      <div class="d-flex flex-wrap">
                        <div class="doughnut-wrapper w-50">
                          <canvas id="doughnutChart2" width="100" height="100"></canvas>
                        </div>
                        <div id="doughnut-chart-legend2" class="pl-lg-3 rounded-legend align-self-center flex-grow legend-vertical legend-bottom-left"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="card border-0">
                    <div class="card-body">
                      <div class="card-title">Device Sessions</div>
                      <div class="d-flex flex-wrap">
                        <div class="doughnut-wrapper w-50">
                          <canvas id="doughnutChart3" width="100" height="100"></canvas>
                        </div>
                        <div id="doughnut-chart-legend3" class="pl-lg-3 rounded-legend align-self-center flex-grow legend-vertical legend-bottom-left"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- last row starts here -->
        <div class="row">
          <div class="col-sm-6 col-xl-4 stretch-card grid-margin">
            <div class="card">
              <div class="card-body">
                <div class="card-title mb-2">Upcoming events (3)</div>
                <h3 class="mb-3">23 July 2024</h3>
                <div class="d-flex border-bottom border-top py-3">
                  <div class="form-check">
                    <label class="form-check-label">
                      <input type="checkbox" class="form-check-input" checked /></label>
                  </div>
                  <div class="pl-2">
                    <span class="font-12 text-muted">Tue, Mar 5, 9.30am</span>
                    <p class="m-0 text-black"> Hey I attached some new PSD files… </p>
                  </div>
                </div>
                <div class="d-flex border-bottom py-3">
                  <div class="form-check">
                    <label class="form-check-label">
                      <input type="checkbox" class="form-check-input" /></label>
                  </div>
                  <div class="pl-2">
                    <span class="font-12 text-muted">Mon, Mar 11, 4.30 PM</span>
                    <p class="m-0 text-black"> Discuss performance with manager </p>
                  </div>
                </div>
                <div class="d-flex border-bottom py-3">
                  <div class="form-check">
                    <label class="form-check-label">
                      <input type="checkbox" class="form-check-input" /></label>
                  </div>
                  <div class="pl-2">
                    <span class="font-12 text-muted">Tue, Mar 5, 9.30am</span>
                    <p class="m-0 text-black">Meeting with Alisa</p>
                  </div>
                </div>
                <div class="d-flex pt-3">
                  <div class="form-check">
                    <label class="form-check-label">
                      <input type="checkbox" class="form-check-input" /></label>
                  </div>
                  <div class="pl-2">
                    <span class="font-12 text-muted">Mon, Mar 11, 4.30 PM</span>
                    <p class="m-0 text-black"> Hey I attached some new PSD files… </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-4 stretch-card grid-margin">
            <div class="card">
              <div class="card-body">
                <div class="d-flex border-bottom mb-4 pb-2">
                  <div class="hexagon">
                    <div class="hex-mid hexagon-warning">
                      <i class="mdi mdi-clock-outline"></i>
                    </div>
                  </div>
                  <div class="pl-4">
                    <h4 class="font-weight-bold text-warning mb-0"> 12.45 </h4>
                    <h6 class="text-muted">Schedule Meeting</h6>
                  </div>
                </div>
                <div class="d-flex border-bottom mb-4 pb-2">
                  <div class="hexagon">
                    <div class="hex-mid hexagon-danger">
                      <i class="mdi mdi-account-outline"></i>
                    </div>
                  </div>
                  <div class="pl-4">
                    <h4 class="font-weight-bold text-danger mb-0">34568</h4>
                    <h6 class="text-muted">Profile visits</h6>
                  </div>
                </div>
                <div class="d-flex border-bottom mb-4 pb-2">
                  <div class="hexagon">
                    <div class="hex-mid hexagon-success">
                      <i class="mdi mdi-laptop-chromebook"></i>
                    </div>
                  </div>
                  <div class="pl-4">
                    <h4 class="font-weight-bold text-success mb-0"> 33.50% </h4>
                    <h6 class="text-muted">Bounce Rate</h6>
                  </div>
                </div>
                <div class="d-flex border-bottom mb-4 pb-2">
                  <div class="hexagon">
                    <div class="hex-mid hexagon-info">
                      <i class="mdi mdi-clock-outline"></i>
                    </div>
                  </div>
                  <div class="pl-4">
                    <h4 class="font-weight-bold text-info mb-0">12.45</h4>
                    <h6 class="text-muted">Schedule Meeting</h6>
                  </div>
                </div>
                <div class="d-flex">
                  <div class="hexagon">
                    <div class="hex-mid hexagon-primary">
                      <i class="mdi mdi-timer-sand"></i>
                    </div>
                  </div>
                  <div class="pl-4">
                    <h4 class="font-weight-bold text-primary mb-0"> 12.45 </h4>
                    <h6 class="text-muted mb-0">Browser Usage</h6>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-4 stretch-card grid-margin">
            <div class="card color-card-wrapper">
              <div class="card-body">
                <img class="img-fluid card-top-img w-100" src="assets/images/dashboard/img_5.jpg" alt="" />
                <div class="d-flex flex-wrap justify-content-around color-card-outer">
                  <div class="col-6 p-0 mb-4">
                    <div class="color-card primary m-auto">
                      <i class="mdi mdi-clock-outline"></i>
                      <p class="font-weight-semibold mb-0">Delivered</p>
                      <span class="small">15 Packages</span>
                    </div>
                  </div>
                  <div class="col-6 p-0 mb-4">
                    <div class="color-card bg-success m-auto">
                      <i class="mdi mdi-tshirt-crew"></i>
                      <p class="font-weight-semibold mb-0">Ordered</p>
                      <span class="small">72 Items</span>
                    </div>
                  </div>
                  <div class="col-6 p-0">
                    <div class="color-card bg-info m-auto">
                      <i class="mdi mdi-trophy-outline"></i>
                      <p class="font-weight-semibold mb-0">Arrived</p>
                      <span class="small">34 Upgraded</span>
                    </div>
                  </div>
                  <div class="col-6 p-0">
                    <div class="color-card bg-danger m-auto">
                      <i class="mdi mdi-presentation"></i>
                      <p class="font-weight-semibold mb-0">Reported</p>
                      <span class="small">72 Support</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- content-wrapper ends -->
      <!-- partial:partials/_footer -->
      <footer class="footer">
        <div class="d-sm-flex justify-content-center justify-content-sm-between">
          <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © 2024</span>
         
        </div>

     
      </footer>
      <!-- partial -->
    </div>
    <!-- main-panel ends -->
  </div>
  <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
</template>

<script>


export default {
 
  
}
</script>

5. Guys please add below code inside index.html file:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>
      Admin
    </title>
  <!-- CSS -->
  <link rel="stylesheet" href="assets/css/materialdesignicons.min.css" />
  <link rel="stylesheet" href="assets/css/flag-icon.min.css" />
  <link rel="stylesheet" href="assets/css/vendor.bundle.base.css" />
  <link rel="stylesheet" href="assets/css/css-stars.css" />
  <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
  <link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!--  JS -->
    <script src="assets/js/vendor.bundle.base.js"></script>
    <script src="assets/js/jquery.barrating.min.js"></script>
    <script src="assets/js/Chart.min.js"></script>
    <script src="assets/js/jquery.flot.js"></script>
    <script src="assets/assets/js/jquery.flot.resize.js"></script>
    <script src="assets/js/jquery.flot.categories.js"></script>
    <script src="assets/js/jquery.flot.fillbetween.js"></script>
    <script src="assets/js/jquery.flot.stack.js"></script>
    <script src="assets/js/off-canvas.js"></script>
    <script src="assets/js/hoverable-collapse.js"></script>
    <script src="assets/js/misc.js"></script>
    <script src="assets/js/settings.js"></script>
    <script src="assets/js/todolist.js"></script>
    <script src="assets/js/dashboard.js"></script>
  </body>
</html>

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

July 22, 2024

Creating an Ecommerce Website in Vue js 3 using Bootstrap

Hello guys how are you? Welcome back to my blog. Today in this post I am creating an eCommerce website in Vue.js 3 using Bootstrap 5. We’ll include a mini cart, a product details page, and a single product page.

Key Features:

Vuejs 3
Bootstrap 5
State Management
Mini Cart Functionality
Single Product Page
Products Listing Page
Fully Responsive
Routing

Live Demo

Vue 3 came and if you are new then you must check below link:

Vuejs Tutorials
Vue Ecommerce Templates

Friends now I proceed onwards and here is the working code snippet for Creating an Ecommerce Website in Vue js 3 using Bootstrap and please use this carefully to avoid the mistakes:

Step 1: Set Up the Vue.js Project

First, ensure you have Vue CLI installed. If not, you can install it using npm:

npm install -g @vue/cli

Now, create a new Vue project:

vue create ecommerce-app
cd ecommerce-app

Step 2: Install Bootstrap 5

To use Bootstrap 5, install it via npm:

npm install bootstrap

Then, include Bootstrap in your main.js:

import { createApp } from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.min.css';

createApp(App).mount('#app');

Step 3: Create the Project Structure

Let’s create the necessary components and views for the eCommerce site.

Components
- MiniCart.vue
- ProductCard.vue
Views
- Home.vue
- ProductDetails.vue
- SingleProduct.vue
router
- index.js
store
- cart.js

Step 4: Define Routes

Install Vue Router if you haven’t already:

npm install vue-router@next

Then, set up the routes in src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import ProductDetails from '../views/ProductDetails.vue';
import SingleProduct from '../views/SingleProduct.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/product/:id',
    name: 'ProductDetails',
    component: ProductDetails
  },
  {
    path: '/single-product',
    name: 'SingleProduct',
    component: SingleProduct
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

In your main.js, include the router:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import 'bootstrap/dist/css/bootstrap.min.css';

createApp(App).use(router).mount('#app');

Step 5: Create Components

MiniCart.vue

<template>
  <div class="mini-cart">
    <h4>Mini Cart ({{ totalItems }} items)</h4>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - Quantity: {{ item.quantity }}
      </li>
    </ul>
  </div>
</template>

<script>
import { computed } from 'vue';
import { cart } from '../store/cart';

export default {
  setup() {
    const cartItems = computed(() => cart.items);
    const totalItems = computed(() => cart.totalItems);
    return {
      cartItems,
      totalItems
    };
  }
};
</script>

<style scoped>
.mini-cart {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 200px;
  border: 1px solid #ddd;
  padding: 10px;
}
</style>

ProductCard.vue

<template>
  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/150" class="card-img-top" :alt="product.name">
    <div class="card-body">
      <h5 class="card-title">{{ product.name }}</h5>
      <p class="card-text">{{ product.description }}</p>
      <router-link :to="`/product/${product.id}`" class="btn btn-primary me-2">View Details</router-link>
      <button class="btn btn-secondary" @click="$emit('add-to-cart', product)">Add to Cart</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    product: Object
  }
};
</script>

<style scoped>
.card {
  margin: 10px;
}
</style>

Step 6: Create Views

Home.vue

<template>
  <div class="home">
    <h1>Home Page</h1>
    <div class="product-list">
      <ProductCard v-for="product in products" :key="product.id" :product="product" @add-to-cart="addToCart" />
    </div>
    <MiniCart />
  </div>
</template>

<script>
import ProductCard from '../components/ProductCard.vue';
import MiniCart from '../components/MiniCart.vue';
import { cart } from '../store/cart';

export default {
  components: {
    ProductCard,
    MiniCart
  },
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1', description: 'Description 1', image: 'https://via.placeholder.com/150' },
        { id: 2, name: 'Product 2', description: 'Description 2', image: 'https://via.placeholder.com/150' },
        // Add more products as needed
      ]
    };
  },
  methods: {
    addToCart(product) {
      cart.addToCart(product);
    }
  }
};
</script>

<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
}
</style>

ProductDetails.vue

<template>
  <div class="product-details">
    <h1>{{ product.name }}</h1>
    <img src="https://via.placeholder.com/150" :alt="product.name">
    <p>{{ product.description }}</p>
    <button class="btn btn-primary" @click="addToCart(product)">Add to Cart</button>
  </div>
</template>

<script>
import { cart } from '../store/cart';

export default {
  data() {
    return {
      product: {}
    };
  },
  created() {
    const productId = this.$route.params.id;
    // Fetch product details based on productId
    // For demonstration, we'll use a static product
    this.product = { id: productId, name: 'Product ' + productId, description: 'Description ' + productId, image: 'image' + productId + '.jpg' };
  },
  methods: {
    addToCart(product) {
      cart.addToCart(product);
    }
  }
};
</script>

<style scoped>
.product-details {
  text-align: center;
}
</style>

SingleProduct.vue

<template>
  <div class="single-product">
    <h1>Single Product Page</h1>
    <ProductCard :product="product" @add-to-cart="addToCart" />
  </div>
</template>

<script>
import ProductCard from '../components/ProductCard.vue';
import { cart } from '../store/cart';

export default {
  components: {
    ProductCard
  },
  data() {
    return {
      product: { id: 1, name: 'Single Product', description: 'Single Product Description', image: 'single-product.jpg' }
    };
  },
  methods: {
    addToCart(product) {
      cart.addToCart(product);
    }
  }
};
</script>

<style scoped>
.single-product {
  text-align: center;
}
</style>

Step 7: Set Up a Global State Management Solution

src/store/cart.js:

import { reactive, computed } from 'vue';

const state = reactive({
  items: []
});

export const cart = {
  get items() {
    return state.items;
  },

  addToCart(product) {
    const item = state.items.find(item => item.id === product.id);
    if (item) {
      item.quantity++;
    } else {
      state.items.push({ ...product, quantity: 1 });
    }
  },

  totalItems: computed(() => {
    return state.items.reduce((acc, item) => acc + item.quantity, 0);
  })
};

We’ll create a simple global state management for our cart using Vue’s reactive API.

App.vue file code:

<template>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">eCommerce</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link class="nav-link" to="/">Home</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/single-product">Single Product</router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

Step 8: Run the Application

Run your application again to see the mini cart functionality in action:

npm run serve

Your Vue.js eCommerce website with a mini cart, product details page, and single product page should now be up and running!

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

May 20, 2024

Laravel 11 with vuejs working demo project
Laravel 11, when combined with Vue.js, can provide a robust solution for developers looking to create interactive and modern web applications. Laravel serves as a powerful back-end framework that simplifies tasks like authentication, routing, sessions, and caching, while Vue.js enhances the front end with its reactive components.

Laravel 11 with vuejs working demo project

Here’s how you can get started using Laravel 11 with Vue.js:

1. Install Laravel

First, you need to install Laravel. You can do this via Composer, a dependency manager for PHP. Make sure you have PHP and Composer installed on your machine before you start.
```
composer create-project --prefer-dist laravel/laravel your-project-name
```
2. Setting Up Vue.js

Once Laravel is installed, you can integrate Vue.js. As of Laravel 8 and onwards, Laravel uses Vite as a build tool. You can set up Vue.js by installing the necessary packages.
```
cd your-project-name
npm install vue@next vue-loader@next @vitejs/plugin-vue
```
Then, configure Vite to use Vue by editing the vite.config.js file:
```
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()]
});
```
3. Create Your Vue Component

Create a Vue component in the resources/js/components directory. For example, create ExampleComponent.vue:
```
<template>
  <div>
    <h1>Hello, Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent'
}
</script>
```
4. Include Vue in Your Application

Modify the main JavaScript file (e.g., resources/js/app.js) to create a Vue instance and use your component:
```
import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

const app = createApp({});
app.component('example-component', ExampleComponent);
app.mount('#app');
```
5. Modify Blade Template

Update your main blade template (e.g., resources/views/welcome.blade.php) to include an element for the Vue component:
```
<div id="app">
  <example-component></example-component>
</div>

<script type="module" src="{{ asset('resources/js/app.js') }}"></script>
```
6. Compile Assets

Run Vite to compile your assets:
```
npm run dev
```
7. Testing

Start your Laravel development server:
```
php artisan serve
```
Now, navigate to the displayed URL, usually http://127.0.0.1:8000, and you should see your Vue component rendered on the page.

By following these steps, you can effectively integrate Vue.js into a Laravel 11 project, leveraging the strengths of both frameworks to build a dynamic web application.

Laravel 11 with Vue.js in a project can offer several benefits
1. Seamless Integration: Laravel and Vue.js integrate seamlessly, making it easier to set up and scaffold a project. Laravel’s ecosystem includes tools like Laravel Mix, which simplifies the process of compiling and optimizing Vue components.
2. Reactive Components: Vue.js provides a reactive component structure that helps in building dynamic user interfaces with real-time interactivity. This can enhance user experience significantly, especially for SPA (Single Page Applications) where smooth transitions and responsiveness are crucial.
3. Efficient Data Handling: Laravel is known for its robust backend capabilities, including easy data manipulation and API support. Combining Laravel with Vue.js allows you to easily fetch, display, and manage data reactively on the frontend, making the app feel faster and more fluid.
4. Ecosystem and Tooling: Both Laravel and Vue.js have strong ecosystems. Laravel offers a wide range of packages and tools like Eloquent, Horizon, and Echo that help in various aspects of building a full-fledged web application. Vue.js, with its Vuex state management and Vue Router, complements this by providing tools necessary for managing state and routing in complex applications.
5. Improved Performance: Vue.js is designed to be incrementally adoptable, meaning you can integrate as much of Vue as you need without impacting the overall application’s performance. Laravel’s efficient routing and middleware also ensure that the server-side of your application is optimized for performance.
6. Community and Resources: Both Laravel and Vue.js have large, active communities. There’s a wealth of tutorials, forums, and third-party packages available that can help solve common problems and improve your development workflow.
7. Testing and Debugging: Laravel provides powerful testing features, which can be utilized to test the application thoroughly. Vue.js’s devtools extension for Chrome and Firefox lets you inspect your Vue components and observe their behavior directly in the browser, which is a boon for debugging.
Using Laravel with Vue.js can lead to a productive development process and result in a scalable, maintainable, and performant web application.
April 29, 2024

Shopper Vue js 3 – Multipurpose E-Commerce Free Template

Vuejs ecommerce free template, vue ecommerce website, free ecommerce vuejs, vue 3 ecommerce website.

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Shopper Vue js 3 – Multipurpose E-Commerce Free Template.

Live working demo

Vue 3 came and if you are new then you must check below link:
Vuejs Tutorials

Friends now I proceed onwards and here is the working code snippet for eStore – Free Vue 3 Bootstrap 5 eCommerce Templateand please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can skip this first step if you already have vuejs fresh setup:

vue create project-name

2. Guys now run below command to install node modules and run the project:

cd <your-project-name>

3. Now guys please create assets folder inside plublic folder and download zip(in this zip file there are js, css and images for ecommercetemplate) file from below path and extract zip inside public/assets folder and get all the folders:

Git Repo Link

4. In the end please add below code inside scr/App.vue file:

<template>
  <!-- MODALS -->
    <!-- Newsletter: Horizontal -->
    <div class="modal fade" id="modalNewsletterHorizontal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
    
          <!-- Close -->
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
            <i class="fe fe-x" aria-hidden="true"></i>
          </button>
    
          <!-- Content -->
          <div class="row gx-0">
            <div class="col-12 col-lg-5">
    
              <!-- Image -->
              <img class="img-fluid" src="assets/images/covers/cover-25.jpg" alt="...">
    
            </div>
            <div class="col-12 col-lg-7 d-flex flex-column px-md-8">
    
              <!-- Body -->
              <div class="modal-body my-auto py-10">
    
                <!-- Heading -->
                <h4>Subscribe to Newsletter and get 15% Discount</h4>
    
                <!-- Text -->
                <p class="mb-7 fs-lg">
                  On your next purchase
                </p>
    
                <!-- Form -->
                <form>
                  <div class="row gx-5">
                    <div class="col">
    
                      <!-- Input -->
                      <label class="visually-hidden" for="modalNewsletterHorizontalEmail">Enter Email *</label>
                      <input class="form-control form-control-sm" id="modalNewsletterHorizontalEmail" type="email" placeholder="Enter Email *">
    
                    </div>
                    <div class="col-auto">
    
                      <!-- Button -->
                      <button class="btn btn-sm btn-dark" type="submit">
                        <i class="fe fe-send"></i>
                      </button>
    
                    </div>
                  </div>
                </form>
    
              </div>
    
              <!-- Footer -->
              <div class="modal-footer pt-0">
    
                <!-- Checkbox -->
                <div class="form-check">
    
                  <!-- Input -->
                  <input class="form-check-input" id="modalNewsletterHorizontalCheckbox" type="checkbox">
    
                  <!-- Label -->
                  <label class="form-check-label fs-xs" for="modalNewsletterHorizontalCheckbox">
                    Prevent this Pop-up
                  </label>
    
                </div>
    
              </div>
    
            </div>
          </div>
    
        </div>
    
      </div>
    </div>
    
    <!-- Newsletter: Vertical -->
    <div class="modal fade" id="modalNewsletterVertical" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
    
          <!-- Close -->
          <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close">
            <i class="fe fe-x" aria-hidden="true"></i>
          </button>
    
          <!-- Body -->
          <div class="modal-body mt-2 me-2 ms-2 py-10 bg-cover text-center text-white" style="background-image: url(assets/images/covers/cover-26.jpg);">
    
            <!-- Heading -->
            <h4>Subscribe to Newsletter and get 15% Discount</h4>
    
            <!-- Text -->
            <p class="mb-0 fs-lg">
              On your next purchase
            </p>
    
          </div>
    
          <!-- Body -->
          <div class="modal-body py-9">
    
            <!-- Form -->
            <form>
              <div class="row gx-5">
                <div class="col">
    
                  <!-- Input -->
                  <label class="visually-hidden" for="modalNewsletterVerticalEmail">Enter Email *</label>
                  <input class="form-control form-control-sm" id="modalNewsletterVerticalEmail" type="email" placeholder="Enter Email *">
    
                </div>
                <div class="col-auto">
    
                  <!-- Button -->
                  <button class="btn btn-sm btn-dark" type="submit">
                    Subscribe
                  </button>
    
                </div>
              </div>
            </form>
    
          </div>
    
          <!-- Footer -->
          <div class="modal-footer justify-content-center pt-0">
    
            <!-- Checkbox -->
            <div class="form-check">
    
              <!-- Input -->
              <input class="form-check-input" id="modalNewsletterVerticalCheckbox" type="checkbox">
    
              <!-- Label -->
              <label class="form-check-label fs-xs" for="modalNewsletterVerticalCheckbox">
                Prevent this Pop-up
              </label>
    
            </div>
    
          </div>
    
        </div>
    
      </div>
    </div>
    
    <!-- Password Reset -->
    <div class="modal fade" id="modalPasswordReset" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
    
          <!-- Close -->
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
            <i class="fe fe-x" aria-hidden="true"></i>
          </button>
    
          <!-- Header-->
          <div class="modal-header lh-fixed fs-lg">
            <strong class="mx-auto">Forgot Password?</strong>
          </div>
    
          <!-- Body -->
          <div class="modal-body text-center">
    
            <!-- Text -->
            <p class="mb-7 fs-sm text-gray-500">
              Please enter your Email Address. You will receive a link
              to create a new password via Email.
            </p>
    
            <!-- Form -->
            <form>
    
              <!-- Email -->
              <div class="form-group">
                <label class="visually-hidden" for="modalPasswordResetEmail">
                  Email Address *
                </label>
                <input class="form-control form-control-sm" id="modalPasswordResetEmail" type="email" placeholder="Email Address *" required>
              </div>
    
              <!-- Button -->
              <button class="btn btn-sm btn-dark">
                Reset Password
              </button>
    
            </form>
    
          </div>
    
        </div>
    
      </div>
    </div>
    
    <!-- Product -->
    <div class="modal fade" id="modalProduct" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
    
          <!-- Close -->
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
            <i class="fe fe-x" aria-hidden="true"></i>
          </button>
    
          <!-- Content -->
          <div class="container-fluid px-xl-0">
            <div class="row align-items-center mx-xl-0">
              <div class="col-12 col-lg-6 col-xl-5 py-4 py-xl-0 px-xl-0">
    
                <!-- Image -->
                <img class="img-fluid" src="assets/images/products/product-7.jpg" alt="...">
    
                <!-- Button -->
                <a class="btn btn-sm w-100 btn-primary" href="#">
                  More Product Info <i class="fe fe-info ms-2"></i>
                </a>
    
              </div>
              <div class="col-12 col-lg-6 col-xl-7 py-9 px-md-9">
    
                <!-- Heading -->
                <h4 class="mb-3">Leather Sneakers</h4>
    
                <!-- Price -->
                <div class="mb-7">
                  <span class="h5">$85.00</span>
                  <span class="fs-sm">(In Stock)</span>
                </div>
    
                <!-- Form -->
                <form>
                  <div class="form-group">
    
                    <!-- Label -->
                    <p>
                      Color: <strong id="modalProductColorCaption">White</strong>
                    </p>
    
                    <!-- Radio -->
                    <div class="mb-8 ms-n1">
                      <div class="form-check form-check-inline form-check-img">
                        <input type="radio" class="form-check-input" id="modalProductColorOne" name="modalProductColor" data-toggle="form-caption" data-target="#modalProductColorCaption" value="White" style="background-image: url(assets/images/products/product-7.jpg);" checked>
                      </div>
                      <div class="form-check form-check-inline form-check-img">
                        <input type="radio" class="form-check-input" id="modalProductColorTwo" name="modalProductColor" data-toggle="form-caption" data-target="#modalProductColorCaption" value="Black" style="background-image: url(assets/images/products/product-49.jpg);">
                      </div>
                    </div>
    
                  </div>
                  <div class="form-group">
    
                    <!-- Label -->
                    <p>
                      Size: <strong><span id="modalProductSizeCaption">7.5</span> US</strong>
                    </p>
    
                    <!-- Radio -->
                    <div class="mb-2">
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeOne" value="6" data-toggle="form-caption" data-target="#modalProductSizeCaption">
                        <label class="form-check-label" for="modalProductSizeOne">6</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeTwo" value="6.5" data-toggle="form-caption" data-target="#modalProductSizeCaption" disabled>
                        <label class="form-check-label" for="modalProductSizeTwo">6.5</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeThree" value="7" data-toggle="form-caption" data-target="#modalProductSizeCaption">
                        <label class="form-check-label" for="modalProductSizeThree">7</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeFour" value="7.5" data-toggle="form-caption" data-target="#modalProductSizeCaption" checked>
                        <label class="form-check-label" for="modalProductSizeFour">7.5</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeFive" value="8" data-toggle="form-caption" data-target="#modalProductSizeCaption">
                        <label class="form-check-label" for="modalProductSizeFive">8</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeSix" value="8.5" data-toggle="form-caption" data-target="#modalProductSizeCaption">
                        <label class="form-check-label" for="modalProductSizeSix">8.5</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeSeven" value="9" data-toggle="form-caption" data-target="#modalProductSizeCaption" disabled>
                        <label class="form-check-label" for="modalProductSizeSeven">9</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeEight" value="9.5" data-toggle="form-caption" data-target="#modalProductSizeCaption" disabled>
                        <label class="form-check-label" for="modalProductSizeEight">9.5</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeNine" value="10" data-toggle="form-caption" data-target="#modalProductSizeCaption">
                        <label class="form-check-label" for="modalProductSizeNine">10</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeTen" value="10.5" data-toggle="form-caption" data-target="#modalProductSizeCaption">
                        <label class="form-check-label" for="modalProductSizeTen">10.5</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeEleven" value="11" data-toggle="form-caption" data-target="#modalProductSizeCaption">
                        <label class="form-check-label" for="modalProductSizeEleven">11</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeTwelve" value="12" data-toggle="form-caption" data-target="#modalProductSizeCaption">
                        <label class="form-check-label" for="modalProductSizeTwelve">12</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeThirteen" value="13" data-toggle="form-caption" data-target="#modalProductSizeCaption">
                        <label class="form-check-label" for="modalProductSizeThirteen">13</label>
                      </div>
                      <div class="form-check form-check-inline form-check-size mb-2">
                        <input type="radio" class="form-check-input" name="modalProductSize" id="modalProductSizeFourteen" value="14" data-toggle="form-caption" data-target="#modalProductSizeCaption">
                        <label class="form-check-label" for="modalProductSizeFourteen">14</label>
                      </div>
                    </div>
    
                  </div>
                  <div class="form-group mb-0">
                    <div class="row gx-5">
                      <div class="col-12 col-lg-auto">
    
                        <!-- Quantity -->
                        <select class="form-select mb-2">
                          <option value="1" selected>1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                        </select>
    
                      </div>
                      <div class="col-12 col-lg">
    
                        <!-- Submit -->
                        <button type="submit" class="btn w-100 btn-dark mb-2">
                          Add to Cart <i class="fe fe-shopping-cart ms-2"></i>
                        </button>
    
                      </div>
                      <div class="col-12 col-lg-auto">
    
                        <!-- Wishlist -->
                        <button class="btn btn-outline-dark w-100 mb-2" data-toggle="button">
                          Wishlist <i class="fe fe-heart ms-2"></i>
                        </button>
    
                      </div>
                    </div>
                  </div>
                </form>
    
              </div>
            </div>
          </div>
    
        </div>
      </div>
    </div>
    
    <!-- Search -->
    <div class="offcanvas offcanvas-end" id="modalSearch" tabindex="-1" role="dialog" aria-hidden="true">
    
      <!-- Close -->
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
        <i class="fe fe-x" aria-hidden="true"></i>
      </button>
    
      <!-- Header-->
      <div class="offcanvas-header lh-fixed fs-lg">
        <strong class="mx-auto">Search Products</strong>
      </div>
    
      <!-- Body: Form -->
      <div class="offcanvas-body">
        <form>
          <div class="form-group">
            <label class="visually-hidden" for="modalSearchCategories">Categories:</label>
            <select class="form-select" id="modalSearchCategories">
              <option selected>All Categories</option>
              <option>Women</option>
              <option>Men</option>
              <option>Kids</option>
            </select>
          </div>
          <div class="input-group input-group-merge">
            <input class="form-control" type="search" placeholder="Search">
            <div class="input-group-append">
              <button class="btn btn-outline-border" type="submit">
                <i class="fe fe-search"></i>
              </button>
            </div>
          </div>
        </form>
      </div>
    
      <!-- Body: Results (add `.d-none` to disable it) -->
      <div class="offcanvas-body border-top fs-sm">
    
        <!-- Heading -->
        <p>Search Results:</p>
    
        <!-- Items -->
        <div class="row align-items-center position-relative mb-5">
          <div class="col-4 col-md-3">
    
            <!-- Image -->
            <img class="img-fluid" src="assets/images/products/product-5.jpg" alt="...">
    
          </div>
          <div class="col position-static">
    
            <!-- Text -->
            <p class="mb-0 fw-bold">
              <a class="stretched-link text-body" href="#">Leather mid-heel Sandals</a> <br>
              <span class="text-muted">$129.00</span>
            </p>
    
          </div>
        </div>
        <div class="row align-items-center position-relative mb-5">
          <div class="col-4 col-md-3">
    
            <!-- Image -->
            <img class="img-fluid" src="assets/images/products/product-6.jpg" alt="...">
    
          </div>
          <div class="col position-static">
    
            <!-- Text -->
            <p class="mb-0 fw-bold">
              <a class="stretched-link text-body" href="#">Cotton floral print Dress</a> <br>
              <span class="text-muted">$40.00</span>
            </p>
    
          </div>
        </div>
        <div class="row align-items-center position-relative mb-5">
          <div class="col-4 col-md-3">
    
            <!-- Image -->
            <img class="img-fluid" src="assets/images/products/product-7.jpg" alt="...">
    
          </div>
          <div class="col position-static">
    
            <!-- Text -->
            <p class="mb-0 fw-bold">
              <a class="stretched-link text-body" href="#">Leather Sneakers</a> <br>
              <span class="text-primary">$85.00</span>
            </p>
    
          </div>
        </div>
        <div class="row align-items-center position-relative mb-5">
          <div class="col-4 col-md-3">
    
            <!-- Image -->
            <img class="img-fluid" src="assets/images/products/product-8.jpg" alt="...">
    
          </div>
          <div class="col position-static">
    
            <!-- Text -->
            <p class="mb-0 fw-bold">
              <a class="stretched-link text-body" href="#">Cropped cotton Top</a> <br>
              <span class="text-muted">$29.00</span>
            </p>
    
          </div>
        </div>
        <div class="row align-items-center position-relative mb-5">
          <div class="col-4 col-md-3">
    
            <!-- Image -->
            <img class="img-fluid" src="assets/images/products/product-9.jpg" alt="...">
    
          </div>
          <div class="col position-static">
    
            <!-- Text -->
            <p class="mb-0 fw-bold">
              <a class="stretched-link text-body" href="#">Floral print midi Dress</a> <br>
              <span class="text-muted">$50.00</span>
            </p>
    
          </div>
        </div>
    
        <!-- Button -->
        <a class="btn btn-link px-0 text-reset" href="#">
          View All <i class="fe fe-arrow-right ms-2"></i>
        </a>
    
      </div>
    
      <!-- Body: Empty (remove `.d-none` to enable it) -->
      <div class="offcanvas-body d-none">
    
        <!-- Text -->
        <p class="mb-3 fs-sm text-center">
          Nothing matches your search
        </p>
    
        <!-- Smiley -->
        <p class="mb-0 fs-sm text-center">
          ????
        </p>
    
      </div>
    
    </div>
    
    <!-- Shopping Cart -->
    <div class="offcanvas offcanvas-end" id="modalShoppingCart" tabindex="-1" role="dialog" aria-hidden="true">
    
      <!-- Full cart (add `.d-none` to disable it) -->
    
      <!-- Close -->
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
        <i class="fe fe-x" aria-hidden="true"></i>
      </button>
    
      <!-- Header-->
      <div class="offcanvas-header lh-fixed fs-lg">
        <strong class="mx-auto">Your Cart (2)</strong>
      </div>
    
      <!-- List group -->
      <ul class="list-group list-group-lg list-group-flush">
        <li class="list-group-item">
          <div class="row align-items-center">
            <div class="col-4">
    
              <!-- Image -->
              <a href="#">
                <img class="img-fluid" src="assets/images/products/product-6.jpg" alt="...">
              </a>
    
            </div>
            <div class="col-8">
    
              <!-- Title -->
              <p class="fs-sm fw-bold mb-6">
                <a class="text-body" href="#">Cotton floral print Dress</a> <br>
                <span class="text-muted">$40.00</span>
              </p>
    
              <!--Footer -->
              <div class="d-flex align-items-center">
    
                <!-- Select -->
                <select class="form-select form-select-xxs w-auto">
                  <option value="1">1</option>
                  <option value="1">2</option>
                  <option value="1">3</option>
                </select>
    
                <!-- Remove -->
                <a class="fs-xs text-gray-400 ms-auto" href="#!">
                  <i class="fe fe-x"></i> Remove
                </a>
    
              </div>
    
            </div>
          </div>
        </li>
        <li class="list-group-item">
          <div class="row align-items-center">
            <div class="col-4">
    
              <!-- Image -->
              <a href="#">
                <img class="img-fluid" src="assets/images/products/product-10.jpg" alt="...">
              </a>
    
            </div>
            <div class="col-8">
    
              <!-- Title -->
              <p class="fs-sm fw-bold mb-6">
                <a class="text-body" href="#">Suede cross body Bag</a> <br>
                <span class="text-muted">$49.00</span>
              </p>
    
              <!--Footer -->
              <div class="d-flex align-items-center">
    
                <!-- Select -->
                <select class="form-select form-select-xxs w-auto">
                  <option value="1">1</option>
                  <option value="1">2</option>
                  <option value="1">3</option>
                </select>
    
                <!-- Remove -->
                <a class="fs-xs text-gray-400 ms-auto" href="#!">
                  <i class="fe fe-x"></i> Remove
                </a>
    
              </div>
    
            </div>
          </div>
        </li>
      </ul>
    
      <!-- Footer -->
      <div class="offcanvas-footer justify-between lh-fixed fs-sm bg-light mt-auto">
        <strong>Subtotal</strong> <strong class="ms-auto">$89.00</strong>
      </div>
    
      <!-- Buttons -->
      <div class="offcanvas-body">
        <a class="btn w-100 btn-dark" href="#">Continue to Checkout</a>
        <a class="btn w-100 btn-outline-dark mt-2" href="#">View Cart</a>
      </div>
    
      <!-- Empty cart (remove `.d-none` to enable it) -->
      <div class="d-none">
    
        <!-- Close -->
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
          <i class="fe fe-x" aria-hidden="true"></i>
        </button>
    
        <!-- Header-->
        <div class="offcanvas-header lh-fixed fs-lg">
          <strong class="mx-auto">Your Cart (0)</strong>
        </div>
    
        <!-- Body -->
        <div class="offcanvas-body flex-grow-0 my-auto">
    
          <!-- Heading -->
          <h6 class="mb-7 text-center">Your cart is empty ????</h6>
    
          <!-- Button -->
          <a class="btn w-100 btn-outline-dark" href="#!">
            Continue Shopping
          </a>
    
        </div>
    
      </div>
    
    </div>
    
    <!-- Sidebar -->
    <div class="offcanvas offcanvas-end" id="modalSidebar" tabindex="-1" role="dialog" aria-hidden="true">
    
      <!-- Close -->
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
        <i class="fe fe-x" aria-hidden="true"></i>
      </button>
    
      <!-- Body -->
      <div class="offcanvas-body px-10 my-auto">
    
        <!-- Nav -->
        <ul class="nav nav-vertical nav-unstyled fs-2" id="sidebarNav">
          <li class="nav-item">
    
            <!-- Toggle -->
            <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#sidebarHome">
              Home
            </a>
    
            <!-- Collapse -->
            <div class="collapse" id="sidebarHome" data-bs-parent="#sidebarNav">
              <ul class="list-styled fs-lg py-3 mb-0">
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">Default</a>
                </li>
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">Classic</a>
                </li>
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">Fashion</a>
                </li>
                
              </ul>
            </div>
    
          </li>
          <li class="nav-item">
    
            <!-- Toggle -->
            <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#sidebarCatalog">
              Catalog
            </a>
    
            <!-- Collapse -->
            <div class="collapse" id="sidebarCatalog" data-bs-parent="#sidebarNav">
              <div class="row">
                <div class="col-12 py-3">
    
                  <!-- Heading -->
                  <h6 class="mb-5 fw-bold">Clothing</h6>
    
                  <!-- Links -->
                  <ul class="list-styled fs-lg py-3">
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">All Clothing</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Blouses & Shirts</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Coats & Jackets</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Dresses</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Hoodies & Sweats</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Denim</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Jeans</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Jumpers & Cardigans</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Leggings</a>
                    </li>
                  </ul>
    
                </div>
                <div class="col-12 py-3">
    
                  <!-- Heading -->
                  <h6 class="mb-5 fw-bold">Shoes & Boots</h6>
    
                  <!-- Links -->
                  <ul class="list-styled fs-lg">
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">All Shoes & Boots</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Branded Shoes</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Boots</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Heels</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Trainers</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Sandals</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Shoes</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Wide Fit Shoes</a>
                    </li>
                  </ul>
    
                </div>
                <div class="col-12 py-3">
    
                  <!-- Heading -->
                  <h6 class="mb-5 fw-bold">Bags & Accessories</h6>
    
                  <!-- Links -->
                  <ul class="list-styled fs-lg">
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">All Bags & Accessories</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Accessories</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Bags & Purses</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Luggage</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Belts</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Hats</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Hair Accessories</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Jewellery</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Travel Accessories</a>
                    </li>
                  </ul>
    
                </div>
              </div>
            </div>
    
          </li>
          <li class="nav-item">
    
            <!-- Toggle -->
            <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#sidebarShop">
              Shop
            </a>
    
            <!-- Collapse -->
            <div class="collapse" id="sidebarShop" data-bs-parent="#sidebarNav">
              <div class="row">
                <div class="col-12 py-3">
    
                  <!-- Heading -->
                  <h6 class="mb-5">Shop</h6>
    
                  <!-- Links -->
                  <ul class="list-styled fs-lg">
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Default</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Topbar</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Collapse</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Simple</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Masonry</a>
                    </li>
                  </ul>
    
                </div>
                <div class="col-12 py-3">
    
                  <!-- Heading -->
                  <h6 class="mb-5">Product</h6>
    
                  <!-- Links -->
                  <ul class="list-styled fs-lg">
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Default</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Images Left</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Image Grid</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Image Slider</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Images Stacked</a>
                    </li>
                  </ul>
    
                </div>
                <div class="col-12 py-3">
    
                  <!-- Heading -->
                  <h6 class="mb-5">Support</h6>
    
                  <!-- Links -->
                  <ul class="list-styled fs-lg">
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Shopping Cart</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Checkout</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Order Completed</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Shipping & Returns</a>
                    </li>
                  </ul>
    
                </div>
                <div class="col-12 py-3">
    
                  <!-- Heading -->
                  <h6 class="mb-5">Account</h6>
    
                  <!-- Links -->
                  <ul class="list-styled fs-lg">
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Order</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Orders</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Wishlist</a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" href="#">Personal Info</a>
                    </li>
                  </ul>
    
                </div>
                <div class="col-12 py-3">
    
                  <!-- Heading -->
                  <h6 class="mb-5">Modals</h6>
    
                  <!-- Links -->
                  <ul class="list-styled fs-lg">
                    <li class="list-styled-item">
                      <a class="list-styled-link" data-bs-toggle="modal" href="#modalNewsletterHorizontal">
                        Newsletter: Horizontal
                      </a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" data-bs-toggle="modal" href="#modalNewsletterVertical">
                        Newsletter: Vertical
                      </a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" data-bs-toggle="modal" href="#modalProduct">
                        Product
                      </a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" data-bs-toggle="offcanvas" href="#modalSearch">
                        Search
                      </a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" data-bs-toggle="offcanvas" href="#modalShoppingCart">
                        Shopping Cart
                      </a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" data-bs-toggle="modal" href="#modalSizeChart">
                        Size Chart
                      </a>
                    </li>
                    <li class="list-styled-item">
                      <a class="list-styled-link" data-bs-toggle="modal" href="#modalWaitList">
                        Wait List
                      </a>
                    </li>
                  </ul>
    
                </div>
              </div>
            </div>
    
          </li>
          <li class="nav-item">
    
            <!-- Toggle -->
            <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#sidebarPages">
              Pages
            </a>
    
            <!-- Collapse -->
            <div class="collapse" id="sidebarPages" data-bs-parent="#sidebarNav">
              <ul class="list-styled fs-lg py-3 mb-0">
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">About</a>
                </li>
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">Contact Us</a>
                </li>
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">Store Locator</a>
                </li>
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">FAQ</a>
                </li>
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">Coming Soon</a>
                </li>
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">404</a>
                </li>
              </ul>
            </div>
    
          </li>
          <li class="nav-item">
    
            <!-- Toggle -->
            <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#sidebarBlog">
              Blog
            </a>
    
            <!-- Collapse -->
            <div class="collapse" id="sidebarBlog" data-bs-parent="#sidebarNav">
              <ul class="list-styled fs-lg py-3 mb-0">
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">Blog</a>
                </li>
                <li class="list-styled-item">
                  <a class="list-styled-link" href="#">Blog Post</a>
                </li>
              </ul>
            </div>
    
          </li>
          <li class="nav-item">
            <a class="nav-link" href="therichpost.com">Docs</a>
          </li>
        </ul>
    
      </div>
    
      <!-- Body -->
      <div class="moda-body px-10 py-9">
    
        <!-- Social links -->
        <ul class="list-inline">
          <li class="list-inline-item">
            <a class="text-gray-350" href="#!">
              <i class="fab fa-facebook-f"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="text-gray-350" href="#!">
              <i class="fab fa-youtube"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="text-gray-350" href="#!">
              <i class="fab fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="text-gray-350" href="#!">
              <i class="fab fa-instagram"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="text-gray-350" href="#!">
              <i class="fab fa-medium-m"></i>
            </a>
          </li>
        </ul>
    
        <!-- Footer -->
        <div class="fs-xxs text-gray-350">
          © 2024 Jassa.
        </div>
    
      </div>
    
    </div>
    
    <!-- Size Chart -->
    <div class="modal fade" id="modalSizeChart" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
    
          <!-- Close -->
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
            <i class="fe fe-x" aria-hidden="true"></i>
          </button>
    
          <!-- Header-->
          <div class="modal-header lh-fixed fs-lg">
            <strong class="mx-auto">Size Chart</strong>
          </div>
    
          <!-- Body -->
          <div class="modal-body border-bottom">
    
            <!-- Header -->
            <div class="d-flex mb-7">
    
              <!-- Heading -->
              <h5 class="mb-0">Clothing</h5>
    
              <!-- Inputs -->
              <div class="ms-auto">
    
                <!-- IN -->
                <input type="radio" class="btn-check" name="modalSizeChartUnitOne" id="inOne" checked>
                <label class="btn btn-xxs btn-circle btn-outline-dark fs-xxxs rounded-0" for="inOne">IN</label>
    
                <!-- CM -->
                <input type="radio" class="btn-check" name="modalSizeChartUnitOne" id="cmOne">
                <label class="btn btn-xxs btn-circle btn-outline-dark fs-xxxs rounded-0" for="cmOne">CM</label>
    
              </div>
    
            </div>
    
            <!-- Table -->
            <div class="table-responsive">
              <table class="table table-bordered table-sm table-hover mb-0">
                <thead>
                  <tr>
                    <th>Size</th>
                    <th>US</th>
                    <th>Bust</th>
                    <th>Waist</th>
                    <th>Hips</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>XS</td>
                    <td>2</td>
                    <td>32</td>
                    <td>24 - 25</td>
                    <td>33 - 34</td>
                  </tr>
                  <tr>
                    <td>S</td>
                    <td>4</td>
                    <td>34 - 35</td>
                    <td>26 - 27</td>
                    <td>35 - 26</td>
                  </tr>
                  <tr>
                    <td>M</td>
                    <td>6</td>
                    <td>36 - 37</td>
                    <td>28 - 29</td>
                    <td>38 - 40</td>
                  </tr>
                  <tr>
                    <td>L</td>
                    <td>8</td>
                    <td>38 - 29</td>
                    <td>30 - 31</td>
                    <td>42 - 44</td>
                  </tr>
                  <tr>
                    <td>XL</td>
                    <td>10</td>
                    <td>40 - 41</td>
                    <td>32 - 33</td>
                    <td>45 - 47</td>
                  </tr>
                  <tr>
                    <td>XXL</td>
                    <td>12</td>
                    <td>42 - 43</td>
                    <td>34 - 35</td>
                    <td>48 - 50</td>
                  </tr>
                </tbody>
              </table>
            </div>
    
          </div>
    
          <!-- Body -->
          <div class="modal-body">
    
            <!-- Header -->
            <div class="d-flex mb-7">
    
              <!-- Heading -->
              <h5 class="mb-0">Shoes</h5>
    
              <!-- Inputs -->
              <div class="ms-auto">
    
                <!-- IN -->
                <input type="radio" class="btn-check" name="modalSizeChartUnitTwo" id="inTwo" checked>
                <label class="btn btn-xxs btn-circle btn-outline-dark fs-xxxs rounded-0" for="inTwo">IN</label>
    
                <!-- CM -->
                <input type="radio" class="btn-check" name="modalSizeChartUnitTwo" id="cmTwo">
                <label class="btn btn-xxs btn-circle btn-outline-dark fs-xxxs rounded-0" for="cmTwo">CM</label>
    
              </div>
    
            </div>
    
            <!-- Tables -->
            <div class="row">
              <div class="col-12 col-lg-6">
    
                <!-- Table -->
                <div class="table-responsive">
                  <table class="table table-bordered table-sm table-hover mb-lg-0">
                    <thead>
                      <tr>
                        <th>Size</th>
                        <th>US</th>
                        <th>Foot Length</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>36</td>
                        <td>5</td>
                        <td>22.8</td>
                      </tr>
                      <tr>
                        <td>26.5</td>
                        <td>5.5</td>
                        <td>23.1</td>
                      </tr>
                      <tr>
                        <td>37</td>
                        <td>6</td>
                        <td>23.5</td>
                      </tr>
                      <tr>
                        <td>37.5</td>
                        <td>6.</td>
                        <td>23.5</td>
                      </tr>
                      <tr>
                        <td>38</td>
                        <td>7</td>
                        <td>24.1</td>
                      </tr>
                      <tr>
                        <td>38.5</td>
                        <td>7.5</td>
                        <td>24.5</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
    
              </div>
              <div class="col-12 col-lg-6">
    
                <!-- Table -->
                <div class="table-responsive">
                  <table class="table table-bordered table-sm table-hover mb-0">
                    <thead>
                      <tr>
                        <th>Size</th>
                        <th>US</th>
                        <th>Foot Length</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>36</td>
                        <td>5</td>
                        <td>22.8</td>
                      </tr>
                      <tr>
                        <td>39</td>
                        <td>8</td>
                        <td>24.1</td>
                      </tr>
                      <tr>
                        <td>40</td>
                        <td>9</td>
                        <td>25.4</td>
                      </tr>
                      <tr>
                        <td>40.5</td>
                        <td>9.5</td>
                        <td>25.7</td>
                      </tr>
                      <tr>
                        <td>41</td>
                        <td>10</td>
                        <td>26.0</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
    
              </div>
            </div>
    
          </div>
    
        </div>
    
      </div>
    </div>
    
    <!-- Wait List -->
    <div class="modal fade" id="modalWaitList" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
    
          <!-- Close -->
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
            <i class="fe fe-x" aria-hidden="true"></i>
          </button>
    
          <!-- Header-->
          <div class="modal-header lh-fixed fs-lg">
            <strong class="mx-auto">Wait List</strong>
          </div>
    
          <!-- Body -->
          <div class="modal-body">
            <div class="row mb-6">
              <div class="col-12 col-md-3">
    
                <!-- Image -->
                <a href="#">
                  <img class="img-fluid mb-7 mb-md-0" src="assets/images/products/product-6.jpg" alt="...">
                </a>
    
              </div>
              <div class="col-12 col-md-9">
    
                <!-- Label -->
                <p>
                  <a class="fw-bold text-body" href="#">Cotton floral print Dress</a>
                </p>
    
                <!-- Radio -->
                <div class="form-check form-check-inline form-check-size mb-2">
                  <input type="radio" class="form-check-input" name="modalWaitListSize" id="modalWaitListSizeOne" value="6" data-toggle="form-caption" data-target="#modalWaitListSizeCaption">
                  <label class="form-check-label" for="modalWaitListSizeOne">3XS</label>
                </div>
                <div class="form-check form-check-inline form-check-size mb-2">
                  <input type="radio" class="form-check-input" name="modalWaitListSize" id="modalWaitListSizeTwo" value="6.5" data-toggle="form-caption" data-target="#modalWaitListSizeCaption">
                  <label class="form-check-label" for="modalWaitListSizeTwo">2XS</label>
                </div>
                <div class="form-check form-check-inline form-check-size mb-2">
                  <input type="radio" class="form-check-input" name="modalWaitListSize" id="modalWaitListSizeThree" value="7" data-toggle="form-caption" data-target="#modalWaitListSizeCaption">
                  <label class="form-check-label" for="modalWaitListSizeThree">XS</label>
                </div>
                <div class="form-check form-check-inline form-check-size mb-2">
                  <input type="radio" class="form-check-input" name="modalWaitListSize" id="modalWaitListSizeFour" value="7.5" data-toggle="form-caption" data-target="#modalWaitListSizeCaption" checked>
                  <label class="form-check-label" for="modalWaitListSizeFour">S</label>
                </div>
                <div class="form-check form-check-inline form-check-size mb-2">
                  <input type="radio" class="form-check-input" name="modalWaitListSize" id="modalWaitListSizeFive" value="8" data-toggle="form-caption" data-target="#modalWaitListSizeCaption">
                  <label class="form-check-label" for="modalWaitListSizeFive">M</label>
                </div>
                <div class="form-check form-check-inline form-check-size mb-2">
                  <input type="radio" class="form-check-input" name="modalWaitListSize" id="modalWaitListSizeSix" value="8.5" data-toggle="form-caption" data-target="#modalWaitListSizeCaption">
                  <label class="form-check-label" for="modalWaitListSizeSix">LG</label>
                </div>
                <div class="form-check form-check-inline form-check-size mb-2">
                  <input type="radio" class="form-check-input" name="modalWaitListSize" id="modalWaitListSizeSeven" value="9" data-toggle="form-caption" data-target="#modalWaitListSizeCaption">
                  <label class="form-check-label" for="modalWaitListSizeSeven">XL</label>
                </div>
                <div class="form-check form-check-inline form-check-size mb-2">
                  <input type="radio" class="form-check-input" name="modalWaitListSize" id="modalWaitListSizeEight" value="9.5" data-toggle="form-caption" data-target="#modalWaitListSizeCaption">
                  <label class="form-check-label" for="modalWaitListSizeEight">2XL</label>
                </div>
                <div class="form-check form-check-inline form-check-size mb-2">
                  <input type="radio" class="form-check-input" name="modalWaitListSize" id="modalWaitListSizeNine" value="10" data-toggle="form-caption" data-target="#modalWaitListSizeCaption">
                  <label class="form-check-label" for="modalWaitListSizeNine">3XL</label>
                </div>
                <div class="form-check form-check-inline form-check-size mb-2">
                  <input type="radio" class="form-check-input" name="modalWaitListSize" id="modalWaitListSizeTen" value="10.5" data-toggle="form-caption" data-target="#modalWaitListSizeCaption">
                  <label class="form-check-label" for="modalWaitListSizeTen">4XL</label>
                </div>
    
              </div>
    
            </div>
            <div class="row">
              <div class="col-12">
    
                <!-- Text -->
                <p class="fs-sm text-center text-gray-500">
                  Justo ut diam erat hendrerit morbi porttitor,
                  per eu curabitur diam sociis.
                </p>
    
              </div>
            </div>
            <div class="row gx-5 mb-2">
              <div class="col-12 col-md-6">
    
                <!-- Form group -->
                <div class="form-group">
                  <label class="visually-hidden" for="listName">Your Name</label>
                  <input class="form-control" id="listName" type="text" placeholder="Your Name *" required>
                </div>
    
              </div>
              <div class="col-12 col-md-6">
    
                <!-- Form group -->
                <div class="form-group">
                  <label class="visually-hidden" for="listEmail">Your Name</label>
                  <input class="form-control" id="listEmail" type="email" placeholder="Your Email *" required>
                </div>
    
              </div>
            </div>
            <div class="row">
              <div class="col-12 text-center">
    
                <!-- Button -->
                <button class="btn btn-dark" type="submit">Subscribe</button>
    
              </div>
            </div>
          </div>
    
        </div>
    
      </div>
    </div>

    <!-- NAVBAR -->
    <div class="navbar navbar-topbar navbar-expand-xl navbar-light bg-light">
      <div class="container">
    
        <!-- Promo -->
        <div class="me-xl-8">
          <i class="fe fe-truck me-2"></i> <span class="heading-xxxs">Free shipping worldwide</span>
        </div>
    
        <!-- Toggler -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#topbarCollapse" aria-controls="topbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    
        <!-- Collapse -->
        <div class="collapse navbar-collapse" id="topbarCollapse">
    
          <!-- Nav -->
          <ul class="nav nav-divided navbar-nav me-auto">
            <li class="nav-item dropdown">
    
              <!-- Toggle -->
              <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                <img class="mb-1 me-1" src="assets/images/flags/usa.svg" alt="..." /> United States
              </a>
    
              <!-- Menu -->
              <div class="dropdown-menu min-w-0">
                <a class="dropdown-item" href="#!">
                  <img class="mb-1 me-2" src="assets/images/flags/usa.svg" alt="USA">United States
                </a>
                <a class="dropdown-item" href="#!">
                  <img class="mb-1 me-2" src="assets/images/flags/canada.svg" alt="Canada">Canada
                </a>
                <a class="dropdown-item" href="#!">
                  <img class="mb-1 me-2" src="assets/images/flags/germany.svg" alt="Germany">Germany
                </a>
              </div>
    
            </li>
            <li class="nav-item dropdown">
    
              <!-- Toggle -->
              <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">USD</a>
    
              <!-- Menu -->
              <div class="dropdown-menu min-w-0">
                <a class="dropdown-item" href="#!">USD</a>
                <a class="dropdown-item" href="#!">EUR</a>
              </div>
    
            </li>
            <li class="nav-item dropdown">
    
              <!-- Toggle -->
              <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">English</a>
    
              <!-- Menu -->
              <div class="dropdown-menu min-w-0">
                <a class="dropdown-item" href="#">English</a>
                <a class="dropdown-item" href="#">French</a>
                <a class="dropdown-item" href="#">German</a>
              </div>
    
            </li>
          </ul>
    
          <!-- Nav -->
          <ul class="nav navbar-nav me-8">
            <li class="nav-item">
              <a class="nav-link" href="#">Shipping</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">FAQ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
    
          <!-- Nav -->
          <ul class="nav navbar-nav flex-row">
            <li class="nav-item">
              <a class="nav-link text-gray-350" href="#!">
                <i class="fab fa-facebook-f"></i>
              </a>
            </li>
            <li class="nav-item ms-xl-n4">
              <a class="nav-link text-gray-350" href="#!">
                <i class="fab fa-twitter"></i>
              </a>
            </li>
            <li class="nav-item ms-xl-n4">
              <a class="nav-link text-gray-350" href="#!">
                <i class="fab fa-instagram"></i>
              </a>
            </li>
            <li class="nav-item ms-xl-n4">
              <a class="nav-link text-gray-350" href="#!">
                <i class="fab fa-medium"></i>
              </a>
            </li>
          </ul>
    
        </div>
      </div>
    </div>

    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
      <div class="container">
    
        <!-- Brand -->
        <a class="navbar-brand" href="#">
          Shopper.
        </a>
    
        <!-- Toggler -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    
        <!-- Collapse -->
        <div class="collapse navbar-collapse" id="navbarCollapse">
    
          <!-- Nav -->
          <ul class="navbar-nav mx-auto">
            <li class="nav-item dropdown">
    
              <!-- Toggle -->
              <a class="nav-link" data-bs-toggle="dropdown" href="#">Home</a>
    
              <!-- Menu -->
              <div class="dropdown-menu">
                <div class="card card-lg">
                  <div class="card-body">
                    <ul class="list-styled fs-sm">
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">Default</a>
                      </li>
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">Classic</a>
                      </li>
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">Fashion</a>
                      </li>
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">Boxed</a>
                      </li>
                      
                    </ul>
                  </div>
                </div>
              </div>
    
            </li>
            <li class="nav-item dropdown position-static">
    
              <!-- Toggle -->
              <a class="nav-link" data-bs-toggle="dropdown" href="#">Catalog</a>
    
              <!-- Menu -->
              <div class="dropdown-menu w-100">
              
                <!-- Tabs -->
                <div class="mb-2 mb-lg-0 border-bottom-lg">
                  <div class="container">
                    <div class="row">
                      <div class="col-12">
              
                        <!-- Nav -->
                        <nav class="nav nav-tabs nav-overflow fs-xs border-bottom border-bottom-lg-0">
                          <a class="nav-link text-uppercase active" data-bs-toggle="tab" href="#navTab">
                            Women
                          </a>
                          <a class="nav-link text-uppercase" data-bs-toggle="tab" href="#navTab">
                            Men
                          </a>
                          <a class="nav-link text-uppercase" data-bs-toggle="tab" href="#navTab">
                            Kids
                          </a>
                        </nav>
              
                      </div>
                    </div>
                  </div>
                </div>
              
                <!-- Tab content -->
                <div class="card card-lg">
                  <div class="card-body">
                    <div class="tab-content">
                      <div class="tab-pane fade show active" id="navTab">
                        <div class="container">
                          <div class="row">
                            <div class="col-6 col-md">
              
                              <!-- Heading -->
                              <div class="mb-5 fw-bold">Clothing</div>
              
                              <!-- Links -->
                              <ul class="list-styled mb-6 mb-md-0 fs-sm">
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">All Clothing</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Blouses & Shirts</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Coats & Jackets</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Dresses</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Hoodies & Sweats</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Denim</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Jeans</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Jumpers & Cardigans</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Leggings</a>
                                </li>
                              </ul>
              
                            </div>
                            <div class="col-6 col-md">
              
                              <!-- Heading -->
                              <div class="mb-5 fw-bold">Shoes & Boots</div>
              
                              <!-- Links -->
                              <ul class="list-styled mb-6 mb-md-0 fs-sm">
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">All Shoes & Boots</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Branded Shoes</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Boots</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Heels</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Trainers</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Sandals</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Shoes</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Wide Fit Shoes</a>
                                </li>
                              </ul>
              
                            </div>
                            <div class="col-6 col-md">
              
                              <!-- Heading -->
                              <div class="mb-5 fw-bold">Bags & Accessories</div>
              
                              <!-- Links -->
                              <ul class="list-styled mb-0 fs-sm">
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">All Bags & Accessories</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Accessories</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Bags & Purses</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Luggage</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Belts</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Hats</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Hair Accessories</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Jewellery</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Travel Accessories</a>
                                </li>
                              </ul>
              
                            </div>
                            <div class="col-6 col-md">
              
                              <!-- Heading -->
                              <div class="mb-5 fw-bold">Collections</div>
              
                              <!-- Links -->
                              <ul class="list-styled mb-0 fs-sm">
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">All Collections</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Occasionwear</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Going Out</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Workwear</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Holiday Shop</a>
                                </li>
                                <li class="list-styled-item">
                                  <a class="list-styled-link" href="#">Jean Fit Guide</a>
                                </li>
                              </ul>
              
                            </div>
                            <div class="col-4 d-none d-lg-block">
              
                              <!-- Card -->
                              <div class="card">
              
                                <!-- Image -->
                                <img class="card-img" src="assets/images/products/product-110.jpg" alt="...">
              
                                <!-- Overlay -->
                                <div class="card-img-overlay bg-dark-0 bg-hover align-items-center">
                                  <div class="text-center">
                                    <a class="btn btn-white stretched-link" href="#">
                                      Shop Sweaters <i class="fe fe-arrow-right ms-2"></i>
                                    </a>
                                  </div>
                                </div>
              
                              </div>
              
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              
              </div>
    
            </li>
            <li class="nav-item dropdown">
    
              <!-- Toggle -->
              <a class="nav-link" data-bs-toggle="dropdown" href="#">Shop</a>
    
              <!-- Menu -->
              <div class="dropdown-menu" style="min-width: 650px;">
                <div class="card card-lg">
                  <div class="card-body">
                    <div class="row">
                      <div class="col">
              
                        <!-- Heading -->
                        <div class="mb-5 fw-bold">Shop</div>
              
                        <!-- Links -->
                        <ul class="list-styled mb-7 fs-sm">
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Default</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Topbar</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Collapse</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Simple</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Masonry</a>
                          </li>
                        </ul>
              
                        <!-- Heading -->
                        <div class="mb-5 fw-bold">Product</div>
              
                        <!-- Links -->
                        <ul class="list-styled fs-sm">
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Default</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Images Left</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Image Grid</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Image Slider</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Images Stacked</a>
                          </li>
                        </ul>
              
                      </div>
                      <div class="col">
              
                        <!-- Heading -->
                        <div class="mb-5 fw-bold">Support</div>
              
                        <!-- Links -->
                        <ul class="list-styled mb-7 fs-sm">
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Shopping Cart</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Checkout</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Order Completed</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Shipping & Returns</a>
                          </li>
                        </ul>
              
                        <!-- Heading -->
                        <div class="mb-5 fw-bold">Account</div>
              
                        <!-- Links -->
                        <ul class="list-styled fs-sm">
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Order</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Orders</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Wishlist</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Personal Info</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Addresses</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Addresses: New</a>
                          </li>
                        </ul>
              
                      </div>
                      <div class="col">
              
                        <!-- Links -->
                        <ul class="list-styled mb-7 fs-sm">
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Payment</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Payment: New</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Payment: Choose</a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" href="#">Auth</a>
                          </li>
                        </ul>
              
                        <!-- Heading -->
                        <div class="mb-5 fw-bold">Modals</div>
              
                        <!-- Links -->
                        <ul class="list-styled fs-sm">
                          <li class="list-styled-item">
                            <a class="list-styled-link" data-bs-toggle="modal" href="#modalNewsletterHorizontal">
                              Newsletter: Horizontal
                            </a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" data-bs-toggle="modal" href="#modalNewsletterVertical">
                              Newsletter: Vertical
                            </a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" data-bs-toggle="modal" href="#modalProduct">
                              Product
                            </a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" data-bs-toggle="offcanvas" href="#modalSearch">
                              Search
                            </a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" data-bs-toggle="offcanvas" href="#modalShoppingCart">
                              Shopping Cart
                            </a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" data-bs-toggle="modal" href="#modalSizeChart">
                              Size Chart
                            </a>
                          </li>
                          <li class="list-styled-item">
                            <a class="list-styled-link" data-bs-toggle="modal" href="#modalWaitList">
                              Wait List
                            </a>
                          </li>
                        </ul>
              
                      </div>
                    </div>
                  </div>
                </div>
              </div>
    
            </li>
            <li class="nav-item dropdown">
    
              <!-- Toggle -->
              <a class="nav-link" data-bs-toggle="dropdown" href="#">Pages</a>
    
              <!-- Menu -->
              <div class="dropdown-menu">
                <div class="card card-lg">
                  <div class="card-body">
                    <ul class="list-styled fs-sm">
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">About</a>
                      </li>
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">Contact Us</a>
                      </li>
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">Store Locator</a>
                      </li>
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">FAQ</a>
                      </li>
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">Coming Soon</a>
                      </li>
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">404</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
    
            </li>
            <li class="nav-item dropdown">
    
              <!-- Toggle -->
              <a class="nav-link" data-bs-toggle="dropdown" href="#">Blog</a>
    
              <!-- Menu -->
              <div class="dropdown-menu">
                <div class="card card-lg">
                  <div class="card-body">
                    <ul class="list-styled fs-sm">
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">Blog</a>
                      </li>
                      <li class="list-styled-item">
                        <a class="list-styled-link" href="#">Blog Post</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
    
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Docs</a>
            </li>
          </ul>
    
          <!-- Nav -->
          <ul class="navbar-nav flex-row">
            <li class="nav-item">
              <a class="nav-link" data-bs-toggle="offcanvas" href="#modalSearch">
                <i class="fe fe-search"></i>
              </a>
            </li>
            <li class="nav-item ms-lg-n4">
              <a class="nav-link" href="#">
                <i class="fe fe-user"></i>
              </a>
            </li>
            <li class="nav-item ms-lg-n4">
              <a class="nav-link" href="#">
                <i class="fe fe-heart"></i>
              </a>
            </li>
            <li class="nav-item ms-lg-n4">
              <a class="nav-link" data-bs-toggle="offcanvas" href="#modalShoppingCart">
                <span data-cart-items="2">
                  <i class="fe fe-shopping-cart"></i>
                </span>
              </a>
            </li>
          </ul>
    
        </div>
    
      </div>
    </nav>

    <!-- PROMO -->
    <div class="py-3 bg-dark bg-pattern mb-4">
      <div class="container">
        <div class="row">
          <div class="col-12">
    
            <!-- Text -->
            <div class="text-center text-white">
              <span class="heading-xxs letter-spacing-xl">
                ⚡️ Happy Holiday Deals on Everything ⚡️
              </span>
            </div>
    
          </div>
        </div>
      </div>
    </div>

    <!-- CATEGORIES -->
    <section>
      <div class="row gx-0 d-block d-lg-flex flickity flickity-lg-none" data-flickity='{"watchCSS": true}'>

        <!-- Item -->
        <div class="col-12 col-md-6 col-lg-4 d-flex flex-column bg-cover" style="background-image: url(assets/images/covers/cover-1.jpg);">
          <div class="card bg-dark-5 bg-hover text-white text-center" style="min-height: 470px;">
            <div class="card-body mt-auto mb-n11 py-8">

              <!-- Heading -->
              <h1 class="mb-0 fw-bolder">
                Women
              </h1>

            </div>
            <div class="card-body mt-auto py-8">

              <!-- Button -->
              <a class="btn btn-white stretched-link" href="#">
                Shop Women <i class="fe fe-arrow-right ms-2"></i>
              </a>

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

        <!-- Card -->
        <div class="col-12 col-md-6 col-lg-4 d-flex flex-column bg-cover" style="background-image: url(assets/images/covers/cover-2.jpg);">
          <div class="card bg-dark-5 bg-hover text-white text-center" style="min-height: 470px;">
            <div class="card-body mt-auto mb-n11 py-8">

              <!-- Heading -->
              <h1 class="mb-0 fw-bolder">
                Men
              </h1>

            </div>
            <div class="card-body mt-auto py-8">

              <!-- Button -->
              <a class="btn btn-white stretched-link" href="#">
                Shop Men <i class="fe fe-arrow-right ms-2"></i>
              </a>

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

        <!-- Card -->
        <div class="col-12 col-md-6 col-lg-4 d-flex flex-column bg-cover" style="background-image: url(assets/images/covers/cover-3.jpg);">
          <div class="card bg-dark-5 bg-hover text-white text-center" style="min-height: 470px;">
            <div class="card-body mt-auto mb-n11 py-8">

              <!-- Heading -->
              <h1 class="mb-0 fw-bolder">
                Kids
              </h1>

            </div>
            <div class="card-body mt-auto py-8">

              <!-- Button -->
              <a class="btn btn-white stretched-link" href="#">
                Shop Kids <i class="fe fe-arrow-right ms-2"></i>
              </a>

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

      </div>
    </section>

    <!-- FEATURES -->
    <section class="pt-7">
      <div class="container">
        <div class="row pb-7 border-bottom">
          <div class="col-12 col-md-6 col-lg-3">

            <!-- Item -->
            <div class="d-flex mb-6 mb-lg-0">

              <!-- Icon -->
              <i class="fe fe-truck fs-lg text-primary"></i>

              <!-- Body -->
              <div class="ms-6">

                <!-- Heading -->
                <h6 class="heading-xxs mb-1">
                  Free shipping
                </h6>

                <!-- Text -->
                <p class="mb-0 fs-sm text-muted">
                  From all orders over $100
                </p>

              </div>

            </div>

          </div>
          <div class="col-12 col-md-6 col-lg-3">

            <!-- Item -->
            <div class="d-flex mb-6 mb-lg-0">

              <!-- Icon -->
              <i class="fe fe-repeat fs-lg text-primary"></i>

              <!-- Body -->
              <div class="ms-6">

                <!-- Heading -->
                <h6 class="mb-1 heading-xxs">
                  Free returns
                </h6>

                <!-- Text -->
                <p class="mb-0 fs-sm text-muted">
                  Return money within 30 days
                </p>

              </div>

            </div>

          </div>
          <div class="col-12 col-md-6 col-lg-3">

            <!-- Item -->
            <div class="d-flex mb-6 mb-md-0">

              <!-- Icon -->
              <i class="fe fe-lock fs-lg text-primary"></i>

              <!-- Body -->
              <div class="ms-6">

                <!-- Heading -->
                <h6 class="mb-1 heading-xxs">
                  Secure shopping
                </h6>

                <!-- Text -->
                <p class="mb-0 fs-sm text-muted">
                  You're in safe hands
                </p>

              </div>

            </div>

          </div>
          <div class="col-12 col-md-6 col-lg-3">

            <!-- Item -->
            <div class="d-flex">

              <!-- Icon -->
              <i class="fe fe-tag fs-lg text-primary"></i>

              <!-- Body -->
              <div class="ms-6">

                <!-- Heading -->
                <h6 class="mb-1 heading-xxs">
                  Over 10,000 Styles
                </h6>

                <!-- Text -->
                <p class="mb-0 fs-sm text-muted">
                  We have everything you need
                </p>

              </div>

            </div>

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

    <!-- BEST PICKS -->
    <section class="pt-12">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-12 col-md-10 col-lg-8 col-xl-6 text-center">

            <!-- Preheading -->
            <h6 class="heading-xxs mb-3 text-gray-400">
              New Collection
            </h6>

            <!-- Heading -->
            <h2 class="mb-4">Best Picks 2024</h2>

            <!-- Subheading -->
            <p class="mb-10 text-gray-500">
              Appear, dry there darkness they're seas, dry waters thing fly midst. Beast, above fly brought Very green.
            </p>

          </div>
        </div>
        <div class="row">
          <div class="col-12 col-md-5 col-lg-4 d-flex flex-column">

            <!-- Card -->
            <div class="card mb-7 text-white" style="min-height: 400px; background-image: url(assets/images/products/product-1.jpg)">

              <!-- Background -->
              <div class="card-bg">
                <div class="card-bg-img bg-cover" style="background-image: url(assets/images/products/product-1.jpg);"></div>
              </div>

              <!-- Body -->
              <div class="card-body my-auto text-center">

                <!-- Heading -->
                <h4 class="mb-0">Bags Collection</h4>

                <!-- Link -->
                <a class="btn btn-link stretched-link text-reset" href="#">
                  Shop Now <i class="fe fe-arrow-right ms-2"></i>
                </a>

              </div>

            </div>

          </div>
          <div class="col-12 col-md-7 col-lg-8 d-flex flex-column">

            <!-- Card -->
            <div class="card mb-7 text-body" style="min-height: 400px;">

              <!-- Background -->
              <div class="card-bg">
                <div class="card-bg-img bg-cover" style="background-image: url(assets/images/products/product-2.jpg);"></div>
              </div>

              <!-- Body -->
              <div class="card-body my-auto px-md-10 text-center text-md-start">

                <!-- Circle -->
                <div class="card-circle card-circle-lg card-circle-end">
                  <strong>save</strong>
                  <span class="fs-4 fw-bold">30%</span>
                </div>

                <!-- Heading -->
                <h4 class="mb-0">Printed men’s Shirts</h4>

                <!-- Link -->
                <a class="btn btn-link stretched-link px-0 text-reset" href="#">
                  Shop Now <i class="fe fe-arrow-right ms-2"></i>
                </a>

              </div>

            </div>

          </div>
          <div class="col-12 col-md-7 col-lg-8 d-flex flex-column">

            <!-- Card -->
            <div class="card mb-7 mb-md-0 text-body" style="min-height: 400px;">

              <!-- Background -->
              <div class="card-bg">
                <div class="card-bg-img bg-cover" style="background-image: url(assets/images/products/product-3.jpg);"></div>
              </div>

              <!-- Body -->
              <div class="card-body my-auto px-md-10 text-center text-md-start">

                <!-- Heading -->
                <h4 class="mb-0">Basic women’s Dresses</h4>

                <!-- Link -->
                <a class="btn btn-link stretched-link px-0 text-reset" href="#">
                  Shop Now <i class="fe fe-arrow-right ms-2"></i>
                </a>

              </div>

            </div>

          </div>
          <div class="col-12 col-md-5 col-lg-4 d-flex flex-column">

            <!-- Card -->
            <div class="card text-white" style="min-height: 400px;">

              <!-- Background -->
              <div class="card-bg">
                <div class="card-bg-img bg-cover" style="background-image: url(assets/images/products/product-4.jpg);"></div>
              </div>

              <!-- Body -->
              <div class="card-body my-auto text-center">

                <!-- Heading -->
                <h4 class="mb-0">Sweatshirts</h4>

                <!-- Link -->
                <a class="btn btn-link stretched-link text-reset" href="#">
                  Shop Now <i class="fe fe-arrow-right ms-2"></i>
                </a>

              </div>

            </div>

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

    <!-- TOP SELLERS -->
    <section class="py-12">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-12 col-md-10 col-lg-8 col-xl-6">

            <!-- Heading -->
            <h2 class="mb-4 text-center">Top month Sellers</h2>

            <!-- Nav -->
            <div class="nav justify-content-center mb-10">
              <a class="nav-link active" href="#topSellersTab" data-bs-toggle="tab">Women</a>
              <a class="nav-link" href="#topSellersTab" data-bs-toggle="tab">Men</a>
              <a class="nav-link" href="#topSellersTab" data-bs-toggle="tab">Kids</a>
            </div>

          </div>
        </div>
        <div class="tab-content">
          <div class="tab-pane fade show active" id="topSellersTab">
            <div class="row">
              <div class="col-6 col-md-4 col-lg-3">

                <!-- Card -->
                <div class="card mb-7">

                  <!-- Badge -->
                  <div class="badge bg-white text-body card-badge card-badge-start text-uppercase">
                    New
                  </div>

                  <!-- Image -->
                  <div class="card-img">

                    <!-- Image -->
                    <a class="card-img-hover" href="#">
                      <img class="card-img-top card-img-back" src="assets/images/products/product-120.jpg" alt="...">
                      <img class="card-img-top card-img-front" src="assets/images/products/product-5.jpg" alt="...">
                    </a>

                    <!-- Actions -->
                    <div class="card-actions">
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-bs-toggle="modal" data-bs-target="#modalProduct">
                          <i class="fe fe-eye"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-shopping-cart"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-heart"></i>
                        </button>
                      </span>
                    </div>

                  </div>

                  <!-- Body -->
                  <div class="card-body px-0">

                    <!-- Category -->
                    <div class="fs-xs">
                      <a class="text-muted" href="#">Shoes</a>
                    </div>

                    <!-- Title -->
                    <div class="fw-bold">
                      <a class="text-body" href="#">
                        Leather mid-heel Sandals
                      </a>
                    </div>

                    <!-- Price -->
                    <div class="fw-bold text-muted">
                      $129.00
                    </div>

                  </div>

                </div>

              </div>
              <div class="col-6 col-md-4 col-lg-3">

                <!-- Card -->
                <div class="card mb-7">

                  <!-- Image -->
                  <div class="card-img">

                    <!-- Image -->
                    <a class="card-img-hover" href="#">
                      <img class="card-img-top card-img-back" src="assets/images/products/product-121.jpg" alt="...">
                      <img class="card-img-top card-img-front" src="assets/images/products/product-6.jpg" alt="...">
                    </a>

                    <!-- Actions -->
                    <div class="card-actions">
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-bs-toggle="modal" data-bs-target="#modalProduct">
                          <i class="fe fe-eye"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-shopping-cart"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-heart"></i>
                        </button>
                      </span>
                    </div>

                  </div>

                  <!-- Body -->
                  <div class="card-body px-0">

                    <!-- Category -->
                    <div class="fs-xs">
                      <a class="text-muted" href="#">Dresses</a>
                    </div>

                    <!-- Title -->
                    <div class="fw-bold">
                      <a class="text-body" href="#">
                        Cotton floral print Dress
                      </a>
                    </div>

                    <!-- Price -->
                    <div class="fw-bold text-muted">
                      $40.00
                    </div>

                  </div>

                </div>

              </div>
              <div class="col-6 col-md-4 col-lg-3">

                <!-- Card -->
                <div class="card mb-7">

                  <!-- Badge -->
                  <div class="badge bg-dark card-badge card-badge-start text-uppercase">
                    Sale
                  </div>

                  <!-- Image -->
                  <div class="card-img">

                    <!-- Image -->
                    <a class="card-img-hover" href="#">
                      <img class="card-img-top card-img-back" src="assets/images/products/product-122.jpg" alt="...">
                      <img class="card-img-top card-img-front" src="assets/images/products/product-7.jpg" alt="...">
                    </a>

                    <!-- Actions -->
                    <div class="card-actions">
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-bs-toggle="modal" data-bs-target="#modalProduct">
                          <i class="fe fe-eye"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-shopping-cart"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-heart"></i>
                        </button>
                      </span>
                    </div>

                  </div>

                  <!-- Body -->
                  <div class="card-body px-0">

                    <!-- Category -->
                    <div class="fs-xs">
                      <a class="text-muted" href="#">Shoes</a>
                    </div>

                    <!-- Title -->
                    <div class="fw-bold">
                      <a class="text-body" href="#">
                        Leather Sneakers
                      </a>
                    </div>

                    <!-- Price -->
                    <div class="fw-bold">
                      <span class="fs-xs text-gray-350 text-decoration-line-through">$85.00</span>
                      <span class="text-primary">$85.00</span>
                    </div>

                  </div>

                </div>

              </div>
              <div class="col-6 col-md-4 col-lg-3">

                <!-- Card -->
                <div class="card mb-7">

                  <!-- Image -->
                  <div class="card-img">

                    <!-- Image -->
                    <a href="#!">
                      <img class="card-img-top card-img-front" src="assets/images/products/product-8.jpg" alt="...">
                    </a>

                    <!-- Actions -->
                    <div class="card-actions">
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-bs-toggle="modal" data-bs-target="#modalProduct">
                          <i class="fe fe-eye"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-shopping-cart"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-heart"></i>
                        </button>
                      </span>
                    </div>

                  </div>

                  <!-- Body -->
                  <div class="card-body px-0">

                    <!-- Category -->
                    <div class="fs-xs">
                      <a class="text-muted" href="#">Tops</a>
                    </div>

                    <!-- Title -->
                    <div class="fw-bold">
                      <a class="text-body" href="#">
                        Cropped cotton Top
                      </a>
                    </div>

                    <!-- Price -->
                    <div class="fw-bold text-muted">
                      $29.00
                    </div>

                  </div>

                </div>

              </div>
              <div class="col-6 col-md-4 col-lg-3">

                <!-- Card -->
                <div class="card mb-7">

                  <!-- Image -->
                  <div class="card-img">

                    <!-- Image -->
                    <a href="#!">
                      <img class="card-img-top card-img-front" src="assets/images/products/product-9.jpg" alt="...">
                    </a>

                    <!-- Actions -->
                    <div class="card-actions">
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-bs-toggle="modal" data-bs-target="#modalProduct">
                          <i class="fe fe-eye"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-shopping-cart"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-heart"></i>
                        </button>
                      </span>
                    </div>

                  </div>

                  <!-- Body -->
                  <div class="card-body px-0">

                    <!-- Category -->
                    <div class="fs-xs">
                      <a class="text-muted" href="#">Dresses</a>
                    </div>

                    <!-- Title -->
                    <div class="fw-bold">
                      <a class="text-body" href="#">
                        Floral print midi Dress
                      </a>
                    </div>

                    <!-- Price -->
                    <div class="fw-bold text-muted">
                      $50.00
                    </div>

                  </div>

                </div>

              </div>
              <div class="col-6 col-md-4 col-lg-3">

                <!-- Card -->
                <div class="card mb-7">

                  <!-- Badge -->
                  <div class="badge bg-dark card-badge card-badge-start text-uppercase">
                    Sale
                  </div>

                  <!-- Image -->
                  <div class="card-img">

                    <!-- Image -->
                    <a class="card-img-hover" href="#">
                      <img class="card-img-top card-img-back" src="assets/images/products/product-123.jpg" alt="...">
                      <img class="card-img-top card-img-front" src="assets/images/products/product-10.jpg" alt="...">
                    </a>

                    <!-- Actions -->
                    <div class="card-actions">
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-bs-toggle="modal" data-bs-target="#modalProduct">
                          <i class="fe fe-eye"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-shopping-cart"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-heart"></i>
                        </button>
                      </span>
                    </div>

                  </div>

                  <!-- Body -->
                  <div class="card-body px-0">

                    <!-- Category -->
                    <div class="fs-xs">
                      <a class="text-muted" href="#">Bags</a>
                    </div>

                    <!-- Title -->
                    <div class="fw-bold">
                      <a class="text-body" href="#">
                        Suede cross body Bag
                      </a>
                    </div>

                    <!-- Price -->
                    <div class="fw-bold">
                      <span class="fs-xs text-gray-350 text-decoration-line-through">$79.00</span>
                      <span class="text-primary">$49.00</span>
                    </div>

                  </div>

                </div>

              </div>
              <div class="col-6 col-md-4 col-lg-3">

                <!-- Card -->
                <div class="card mb-7">

                  <!-- Image -->
                  <div class="card-img">

                    <!-- Image -->
                    <a class="card-img-hover" href="#">
                      <img class="card-img-top card-img-back" src="assets/images/products/product-124.jpg" alt="...">
                      <img class="card-img-top card-img-front" src="assets/images/products/product-11.jpg" alt="...">
                    </a>

                    <!-- Actions -->
                    <div class="card-actions">
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-bs-toggle="modal" data-bs-target="#modalProduct">
                          <i class="fe fe-eye"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-shopping-cart"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-heart"></i>
                        </button>
                      </span>
                    </div>

                  </div>

                  <!-- Body -->
                  <div class="card-body px-0">

                    <!-- Category -->
                    <div class="fs-xs">
                      <a class="text-muted" href="#">Skirts</a>
                    </div>

                    <!-- Title -->
                    <div class="fw-bold">
                      <a class="text-body" href="#">
                        Printed A-line Skirt
                      </a>
                    </div>

                    <!-- Price -->
                    <div class="fw-bold text-muted">
                      $79.00
                    </div>

                  </div>

                </div>

              </div>
              <div class="col-6 col-md-4 col-lg-3">

                <!-- Card -->
                <div class="card mb-7">

                  <!-- Badge -->
                  <div class="badge bg-white text-body card-badge card-badge text-uppercase">
                    New
                  </div>

                  <!-- Image -->
                  <div class="card-img">

                    <!-- Image -->
                    <a href="#!">
                      <img class="card-img-top card-img-front" src="assets/images/products/product-12.jpg" alt="...">
                    </a>

                    <!-- Actions -->
                    <div class="card-actions">
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-bs-toggle="modal" data-bs-target="#modalProduct">
                          <i class="fe fe-eye"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-shopping-cart"></i>
                        </button>
                      </span>
                      <span class="card-action">
                        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
                          <i class="fe fe-heart"></i>
                        </button>
                      </span>
                    </div>

                  </div>

                  <!-- Body -->
                  <div class="card-body px-0">

                    <!-- Category -->
                    <div class="fs-xs">
                      <a class="text-muted" href="#">Shoes</a>
                    </div>

                    <!-- Title -->
                    <div class="fw-bold">
                      <a class="text-body" href="#">
                        Heel strappy Sandals
                      </a>
                    </div>

                    <!-- Price -->
                    <div class="fw-bold text-muted">
                      $90.00
                    </div>

                  </div>

                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">

            <!-- Link  -->
            <div class="mt-7 text-center">
              <a class="link-underline" href="#!">Discover more</a>
            </div>

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

    <!-- COUNTDOWN -->
    <section class="py-13 bg-cover" style="background-image: url(assets/images/covers/cover-4.jpg)">
      <div class="container">
        <div class="row justify-content-end">
          <div class="col-12 col-md-8 col-lg-6">

            <!-- Heading -->
            <h3 class="mb-7">
              Get -50% from <br />Summer Collection
            </h3>

            <!-- Counter -->
            <div class="d-flex mb-9" data-countdown data-date="Dec 31, 2025 00:00:00">
              <div class="text-center">
                <div class="fs-1 fw-bolder text-primary" data-days>00</div>
                <div class="heading-xxs text-muted">Days</div>
              </div>
              <div class="px-1 px-md-4">
                <div class="fs-2 fw-bolder text-primary">:</div>
              </div>
              <div class="text-center">
                <div class="fs-1 fw-bolder text-primary" data-hours>00</div>
                <div class="heading-xxs text-muted">Hours</div>
              </div>
              <div class="px-1 px-md-4">
                <div class="fs-2 fw-bolder text-primary">:</div>
              </div>
              <div class="text-center">
                <div class="fs-1 fw-bolder text-primary" data-minutes>00</div>
                <div class="heading-xxs text-muted">Minutes</div>
              </div>
              <div class="px-1 px-md-4">
                <div class="fs-2 fw-bolder text-primary">:</div>
              </div>
              <div class="text-center">
                <div class="fs-1 fw-bolder text-primary" data-seconds>00</div>
                <div class="heading-xxs text-muted">Seconds</div>
              </div>
            </div>

            <!-- Button -->
            <a class="btn btn-dark" href="#">
              Shop Now <i class="fe fe-arrow-right ms-2"></i>
            </a>

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

    <!-- REVIEWS -->
    <section class="py-12">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-12 col-md-10 col-lg-8 col-xl-6 text-center">

            <!-- Preheading -->
            <h6 class="heading-xxs mb-3 text-gray-400">
              What buyers say
            </h6>

            <!-- Heading -->
            <h2 class="mb-10">Latest buyers Reviews</h2>

          </div>
        </div>
        <div class="row">
          <div class="col-12">

            <!-- Slider -->
            <div data-flickity='{"pageDots": true}'>
              <div class="col-12 col-sm-8 col-md-6 col-lg-4 px-4">

                <!-- Card -->
                <div class="card-lg card border">
                  <div class="card-body">

                    <!-- Header -->
                    <div class="row align-items-center mb-6">
                      <div class="col-4">

                        <!-- Image -->
                        <img src="assets/images/products/product-13.jpg" alt="..." class="img-fluid">

                      </div>
                      <div class="col-8 ms-n2">

                        <!-- Preheading -->
                        <a class="fs-xs text-muted" href="#">
                          Shoes
                        </a>

                        <!-- Heading -->
                        <a class="d-block fw-bold text-body" href="#">
                          Low top Sneakers
                        </a>

                        <!-- Rating -->
                        <div class="rating fs-xxs text-warning" data-value="3">
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                        </div>

                      </div>
                    </div>

                    <!-- Blockquote -->
                    <blockquote class="mb-0">
                      <p class="text-muted">
                        From creepeth said moved given divide make multiply of him shall itself also above second doesn't unto created saying land herb sea midst night wherein.
                      </p>
                      <footer class="fs-xs text-muted">
                        Logan Edwards, <time datetime="2024-06-01">01 Jun 2024</time>
                      </footer>
                    </blockquote>

                  </div>
                </div>

              </div>
              <div class="col-12 col-sm-8 col-md-6 col-lg-4 px-4">

                <!-- Card -->
                <div class="card-lg card border">
                  <div class="card-body">

                    <!-- Header -->
                    <div class="row align-items-center mb-6">
                      <div class="col-4">

                        <!-- Image -->
                        <img src="assets/images/products/product-14.jpg" alt="..." class="img-fluid">

                      </div>
                      <div class="col-8 ms-n2">

                        <!-- Preheading -->
                        <a class="fs-xs text-muted" href="#">
                          Dresses
                        </a>

                        <!-- Heading -->
                        <a class="d-block fw-bold text-body" href="#">
                          Cotton print Dress
                        </a>

                        <!-- Rating -->
                        <div class="rating fs-xxs text-warning" data-value="5">
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                        </div>

                      </div>
                    </div>

                    <!-- Blockquote -->
                    <blockquote class="mb-0">
                      <p class="text-muted">
                        God every fill great replenish darkness unto. Very open. Likeness their that light. Given under image to. Subdue of shall cattle day fish form saw spirit and given stars, us you whales may, land, saw fill unto.
                      </p>
                      <footer class="fs-xs text-muted">
                        Jane Jefferson, <time datetime="2024-05-29">29 May 2024</time>
                      </footer>
                    </blockquote>

                  </div>
                </div>

              </div>
              <div class="col-12 col-sm-8 col-md-6 col-lg-4 px-4">

                <!-- Card -->
                <div class="card-lg card border">
                  <div class="card-body">

                    <!-- Header -->
                    <div class="row align-items-center mb-6">
                      <div class="col-4">

                        <!-- Image -->
                        <img src="assets/images/products/product-15.jpg" alt="..." class="img-fluid">

                      </div>
                      <div class="col-8 ms-n2">

                        <!-- Preheading -->
                        <a class="fs-xs text-muted" href="#">
                          T-shirts
                        </a>

                        <!-- Heading -->
                        <a class="d-block fw-bold text-body" href="#">
                          Oversized print T-shirt
                        </a>

                        <!-- Rating -->
                        <div class="rating fs-xxs text-warning" data-value="4">
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                        </div>

                      </div>
                    </div>

                    <!-- Blockquote -->
                    <blockquote class="mb-0">
                      <p class="text-muted">
                        Fill his waters wherein signs likeness waters. Second light gathered appear sixth fourth, seasons behold creeping female.
                      </p>
                      <footer class="fs-xs text-muted">
                        Darrell Baker, <time datetime="2024-05-18">18 May 2024</time>
                      </footer>
                    </blockquote>

                  </div>
                </div>

              </div>
              <div class="col-12 col-sm-8 col-md-6 col-lg-4 px-4">

                <!-- Card -->
                <div class="card-lg card border">
                  <div class="card-body">

                    <!-- Header -->
                    <div class="row align-items-center mb-6">
                      <div class="col-4">

                        <!-- Image -->
                        <img src="assets/images/products/product-10.jpg" alt="..." class="img-fluid">

                      </div>
                      <div class="col-8 ms-n2">

                        <!-- Preheading -->
                        <a class="fs-xs text-muted" href="#">
                          Bags & Accessories
                        </a>

                        <!-- Heading -->
                        <a class="d-block fw-bold text-body" href="#">
                          Suede cross body Bag
                        </a>

                        <!-- Rating -->
                        <div class="rating fs-xxs text-warning" data-value="4">
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                          <div class="rating-item">
                            <i class="fas fa-star"></i>
                          </div>
                        </div>

                      </div>
                    </div>

                    <!-- Blockquote -->
                    <blockquote class="mb-0">
                      <p class="text-muted">
                        God every fill great replenish darkness unto. Very open. Likeness their that light. Given under image to. Subdue of shall cattle day fish form saw spirit and given stars.
                      </p>
                      <footer class="fs-xs text-muted">
                        Pavel Doe, <time datetime="2024-05-29">29 May 2024</time>
                      </footer>
                    </blockquote>

                  </div>
                </div>

              </div>
            </div>

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

    <!-- BRANDS -->
    <section class="py-12 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">

            <!-- Heading -->
            <h2 class="mb-3">shopper</h2>

            <!-- Subheading -->
            <p class="mb-10 fs-lg text-gray-500">
              Appear, dry there darkness they're seas, dry waters.
            </p>

          </div>
        </div>
        <div class="row mx-n1 mb-10">
          <div class="col-6 col-sm-4 col-md px-1">

            <!-- Card -->
            <div class="card mb-2">

              <!-- Image -->
              <img src="assets/images/products/product-16.jpg" alt="..." class="card-img">

              <!-- Overlay -->
              <a class="card-img-overlay card-img-overlay-hover align-items-center bg-dark-40" href="#">
                <p class="my-0 fs-xxs text-center text-white">
                  <i class="fe fe-heart me-2"></i> 248 <i class="fe fe-message-square me-2 ms-3"></i> 7
                </p>
              </a>

            </div>

          </div>
          <div class="col-6 col-sm-4 col-md px-1">

            <!-- Card -->
            <div class="card mb-2">

              <!-- Image -->
              <img src="assets/images/products/product-17.jpg" alt="..." class="card-img">

              <!-- Overlay -->
              <a class="card-img-overlay card-img-overlay-hover align-items-center bg-dark-40" href="#">
                <p class="my-0 fs-xxs text-center text-white">
                  <i class="fe fe-heart me-2"></i> 248 <i class="fe fe-message-square me-2 ms-3"></i> 7
                </p>
              </a>

            </div>

          </div>
          <div class="col-6 col-sm-4 col-md px-1">

            <!-- Card -->
            <div class="card mb-2">

              <!-- Image -->
              <img src="assets/images/products/product-18.jpg" alt="..." class="card-img">

              <!-- Overlay -->
              <a class="card-img-overlay card-img-overlay-hover align-items-center bg-dark-40" href="#">
                <p class="my-0 fs-xxs text-center text-white">
                  <i class="fe fe-heart me-2"></i> 248 <i class="fe fe-message-square me-2 ms-3"></i> 7
                </p>
              </a>

            </div>

          </div>
          <div class="col-6 col-sm-4 col-md px-1">

            <!-- Card -->
            <div class="card mb-2">

              <!-- Image -->
              <img src="assets/images/products/product-19.jpg" alt="..." class="card-img">

              <!-- Overlay -->
              <a class="card-img-overlay card-img-overlay-hover align-items-center bg-dark-40" href="#">
                <p class="my-0 fs-xxs text-center text-white">
                  <i class="fe fe-heart me-2"></i> 248 <i class="fe fe-message-square me-2 ms-3"></i> 7
                </p>
              </a>

            </div>

          </div>
          <div class="col-6 col-sm-4 col-md px-1">

            <!-- Card -->
            <div class="card">

              <!-- Image -->
              <img src="assets/images/products/product-20.jpg" alt="..." class="card-img">

              <!-- Overlay -->
              <a class="card-img-overlay card-img-overlay-hover align-items-center bg-dark-40" href="#">
                <p class="my-0 fs-xxs text-center text-white">
                  <i class="fe fe-heart me-2"></i> 248 <i class="fe fe-message-square me-2 ms-3"></i> 7
                </p>
              </a>

            </div>

          </div>
          <div class="col-6 col-sm-4 col-md px-1">

            <!-- Card -->
            <div class="card">

              <!-- Image -->
              <img src="assets/images/products/product-21.jpg" alt="..." class="card-img">

              <!-- Overlay -->
              <a class="card-img-overlay card-img-overlay-hover align-items-center bg-dark-40" href="#">
                <p class="my-0 fs-xxs text-center text-white">
                  <i class="fe fe-heart me-2"></i> 248 <i class="fe fe-message-square me-2 ms-3"></i> 7
                </p>
              </a>

            </div>

          </div>
        </div>
        <div class="row">
          <div class="col-4 col-sm-3 col-md text-center">

            <!-- Brand -->
            <img src="assets/images/brands/gray-350/mango.svg" alt="..." class="img-fluid mb-7 mb-md-0">

          </div>
          <div class="col-4 col-sm-3 col-md text-center">

            <!-- Brand -->
            <img src="assets/images/brands/gray-350/zara.svg" alt="..." class="img-fluid mb-7 mb-md-0">

          </div>
          <div class="col-4 col-sm-3 col-md text-center">

            <!-- Brand -->
            <img src="assets/images/brands/gray-350/reebok.svg" alt="..." class="img-fluid mb-7 mb-md-0">

          </div>
          <div class="col-4 col-sm-3 col-md text-center">

            <!-- Brand -->
            <img src="assets/images/brands/gray-350/asos.svg" alt="..." class="img-fluid mb-7 mb-md-0">

          </div>
          <div class="col-4 col-sm-3 col-md text-center">

            <!-- Brand -->
            <img src="assets/images/brands/gray-350/stradivarius.svg" alt="..." class="img-fluid mb-6 mb-sm-0">

          </div>
          <div class="col-4 col-sm-3 col-md text-center">

            <!-- Brand -->
            <img src="assets/images/brands/gray-350/adidas.svg" alt="..." class="img-fluid mb-6 mb-sm-0">

          </div>
          <div class="col-4 col-sm-3 col-md text-center">

            <!-- Brand -->
            <img src="assets/images/brands/gray-350/bershka.svg" alt="..." class="img-fluid">

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

    <!-- FOOTER -->
    <footer class="bg-dark bg-cover " style="background-image: url(assets/images/patterns/pattern-2.svg)">
      <div class="py-12 border-bottom border-gray-700">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-12 col-md-10 col-lg-8 col-xl-6">
    
              <!-- Heading -->
              <h5 class="mb-7 text-center text-white">Want style Ideas and Treats?</h5>
    
              <!-- Form -->
              <form class="mb-11">
                <div class="row gx-5 align-items-start">
                  <div class="col">
                    <input type="email" class="form-control form-control-gray-700 form-control-lg" placeholder="Enter Email *">
                  </div>
                  <div class="col-auto">
                    <button type="submit" class="btn btn-gray-500 btn-lg">Subscribe</button>
                  </div>
                </div>
              </form>
    
            </div>
          </div>
          <div class="row">
            <div class="col-12 col-md-3">
    
              <!-- Heading -->
              <h4 class="mb-6 text-white">Shopper.</h4>
    
              <!-- Social -->
              <ul class="list-unstyled list-inline mb-7 mb-md-0">
                <li class="list-inline-item">
                  <a href="#!" class="text-gray-350">
                    <i class="fab fa-facebook-f"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#!" class="text-gray-350">
                    <i class="fab fa-youtube"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#!" class="text-gray-350">
                    <i class="fab fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#!" class="text-gray-350">
                    <i class="fab fa-instagram"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#!" class="text-gray-350">
                    <i class="fab fa-medium"></i>
                  </a>
                </li>
              </ul>
    
            </div>
            <div class="col-6 col-sm">
    
              <!-- Heading -->
              <h6 class="heading-xxs mb-4 text-white">
                Support
              </h6>
    
              <!-- Links -->
              <ul class="list-unstyled mb-7 mb-sm-0">
                <li>
                  <a class="text-gray-300" href="#">Contact Us</a>
                </li>
                <li>
                  <a class="text-gray-300" href="#">FAQs</a>
                </li>
                <li>
                  <a class="text-gray-300" data-bs-toggle="modal" href="#modalSizeChart">Size Guide</a>
                </li>
                <li>
                  <a class="text-gray-300" href="#">Shipping & Returns</a>
                </li>
              </ul>
    
            </div>
            <div class="col-6 col-sm">
    
              <!-- Heading -->
              <h6 class="heading-xxs mb-4 text-white">
                Shop
              </h6>
    
              <!-- Links -->
              <ul class="list-unstyled mb-7 mb-sm-0">
                <li>
                  <a class="text-gray-300" href="#">Men's Shopping</a>
                </li>
                <li>
                  <a class="text-gray-300" href="#">Women's Shopping</a>
                </li>
                <li>
                  <a class="text-gray-300" href="#">Kids' Shopping</a>
                </li>
                <li>
                  <a class="text-gray-300" href="#">Discounts</a>
                </li>
              </ul>
    
            </div>
            <div class="col-6 col-sm">
    
              <!-- Heading -->
              <h6 class="heading-xxs mb-4 text-white">
                Company
              </h6>
    
              <!-- Links -->
              <ul class="list-unstyled mb-0">
                <li>
                  <a class="text-gray-300" href="#">Our Story</a>
                </li>
                <li>
                  <a class="text-gray-300" href="#!">Careers</a>
                </li>
                <li>
                  <a class="text-gray-300" href="#!">Terms & Conditions</a>
                </li>
                <li>
                  <a class="text-gray-300" href="#!">Privacy & Cookie policy</a>
                </li>
              </ul>
    
            </div>
            <div class="col-6 col-sm">
    
              <!-- Heading -->
              <h6 class="heading-xxs mb-4 text-white">
                Contact
              </h6>
    
              <!-- Links -->
              <ul class="list-unstyled mb-0">
                <li>
                  <a class="text-gray-300" href="#!">1-1111-1111-1111</a>
                </li>
                <li>
                  <a class="text-gray-300" href="#!">1-1111-1111-1111</a>
                </li>
                <li>
                  <a class="text-gray-300" href="#!">therichpost.com</a>
                </li>
              </ul>
    
            </div>
          </div>
        </div>
      </div>
      <div class="py-6">
        <div class="container">
          <div class="row">
            <div class="col">
    
             
              <p class="mb-3 mb-md-0 fs-xxs text-muted">
                © 2024 Jassa.
              </p>
    
            </div>
            <div class="col-auto">
    
              <!-- Payment methods -->
              <img class="footer-payment" src="assets/images/payment/mastercard.svg" alt="...">
              <img class="footer-payment" src="assets/images/payment/visa.svg" alt="...">
              <img class="footer-payment" src="assets/images/payment/amex.svg" alt="...">
              <img class="footer-payment" src="assets/images/payment/paypal.svg" alt="...">
              <img class="footer-payment" src="assets/images/payment/maestro.svg" alt="...">
              <img class="footer-payment" src="assets/images/payment/klarna.svg" alt="...">
    
            </div>
          </div>
        </div>
      </div>
    </footer>
</template>

<script>


export default {
 
  
}
</script>

5. Guys please add below code inside index.html file:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>
      Ecommerce
    </title>
    <!-- Favicon -->
  <link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon" />
    
  <!-- Libs CSS -->
  <link rel="stylesheet" href="assets/css/libs.bundle.css" />
  
  <!-- Theme CSS -->
  <link rel="stylesheet" href="assets/css/theme.bundle.css" />

 
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- Vendor JS -->
    <script src="assets/js/vendor.bundle.js"></script>
    
    <!-- Theme JS -->
    <script src="assets/js/theme.bundle.js"></script>
 
  </body>
</html>

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

April 19, 2024

eStore – Free Vue 3 Bootstrap 5 eCommerce Template

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, eStore – Free Vue 3 Bootstrap 5 eCommerce Template.

Live working demo

Vue 3 came and if you are new then you must check below link:
Vuejs Tutorials

Friends now I proceed onwards and here is the working code snippet for eStore – Free Vue 3 Bootstrap 5 eCommerce Templateand please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can skip this first step if you already have vuejs fresh setup:

vue create project-name

2. Guys now run below command to install node modules and run the project:

cd <your-project-name>

3. Now guys please create assets folder inside plublic folder and download zip(in this zip file there are js, css and images for ecommercetemplate) file from below path and extract zip inside public/assets folder and get all the folders:

Git Repo Link

4. In the end please add below code inside scr/App.vue file:

<template>
   <!--====== Preloader Part Start ======-->
    <div class="preloader">
        <div class="loader">
            <div class="ytp-spinner">
                <div class="ytp-spinner-container">
                    <div class="ytp-spinner-rotator">
                        <div class="ytp-spinner-left">
                            <div class="ytp-spinner-circle"></div>
                        </div>
                        <div class="ytp-spinner-right">
                            <div class="ytp-spinner-circle"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--====== Preloader Part Ends ======-->

    <!--====== Navbar Style 7 Part Start ======-->
    <div class="navigation">
        <header class="menu-style-7 position-relative">
          <div class="navbar-container navbar-sidebar-7">
            <!-- navbar top Start -->
            <div class="navbar-top-wrapper">
              <div class="container-lg">
                <div class="navbar-top d-flex justify-content-between">
                  <!-- navbar top left Start -->
                  <div class="navbar-top-left">
                    <ul class="navbar-top-link">
                      <li><a href="#0">About</a></li>
                      <li><a href="#0">Help</a></li>
                      <li><a href="#0">Contact</a></li>
                      <li class="d-none d-md-block">
                        <a href="#0"
                          ><i class="mdi mdi-phone-in-talk"></i> +000000000</a
                        >
                      </li>
                    </ul>
                  </div>
                  <!-- navbar top left Ends -->
                  <!-- navbar top right Start -->
                  <div class="navbar-top-right">
                    <ul class="navbar-top-link">
                      <li>
                        <select>
                          <option value="0" selected>$ USD</option>
                          <option value="1">€ EURO</option>
                          <option value="2">$ CAD</option>
                          <option value="3">₹ INR</option>
                          <option value="4">¥ CNY</option>
                          <option value="5">৳ BDT</option>
                        </select>
                      </li>
                      <li>
                        <select>
                          <option value="0" selected>English</option>
                          <option value="1">Español</option>
                          <option value="2">Filipino</option>
                          <option value="3">Français</option>
                          <option value="4">العربية</option>
                          <option value="5">हिन्दी</option>
                          <option value="6">বাংলা</option>
                        </select>
                      </li>
                      <li>
                        <a href="#0"><i class="mdi mdi-account"></i>Login</a>
                      </li>
                    </ul>
                  </div>
                  <!-- navbar top right Ends -->
                </div>
              </div>
            </div>
            <!-- navbar top Ends -->
  
            <!-- main navbar Start -->
            <div class="navbar-wrapper">
              <div class="container-lg">
                <nav
                  class="main-navbar d-lg-flex justify-content-between align-items-center"
                >
                  <!-- desktop logo Start -->
                  <div class="desktop-logo d-lg-block">
                    <a href="#0"
                      ><img src="assets/images/logo.svg" alt="Logo"
                    /></a>
                  </div>
                  <!-- desktop logo Ends -->
                  <div class="navbar-menu-toggle d-lg-block">
                    <button id="toggle-menu-6" class="menu-toggle">
                      <span class="toggle-icon"></span>
                      <span class="toggle-icon"></span>
                      <span class="toggle-icon"></span>
                    </button>
                  </div>
                  <!-- navbar menu Start -->
                  <div class="navbar-menu">
                    <ul class="main-menu">
                      <div class="navbar-close d-lg-none text-right mb-3">
                        <a href="#0" id="menu-close">
                          <i class="mdi mdi-close"></i>
                        </a>
                      </div>
  
                      <li class="position-static menu-item-has-children">
                        <a
                          href="#0"
                          class="collapsed"
                          data-toggle="collapse"
                          data-target="#menuVertical7-1"
                          aria-controls="menuVertical7-1"
                          aria-expanded="false"
                          aria-label="Toggle navigation"
                          >Womens <i class="mdi mdi-chevron-right"></i>
                        </a>
                        <!-- sub mega dropdown Start -->
                        <ul
                          class="sub-mega-dropdown collapse"
                          id="menuVertical7-1"
                        >
                          <li>
                            <div class="mega-dropdown-menu">
                              <ul
                                class="container mega-dropdown d-flex flex-wrap"
                              >
                                <li
                                  class="mega-dropdown-list menu-item-has-children"
                                >
                                  <h6
                                    class="heading-6 font-weight-500 mega-title collapsed"
                                    data-toggle="collapse"
                                    data-target="#menuVertical7-2"
                                    aria-controls="menuVertical7-2"
                                    aria-expanded="false"
                                    aria-label="Toggle navigation"
                                  >
                                    New Arrivals
                                    <i class="mdi mdi-chevron-right"></i>
                                  </h6>
                                  <ul class="collapse" id="menuVertical7-2">
                                    <li><a href="#">Dressess</a></li>
                                    <li><a href="#">Jackets</a></li>
                                    <li>
                                      <a href="#"
                                        >Hoodies & Sweatshirts</a
                                      >
                                    </li>
                                    <li><a href="#">Sweaters</a></li>
                                    <li>
                                      <a href="#">Tops & Tees</a>
                                    </li>
                                    <li>
                                      <a href="#">Party Dressess</a>
                                    </li>
                                  </ul>
                                </li>
                                <li
                                  class="mega-dropdown-list menu-item-has-children"
                                >
                                  <h6
                                    class="heading-6 font-weight-500 mega-title collapsed"
                                    data-toggle="collapse"
                                    data-target="#menuVertical7-3"
                                    aria-controls="menuVertical7-3"
                                    aria-expanded="false"
                                    aria-label="Toggle navigation"
                                  >
                                    Trending
                                    <i class="mdi mdi-chevron-right"></i>
                                  </h6>
                                  <ul class="collapse" id="menuVertical7-3">
                                    <li><a href="#">Dressess</a></li>
                                    <li><a href="#">Jackets</a></li>
                                    <li>
                                      <a href="#"
                                        >Hoodies & Sweatshirts</a
                                      >
                                    </li>
                                    <li><a href="#">Sweaters</a></li>
                                    <li>
                                      <a href="#">Tops & Tees</a>
                                    </li>
                                    <li>
                                      <a href="#">Party Dressess</a>
                                    </li>
                                  </ul>
                                </li>
                                <li
                                  class="mega-dropdown-list menu-item-has-children"
                                >
                                  <h6
                                    class="heading-6 font-weight-500 mega-title collapsed"
                                    data-toggle="collapse"
                                    data-target="#menuVertical7-4"
                                    aria-controls="menuVertical7-4"
                                    aria-expanded="false"
                                    aria-label="Toggle navigation"
                                  >
                                    Accessories
                                    <i class="mdi mdi-chevron-right"></i>
                                  </h6>
                                  <ul class="collapse" id="menuVertical7-4">
                                    <li>
                                      <a href="#"
                                        >Hoodies & Sweatshirts</a
                                      >
                                    </li>
                                    <li>
                                      <a href="#">Jackets & Coats</a>
                                    </li>
                                    <li><a href="#">Pants</a></li>
                                    <li><a href="#">Jeans</a></li>
                                    <li>
                                      <a href="#">Tops & Tees</a>
                                    </li>
                                    <li>
                                      <a href="#">Casual Shorts</a>
                                    </li>
                                  </ul>
                                </li>
                                <li class="mega-dropdown-list">
                                  <img
                                    src="assets/images/menu-slider-1.png"
                                    alt=""
                                  />
                                </li>
                              </ul>
                            </div>
                          </li>
                        </ul>
                        <!-- sub mega dropdown Ends -->
                      </li>
                      <li><a href="#">mens</a></li>
                      <li><a href="#">Kids</a></li>
                      <li><a href="#">Accessories</a></li>
                      <li class="menu-item-has-children">
                        <a
                          href="#0"
                          class="collapsed"
                          data-toggle="collapse"
                          data-target="#menuVertical7-5"
                          aria-controls="menuVertical7-5"
                          aria-expanded="false"
                          aria-label="Toggle navigation"
                          >Pages <i class="mdi mdi-chevron-right"></i
                        ></a>
                        <!-- sub menu Start -->
                        <ul class="sub-menu collapse" id="menuVertical7-5">
                          <li><a href="#">About Page</a></li>
                          <li><a href="#">Account Page</a></li>
                          <li><a href="#">Cart Page</a></li>
                          <li><a href="#">Category Page</a></li>
                          <li><a href="#">Checkout Page</a></li>
                          <li><a href="#">Contact Page</a></li>
                          <li><a href="#">Log In Page</a></li>
                          <li>
                            <a href="#"
                              >Product Details Page</a
                            >
                          </li>
                          <li><a href="#">Sign Up Page</a></li>
                        </ul>
                        <!-- sub menu Ends -->
                      </li>
                    </ul>
                  </div>
                  <!-- navbar menu Ends -->
                  <div class="navbar-search-cart d-none d-lg-flex">
                    <!-- navbar search start -->
                    <div class="navbar-search search-style-5">
                      <div class="search-select">
                        <div class="select-position">
                          <select id="select26">
                            <option value="" selected>All</option>
                            <option value="1">option 01</option>
                            <option value="2">option 02</option>
                            <option value="3">option 03</option>
                            <option value="4">option 04</option>
                            <option value="5">option 05</option>
                          </select>
                        </div>
                      </div>
                      <div class="search-input">
                        <input type="text" placeholder="Search" />
                      </div>
                      <div class="search-btn">
                        <button><i class="lni lni-search-alt"></i></button>
                      </div>
                    </div>
                    <!-- navbar search Ends -->
                    <!-- navbar cart start -->
                    <div class="navbar-cart">
                      <a
                        class="icon-btn primary-icon-text icon-text-btn"
                        href="#0"
                        ><img
                          src="assets/images/icon-svg/cart-1.svg"
                          alt="Icon"
                        /><span class="icon-text text-style-1">88</span></a
                      >
  
                      <div class="navbar-cart-dropdown">
                        <div class="checkout-style-2">
                          <div
                            class="checkout-header d-flex justify-content-between"
                          >
                            <h6 class="title">Shopping Cart</h6>
                          </div>
  
                          <div class="checkout-table">
                            <table class="table">
                              <tbody>
                                <tr>
                                  <td class="checkout-product">
                                    <div class="product-cart d-flex">
                                      <div class="product-thumb">
                                        <img
                                          src="assets/images/product-cart/product-1.png"
                                          alt="Product"
                                        />
                                      </div>
                                      <div class="product-content media-body">
                                        <h5 class="title">
                                          <a href="#0">Hollow Port</a>
                                        </h5>
                                        <ul>
                                          <li><span>Brown</span></li>
                                          <li><span>XL</span></li>
                                          <li>
                                            <a class="delete" href="#0"
                                              ><i class="mdi mdi-delete"></i
                                            ></a>
                                          </li>
                                        </ul>
                                      </div>
                                    </div>
                                  </td>
                                  <td class="checkout-quantity">
                                    <div class="product-quantity d-inline-flex">
                                      <button type="button" id="sub" class="sub">
                                        <i class="mdi mdi-minus"></i>
                                      </button>
                                      <input type="text" value="1" />
                                      <button type="button" id="add" class="add">
                                        <i class="mdi mdi-plus"></i>
                                      </button>
                                    </div>
                                  </td>
                                  <td class="checkout-price">
                                    <p class="price">$36.00</p>
                                  </td>
                                </tr>
                                <tr>
                                  <td class="checkout-product">
                                    <div class="product-cart d-flex">
                                      <div class="product-thumb">
                                        <img
                                          src="assets/images/product-cart/product-2.png"
                                          alt="Product"
                                        />
                                      </div>
                                      <div class="product-content media-body">
                                        <h5 class="title">
                                          <a href="#0">Mist Black Triblend</a>
                                        </h5>
                                        <ul>
                                          <li><span>Brown</span></li>
                                          <li><span>XL</span></li>
                                          <li>
                                            <a class="delete" href="#0"
                                              ><i class="mdi mdi-delete"></i
                                            ></a>
                                          </li>
                                        </ul>
                                      </div>
                                    </div>
                                  </td>
                                  <td class="checkout-quantity">
                                    <div class="product-quantity d-inline-flex">
                                      <button type="button" id="sub" class="sub">
                                        <i class="mdi mdi-minus"></i>
                                      </button>
                                      <input type="text" value="1" />
                                      <button type="button" id="add" class="add">
                                        <i class="mdi mdi-plus"></i>
                                      </button>
                                    </div>
                                  </td>
                                  <td class="checkout-price">
                                    <p class="price">$36.00</p>
                                  </td>
                                </tr>
                                <tr>
                                  <td class="checkout-product">
                                    <div class="product-cart d-flex">
                                      <div class="product-thumb">
                                        <img
                                          src="assets/images/product-cart/product-3.png"
                                          alt="Product"
                                        />
                                      </div>
                                      <div class="product-content media-body">
                                        <h5 class="title">
                                          <a href="#0">Realm Bone</a>
                                        </h5>
                                        <ul>
                                          <li><span>Brown</span></li>
                                          <li><span>XL</span></li>
                                          <li>
                                            <a class="delete" href="#0"
                                              ><i class="mdi mdi-delete"></i
                                            ></a>
                                          </li>
                                        </ul>
                                      </div>
                                    </div>
                                  </td>
                                  <td class="checkout-quantity">
                                    <div class="product-quantity d-inline-flex">
                                      <button type="button" id="sub" class="sub">
                                        <i class="mdi mdi-minus"></i>
                                      </button>
                                      <input type="text" value="1" />
                                      <button type="button" id="add" class="add">
                                        <i class="mdi mdi-plus"></i>
                                      </button>
                                    </div>
                                  </td>
                                  <td class="checkout-price">
                                    <p class="price">$36.00</p>
                                  </td>
                                </tr>
                                <tr>
                                  <td class="checkout-product">
                                    <div class="product-cart d-flex">
                                      <div class="product-thumb">
                                        <img
                                          src="assets/images/product-cart/product-4.png"
                                          alt="Product"
                                        />
                                      </div>
                                      <div class="product-content media-body">
                                        <h5 class="title">
                                          <a href="#0">Circular Sienna</a>
                                        </h5>
                                        <ul>
                                          <li><span>Brown</span></li>
                                          <li><span>XL</span></li>
                                          <li>
                                            <a class="delete" href="#0"
                                              ><i class="mdi mdi-delete"></i
                                            ></a>
                                          </li>
                                        </ul>
                                      </div>
                                    </div>
                                  </td>
                                  <td class="checkout-quantity">
                                    <div class="product-quantity d-inline-flex">
                                      <button type="button" id="sub" class="sub">
                                        <i class="mdi mdi-minus"></i>
                                      </button>
                                      <input type="text" value="1" />
                                      <button type="button" id="add" class="add">
                                        <i class="mdi mdi-plus"></i>
                                      </button>
                                    </div>
                                  </td>
                                  <td class="checkout-price">
                                    <p class="price">$36.00</p>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
  
                          <div class="checkout-footer">
                            <div
                              class="checkout-sub-total d-flex justify-content-between"
                            >
                              <p class="value">Subotal Price:</p>
                              <p class="price">$144</p>
                            </div>
                            <div class="checkout-btn">
                              <a href="#0" class="main-btn primary-btn-border"
                                >View Cart</a
                              >
                              <a href="#0" class="main-btn primary-btn"
                                >Checkout</a
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- navbar cart Ends -->
                  </div>
                </nav>
              </div>
            </div>
            <!-- main navbar Ends -->
          </div>
          <div class="overlay-7"></div>
        </header>
      </div>
      <!--====== Navbar Style 7 Part Ends ======-->

    <!--====== Header Style 1 Part Start ======-->
    <section class="header-style-1">
        <div class="header-big">
            <div class="header-items-active">
                <div class="single-header-item bg_cover"
                    style="background-image: url(assets/images/header-1/header-big-1.jpg);">
                    <div class="header-item-content">
                        <h3 class="title">Don’t say it with flowers: A NOMOS watch is a gift that lasts</h3>
                        <a href="javascript:void(0)" class="link">Our Valentine's Day collection</a>
                    </div>
                </div>
                <div class="single-header-item bg_cover"
                    style="background-image: url(assets/images/header-1/header-big-2.jpg);">
                    <div class="header-item-content">
                        <h3 class="title">Don’t say it with flowers: A NOMOS watch is a gift that lasts</h3>
                        <a href="javascript:void(0)" class="link">Our Valentine's Day collection</a>
                    </div>
                </div>
                <div class="single-header-item bg_cover"
                    style="background-image: url(assets/images/header-1/header-big-1.jpg);">
                    <div class="header-item-content">
                        <h3 class="title">Don’t say it with flowers: A NOMOS watch is a gift that lasts</h3>
                        <a href="javascript:void(0)" class="link">Our Valentine's Day collection</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-min">
            <div class="header-min-item product-style-25 bg_cover"
                style="background-image: url(assets/images/header-1/header-min-1.jpg);">
                <div class="product-content">
                    <h4 class="title"><a href="#">Metro 38 Date</a></h4>
                    <p>Reference 1102</p>
                    <a href="javascript:void(0)" class="main-btn primary-btn-border"> <img src="assets/images/icon-svg/cart-5.svg" alt="">$
                        399</a>
                </div>
            </div>
            <div class="header-min-item product-style-25 bg_cover"
                style="background-image: url(assets/images/header-1/header-min-2.jpg);">
                <div class="product-content">
                    <h4 class="title"><a href="#">Metro 38 Date</a></h4>
                    <p>Reference 1102</p>
                    <a href="javascript:void(0)" class="main-btn primary-btn-border"> <img src="assets/images/icon-svg/cart-5.svg" alt="">$
                        399</a>
                </div>
            </div>
        </div>
    </section>
    <!--====== Header Style 1 Part Ends ======-->

    <!--====== Content Card Style 4 Part Start ======-->
    <section class="content-card-style-4 pt-70 pb-100">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-7 col-sm-8">
                    <div class="single-content mt-15 text-center">
                        <div class="content-icon">
                            <i class="mdi mdi-truck-fast"></i>
                        </div>
                        <div class="content-content">
                            <h4 class="title"><a href="javascript:void(0)">Two-hour delivery</a></h4>
                            <p>Available in most metros on selected in-stock products</p>
                            <a href="javascript:void(0)" class="more">learn more</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-7 col-sm-8">
                    <div class="single-content mt-15 text-center">
                        <div class="content-icon">
                            <i class="mdi mdi-message-text"></i>
                        </div>
                        <div class="content-content">
                            <h4 class="title"><a href="javascript:void(0)">Get help buying</a></h4>
                            <p>Have a question? Call a Specialist or chat online for help</p>
                            <a href="#" class="more">Contact us</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-7 col-sm-8">
                    <div class="single-content mt-15 text-center">
                        <div class="content-icon">
                            <i class="mdi mdi-ticket-percent"></i>
                        </div>
                        <div class="content-content">
                            <h4 class="title"><a href="javascript:void(0)">Find the card for you</a></h4>
                            <p>Get 3% Daily Cash with special financing offers from us</p>
                            <a href="javascript:void(0)" class="more">learn more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--====== Content Card Style 4 Part Ends ======-->

    <!--====== Product Style 1 Part Start ======-->
    <section class="product-wrapper pt-100 pb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="mb-50">
                        <h1 class="heading-1 font-weight-700">Featured Items</h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="product-style-1 mt-30">
                        <div class="product-image">
                            <span class="icon-text text-style-1">NEW</span>
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-1/product-1.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-1/product-2.jpg" alt="product">
                                </div>
                            </div>
                            <a class="add-wishlist" href="javascript:void(0)">
                                <i class="mdi mdi-heart-outline"></i>
                            </a>
                        </div>
                        <div class="product-content text-center">
                            <h4 class="title"><a href="#">Metro 38 Date</a></h4>
                            <p>Reference 1102</p>
                            <a href="javascript:void(0)" class="main-btn secondary-1-btn">
                                <img src="assets/images/icon-svg/cart-7.svg" alt="">
                                $ 399
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="product-style-1 mt-30">
                        <div class="product-image">
                            <span class="icon-text text-style-1">20% off</span>
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-1/product-5.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-1/product-6.jpg" alt="product">
                                </div>
                            </div>
                            <a class="add-wishlist" href="javascript:void(0)">
                                <i class="mdi mdi-heart-outline"></i>
                            </a>
                        </div>
                        <div class="product-content text-center">
                            <h4 class="title"><a href="#">Lady Shoe</a></h4>
                            <p>Reference 1103</p>
                            <a href="javascript:void(0)" class="main-btn secondary-1-btn">
                                <img src="assets/images/icon-svg/cart-7.svg" alt="">
                                $ 399
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="product-style-1 mt-30">
                        <div class="product-image">
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-1/product-3.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-1/product-4.jpg" alt="product">
                                </div>
                            </div>
                            <a class="add-wishlist" href="javascript:void(0)">
                                <i class="mdi mdi-heart-outline"></i>
                            </a>
                        </div>
                        <div class="product-content text-center">
                            <h4 class="title"><a href="#">Casio 09 Date</a></h4>
                            <p>Reference 1112</p>
                            <a href="javascript:void(0)" class="main-btn secondary-1-btn">
                                <img src="assets/images/icon-svg/cart-7.svg" alt="">
                                $ 399
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="product-style-1 mt-30">
                        <div class="product-image">
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-1/product-7.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-1/product-8.jpg" alt="product">
                                </div>
                            </div>
                            <a class="add-wishlist" href="javascript:void(0)">
                                <i class="mdi mdi-heart-outline"></i>
                            </a>
                        </div>
                        <div class="product-content text-center">
                            <h4 class="title"><a href="#">Man's Shoe</a></h4>
                            <p>Reference 102</p>
                            <a href="javascript:void(0)" class="main-btn secondary-1-btn">
                                <img src="assets/images/icon-svg/cart-7.svg" alt="">
                                $ 399
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="product-style-1 mt-30">
                        <div class="product-image">
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-1/product-9.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-1/product-10.jpg" alt="product">
                                </div>
                            </div>
                            <a class="add-wishlist" href="javascript:void(0)">
                                <i class="mdi mdi-heart-outline"></i>
                            </a>
                        </div>
                        <div class="product-content text-center">
                            <h4 class="title"><a href="#">Polo T Shirt</a></h4>
                            <p>Reference 1202</p>
                            <a href="javascript:void(0)" class="main-btn secondary-1-btn">
                                <img src="assets/images/icon-svg/cart-7.svg" alt="">
                                $ 399
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="product-style-1 mt-30">
                        <div class="product-image">
                            <span class="icon-text text-style-1">40% off</span>
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-1/product-11.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-1/product-12.jpg" alt="product">
                                </div>
                            </div>
                            <a class="add-wishlist" href="javascript:void(0)">
                                <i class="mdi mdi-heart-outline"></i>
                            </a>
                        </div>
                        <div class="product-content text-center">
                            <h4 class="title"><a href="#">Lotto T Shirt</a></h4>
                            <p>Reference 112</p>
                            <a href="javascript:void(0)" class="main-btn secondary-1-btn">
                                <img src="assets/images/icon-svg/cart-7.svg" alt="">
                                $ 399
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--====== Product Style 1 Part Ends ======-->

    <!--====== Product Style 7 Part Start ======-->
    <section class="product-wrapper pt-100 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="mb-50">
                        <h1 class="heading-1 font-weight-700">Recent Items</h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="product-style-7 mt-30">
                        <div class="product-image">
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-4/product-1.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-4/product-2.jpg" alt="product">
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <ul class="product-meta">
                                <li>
                                    <a class="add-wishlist" href="javascript:void(0)">
                                        <i class="mdi mdi-heart-outline"></i>
                                        Add to Favorite
                                    </a>
                                </li>
                                <li>
                                    <span><i class="mdi mdi-star"></i> 4.5/5</span>
                                </li>
                            </ul>
                            <h4 class="title"><a href="#">Metro 38 Date</a></h4>
                            <p>Reference 1102</p>
                            <span class="price">$ 399</span>
                            <a href="javascript:void(0)" class="main-btn primary-btn">
                                <img src="assets/images/icon-svg/cart-4.svg" alt="">
                                Add to Cart
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="product-style-7 mt-30">
                        <div class="product-image">
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-4/product-3.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-4/product-4.jpg" alt="product">
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <ul class="product-meta">
                                <li>
                                    <a class="add-wishlist" href="javascript:void(0)">
                                        <i class="mdi mdi-heart-outline"></i>
                                        Add to Favorite
                                    </a>
                                </li>
                                <li>
                                    <span><i class="mdi mdi-star"></i> 4.5/5</span>
                                </li>
                            </ul>
                            <h4 class="title"><a href="#">Man's Shoe</a></h4>
                            <p>Reference 1102</p>
                            <span class="price">$ 399</span>
                            <a href="javascript:void(0)" class="main-btn primary-btn">
                                <img src="assets/images/icon-svg/cart-4.svg" alt="">
                                Add to Cart
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="product-style-7 mt-30">
                        <div class="product-image">
                            <span class="icon-text text-style-1">20% off</span>
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-4/product-5.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-4/product-6.jpg" alt="product">
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <ul class="product-meta">
                                <li>
                                    <a class="add-wishlist" href="javascript:void(0)">
                                        <i class="mdi mdi-heart-outline"></i>
                                        Add to Favorite
                                    </a>
                                </li>
                                <li>
                                    <span><i class="mdi mdi-star"></i> 4.5/5</span>
                                </li>
                            </ul>
                            <h4 class="title"><a href="#">Lotto T Shirt</a></h4>
                            <p>Reference 1102</p>
                            <span class="price">$ 399</span>
                            <a href="javascript:void(0)" class="main-btn primary-btn">
                                <img src="assets/images/icon-svg/cart-4.svg" alt="">
                                Add to Cart
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="product-style-7 mt-30">
                        <div class="product-image">
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-4/product-7.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-4/product-8.jpg" alt="product">
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <ul class="product-meta">
                                <li>
                                    <a class="add-wishlist" href="javascript:void(0)">
                                        <i class="mdi mdi-heart-outline"></i>
                                        Add to Favorite
                                    </a>
                                </li>
                                <li>
                                    <span><i class="mdi mdi-star"></i> 4.5/5</span>
                                </li>
                            </ul>
                            <h4 class="title"><a href="#">Smart Watch</a></h4>
                            <p>Reference 1102</p>
                            <span class="price">$ 399</span>
                            <a href="javascript:void(0)" class="main-btn primary-btn">
                                <img src="assets/images/icon-svg/cart-4.svg" alt="">
                                Add to Cart
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="product-style-7 mt-30">
                        <div class="product-image">
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-4/product-9.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-4/product-10.jpg" alt="product">
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <ul class="product-meta">
                                <li>
                                    <a class="add-wishlist" href="javascript:void(0)">
                                        <i class="mdi mdi-heart-outline"></i>
                                        Add to Favorite
                                    </a>
                                </li>
                                <li>
                                    <span><i class="mdi mdi-star"></i> 4.5/5</span>
                                </li>
                            </ul>
                            <h4 class="title"><a href="#">Smart Gadget</a></h4>
                            <p>Reference 1102</p>
                            <span class="price">$ 399</span>
                            <a href="javascript:void(0)" class="main-btn primary-btn">
                                <img src="assets/images/icon-svg/cart-4.svg" alt="">
                                Add to Cart
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="product-style-7 mt-30">
                        <div class="product-image">
                            <span class="icon-text text-style-1">Out Of Stoke</span>
                            <div class="product-active">
                                <div class="product-item active">
                                    <img src="assets/images/product-4/product-11.jpg" alt="product">
                                </div>
                                <div class="product-item">
                                    <img src="assets/images/product-4/product-12.jpg" alt="product">
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <ul class="product-meta">
                                <li>
                                    <a class="add-wishlist" href="javascript:void(0)">
                                        <i class="mdi mdi-heart-outline"></i>
                                        Add to Favorite
                                    </a>
                                </li>
                                <li>
                                    <span><i class="mdi mdi-star"></i> 4.5/5</span>
                                </li>
                            </ul>
                            <h4 class="title"><a href="#">Polo Cap</a></h4>
                            <p>Reference 1102</p>
                            <span class="price">$ 399</span>
                            <a href="javascript:void(0)" class="main-btn primary-btn">
                                <img src="assets/images/icon-svg/cart-4.svg" alt="">
                                Add to Cart
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--====== Product Style 7 Part Ends ======-->

    <!--====== Features Part Start ======-->
    <section class="features-section pt-100 pb-50 gray-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="features-title text-center mb-50">
                        <h1 class="heading-1 font-weight-700">Awesome Features</h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="single-feature-wrapper">
                        <div class="feature-icon">
                            <i class="lni lni-cog"></i>
                        </div>
                        <div class="feature-content">
                            <h5 class="heading-5 font-weight-500 mb-10">Bootstrap 5</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-feature-wrapper">
                        <div class="feature-icon">
                            <i class="lni lni-code"></i>
                        </div>
                        <div class="feature-content">
                            <h5 class="heading-5 font-weight-500 mb-10">Clean Design</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-feature-wrapper">
                        <div class="feature-icon">
                            <i class="lni lni-layers"></i>
                        </div>
                        <div class="feature-content">
                            <h5 class="heading-5 font-weight-500 mb-10">Included Business Pages</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-feature-wrapper">
                        <div class="feature-icon">
                            <i class="lni lni-laptop-phone"></i>
                        </div>
                        <div class="feature-content">
                            <h5 class="heading-5 font-weight-500 mb-10">Fully Responsive</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-feature-wrapper">
                        <div class="feature-icon">
                            <i class="lni lni-brush"></i>
                        </div>
                        <div class="feature-content">
                            <h5 class="heading-5 font-weight-500 mb-10">Completely Customizable</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-feature-wrapper">
                        <div class="feature-icon">
                            <i class="lni lni-rocket"></i>
                        </div>
                        <div class="feature-content">
                            <h5 class="heading-5 font-weight-500 mb-10">Fast and Well-optimized</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--====== Features Part Ends ======-->

    <!--====== Clients Logo Part Start ======-->
    <section class="clients-logo-section pt-70 pb-70">
        <div class="container">
            <div class="row client-logo-active">
                <div class="col-lg-3">
                    <div class="single-logo-wrapper">
                        <img src="assets/images/client-logo/uideck-logo.svg" alt="">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="single-logo-wrapper">
                        <img src="assets/images/client-logo/graygrids-logo.svg" alt="">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="single-logo-wrapper">
                        <img src="assets/images/client-logo/lineicons-logo.svg" alt="">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="single-logo-wrapper">
                        <img src="assets/images/client-logo/pagebulb-logo.svg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--====== Clients Logo Part Ends ======-->

    <!--====== Subscribe Part Start ======-->
    <section class="subscribe-section pt-70 pb-70 bg-primary-4">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="heading text-center">
                        <h1 class="heading-1 font-weight-700 text-white mb-10">Subscribe Newsletter</h1>
                        <p class="gray-3">Be the first to know when new products drop and get behind-the-scenes content
                            straight.</p>
                    </div>
                    <div class="subscribe-form">
                        <form action="#">
                            <div class="single-form form-default">
                                <label class="text-white-50">Enter your email address</label>
                                <div class="form-input">
                                    <input type="text" placeholder="user@email.com">
                                    <i class="mdi mdi-account"></i>
                                    <button class="main-btn primary-btn"><span class="mdi mdi-send"></span></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--====== Subscribe Part Ends ======-->

    <!--====== Footer Style 3 Part Start ======-->
    <section class="footer-style-3 pt-100 pb-100">
        <div class="container">
            <div class="footer-top">
                <div class="row justify-content-center">
                    <div class="col-lg-5 col-md-7 col-sm-10">
                        <div class="footer-logo text-center">
                            <a href="#">
                                <img src="assets/images/logo.svg" alt="">
                            </a>
                        </div>
                        <h5 class="heading-5 text-center mt-30">Follow Us</h5>
                        <ul class="footer-follow text-center">
                            <li><a href="javascript:void(0)"><i class="lni lni-facebook-filled"></i></a></li>
                            <li><a href="javascript:void(0)"><i class="lni lni-twitter-filled"></i></a></li>
                            <li><a href="javascript:void(0)"><i class="lni lni-linkedin-original"></i></a></li>
                            <li><a href="javascript:void(0)"><i class="lni lni-instagram-original"></i></a></li>
                            <li><a href="javascript:void(0)"><i class="lni lni-whatsapp"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
    
            <div class="footer-widget-wrapper text-center pt-20">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="footer-widget">
                            <h5 class="footer-title">PRODUCT</h5>
    
                            <ul class="footer-link">
                                <li><a href="javascript:void(0)">Quest</a></li>
                                <li><a href="javascript:void(0)">Rift S</a></li>
                                <li><a href="javascript:void(0)">Gear VR</a></li>
                                <li><a href="javascript:void(0)">Apps and Games</a></li>
                                <li><a href="javascript:void(0)">Apps and Games</a></li>
                                <li><a href="javascript:void(0)">Oculus for Business</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="footer-widget">
                            <h5 class="footer-title">DEVELOPERS</h5>
    
                            <ul class="footer-link">
                                <li><a href="javascript:void(0)">Developer Centre</a></li>
                                <li><a href="javascript:void(0)">Docs</a></li>
                                <li><a href="javascript:void(0)">Downloads</a></li>
                                <li><a href="javascript:void(0)">Tools</a></li>
                                <li><a href="javascript:void(0)">Developer Blog</a></li>
                                <li><a href="javascript:void(0)">Developer Forums</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="footer-widget">
                            <h5 class="footer-title">PRODUCT</h5>
    
                            <ul class="footer-link">
                                <li><a href="javascript:void(0)">Blog</a></li>
                                <li><a href="javascript:void(0)">Careers</a></li>
                                <li><a href="javascript:void(0)">Brand Centre</a></li>
                                <li><a href="javascript:void(0)">Connect</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="footer-widget">
                            <h5 class="footer-title">PRODUCT</h5>
    
                            <ul class="footer-link">
                                <li><a href="javascript:void(0)">VR for Good</a></li>
                                <li><a href="javascript:void(0)">Launch Pad</a></li>
                                <li><a href="javascript:void(0)">Creators Lab</a></li>
                                <li><a href="javascript:void(0)">Forums</a></li>
                                <li><a href="javascript:void(0)">Support</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="footer-copyright text-center">
                <p>With Love <a href="https://therichpost.com/" rel="nofollow" target="_blank">Jassa</a>.
                </p>
                </div>
        </div>
    </section>
    <!--====== Footer Style 3 Part Ends ======-->
</template>

<script>


export default {
 
  
}
</script>

5. Guys please add below code inside index.html file:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  
    <title>Vue eStore Template</title>
     <!--====== Favicon Icon ======-->
     <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">

     <!--====== Slick CSS ======-->
     <link rel="stylesheet" href="assets/css/slick.css">
 
     <!--====== Line Icons CSS ======-->
     <link rel="stylesheet" href="assets/css/LineIcons.css">
 
     <!--====== Material Design Icons CSS ======-->
     <link rel="stylesheet" href="assets/css/materialdesignicons.min.css">
 
     <!--====== Jquery Ui CSS ======-->
     <link rel="stylesheet" href="assets/css/jquery-ui.min.css">
 
     <!--====== nice select CSS ======-->
     <link rel="stylesheet" href="assets/css/nice-select.css">
 
     <!--====== Bootstrap CSS ======-->
     <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 
     <!--====== Default CSS ======-->
     <link rel="stylesheet" href="assets/css/default.css">
 
     <!--====== Style CSS ======-->
     <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
     <!--====== Bootstrap 5 js ======-->
     <script src="assets/js/popper.min.js"></script>
     <script src="assets/js/bootstrap.min.js"></script>
 
 
     <!--====== Jquery js ======-->
     <script src="assets/js/jquery-3.5.1.min.js"></script>
     <script src="assets/js/modernizr-3.7.1.min.js"></script>
 
     <!--====== Slick js ======-->
     <script src="assets/js/slick.min.js"></script>
 
     <!--====== Accordion Steps Form js ======-->
     <script src="assets/js/jquery-vj-accordion-steps.js"></script>
 
     <!--====== Jquery Ui js ======-->
     <script src="assets/js/jquery-ui.min.js"></script>
 
     <!--====== Form validator js ======-->
     <script src="assets/js/jquery.form-validator.min.js"></script>
 
     <!--====== nice select js ======-->
     <script src="assets/js/jquery.nice-select.min.js"></script>
 
     <!--====== formatter js ======-->
     <script src="assets/js/jquery.formatter.min.js"></script>
 
     <!--====== Main js ======-->
     <script src="assets/js/count-up.min.js"></script>
 
     <!--====== Main js ======-->
     <script src="assets/js/main.js"></script>
 
  </body>
</html>

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

April 8, 2024

How to Call Vue component inside React Micro Frontend using WebPack 5?
Integrating a Vue component into a React application, especially in a micro frontend architecture using WebPack 5, involves a few key steps. This process can help you leverage the strengths of both Vue and React in your project. Here’s a high-level overview of how you can achieve this integration:

1. Setup Your Micro Frontend Architecture

First, ensure your micro frontend architecture is properly set up. In a micro frontend setup, different parts of your application are developed, deployed, and operated independently. Webpack 5 Module Federation is a popular choice for this purpose as it allows for the seamless integration of various frameworks and libraries in a single application.

2. Create a Vue Component

Develop your Vue component as you normally would. Ensure it’s encapsulated and can run independently. For simplicity, let’s assume you have a simple Vue component named MyVueComponent.

3. Expose Your Vue Component as a Module

Use Webpack’s Module Federation plugin to expose your Vue component. This involves modifying the webpack.config.js file in your Vue application (or wherever your component lives) to add the ModuleFederationPlugin configuration.

Example:
```
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'vueApp',
      filename: 'remoteEntry.js',
      exposes: {
        './MyVueComponent': './src/components/MyVueComponent.vue',
      },
      shared: require('./package.json').dependencies,
    }),
  ],
};
```
4. Consume the Vue Component in Your React Application

In your React application, modify the webpack.config.js to add the Vue app as a remote:
```
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        vueApp: 'vueApp@http://localhost:3001/remoteEntry.js',
      },
      shared: require('./package.json').dependencies,
    }),
  ],
};
```
5. Dynamically Import the Vue Component

Use dynamic import() syntax in your React application to load the Vue component. You might need to use a library like @vue/reactivity or a custom wrapper to integrate the Vue component into your React component tree properly.

Example:
```
import React, { useEffect, useRef } from 'react';

const VueComponentWrapper = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    import('vueApp/MyVueComponent')
      .then((Component) => {
        // Use the Vue component
        // This might involve mounting the Vue component manually
        // and ensuring it's destroyed when the React component unmounts
      })
      .catch((err) => console.error('Error loading the Vue component', err));
  }, []);

  return <div ref={containerRef}></div>;
};

export default VueComponentWrapper;
```
6. Considerations for Integration
- Lifecycle Management: Make sure to properly handle the lifecycle of the Vue component within your React application. This includes mounting and unmounting the Vue component appropriately.
- State Management: If the Vue component needs to share state with the rest of your React application, consider using a global state management solution or custom events for communication.
This approach leverages Webpack 5’s Module Federation to integrate a Vue component into a React application within a micro frontend architecture. It requires a good understanding of both Vue and React ecosystems, as well as the configuration nuances of Webpack 5.
March 9, 2024

Create video chat application in Vuejs

Creating a simple video chat application using Vue.js involves several key steps, including setting up a Vue project, integrating a video chat API like WebRTC, and handling the UI and UX aspects. For this guide, we’ll focus on a basic implementation that allows two users to video chat with each other. We’ll use Vue.js for the frontend and assume you have some basic backend or use a service like Firebase or PeerJS to handle WebRTC signaling.

Step 1: Setting Up Your Vue.js Project

First, ensure you have Node.js and npm installed. Then, create a new Vue.js project:

npm install -g @vue/cli
vue create my-video-chat-app
cd my-video-chat-app
npm run serve

Step 2: Install PeerJS

PeerJS simplifies WebRTC peer-to-peer data, video, and audio calls. Install PeerJS in your project:

npm install peerjs

Step 3: Create the Video Chat Component

Create a new component for the video chat functionality in your Vue project. Under the src/components directory, create a file named VideoChat.vue.

<template>
  <div>
    <h2>Video Chat</h2>
    <video id="my-video" muted="true" autoplay playsinline></video>
    <video id="user-video" autoplay playsinline></video>
    <div>
      <button @click="startCall">Start Call</button>
    </div>
  </div>
</template>

<script>
import Peer from 'peerjs';

export default {
  data() {
    return {
      peer: null,
      myStream: null,
      myPeerId: '',
    };
  },
  mounted() {
    this.initializePeer();
  },
  methods: {
    async initializePeer() {
      this.peer = new Peer(undefined, {
        path: '/peerjs',
        host: '/', // This should be replaced with your signaling server
        port: '3001', // Make sure to use the port your signaling server is on
      });

      await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      }).then((stream) => {
        this.myStream = stream;
        this.addVideoStream('my-video', stream);
      });

      this.peer.on('call', (call) => {
        call.answer(this.myStream); // Answer the call with your stream.
        call.on('stream', (userVideoStream) => {
          this.addVideoStream('user-video', userVideoStream);
        });
      });
    },
    startCall() {
      const userPeerId = prompt("Enter the peer ID of the user you'd like to call:");
      const call = this.peer.call(userPeerId, this.myStream);
      call.on('stream', (userVideoStream) => {
        this.addVideoStream('user-video', userVideoStream);
      });
    },
    addVideoStream(videoElementId, stream) {
      const video = document.getElementById(videoElementId);
      video.srcObject = stream;
      video.addEventListener('loadedmetadata', () => {
        video.play();
      });
    },
  }
};
</script>

<style scoped>
video {
  width: 50%;
  border: 1px solid black;
}
</style>

Step 4: Use the Video Chat Component

Open your src/App.vue file and import the VideoChat component to include it in the template.

<template>
  <div id="app">
    <VideoChat/>
  </div>
</template>

<script>
import VideoChat from './components/VideoChat.vue'

export default {
  name: 'App',
  components: {
    VideoChat
  }
}
</script>

Step 5: Run Your Application

npm run serve

This guide provides a basic setup. Depending on your requirements, you might need to configure a signaling server for peer discovery and establish a connection (this example assumes a simple scenario). Explore the PeerJS documentation and Vue.js guides for more advanced features and customization options.

March 6, 2024

Veujs Vuex store management working
Vue.js and Vuex work together to manage state in Vue applications in a centralized and organized way, especially useful in complex applications. Vuex is a state management pattern and library for Vue.js applications, providing a centralized store for all the components in an application. Here’s a basic overview of how Vuex store management works:
1. State: The state is the central data repository that Vuex manages. It’s a single source of truth for your application’s data, accessible by all components.
2. Mutations: Mutations are synchronous functions that change the state. They are the only way to modify state in Vuex, ensuring that state changes are predictable and trackable. Mutations are committed, not called directly, signaling Vuex to perform the actual state update.
3. Actions: Actions are similar to mutations, but they are meant to handle asynchronous operations before committing mutations. An action can commit one or several mutations. Actions are dispatched, not called directly, allowing them to perform any asynchronous operation before committing to a mutation.
4. Getters: Getters are to Vuex what computed properties are to Vue components. They compute derived state based on the store’s state and can be used to perform operations like filtering a list or counting items before passing data to components.
5. Modules: For large applications, the store can be divided into modules. Each module can contain its own state, mutations, actions, getters, and even nested modules. This helps keep the store organized and manageable.
Basic Example

Here’s a simple Vuex store example:
```
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;
```
In this example:
- The state contains a single count property.
- A mutation is defined to increment the count.
- An action named increment is created to commit the increment mutation.
- A getter named doubleCount returns the count multiplied by two.
Using Vuex in Components

To use Vuex state and perform actions from a Vue component:
```
<template>
  <div>{{ doubleCount }}</div>
  <button @click="increment">Increment</button>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doubleCount' // maps this.doubleCount to this.$store.getters.doubleCount
    ])
  },
  methods: {
    ...mapActions([
      'increment' // maps this.increment() to this.$store.dispatch('increment')
    ])
  }
};
</script>
```
In this component, mapGetters is used to map store getters to local computed properties, and mapActions is used to map store actions to local methods. This allows the component to display the doubleCount value from the store and dispatch an action to increment the count when a button is clicked.
March 2, 2024

Vuejs Free Mega Shop Ecommerce Template

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Vuejs Free Mega Shop Ecommerce Template.

Live working demo

Vue 3 came and if you are new then you must check below link:
Vuejs Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can skip this first step if you already have vuejs fresh setup:

npm init vue@latest

2. Guys after run command please select things according to your project:

 Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

3. Guys now run below command to install node modules and run the project:

cd <your-project-name>

npm install

npm run dev

4. Now guys please download zip(in this zip file there are js, css and images for ecommercetemplate) file from below path and extract zip inside src/assets folder and get all the folders:

Git Repo Link

5. In the end please add below code inside scr/App.vue file:

<template>
<header class="header-area header-padding-1 sticky-bar header-res-padding clearfix">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-2 col-lg-2 col-md-6 col-4">
                <div class="logo">
                    <a href="#">
                        <img alt="" src="assets/img/logo/logo.webp">
                    </a>
                </div>
            </div>
            <div class="col-xl-8 col-lg-8 d-none d-lg-block">
                <div class="main-menu">
                    <nav>
                        <ul>
                            <li><a href="#">Home <i class="fa fa-angle-down"></i></a>
                                <ul class="mega-menu mega-menu-padding">
                                    <li>
                                        <ul>
                                            <li class="mega-menu-title"><a href="#">Demo Group 01</a></li>
                                            <li><a href="#">Home 1 – Fashion</a></li>
                                            <li><a href="#">Home 2 – Fashion</a></li>
                                            <li><a href="#">Home 3 – Fashion</a></li>
                                            <li><a href="#">Home 4 – Fashion</a></li>
                                            <li><a href="#">Home 5 – Fashion</a></li>
                                            <li><a href="#">Home 6 – Fashion</a></li>
                                            <li><a href="#">Home 7 – Fashion</a></li>
                                            <li><a href="#">Home 8 – Minimal</a></li>
                                            <li><a href="#">Home 9 – Electronics</a></li>
                                            <li><a href="#">Home 10 – Furniture</a></li>
                                            <li><a href="#">Home 11 - showcase slider</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <ul>
                                            <li class="mega-menu-title"><a href="#">Demo Group 02</a></li>
                                            <li><a href="#">Home 12 – Plants</a></li>
                                            <li><a href="#">Home 13 – Cosmetic</a></li>
                                            <li><a href="#">Home 14 – Christmas</a></li>
                                            <li><a href="#">Home 15 – Fruit</a></li>
                                            <li><a href="#">Home 16 –  Black Friday</a></li>
                                            <li><a href="#">Home 17 – Flower</a></li>
                                            <li><a href="#">Home 18 – Book</a></li>
                                            <li><a href="#">Home 19 – Fashion</a></li>
                                            <li><a href="#">Home 20 – Electronics</a></li>
                                            <li><a href="#">Home 21 – Furniture</a></li>
                                            <li><a href="#">Home 22 – Handmade</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <ul>
                                            <li class="mega-menu-title"><a href="#">Demo Group 03</a></li>
                                            <li><a href="#">Home 23 – Organic</a></li>
                                            <li><a href="#">Home 24 – Pet Food</a></li>
                                            <li><a href="#">Home 25 – Auto Parts</a></li>
                                            <li><a href="#">Home 26 – Cake Shop</a></li>
                                            <li><a href="#">Home 27 – Kids Fashion</a></li>
                                            <li><a href="#">Home 28 – Book Shop</a></li>
                                            <li><a href="#">Home 29 – Flower Shop</a></li>
                                            <li><a href="#">Home 30 – Instagram</a></li>
                                            <li><a href="#">Home 31 – Black Friday</a></li>
                                            <li><a href="#">Home 32 – Valentine Day</a></li>
                                            <li><a href="#">Home 33 – Medical Equipment</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#"> Shop <i class="fa fa-angle-down"></i> </a>
                                <ul class="mega-menu">
                                    <li>
                                        <ul>
                                            <li class="mega-menu-title"><a href="#">shop layout</a></li>
                                            <li><a href="#">standard style</a></li>
                                            <li><a href="#">Grid filter style</a></li>
                                            <li><a href="#">Grid 2 column</a></li>
                                            <li><a href="#">Grid No sidebar</a></li>
                                            <li><a href="#">Grid full wide </a></li>
                                            <li><a href="#">Grid right sidebar</a></li>
                                            <li><a href="#">list 1 column box </a></li>
                                            <li><a href="#">list 1 column full wide </a></li>
                                            <li><a href="#">list 2 column  full wide</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <ul>
                                            <li class="mega-menu-title"><a href="#">product details</a></li>
                                            <li><a href="#">tab style 1</a></li>
                                            <li><a href="#">tab style 2</a></li>
                                            <li><a href="#">tab style 3</a></li>
                                            <li><a href="#">sticky style</a></li>
                                            <li><a href="#">gallery style </a></li>
                                            <li><a href="#">Slider style</a></li>
                                            <li><a href="#">affiliate style</a></li>
                                            <li><a href="#">fixed image style </a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <ul>
                                            <li class="mega-menu-img"><a href="#"><img src="assets/img/banner/banner-12.webp" alt=""></a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Collection</a></li>
                            <li><a href="#"> Pages <i class="fa fa-angle-down"></i></a>
                                <ul class="submenu">
                                    <li><a href="#">about us</a></li>
                                    <li><a href="#">cart page</a></li>
                                    <li><a href="#">checkout </a></li>
                                    <li><a href="#">wishlist </a></li>
                                    <li><a href="#">my account</a></li>
                                    <li><a href="#">login / register </a></li>
                                    <li><a href="#">contact us </a></li>
                                    <li><a href="#">404 page </a></li>
                                </ul>
                            </li>
                            <li><a href="#">Blog <i class="fa fa-angle-down"></i></a>
                                <ul class="submenu">
                                    <li><a href="#">blog standard</a></li>
                                    <li><a href="#">blog no sidebar</a></li>
                                    <li><a href="#">blog right sidebar</a></li>
                                    <li><a href="#">blog details 1</a></li>
                                    <li><a href="#">blog details 2</a></li>
                                    <li><a href="#">blog details 3</a></li>
                                </ul>
                            </li>
                            <li><a href="#"> About </a></li>
                            <li><a href="#"> Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="col-xl-2 col-lg-2 col-md-6 col-8">
                   <div class="header-right-wrap">
                    <div class="same-style header-search">
                        <a class="search-active" href="#"><i class="pe-7s-search"></i></a>
                        <div class="search-content">
                            <form action="#">
                                <input type="text" placeholder="Search" />
                                <button class="button-search"><i class="pe-7s-search"></i></button>
                            </form>
                        </div> 
                    </div>
                    <div class="same-style account-satting">
                        <a class="account-satting-active" href="#"><i class="pe-7s-user-female"></i></a>
                        <div class="account-dropdown">
                            <ul>
                                <li><a href="#">Login</a></li>
                                <li><a href="#">Register</a></li>
                                <li><a href="#">Wishlist  </a></li>
                                <li><a href="#">my account</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="same-style header-wishlist">
                        <a href="#"><i class="pe-7s-like"></i></a>
                    </div>
                    <div class="same-style cart-wrap">
                        <button class="icon-cart">
                            <i class="pe-7s-shopbag"></i>
                            <span class="count-style">02</span>
                        </button>
                        <div class="shopping-cart-content">
                            <ul>
                                <li class="single-shopping-cart">
                                    <div class="shopping-cart-img">
                                        <a href="#"><img alt="" src="assets/img/cart/cart-1.webp"></a>
                                    </div>
                                    <div class="shopping-cart-title">
                                        <h4><a href="#">T- Shart & Jeans </a></h4>
                                        <h6>Qty: 02</h6>
                                        <span>$260.00</span>
                                    </div>
                                    <div class="shopping-cart-delete">
                                        <a href="#"><i class="fa fa-times-circle"></i></a>
                                    </div>
                                </li>
                                <li class="single-shopping-cart">
                                    <div class="shopping-cart-img">
                                        <a href="#"><img alt="" src="assets/img/cart/cart-2.webp"></a>
                                    </div>
                                    <div class="shopping-cart-title">
                                        <h4><a href="#">T- Shart & Jeans </a></h4>
                                        <h6>Qty: 02</h6>
                                        <span>$260.00</span>
                                    </div>
                                    <div class="shopping-cart-delete">
                                        <a href="#"><i class="fa fa-times-circle"></i></a>
                                    </div>
                                </li>
                            </ul>
                            <div class="shopping-cart-total">
                                <h4>Shipping : <span>$20.00</span></h4>
                                <h4>Total : <span class="shop-total">$260.00</span></h4>
                            </div>
                            <div class="shopping-cart-btn btn-hover text-center">
                                <a class="default-btn" href="#">view cart</a>
                                <a class="default-btn" href="#">checkout</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mobile-menu-area">
            <div class="mobile-menu">
                <nav id="mobile-menu-active">
                    <ul class="menu-overflow">
                        <li><a href="#">HOME</a>
                            <ul>
                                <li><a href="#">Demo Group 01</a>
                                    <ul>
                                        <li><a href="#">Home 1 – Fashion</a></li>
                                        <li><a href="#">Home 2 – Fashion</a></li>
                                        <li><a href="#">Home 3 – Fashion</a></li>
                                        <li><a href="#">Home 4 – Fashion</a></li>
                                        <li><a href="#">Home 5 – Fashion</a></li>
                                        <li><a href="#">Home 6 – Fashion</a></li>
                                        <li><a href="#">Home 7 – Fashion</a></li>
                                        <li><a href="#">Home 8 – Minimal</a></li>
                                        <li><a href="#">Home 9 – Electronics</a></li>
                                        <li><a href="#">Home 10 – Furniture</a></li>
                                        <li><a href="#">Home 11 - showcase slider</a></li>
                                    </ul>
                                </li>
                               
                               
                            </ul>
                        </li>
                        <li><a href="#">Shop</a>
                            <ul>
                                <li><a href="#">shop layout</a>
                                    <ul>
                                        <li><a href="#">standard style</a></li>
                                        <li><a href="#">Grid filter style</a></li>
                                        <li><a href="#">Grid 2 column</a></li>
                                        <li><a href="#">Grid No sidebar</a></li>
                                        <li><a href="#">Grid full wide </a></li>
                                        <li><a href="#">Grid right sidebar</a></li>
                                        <li><a href="#">list 1 column box </a></li>
                                        <li><a href="#">list 1 column full wide </a></li>
                                        <li><a href="#">list 2 column  full wide</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">product details</a>
                                    <ul>
                                        <li><a href="#">tab style 1</a></li>
                                        <li><a href="#">tab style 2</a></li>
                                        <li><a href="#">tab style 3</a></li>
                                        <li><a href="#">sticky style</a></li>
                                        <li><a href="#">gallery style </a></li>
                                        <li><a href="#">Slider style</a></li>
                                        <li><a href="#">affiliate style</a></li>
                                        <li><a href="#">fixed image style </a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Collection</a></li>
                        <li><a href="#">Pages</a>
                            <ul>
                                <li><a href="#">about us</a></li>
                                <li><a href="#">cart page</a></li>
                                <li><a href="#">checkout </a></li>
                                <li><a href="#">wishlist </a></li>
                                <li><a href="#">my account</a></li>
                                <li><a href="#">login / register </a></li>
                                <li><a href="#">contact us </a></li>
                                <li><a href="#">404 page </a></li>
                            </ul>
                        </li>
                        <li><a href="#">Blog</a>
                            <ul>
                                <li><a href="#">blog standard</a></li>
                                <li><a href="#">blog no sidebar</a></li>
                                <li><a href="#">blog right sidebar</a></li>
                                <li><a href="#">blog details 1</a></li>
                                <li><a href="#l">blog details 2</a></li>
                                <li><a href="#">blog details 3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>
<div class="slider-area">
    <div class="slider-active owl-carousel nav-style-1 owl-dot-none">
        <div class="single-slider slider-height-1 bg-purple">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
                        <div class="slider-content slider-animated-1">
                            <h3 class="animated">Smart Products</h3>
                            <h1 class="animated">Summer Offer <br>2024 Collection</h1>
                            <div class="slider-btn btn-hover">
                                <a class="animated" href="#">SHOP NOW</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
                        <div class="slider-single-img slider-animated-1">
                            <img class="animated" src="assets/img/slider/single-slide-1.webp" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="single-slider slider-height-1 bg-purple">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
                        <div class="slider-content slider-animated-1">
                            <h3 class="animated">Smart Products</h3>
                            <h1 class="animated">Summer Offer <br>2024 Collection</h1>
                            <div class="slider-btn btn-hover">
                                <a class="animated" href="#">SHOP NOW</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
                        <div class="slider-single-img slider-animated-1">
                            <img class="animated" src="assets/img/slider/single-slide-hm1-2.webp" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="suppoer-area pt-100 pb-60">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="support-wrap mb-30 support-1">
                    <div class="support-icon">
                        <img class="animated" src="assets/img/icon-img/support-1.webp" alt="">
                    </div>
                    <div class="support-content">
                        <h5>Free Shipping</h5>
                        <p>Free shipping on all order</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="support-wrap mb-30 support-2">
                    <div class="support-icon">
                        <img class="animated" src="assets/img/icon-img/support-2.webp" alt="">
                    </div>
                    <div class="support-content">
                        <h5>Support 24/7</h5>
                        <p>Free shipping on all order</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="support-wrap mb-30 support-3">
                    <div class="support-icon">
                        <img class="animated" src="assets/img/icon-img/support-3.webp" alt="">
                    </div>
                    <div class="support-content">
                        <h5>Money Return</h5>
                        <p>Free shipping on all order</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="support-wrap mb-30 support-4">
                    <div class="support-icon">
                        <img class="animated" src="assets/img/icon-img/support-4.webp" alt="">
                    </div>
                    <div class="support-content">
                        <h5>Order Discount</h5>
                        <p>Free shipping on all order</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="product-area pb-60">
    <div class="container">
        <div class="section-title text-center">
            <h2>DAILY DEALS!</h2>
        </div>
        <div class="product-tab-list nav pt-30 pb-55 text-center">
            <a href="#product-1" data-bs-toggle="tab" >
                <h4>New Arrivals  </h4>
            </a>
            <a class="active" href="#product-2" data-bs-toggle="tab">
                <h4>Best Sellers </h4>
            </a>
            <a href="#product-3" data-bs-toggle="tab">
                <h4>Sale Items</h4>
            </a>
        </div>
        <div class="tab-content jump">
            <div class="tab-pane" id="product-1">
                <div class="row">
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-8.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-6.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Crew Ventile Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-7.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-4-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Trench Winter Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-6.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-6-1.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Winter Overcoat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-5.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-5-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Nice Black Dress</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-4.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-4-1.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Trench Winter Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-3.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-3-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Winter Zipper </a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-2.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-2-1.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Trench Winter Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-1.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-1-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Winter Zipper </a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane active" id="product-2">
                <div class="row">
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-1.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-1-1.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Winter Zipper </a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-2.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-2-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Trench Winter Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-3.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-3-1.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Winter Zipper </a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-4.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-4-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Trench Winter Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-5.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-5-1.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Nice Black Dress</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-6.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-6-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Winter Overcoat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-7.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-4-1.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Trench Winter Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-8.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-6.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Crew Ventile Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="product-3">
                <div class="row">
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-6.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-6-1.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Winter Overcoat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-5.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-5-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Nice Black Dress</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-4.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-4-1.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Trench Winter Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-3.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-3-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Winter Zipper </a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-2.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-2-1.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Trench Winter Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-1.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-1-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Winter Zipper </a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-8.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-6.webp" alt="">
                                </a>
                                <span class="pink">-10%</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Crew Ventile Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                    <span class="old">$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
                        <div class="product-wrap mb-25">
                            <div class="product-img">
                                <a href="#">
                                    <img class="default-img" src="assets/img/product/pro-7.webp" alt="">
                                    <img class="hover-img" src="assets/img/product/pro-4-1.webp" alt="">
                                </a>
                                <span class="purple">New</span>
                                <div class="product-action">
                                    <div class="pro-same-action pro-wishlist">
                                        <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                    </div>
                                    <div class="pro-same-action pro-cart">
                                        <a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
                                    </div>
                                    <div class="pro-same-action pro-quickview">
                                        <a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3><a href="#">Trench Winter Coat</a></h3>
                                <div class="product-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <div class="product-price">
                                    <span>$ 60.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="blog-area pb-55">
    <div class="container">
        <div class="section-title text-center mb-55">
            <h2>OUR BLOG</h2>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="blog-wrap mb-30 scroll-zoom">
                    <div class="blog-img">
                        <a href="#"><img src="assets/img/blog/blog-1.webp" alt=""></a>
                        <span class="purple">Lifestyle</span>
                    </div>
                    <div class="blog-content-wrap">
                        <div class="blog-content text-center">
                            <h3><a href="#">Lorem ipsum dolor sit <br> amet consec.</a></h3>
                            <span>By Shop <a href="#">Admin</a></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="blog-wrap mb-30 scroll-zoom">
                    <div class="blog-img">
                        <a href="#"><img src="assets/img/blog/blog-2.webp" alt=""></a>
                        <span class="pink">Lifestyle</span>
                    </div>
                    <div class="blog-content-wrap">
                        <div class="blog-content text-center">
                            <h3><a href="#">Lorem ipsum dolor sit <br> amet consec.</a></h3>
                            <span>By Shop <a href="#">Admin</a></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="blog-wrap mb-30 scroll-zoom">
                    <div class="blog-img">
                        <a href="#"><img src="assets/img/blog/blog-3.webp" alt=""></a>
                        <span class="purple">Lifestyle</span>
                    </div>
                    <div class="blog-content-wrap">
                        <div class="blog-content text-center">
                            <h3><a href="#">Lorem ipsum dolor sit <br> amet consec.</a></h3>
                            <span>By Shop <a href="#">Admin</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer-area bg-gray pt-100 pb-70">
    <div class="container">
        <div class="row">
            <div class="col-lg-2 col-md-4 col-sm-4">
                <div class="copyright mb-30">
                    <div class="footer-logo">
                        <a href="#">
                            <img alt="" src="assets/img/logo/logo.webp">
                        </a>
                    </div>
                    <p>© 2024 <a href="#">Jassa</a>.<br> All Rights Reserved</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-4">
                <div class="footer-widget mb-30 ml-30">
                    <div class="footer-title">
                        <h3>ABOUT US</h3>
                    </div>
                    <div class="footer-list">
                        <ul>
                            <li><a href="#">About us</a></li>
                            <li><a href="#">Store location</a></li>
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">Orders tracking</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-4">
                <div class="footer-widget mb-30 ml-50">
                    <div class="footer-title">
                        <h3>USEFUL LINKS</h3>
                    </div>
                    <div class="footer-list">
                        <ul>
                            <li><a href="#">Returns</a></li>
                            <li><a href="#">Support Policy</a></li>
                            <li><a href="#">Size guide</a></li>
                            <li><a href="#">FAQs</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-6">
                <div class="footer-widget mb-30 ml-75">
                    <div class="footer-title">
                        <h3>FOLLOW US</h3>
                    </div>
                    <div class="footer-list">
                        <ul>
                            <li><a href="#">Facebook</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Instagram</a></li>
                            <li><a href="#">Youtube</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="footer-widget mb-30 ml-70">
                    <div class="footer-title">
                        <h3>SUBSCRIBE</h3>
                    </div>
                    <div class="subscribe-style">
                        <p>Get E-mail updates about our latest shop and special offers.</p>
                        <div id="mc_embed_signup" class="subscribe-form">
                            <form id="mc-embedded-subscribe-form" class="validate" novalidate="" target="_blank" name="mc-embedded-subscribe-form" method="post" action="#">
                                <div id="mc_embed_signup_scroll" class="mc-form">
                                    <input class="email" type="email" required="" placeholder="Enter your email here.." name="EMAIL" value="">
                                    <div class="mc-news" aria-hidden="true">
                                        <input type="text" value="" tabindex="-1" name="b_6bbb9b6f5827bd842d9640c82_05d85f18ef">
                                    </div>
                                    <div class="clear">
                                        <input id="mc-embedded-subscribe" class="button" type="submit" name="subscribe" value="Subscribe">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-5 col-sm-12 col-xs-12">
                        <div class="tab-content quickview-big-img">
                            <div id="pro-1" class="tab-pane fade show active">
                                <img src="assets/img/product/quickview-l1.webp" alt="">
                            </div>
                            <div id="pro-2" class="tab-pane fade">
                                <img src="assets/img/product/quickview-l2.webp" alt="">
                            </div>
                            <div id="pro-3" class="tab-pane fade">
                                <img src="assets/img/product/quickview-l3.webp" alt="">
                            </div>
                            <div id="pro-4" class="tab-pane fade">
                                <img src="assets/img/product/quickview-l2.webp" alt="">
                            </div>
                        </div>
                        <!-- Thumbnail Large Image End -->
                        <!-- Thumbnail Image End -->
                        <div class="quickview-wrap mt-15">
                            <div class="quickview-slide-active owl-carousel nav nav-style-1" role="tablist">
                                <a class="active" data-bs-toggle="tab" href="#pro-1"><img src="assets/img/product/quickview-s1.webp" alt=""></a>
                                <a data-bs-toggle="tab" href="#pro-2"><img src="assets/img/product/quickview-s2.webp" alt=""></a>
                                <a data-bs-toggle="tab" href="#pro-3"><img src="assets/img/product/quickview-s3.webp" alt=""></a>
                                <a data-bs-toggle="tab" href="#pro-4"><img src="assets/img/product/quickview-s2.webp" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 col-sm-12 col-xs-12">
                        <div class="product-details-content quickview-content">
                            <h2>Products Name Here</h2>
                            <div class="product-details-price">
                                <span>$18.00 </span>
                                <span class="old">$20.00 </span>
                            </div>
                            <div class="pro-details-rating-wrap">
                                <div class="pro-details-rating">
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o yellow"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <span>3 Reviews</span>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisic elit eiusm tempor incidid ut labore et dolore magna aliqua. Ut enim ad minim venialo quis nostrud exercitation ullamco</p>
                            <div class="pro-details-list">
                                <ul>
                                    <li>- 0.5 mm Dail</li>
                                    <li>- Inspired vector icons</li>
                                    <li>- Very modern style  </li>
                                </ul>
                            </div>
                            <div class="pro-details-size-color">
                                <div class="pro-details-color-wrap">
                                    <span>Color</span>
                                    <div class="pro-details-color-content">
                                        <ul>
                                            <li class="blue"></li>
                                            <li class="maroon active"></li>
                                            <li class="gray"></li>
                                            <li class="green"></li>
                                            <li class="yellow"></li>
                                            <li class="white"></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="pro-details-size">
                                    <span>Size</span>
                                    <div class="pro-details-size-content">
                                        <ul>
                                            <li><a href="#">s</a></li>
                                            <li><a href="#">m</a></li>
                                            <li><a href="#">l</a></li>
                                            <li><a href="#">xl</a></li>
                                            <li><a href="#">xxl</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="pro-details-quality">
                                <div class="cart-plus-minus">
                                    <input class="cart-plus-minus-box" type="text" name="qtybutton" value="2">
                                </div>
                                <div class="pro-details-cart btn-hover">
                                    <a href="#">Add To Cart</a>
                                </div>
                                <div class="pro-details-wishlist">
                                    <a href="#"><i class="fa fa-heart-o"></i></a>
                                </div>
                                <div class="pro-details-compare">
                                    <a href="#"><i class="pe-7s-shuffle"></i></a>
                                </div>
                            </div>
                            <div class="pro-details-meta">
                                <span>Categories :</span>
                                <ul>
                                    <li><a href="#">Minimal,</a></li>
                                    <li><a href="#">Furniture,</a></li>
                                    <li><a href="#">Fashion</a></li>
                                </ul>
                            </div>
                            <div class="pro-details-meta">
                                <span>Tag :</span>
                                <ul>
                                    <li><a href="#">Fashion, </a></li>
                                    <li><a href="#">Furniture,</a></li>
                                    <li><a href="#">Electronic</a></li>
                                </ul>
                            </div>
                            <div class="pro-details-social">
                                <ul>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                    <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal end -->
</template>

6. Guys please add below code inside index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="author" content="Oluwafemi Olukoya">
    <meta name="description"
        content="Are you looking for new clothes to wear in the summer season? Buy-it online store has got you covered. We sell the best quality products for an affordable price that fits your budget.">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <!-- <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/assets/css/all.css" /> -->

    <title>Jassa - Minimal eCommerce HTML Template</title>
    
  
    <!-- Favicon -->
  <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
    
  <!-- CSS
============================================ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" />
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <!-- Icon Font CSS -->
  <link rel="stylesheet" href="assets/css/icons.min.css">
  <!-- Plugins CSS -->
  <link rel="stylesheet" href="assets/css/plugins.css">
  <!-- Main Style CSS -->
  <link rel="stylesheet" href="assets/css/style.css">
  </head>

<body>
    <noscript>
        <strong>
            We're sorry but Buy-It Online Store - Online Fashion Store doesn't
            work properly without JavaScript enabled. Please enable it to
            continue.
        </strong>
    </noscript>
    <div id="app"></div>
     <!-- All JS is here
============================================ -->
<script src="assets/js/modernizr-3.11.7.min.js"></script>
<script src="assets/js/jquery-v3.6.0.min.js"></script>
<script src="assets/js/jquery-migrate-v3.3.2.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<!-- Main JS -->
<script src="assets/js/main.js"></script>
</body>

</html>

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

February 8, 2024

Falcon – Free Vuejs Admin Dashboard & WebApp Template

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Falcon – Free Vuejs Admin Dashboard & WebApp Template

Key Features

Built on Bootstrap 5
Vuejs | Vue 3
CSS3 & HTML5
Clean & minimal design
Cross-browser tested & optimized
Full-width layouts
No jQuery dependencies
Gulp based workflow
Opinionated code formatter Prettier for a consistent codebase
Modular markup based on Cards & Utility classes
Interactive and functional components and pages
FontAwesome 5
Functional ChartJS, Echarts & Leaflet MapsPhoenix – Admin Dashboard & WebApp Template
W3C validated HTML pages

Live working demo

Vue 3 came and if you are new then you must check below link:
Vuejs Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can skip this first step if you already have vuejs fresh setup:

npm init vue@latest

2. Guys after run command please select things according to your project:

 Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

3. Guys now run below command to install node modules and run the project:

cd <your-project-name>

npm install

npm run dev

3. Now guys please download zip(in this zip file there are js, css and images for admintemplate) file from below path and extract zip and get all the folders. Then create assets folder on project root and paste all the folders inside that:

Github Link

4. Now guys add below code inside project/src/App.vue file:

<template>
<!-- ===============================================--><!--    Main Content--><!-- ===============================================-->
    <main class="main" id="top">
      <div class="container-fluid" data-layout="container">
        <nav class="navbar navbar-light navbar-glass navbar-top navbar-expand-lg" data-double-top-nav="data-double-top-nav" style="display: none;">
          <div class="w-100">
            <div class="d-flex flex-between-center">
              <button class="btn navbar-toggler-humburger-icon navbar-toggler me-1 me-sm-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDoubleTop" aria-controls="navbarDoubleTop" aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggle-icon"><span class="toggle-line"></span></span></button>
              <a class="navbar-brand me-1 me-sm-3" href="#">
                <div class="d-flex align-items-center"><img class="me-2" src="assets/images/falcon.png" alt="" width="40" /><span class="font-sans-serif text-primary">falcon</span></div>
              </a>
              <ul class="navbar-nav align-items-center d-none d-lg-block">
                <li class="nav-item">
                  <div class="search-box" data-list='{"valueNames":["title"]}'>
                    <form class="position-relative" data-bs-toggle="search" data-bs-display="static"><input class="form-control search-input fuzzy-search" type="search" placeholder="Search..." aria-label="Search" />
                      <span class="fas fa-search search-box-icon"></span>
                    </form>
                    <div class="btn-close-falcon-container position-absolute end-0 top-50 translate-middle shadow-none" data-bs-dismiss="search"><button class="btn btn-link btn-close-falcon p-0" aria-label="Close"></button></div>
                    <div class="dropdown-menu border font-base start-0 mt-2 py-0 overflow-hidden w-100">
                      <div class="scrollbar list py-3" style="max-height: 24rem;">
                        <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Recently Browsed</h6><a class="dropdown-item fs-10 px-x1 py-1 hover-primary" href="app/events/event-detail#">
                          <div class="d-flex align-items-center">
                            <span class="fas fa-circle me-2 text-300 fs-11"></span>
                            <div class="fw-normal title">Pages <span class="fas fa-chevron-right mx-1 text-500 fs-11" data-fa-transform="shrink-2"></span> Events</div>
                          </div>
                        </a>
                        <a class="dropdown-item fs-10 px-x1 py-1 hover-primary" href="app/e-commerce/customers#">
                          <div class="d-flex align-items-center">
                            <span class="fas fa-circle me-2 text-300 fs-11"></span>
                            <div class="fw-normal title">E-commerce <span class="fas fa-chevron-right mx-1 text-500 fs-11" data-fa-transform="shrink-2"></span> Customers</div>
                          </div>
                        </a>
                        <hr class="text-200 dark__text-900" />
                        <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Suggested Filter</h6><a class="dropdown-item px-x1 py-1 fs-9" href="app/e-commerce/customers#">
                          <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-subtle-warning">customers:</span>
                            <div class="flex-1 fs-10 title">All customers list</div>
                          </div>
                        </a>
                        <a class="dropdown-item px-x1 py-1 fs-9" href="app/events/event-detail#">
                          <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-subtle-success">events:</span>
                            <div class="flex-1 fs-10 title">Latest events in current month</div>
                          </div>
                        </a>
                        <a class="dropdown-item px-x1 py-1 fs-9" href="app/e-commerce/product/product-grid#">
                          <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-subtle-info">products:</span>
                            <div class="flex-1 fs-10 title">Most popular products</div>
                          </div>
                        </a>
                        <hr class="text-200 dark__text-900" />
                        <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Files</h6><a class="dropdown-item px-x1 py-2" href="#!">
                          <div class="d-flex align-items-center">
                            <div class="file-thumbnail me-2"><img class="border h-100 w-100 object-fit-cover rounded-3" src="assets/images/3-thumb.png" alt="" /></div>
                            <div class="flex-1">
                              <h6 class="mb-0 title">iPhone</h6>
                              <p class="fs-11 mb-0 d-flex"><span class="fw-semi-bold">Antony</span><span class="fw-medium text-600 ms-2">27 Sep at 10:30 AM</span></p>
                            </div>
                          </div>
                        </a>
                        <a class="dropdown-item px-x1 py-2" href="#!">
                          <div class="d-flex align-items-center">
                            <div class="file-thumbnail me-2"><img class="img-fluid" src="assets/images/zip.png" alt="" /></div>
                            <div class="flex-1">
                              <h6 class="mb-0 title">Falcon v1.8.2</h6>
                              <p class="fs-11 mb-0 d-flex"><span class="fw-semi-bold">John</span><span class="fw-medium text-600 ms-2">30 Sep at 12:30 PM</span></p>
                            </div>
                          </div>
                        </a>
                        <hr class="text-200 dark__text-900" />
                        <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Members</h6><a class="dropdown-item px-x1 py-2" href="pages/user/profile#">
                          <div class="d-flex align-items-center">
                            <div class="avatar avatar-l status-online me-2">
                              <img class="rounded-circle" src="assets/images/1.jpg" alt="" />
                            </div>
                            <div class="flex-1">
                              <h6 class="mb-0 title">Anna Karinina</h6>
                              <p class="fs-11 mb-0 d-flex">Technext Limited</p>
                            </div>
                          </div>
                        </a>
                        <a class="dropdown-item px-x1 py-2" href="pages/user/profile#">
                          <div class="d-flex align-items-center">
                            <div class="avatar avatar-l me-2">
                              <img class="rounded-circle" src="assets/images/2.jpg" alt="" />
                            </div>
                            <div class="flex-1">
                              <h6 class="mb-0 title">Antony Hopkins</h6>
                              <p class="fs-11 mb-0 d-flex">Brain Trust</p>
                            </div>
                          </div>
                        </a>
                        <a class="dropdown-item px-x1 py-2" href="pages/user/profile#">
                          <div class="d-flex align-items-center">
                            <div class="avatar avatar-l me-2">
                              <img class="rounded-circle" src="assets/images/3.jpg" alt="" />
                            </div>
                            <div class="flex-1">
                              <h6 class="mb-0 title">Emma Watson</h6>
                              <p class="fs-11 mb-0 d-flex">Google</p>
                            </div>
                          </div>
                        </a>
                      </div>
                      <div class="text-center mt-n3">
                        <p class="fallback fw-bold fs-8 d-none">No Result Found.</p>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
              <ul class="navbar-nav navbar-nav-icons ms-auto flex-row align-items-center">
                <li class="nav-item ps-2 pe-0">
                  <div class="dropdown theme-control-dropdown"><a class="nav-link d-flex align-items-center dropdown-toggle fa-icon-wait fs-9 pe-1 py-0" href="#" role="button" id="themeSwitchDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-sun fs-7" data-fa-transform="shrink-2" data-theme-dropdown-toggle-icon="light"></span><span class="fas fa-moon fs-7" data-fa-transform="shrink-3" data-theme-dropdown-toggle-icon="dark"></span><span class="fas fa-adjust fs-7" data-fa-transform="shrink-2" data-theme-dropdown-toggle-icon="auto"></span></a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-caret border py-0 mt-3" aria-labelledby="themeSwitchDropdown">
                      <div class="bg-white dark__bg-1000 rounded-2 py-2"><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="light" data-theme-control="theme"><span class="fas fa-sun"></span>Light<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="dark" data-theme-control="theme"><span class="fas fa-moon" data-fa-transform=""></span>Dark<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="auto" data-theme-control="theme"><span class="fas fa-adjust" data-fa-transform=""></span>Auto<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button></div>
                    </div>
                  </div>
                </li>
                <li class="nav-item d-none d-sm-block">
                  <a class="nav-link px-0 notification-indicator notification-indicator-warning notification-indicator-fill fa-icon-wait" href="app/e-commerce/shopping-cart#"><span class="fas fa-shopping-cart" data-fa-transform="shrink-7" style="font-size: 33px;"></span><span class="notification-indicator-number">1</span></a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link notification-indicator notification-indicator-primary px-0 fa-icon-wait" id="navbarDropdownNotification" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-hide-on-body-scroll="data-hide-on-body-scroll"><span class="fas fa-bell" data-fa-transform="shrink-6" style="font-size: 33px;"></span></a>
                  <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end dropdown-menu-card dropdown-menu-notification dropdown-caret-bg" aria-labelledby="navbarDropdownNotification">
                    <div class="card card-notification shadow-none">
                      <div class="card-header">
                        <div class="row justify-content-between align-items-center">
                          <div class="col-auto">
                            <h6 class="card-header-title mb-0">Notifications</h6>
                          </div>
                          <div class="col-auto ps-0 ps-sm-3"><a class="card-link fw-normal" href="#">Mark all as read</a></div>
                        </div>
                      </div>
                      <div class="scrollbar-overlay" style="max-height:19rem">
                        <div class="list-group list-group-flush fw-normal fs-10">
                          <div class="list-group-title border-bottom">NEW</div>
                          <div class="list-group-item">
                            <a class="notification notification-flush notification-unread" href="#!">
                              <div class="notification-avatar">
                                <div class="avatar avatar-2xl me-3">
                                  <img class="rounded-circle" src="assets/images/1-thumb.png" alt="" />
                                </div>
                              </div>
                              <div class="notification-body">
                                <p class="mb-1"><strong>Emma Watson</strong> replied to your comment : "Hello world ????"</p>
                                <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????</span>Just now</span>
                              </div>
                            </a>
                          </div>
                          <div class="list-group-item">
                            <a class="notification notification-flush notification-unread" href="#!">
                              <div class="notification-avatar">
                                <div class="avatar avatar-2xl me-3">
                                  <div class="avatar-name rounded-circle"><span>AB</span></div>
                                </div>
                              </div>
                              <div class="notification-body">
                                <p class="mb-1"><strong>Albert Brooks</strong> reacted to <strong>Mia Khalifa's</strong> status</p>
                                <span class="notification-time"><span class="me-2 fab fa-gratipay text-danger"></span>9hr</span>
                              </div>
                            </a>
                          </div>
                          <div class="list-group-title border-bottom">EARLIER</div>
                          <div class="list-group-item">
                            <a class="notification notification-flush" href="#!">
                              <div class="notification-avatar">
                                <div class="avatar avatar-2xl me-3">
                                  <img class="rounded-circle" src="assets/images/weather-sm.jpg" alt="" />
                                </div>
                              </div>
                              <div class="notification-body">
                                <p class="mb-1">The forecast today shows a low of 20&#8451; in California. See today's weather.</p>
                                <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????️</span>1d</span>
                              </div>
                            </a>
                          </div>
                          <div class="list-group-item">
                            <a class="border-bottom-0 notification-unread  notification notification-flush" href="#!">
                              <div class="notification-avatar">
                                <div class="avatar avatar-xl me-3">
                                  <img class="rounded-circle" src="assets/images/oxford.png" alt="" />
                                </div>
                              </div>
                              <div class="notification-body">
                                <p class="mb-1"><strong>University of Oxford</strong> created an event : "Causal Inference Hilary 2019"</p>
                                <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">✌️</span>1w</span>
                              </div>
                            </a>
                          </div>
                          <div class="list-group-item">
                            <a class="border-bottom-0 notification notification-flush" href="#!">
                              <div class="notification-avatar">
                                <div class="avatar avatar-xl me-3">
                                  <img class="rounded-circle" src="assets/images/10.jpg" alt="" />
                                </div>
                              </div>
                              <div class="notification-body">
                                <p class="mb-1"><strong>James Cameron</strong> invited to join the group: United Nations International Children's Fund</p>
                                <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????‍</span>2d</span>
                              </div>
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="card-footer text-center border-top"><a class="card-link d-block" href="app/social/notifications#">View all</a></div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown px-1">
                  <a class="nav-link fa-icon-wait nine-dots p-1" id="navbarDropdownMenu" role="button" data-hide-on-body-scroll="data-hide-on-body-scroll" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="43" viewBox="0 0 16 16" fill="none">
                      <circle cx="2" cy="2" r="2" fill="#6C6E71"></circle>
                      <circle cx="2" cy="8" r="2" fill="#6C6E71"></circle>
                      <circle cx="2" cy="14" r="2" fill="#6C6E71"></circle>
                      <circle cx="8" cy="8" r="2" fill="#6C6E71"></circle>
                      <circle cx="8" cy="14" r="2" fill="#6C6E71"></circle>
                      <circle cx="14" cy="8" r="2" fill="#6C6E71"></circle>
                      <circle cx="14" cy="14" r="2" fill="#6C6E71"></circle>
                      <circle cx="8" cy="2" r="2" fill="#6C6E71"></circle>
                      <circle cx="14" cy="2" r="2" fill="#6C6E71"></circle>
                    </svg></a>
                  <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end dropdown-menu-card dropdown-caret-bg" aria-labelledby="navbarDropdownMenu">
                    <div class="card shadow-none">
                      <div class="scrollbar-overlay nine-dots-dropdown">
                        <div class="card-body px-3">
                          <div class="row text-center gx-0 gy-0">
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="pages/user/profile#" target="_blank">
                                <div class="avatar avatar-2xl"> <img class="rounded-circle" src="assets/images/3.jpg" alt="" /></div>
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11">Account</p>
                              </a></div>
                            
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/google.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Google</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/spotify.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Spotify</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/steam.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Steam</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/github-light.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Github</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/discord.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Discord</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/xbox.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">xbox</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/trello.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Kanban</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/hp.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Hp</p>
                              </a></div>
                            <div class="col-12">
                              <hr class="my-3 mx-n3 bg-200" />
                            </div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/linkedin.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Linkedin</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/twitter.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Twitter</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/facebook.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Facebook</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/instagram.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Instagram</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/pinterest.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Pinterest</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/slack.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Slack</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/deviantart.png" alt="" width="40" height="40" />
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Deviantart</p>
                              </a></div>
                            <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="app/events/event-detail#" target="_blank">
                                <div class="avatar avatar-2xl">
                                  <div class="avatar-name rounded-circle bg-primary-subtle text-primary"><span class="fs-7">E</span></div>
                                </div>
                                <p class="mb-0 fw-medium text-800 text-truncate fs-11">Events</p>
                              </a></div>
                            <div class="col-12"><a class="btn btn-outline-primary btn-sm mt-4" href="#!">Show more</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown"><a class="nav-link pe-0 ps-2" id="navbarDropdownUser" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="avatar avatar-xl">
                      <img class="rounded-circle" src="assets/images/3-thumb.png" alt="" />
                    </div>
                  </a>
                  <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end py-0" aria-labelledby="navbarDropdownUser">
                    <div class="bg-white dark__bg-1000 rounded-2 py-2">
                      <a class="dropdown-item fw-bold text-warning" href="#!"><span class="fas fa-crown me-1"></span><span>Go Pro</span></a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#!">Set status</a>
                      <a class="dropdown-item" href="pages/user/profile#">Profile &amp; account</a>
                      <a class="dropdown-item" href="#!">Feedback</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="pages/user/settings#">Settings</a>
                      <a class="dropdown-item" href="pages/authentication/card/logout#">Logout</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <hr class="my-2 d-none d-lg-block" />
            <div class="collapse navbar-collapse scrollbar py-lg-2" id="navbarDoubleTop">
              <ul class="navbar-nav" data-top-nav-dropdowns="data-top-nav-dropdowns">
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dashboards">Dashboard</a>
                  <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="dashboards">
                    <div class="bg-white dark__bg-1000 rounded-3 py-2"><a class="dropdown-item link-600 fw-medium" href="#">Default</a><a class="dropdown-item link-600 fw-medium" href="dashboard/analytics#">Analytics</a><a class="dropdown-item link-600 fw-medium" href="dashboard/crm#">CRM</a><a class="dropdown-item link-600 fw-medium" href="dashboard/e-commerce#">E commerce</a><a class="dropdown-item link-600 fw-medium" href="dashboard/lms#">LMS<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="dropdown-item link-600 fw-medium" href="dashboard/project-management#">Management</a><a class="dropdown-item link-600 fw-medium" href="dashboard/saas#">SaaS</a><a class="dropdown-item link-600 fw-medium" href="dashboard/support-desk#">Support desk<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a></div>
                  </div>
                </li>
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="apps">App</a>
                  <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="apps">
                    <div class="card navbar-card-app shadow-none dark__bg-1000">
                      <div class="card-body scrollbar max-h-dropdown"><img class="img-dropdown" src="assets/images/authentication-corner.png" width="130" alt="" />
                        <div class="row">
                          <div class="col-6 col-md-4">
                            <div class="nav flex-column"><a class="nav-link py-1 link-600 fw-medium" href="app/calendar#">Calendar</a><a class="nav-link py-1 link-600 fw-medium" href="app/chat#">Chat</a><a class="nav-link py-1 link-600 fw-medium" href="app/kanban#">Kanban</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Social</p><a class="nav-link py-1 link-600 fw-medium" href="app/social/feed#">Feed</a><a class="nav-link py-1 link-600 fw-medium" href="app/social/activity-log#">Activity log</a><a class="nav-link py-1 link-600 fw-medium" href="app/social/notifications#">Notifications</a><a class="nav-link py-1 link-600 fw-medium" href="app/social/followers#">Followers</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Support Desk</p><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/table-view#">Table view</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/card-view#">Card view</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/contacts#">Contacts</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/contact-details#">Contact details</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/tickets-preview#">Tickets preview</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/quick-links#">Quick links</a>
                            </div>
                          </div>
                          <div class="col-6 col-md-4">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">E-Learning</p><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/course-list#">Course list</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/course-grid#">Course grid</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/course-details#">Course details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/create-a-course#">Create a course</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/student-overview#">Student overview</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/trainer-profile#">Trainer profile</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Events</p><a class="nav-link py-1 link-600 fw-medium" href="app/events/create-an-event#">Create an event</a><a class="nav-link py-1 link-600 fw-medium" href="app/events/event-detail#">Event detail</a><a class="nav-link py-1 link-600 fw-medium" href="app/events/event-list#">Event list</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Email</p><a class="nav-link py-1 link-600 fw-medium" href="app/email/inbox#">Inbox</a><a class="nav-link py-1 link-600 fw-medium" href="app/email/email-detail#">Email detail</a><a class="nav-link py-1 link-600 fw-medium" href="app/email/compose#">Compose</a>
                            </div>
                          </div>
                          <div class="col-6 col-md-4">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">E-Commerce</p><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/product-list#">Product list</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/product-grid#">Product grid</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/product-details#">Product details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/add-product#">Add product</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/orders/order-list#">Order list</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/orders/order-details#">Order details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/customers#">Customers</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/customer-details#">Customer details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/shopping-cart#">Shopping cart</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/checkout#">Checkout</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/billing#">Billing</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/invoice#">Invoice</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="pagess">Pages</a>
                  <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="pagess">
                    <div class="card navbar-card-pages shadow-none dark__bg-1000">
                      <div class="card-body scrollbar max-h-dropdown"><img class="img-dropdown" src="assets/images/authentication-corner.png" width="130" alt="" />
                        <div class="row">
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Simple Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/login#">Login</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/logout#">Logout</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/register#">Register</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/forgot-password#">Forgot password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/confirm-mail#">Confirm mail</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/reset-password#">Reset password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/lock-screen#">Lock screen</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Card Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/login#">Login</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/logout#">Logout</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/register#">Register</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/forgot-password#">Forgot password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/confirm-mail#">Confirm mail</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/reset-password#">Reset password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/lock-screen#">Lock screen</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Split Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/login#">Login</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/logout#">Logout</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/register#">Register</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/forgot-password#">Forgot password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/confirm-mail#">Confirm mail</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/reset-password#">Reset password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/lock-screen#">Lock screen</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Layouts</p><a class="nav-link py-1 link-600 fw-medium" href="demo/navbar-vertical#">Navbar vertical</a><a class="nav-link py-1 link-600 fw-medium" href="demo/navbar-top#">Top nav</a><a class="nav-link py-1 link-600 fw-medium" href="demo/navbar-double-top#">Double top<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="demo/combo-nav#">Combo nav</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Others</p><a class="nav-link py-1 link-600 fw-medium" href="pages/starter#">Starter</a><a class="nav-link py-1 link-600 fw-medium" href="pages/landing#">Landing</a>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">User</p><a class="nav-link py-1 link-600 fw-medium" href="pages/user/profile#">Profile</a><a class="nav-link py-1 link-600 fw-medium" href="pages/user/settings#">Settings</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Pricing</p><a class="nav-link py-1 link-600 fw-medium" href="pages/pricing/pricing-default#">Pricing default</a><a class="nav-link py-1 link-600 fw-medium" href="pages/pricing/pricing-alt#">Pricing alt</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Errors</p><a class="nav-link py-1 link-600 fw-medium" href="pages/errors/404#">404</a><a class="nav-link py-1 link-600 fw-medium" href="pages/errors/500#">500</a>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Miscellaneous</p><a class="nav-link py-1 link-600 fw-medium" href="pages/miscellaneous/associations#">Associations</a><a class="nav-link py-1 link-600 fw-medium" href="pages/miscellaneous/invite-people#">Invite people</a><a class="nav-link py-1 link-600 fw-medium" href="pages/miscellaneous/privacy-policy#">Privacy policy</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">FAQ</p><a class="nav-link py-1 link-600 fw-medium" href="pages/faq/faq-basic#">Faq basic</a><a class="nav-link py-1 link-600 fw-medium" href="pages/faq/faq-alt#">Faq alt</a><a class="nav-link py-1 link-600 fw-medium" href="pages/faq/faq-accordion#">Faq accordion</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Other Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/wizard#">Wizard</a><a class="nav-link py-1 link-600 fw-medium" href="#authentication-modal" data-bs-toggle="modal">Modal</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="moduless">Modules</a>
                  <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="moduless">
                    <div class="card navbar-card-components shadow-none dark__bg-1000">
                      <div class="card-body scrollbar max-h-dropdown"><img class="img-dropdown" src="assets/images/authentication-corner.png" width="130" alt="" />
                        <div class="row">
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Components</p><a class="nav-link py-1 link-600 fw-medium" href="modules/components/accordion#">Accordion</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/alerts#">Alerts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/anchor#">Anchor</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/animated-icons#">Animated icons</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/background#">Background</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/badges#">Badges</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/bottom-bar#">Bottom bar<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/breadcrumbs#">Breadcrumbs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/buttons#">Buttons</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/calendar#">Calendar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/cards#">Cards</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/carousel/bootstrap#">Bootstrap carousel</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column mt-md-4 pt-md-1"><a class="nav-link py-1 link-600 fw-medium" href="modules/components/carousel/swiper#">Swiper</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/collapse#">Collapse</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/cookie-notice#">Cookie notice</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/countup#">Countup</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/draggable#">Draggable</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/dropdowns#">Dropdowns</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/jquery-components#">Jquery<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/list-group#">List group</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/modals#">Modals</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/navs#">Navs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/navbar#">Navbar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/vertical-navbar#">Navbar vertical</a></div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column mt-xxl-4 pt-xxl-1"><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/top-navbar#">Top nav</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/double-top-navbar#">Double top<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/combo-navbar#">Combo nav</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/tabs#">Tabs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/offcanvas#">Offcanvas</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/avatar#">Avatar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/images#">Images</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/figures#">Figures</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/hoverbox#">Hoverbox</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/lightbox#">Lightbox</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/progress-bar#">Progress bar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/placeholder#">Placeholder</a></div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column mt-xxl-4 pt-xxl-1"><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pagination#">Pagination</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/popovers#">Popovers</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/scrollspy#">Scrollspy</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/search#">Search</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/spinners#">Spinners</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/timeline#">Timeline</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/toasts#">Toasts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/tooltips#">Tooltips</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/treeview#">Treeview</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/typed-text#">Typed text</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/videos/embed#">Embed</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/videos/plyr#">Plyr</a></div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Utilities</p><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/background#">Background</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/borders#">Borders</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/clearfix#">Clearfix</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/colors#">Colors</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/colored-links#">Colored links</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/display#">Display</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/flex#">Flex</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/float#">Float</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/focus-ring#">Focus ring</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/grid#">Grid</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/icon-link#">Icon link</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/overlayscrollbar#">Overlay scrollbar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/position#">Position</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/ratio#">Ratio</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/spacing#">Spacing</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/sizing#">Sizing</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/stretched-link#">Stretched link</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/text-truncation#">Text truncation</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/typography#">Typography</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/vertical-align#">Vertical align</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/vertical-rule#">Vertical rule</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/visibility#">Visibility</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Tables</p><a class="nav-link py-1 link-600 fw-medium" href="modules/tables/basic-tables#">Basic tables</a><a class="nav-link py-1 link-600 fw-medium" href="modules/tables/advance-tables#">Advance tables</a><a class="nav-link py-1 link-600 fw-medium" href="modules/tables/bulk-select#">Bulk select</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Charts</p><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/chartjs#">Chartjs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/d3js#">D3js<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a>
                              <p class="nav-link text-700 mb-0 fw-bold">ECharts</p><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/line-charts#">Line charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/bar-charts#">Bar charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/candlestick-charts#">Candlestick charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/geo-map#">Geo map</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/scatter-charts#">Scatter charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/pie-charts#">Pie charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/gauge-charts#">Gauge charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/radar-charts#">Radar charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/heatmap-charts#">Heatmap charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/how-to-use#">How to use</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Forms</p><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/form-control#">Form control</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/input-group#">Input group</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/select#">Select</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/checks#">Checks</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/range#">Range</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/layout#">Layout</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/advance-select#">Advance select</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/date-picker#">Date picker</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/editor#">Editor</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/emoji-button#">Emoji button</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/file-uploader#">File uploader</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/input-mask#">Input mask</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/range-slider#">Range slider</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/rating#">Rating</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/floating-labels#">Floating labels</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/wizard#">Wizard</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/validation#">Validation</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column pt-xxl-1">
                              <p class="nav-link text-700 mb-0 fw-bold">Icons</p><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/font-awesome#">Font awesome</a><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/bootstrap-icons#">Bootstrap icons</a><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/feather#">Feather</a><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/material-icons#">Material icons</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Maps</p><a class="nav-link py-1 link-600 fw-medium" href="modules/maps/google-map#">Google map</a><a class="nav-link py-1 link-600 fw-medium" href="modules/maps/leaflet-map#">Leaflet map</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="documentations">Documentation</a>
                  <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="documentations">
                    <div class="bg-white dark__bg-1000 rounded-3 py-2"><a class="dropdown-item link-600 fw-medium" href="documentation/getting-started#">Getting started</a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/configuration#">Configuration</a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/styling#">Styling<span class="badge rounded-pill ms-2 badge-subtle-success">Updated</span></a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/dark-mode#">Dark mode</a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/plugin#">Plugin</a><a class="dropdown-item link-600 fw-medium" href="documentation/faq#">Faq</a><a class="dropdown-item link-600 fw-medium" href="documentation/gulp#">Gulp</a><a class="dropdown-item link-600 fw-medium" href="documentation/design-file#">Design file</a><a class="dropdown-item link-600 fw-medium" href="changelog#">Changelog</a></div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-light navbar-vertical navbar-expand-xl" style="display: none;">
         
          <div class="d-flex align-items-center">
            <div class="toggle-icon-wrapper">
              <button class="btn navbar-toggler-humburger-icon navbar-vertical-toggle" data-bs-toggle="tooltip" data-bs-placement="left" title="Toggle Navigation"><span class="navbar-toggle-icon"><span class="toggle-line"></span></span></button>
            </div><a class="navbar-brand" href="#">
              <div class="d-flex align-items-center py-3"><img class="me-2" src="assets/images/falcon.png" alt="" width="40" /><span class="font-sans-serif text-primary">falcon</span></div>
            </a>
          </div>
          <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
            <div class="navbar-vertical-content scrollbar">
              <ul class="navbar-nav flex-column mb-3" id="navbarVerticalNav">
                <li class="nav-item"><!-- parent pages--><a class="nav-link dropdown-indicator" href="#dashboard" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="dashboard">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-chart-pie"></span></span><span class="nav-link-text ps-1">Dashboard</span></div>
                  </a>
                  <ul class="nav collapse show" id="dashboard">
                    <li class="nav-item"><a class="nav-link active" href="#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Default</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="dashboard/analytics#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Analytics</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="dashboard/crm#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">CRM</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="dashboard/e-commerce#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">E commerce</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="dashboard/lms#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">LMS</span><span class="badge rounded-pill ms-2 badge-subtle-success">New</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="dashboard/project-management#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Management</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="dashboard/saas#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">SaaS</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="dashboard/support-desk#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Support desk</span><span class="badge rounded-pill ms-2 badge-subtle-success">New</span></div>
                      </a><!-- more inner pages--></li>
                  </ul>
                </li>
                <li class="nav-item"><!-- label-->
                  <div class="row navbar-vertical-label-wrapper mt-3 mb-2">
                    <div class="col-auto navbar-vertical-label">App</div>
                    <div class="col ps-0">
                      <hr class="mb-0 navbar-vertical-divider" />
                    </div>
                  </div><!-- parent pages--><a class="nav-link" href="app/calendar#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-calendar-alt"></span></span><span class="nav-link-text ps-1">Calendar</span></div>
                  </a><!-- parent pages--><a class="nav-link" href="app/chat#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-comments"></span></span><span class="nav-link-text ps-1">Chat</span></div>
                  </a><!-- parent pages--><a class="nav-link dropdown-indicator" href="#email" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="email">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-envelope-open"></span></span><span class="nav-link-text ps-1">Email</span></div>
                  </a>
                  <ul class="nav collapse" id="email">
                    <li class="nav-item"><a class="nav-link" href="app/email/inbox#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Inbox</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/email/email-detail#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Email detail</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/email/compose#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Compose</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#events" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="events">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-calendar-day"></span></span><span class="nav-link-text ps-1">Events</span></div>
                  </a>
                  <ul class="nav collapse" id="events">
                    <li class="nav-item"><a class="nav-link" href="app/events/create-an-event#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Create an event</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/events/event-detail#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Event detail</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/events/event-list#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Event list</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#e-commerce" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="e-commerce">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-shopping-cart"></span></span><span class="nav-link-text ps-1">E commerce</span></div>
                  </a>
                  <ul class="nav collapse" id="e-commerce">
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#product" data-bs-toggle="collapse" aria-expanded="false" aria-controls="e-commerce">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Product</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="product">
                        <li class="nav-item"><a class="nav-link" href="app/e-commerce/product/product-list#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Product list</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="app/e-commerce/product/product-grid#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Product grid</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="app/e-commerce/product/product-details#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Product details</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="app/e-commerce/product/add-product#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Add product</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#orders" data-bs-toggle="collapse" aria-expanded="false" aria-controls="e-commerce">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Orders</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="orders">
                        <li class="nav-item"><a class="nav-link" href="app/e-commerce/orders/order-list#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Order list</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="app/e-commerce/orders/order-details#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Order details</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="app/e-commerce/customers#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Customers</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/e-commerce/customer-details#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Customer details</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/e-commerce/shopping-cart#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Shopping cart</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/e-commerce/checkout#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Checkout</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/e-commerce/billing#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Billing</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/e-commerce/invoice#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Invoice</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#e-learning" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="e-learning">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-graduation-cap"></span></span><span class="nav-link-text ps-1">E learning</span><span class="badge rounded-pill ms-2 badge-subtle-success">New</span></div>
                  </a>
                  <ul class="nav collapse" id="e-learning">
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#course" data-bs-toggle="collapse" aria-expanded="false" aria-controls="e-learning">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Course</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="course">
                        <li class="nav-item"><a class="nav-link" href="app/e-learning/course/course-list#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Course list</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="app/e-learning/course/course-grid#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Course grid</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="app/e-learning/course/course-details#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Course details</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="app/e-learning/course/create-a-course#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Create a course</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="app/e-learning/student-overview#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Student overview</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/e-learning/trainer-profile#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Trainer profile</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link" href="app/kanban#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fab fa-trello"></span></span><span class="nav-link-text ps-1">Kanban</span></div>
                  </a><!-- parent pages--><a class="nav-link dropdown-indicator" href="#social" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="social">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-share-alt"></span></span><span class="nav-link-text ps-1">Social</span></div>
                  </a>
                  <ul class="nav collapse" id="social">
                    <li class="nav-item"><a class="nav-link" href="app/social/feed#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Feed</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/social/activity-log#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Activity log</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/social/notifications#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Notifications</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/social/followers#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Followers</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#support-desk" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="support-desk">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-ticket-alt"></span></span><span class="nav-link-text ps-1">Support desk</span></div>
                  </a>
                  <ul class="nav collapse" id="support-desk">
                    <li class="nav-item"><a class="nav-link" href="app/support-desk/table-view#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Table view</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/support-desk/card-view#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Card view</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/support-desk/contacts#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Contacts</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/support-desk/contact-details#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Contact details</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/support-desk/tickets-preview#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Tickets preview</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/support-desk/quick-links#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Quick links</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="app/support-desk/reports#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Reports</span></div>
                      </a><!-- more inner pages--></li>
                  </ul>
                </li>
                <li class="nav-item"><!-- label-->
                  <div class="row navbar-vertical-label-wrapper mt-3 mb-2">
                    <div class="col-auto navbar-vertical-label">Pages</div>
                    <div class="col ps-0">
                      <hr class="mb-0 navbar-vertical-divider" />
                    </div>
                  </div><!-- parent pages--><a class="nav-link" href="pages/starter#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-flag"></span></span><span class="nav-link-text ps-1">Starter</span></div>
                  </a><!-- parent pages--><a class="nav-link" href="pages/landing#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-globe"></span></span><span class="nav-link-text ps-1">Landing</span></div>
                  </a><!-- parent pages--><a class="nav-link dropdown-indicator" href="#authentication" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="authentication">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-lock"></span></span><span class="nav-link-text ps-1">Authentication</span></div>
                  </a>
                  <ul class="nav collapse" id="authentication">
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#simple" data-bs-toggle="collapse" aria-expanded="false" aria-controls="authentication">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Simple</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="simple">
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/simple/login#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Login</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/simple/logout#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Logout</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/simple/register#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Register</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/simple/forgot-password#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Forgot password</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/simple/confirm-mail#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Confirm mail</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/simple/reset-password#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Reset password</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/simple/lock-screen#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Lock screen</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#card" data-bs-toggle="collapse" aria-expanded="false" aria-controls="authentication">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Card</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="card">
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/card/login#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Login</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/card/logout#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Logout</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/card/register#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Register</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/card/forgot-password#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Forgot password</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/card/confirm-mail#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Confirm mail</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/card/reset-password#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Reset password</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/card/lock-screen#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Lock screen</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#split" data-bs-toggle="collapse" aria-expanded="false" aria-controls="authentication">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Split</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="split">
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/split/login#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Login</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/split/logout#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Logout</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/split/register#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Register</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/split/forgot-password#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Forgot password</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/split/confirm-mail#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Confirm mail</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/split/reset-password#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Reset password</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="pages/authentication/split/lock-screen#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Lock screen</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="pages/authentication/wizard#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Wizard</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="#authentication-modal" data-bs-toggle="modal">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Modal</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#user" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="user">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-user"></span></span><span class="nav-link-text ps-1">User</span></div>
                  </a>
                  <ul class="nav collapse" id="user">
                    <li class="nav-item"><a class="nav-link" href="pages/user/profile#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Profile</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="pages/user/settings#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Settings</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#pricing" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="pricing">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-tags"></span></span><span class="nav-link-text ps-1">Pricing</span></div>
                  </a>
                  <ul class="nav collapse" id="pricing">
                    <li class="nav-item"><a class="nav-link" href="pages/pricing/pricing-default#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Pricing default</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="pages/pricing/pricing-alt#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Pricing alt</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#faq" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="faq">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-question-circle"></span></span><span class="nav-link-text ps-1">Faq</span></div>
                  </a>
                  <ul class="nav collapse" id="faq">
                    <li class="nav-item"><a class="nav-link" href="pages/faq/faq-basic#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Faq basic</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="pages/faq/faq-alt#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Faq alt</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="pages/faq/faq-accordion#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Faq accordion</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#errors" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="errors">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-exclamation-triangle"></span></span><span class="nav-link-text ps-1">Errors</span></div>
                  </a>
                  <ul class="nav collapse" id="errors">
                    <li class="nav-item"><a class="nav-link" href="pages/errors/404#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">404</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="pages/errors/500#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">500</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#miscellaneous" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="miscellaneous">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-thumbtack"></span></span><span class="nav-link-text ps-1">Miscellaneous</span></div>
                  </a>
                  <ul class="nav collapse" id="miscellaneous">
                    <li class="nav-item"><a class="nav-link" href="pages/miscellaneous/associations#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Associations</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="pages/miscellaneous/invite-people#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Invite people</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="pages/miscellaneous/privacy-policy#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Privacy policy</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#Layouts" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="Layouts">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="far fa-window-restore"></span></span><span class="nav-link-text ps-1">Layouts</span></div>
                  </a>
                  <ul class="nav collapse" id="Layouts">
                    <li class="nav-item"><a class="nav-link" href="demo/navbar-vertical#" target="_blank">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Navbar vertical</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="demo/navbar-top#" target="_blank">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Top nav</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="demo/navbar-double-top#" target="_blank">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Double top</span><span class="badge rounded-pill ms-2 badge-subtle-success">New</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="demo/combo-nav#" target="_blank">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Combo nav</span></div>
                      </a><!-- more inner pages--></li>
                  </ul>
                </li>
                <li class="nav-item"><!-- label-->
                  <div class="row navbar-vertical-label-wrapper mt-3 mb-2">
                    <div class="col-auto navbar-vertical-label">Modules</div>
                    <div class="col ps-0">
                      <hr class="mb-0 navbar-vertical-divider" />
                    </div>
                  </div><!-- parent pages--><a class="nav-link dropdown-indicator" href="#forms" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="forms">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-file-alt"></span></span><span class="nav-link-text ps-1">Forms</span></div>
                  </a>
                  <ul class="nav collapse" id="forms">
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#basic" data-bs-toggle="collapse" aria-expanded="false" aria-controls="forms">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Basic</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="basic">
                        <li class="nav-item"><a class="nav-link" href="modules/forms/basic/form-control#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Form control</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/basic/input-group#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Input group</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/basic/select#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Select</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/basic/checks#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Checks</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/basic/range#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Range</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/basic/layout#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Layout</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#advance" data-bs-toggle="collapse" aria-expanded="false" aria-controls="forms">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Advance</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="advance">
                        <li class="nav-item"><a class="nav-link" href="modules/forms/advance/advance-select#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Advance select</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/advance/date-picker#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Date picker</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/advance/editor#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Editor</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/advance/emoji-button#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Emoji button</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/advance/file-uploader#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">File uploader</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/advance/input-mask#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Input mask</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/advance/range-slider#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Range slider</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/forms/advance/rating#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Rating</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="modules/forms/floating-labels#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Floating labels</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/forms/wizard#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Wizard</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/forms/validation#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Validation</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#tables" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="tables">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-table"></span></span><span class="nav-link-text ps-1">Tables</span></div>
                  </a>
                  <ul class="nav collapse" id="tables">
                    <li class="nav-item"><a class="nav-link" href="modules/tables/basic-tables#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Basic tables</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/tables/advance-tables#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Advance tables</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/tables/bulk-select#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Bulk select</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#charts" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="charts">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-chart-line"></span></span><span class="nav-link-text ps-1">Charts</span></div>
                  </a>
                  <ul class="nav collapse" id="charts">
                    <li class="nav-item"><a class="nav-link" href="modules/charts/chartjs#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Chartjs</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/charts/d3js#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">D3js</span><span class="badge rounded-pill ms-2 badge-subtle-success">New</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#eCharts" data-bs-toggle="collapse" aria-expanded="false" aria-controls="charts">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">ECharts</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="eCharts">
                        <li class="nav-item"><a class="nav-link" href="modules/charts/echarts/line-charts#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Line charts</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/charts/echarts/bar-charts#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Bar charts</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/charts/echarts/candlestick-charts#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Candlestick charts</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/charts/echarts/geo-map#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Geo map</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/charts/echarts/scatter-charts#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Scatter charts</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/charts/echarts/pie-charts#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Pie charts</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/charts/echarts/gauge-charts#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Gauge charts</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/charts/echarts/radar-charts#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Radar charts</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/charts/echarts/heatmap-charts#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Heatmap charts</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/charts/echarts/how-to-use#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">How to use</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#icons" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="icons">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-shapes"></span></span><span class="nav-link-text ps-1">Icons</span></div>
                  </a>
                  <ul class="nav collapse" id="icons">
                    <li class="nav-item"><a class="nav-link" href="modules/icons/font-awesome#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Font awesome</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/icons/bootstrap-icons#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Bootstrap icons</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/icons/feather#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Feather</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/icons/material-icons#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Material icons</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#maps" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="maps">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-map"></span></span><span class="nav-link-text ps-1">Maps</span></div>
                  </a>
                  <ul class="nav collapse" id="maps">
                    <li class="nav-item"><a class="nav-link" href="modules/maps/google-map#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Google map</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/maps/leaflet-map#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Leaflet map</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#components" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="components">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-puzzle-piece"></span></span><span class="nav-link-text ps-1">Components</span></div>
                  </a>
                  <ul class="nav collapse" id="components">
                    <li class="nav-item"><a class="nav-link" href="modules/components/accordion#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Accordion</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/alerts#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Alerts</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/anchor#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Anchor</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/animated-icons#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Animated icons</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/background#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Background</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/badges#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Badges</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/bottom-bar#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Bottom bar</span><span class="badge rounded-pill ms-2 badge-subtle-success">New</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/breadcrumbs#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Breadcrumbs</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/buttons#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Buttons</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/calendar#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Calendar</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/cards#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Cards</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#carousel" data-bs-toggle="collapse" aria-expanded="false" aria-controls="components">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Carousel</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="carousel">
                        <li class="nav-item"><a class="nav-link" href="modules/components/carousel/bootstrap#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Bootstrap</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/carousel/swiper#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Swiper</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/collapse#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Collapse</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/cookie-notice#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Cookie notice</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/countup#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Countup</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/draggable#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Draggable</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/dropdowns#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Dropdowns</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/jquery-components#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Jquery</span><span class="badge rounded-pill ms-2 badge-subtle-success">New</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/list-group#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">List group</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/modals#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Modals</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#navs-_and_-Tabs" data-bs-toggle="collapse" aria-expanded="false" aria-controls="components">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Navs &amp; Tabs</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="navs-_and_-Tabs">
                        <li class="nav-item"><a class="nav-link" href="modules/components/navs-and-tabs/navs#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Navs</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/navs-and-tabs/navbar#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Navbar</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/navs-and-tabs/vertical-navbar#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Navbar vertical</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/navs-and-tabs/top-navbar#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Top nav</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/navs-and-tabs/double-top-navbar#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Double top</span><span class="badge rounded-pill ms-2 badge-subtle-success">New</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/navs-and-tabs/combo-navbar#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Combo nav</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/navs-and-tabs/tabs#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Tabs</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/offcanvas#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Offcanvas</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#pictures" data-bs-toggle="collapse" aria-expanded="false" aria-controls="components">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Pictures</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="pictures">
                        <li class="nav-item"><a class="nav-link" href="modules/components/pictures/avatar#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Avatar</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/pictures/images#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Images</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/pictures/figures#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Figures</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/pictures/hoverbox#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Hoverbox</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/pictures/lightbox#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Lightbox</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/progress-bar#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Progress bar</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/placeholder#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Placeholder</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/pagination#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Pagination</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/popovers#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Popovers</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/scrollspy#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Scrollspy</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/search#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Search</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/spinners#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Spinners</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/timeline#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Timeline</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/toasts#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Toasts</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/tooltips#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Tooltips</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/treeview#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Treeview</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/components/typed-text#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Typed text</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#videos" data-bs-toggle="collapse" aria-expanded="false" aria-controls="components">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Videos</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="videos">
                        <li class="nav-item"><a class="nav-link" href="modules/components/videos/embed#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Embed</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="modules/components/videos/plyr#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Plyr</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                  </ul><!-- parent pages--><a class="nav-link dropdown-indicator" href="#utilities" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="utilities">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-fire"></span></span><span class="nav-link-text ps-1">Utilities</span></div>
                  </a>
                  <ul class="nav collapse" id="utilities">
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/background#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Background</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/borders#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Borders</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/clearfix#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Clearfix</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/colors#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Colors</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/colored-links#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Colored links</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/display#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Display</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/flex#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Flex</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/float#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Float</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/focus-ring#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Focus ring</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/grid#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Grid</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/icon-link#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Icon link</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/overlayscrollbar#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Overlay scrollbar</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/position#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Position</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/ratio#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Ratio</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/spacing#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Spacing</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/sizing#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Sizing</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/stretched-link#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Stretched link</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/text-truncation#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Text truncation</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/typography#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Typography</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/vertical-align#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Vertical align</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/vertical-rule#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Vertical rule</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/visibility#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Visibility</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="modules/utilities/visually-hidden#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Visually hidden</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link" href="widgets#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-poll"></span></span><span class="nav-link-text ps-1">Widgets</span></div>
                  </a><!-- parent pages--><a class="nav-link dropdown-indicator" href="#multi-level" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-layer-group"></span></span><span class="nav-link-text ps-1">Multi level</span></div>
                  </a>
                  <ul class="nav collapse" id="multi-level">
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#level-two" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Level two</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="level-two">
                        <li class="nav-item"><a class="nav-link" href="#!#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 1</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link" href="#!#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 2</span></div>
                          </a><!-- more inner pages--></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#level-three" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Level three</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="level-three">
                        <li class="nav-item"><a class="nav-link" href="#!#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 3</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link dropdown-indicator" href="#item-4" data-bs-toggle="collapse" aria-expanded="false" aria-controls="level-three">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 4</span></div>
                          </a><!-- more inner pages-->
                          <ul class="nav collapse" id="item-4">
                            <li class="nav-item"><a class="nav-link" href="#!#">
                                <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 5</span></div>
                              </a><!-- more inner pages--></li>
                            <li class="nav-item"><a class="nav-link" href="#!#">
                                <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 6</span></div>
                              </a><!-- more inner pages--></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#level-four" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Level four</span></div>
                      </a><!-- more inner pages-->
                      <ul class="nav collapse" id="level-four">
                        <li class="nav-item"><a class="nav-link" href="#!#">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 6</span></div>
                          </a><!-- more inner pages--></li>
                        <li class="nav-item"><a class="nav-link dropdown-indicator" href="#item-7" data-bs-toggle="collapse" aria-expanded="false" aria-controls="level-four">
                            <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 7</span></div>
                          </a><!-- more inner pages-->
                          <ul class="nav collapse" id="item-7">
                            <li class="nav-item"><a class="nav-link" href="#!#">
                                <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 8</span></div>
                              </a><!-- more inner pages--></li>
                            <li class="nav-item"><a class="nav-link dropdown-indicator" href="#item-9" data-bs-toggle="collapse" aria-expanded="false" aria-controls="item-7">
                                <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 9</span></div>
                              </a><!-- more inner pages-->
                              <ul class="nav collapse" id="item-9">
                                <li class="nav-item"><a class="nav-link" href="#!#">
                                    <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 10</span></div>
                                  </a><!-- more inner pages--></li>
                                <li class="nav-item"><a class="nav-link" href="#!#">
                                    <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Item 11</span></div>
                                  </a><!-- more inner pages--></li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="nav-item"><!-- label-->
                  <div class="row navbar-vertical-label-wrapper mt-3 mb-2">
                    <div class="col-auto navbar-vertical-label">Documentation</div>
                    <div class="col ps-0">
                      <hr class="mb-0 navbar-vertical-divider" />
                    </div>
                  </div><!-- parent pages--><a class="nav-link" href="documentation/getting-started#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-rocket"></span></span><span class="nav-link-text ps-1">Getting started</span></div>
                  </a><!-- parent pages--><a class="nav-link dropdown-indicator" href="#customization" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="customization">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-wrench"></span></span><span class="nav-link-text ps-1">Customization</span></div>
                  </a>
                  <ul class="nav collapse" id="customization">
                    <li class="nav-item"><a class="nav-link" href="documentation/customization/configuration#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Configuration</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="documentation/customization/styling#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Styling</span><span class="badge rounded-pill ms-2 badge-subtle-success">Updated</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="documentation/customization/dark-mode#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Dark mode</span></div>
                      </a><!-- more inner pages--></li>
                    <li class="nav-item"><a class="nav-link" href="documentation/customization/plugin#">
                        <div class="d-flex align-items-center"><span class="nav-link-text ps-1">Plugin</span></div>
                      </a><!-- more inner pages--></li>
                  </ul><!-- parent pages--><a class="nav-link" href="documentation/faq#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-question-circle"></span></span><span class="nav-link-text ps-1">Faq</span></div>
                  </a><!-- parent pages--><a class="nav-link" href="documentation/gulp#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fab fa-gulp"></span></span><span class="nav-link-text ps-1">Gulp</span></div>
                  </a><!-- parent pages--><a class="nav-link" href="documentation/design-file#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-palette"></span></span><span class="nav-link-text ps-1">Design file</span></div>
                  </a><!-- parent pages--><a class="nav-link" href="changelog#" role="button">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-code-branch"></span></span><span class="nav-link-text ps-1">Changelog</span></div>
                  </a>
                </li>
              </ul>
              <div class="settings mb-3">
                <div class="card shadow-none">
                  <div class="card-body alert mb-0" role="alert">
                    <div class="btn-close-falcon-container"><button class="btn btn-link btn-close-falcon p-0" aria-label="Close" data-bs-dismiss="alert"></button></div>
                    <div class="text-center"><img src="assets/images/navbar-vertical.png" alt="" width="80" />
                      <p class="fs-11 mt-2">Loving what you see? <br />Get your copy of <a href="#!">Falcon</a></p>
                      <div class="d-grid"><a class="btn btn-sm btn-primary" href="https://therichpost.com" target="_blank">More Admins</a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-light navbar-glass navbar-top navbar-expand-lg" style="display: none;">
          <button class="btn navbar-toggler-humburger-icon navbar-toggler me-1 me-sm-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarStandard" aria-controls="navbarStandard" aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggle-icon"><span class="toggle-line"></span></span></button>
          <a class="navbar-brand me-1 me-sm-3" href="#">
            <div class="d-flex align-items-center"><img class="me-2" src="assets/images/falcon.png" alt="" width="40" /><span class="font-sans-serif text-primary">falcon</span></div>
          </a>
          <div class="collapse navbar-collapse scrollbar" id="navbarStandard">
            <ul class="navbar-nav" data-top-nav-dropdowns="data-top-nav-dropdowns">
              <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dashboards">Dashboard</a>
                <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="dashboards">
                  <div class="bg-white dark__bg-1000 rounded-3 py-2"><a class="dropdown-item link-600 fw-medium" href="#">Default</a><a class="dropdown-item link-600 fw-medium" href="dashboard/analytics#">Analytics</a><a class="dropdown-item link-600 fw-medium" href="dashboard/crm#">CRM</a><a class="dropdown-item link-600 fw-medium" href="dashboard/e-commerce#">E commerce</a><a class="dropdown-item link-600 fw-medium" href="dashboard/lms#">LMS<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="dropdown-item link-600 fw-medium" href="dashboard/project-management#">Management</a><a class="dropdown-item link-600 fw-medium" href="dashboard/saas#">SaaS</a><a class="dropdown-item link-600 fw-medium" href="dashboard/support-desk#">Support desk<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a></div>
                </div>
              </li>
              <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="apps">App</a>
                <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="apps">
                  <div class="card navbar-card-app shadow-none dark__bg-1000">
                    <div class="card-body scrollbar max-h-dropdown"><img class="img-dropdown" src="assets/images/authentication-corner.png" width="130" alt="" />
                      <div class="row">
                        <div class="col-6 col-md-4">
                          <div class="nav flex-column"><a class="nav-link py-1 link-600 fw-medium" href="app/calendar#">Calendar</a><a class="nav-link py-1 link-600 fw-medium" href="app/chat#">Chat</a><a class="nav-link py-1 link-600 fw-medium" href="app/kanban#">Kanban</a>
                            <p class="nav-link text-700 mb-0 fw-bold">Social</p><a class="nav-link py-1 link-600 fw-medium" href="app/social/feed#">Feed</a><a class="nav-link py-1 link-600 fw-medium" href="app/social/activity-log#">Activity log</a><a class="nav-link py-1 link-600 fw-medium" href="app/social/notifications#">Notifications</a><a class="nav-link py-1 link-600 fw-medium" href="app/social/followers#">Followers</a>
                            <p class="nav-link text-700 mb-0 fw-bold">Support Desk</p><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/table-view#">Table view</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/card-view#">Card view</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/contacts#">Contacts</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/contact-details#">Contact details</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/tickets-preview#">Tickets preview</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/quick-links#">Quick links</a>
                          </div>
                        </div>
                        <div class="col-6 col-md-4">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">E-Learning</p><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/course-list#">Course list</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/course-grid#">Course grid</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/course-details#">Course details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/create-a-course#">Create a course</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/student-overview#">Student overview</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/trainer-profile#">Trainer profile</a>
                            <p class="nav-link text-700 mb-0 fw-bold">Events</p><a class="nav-link py-1 link-600 fw-medium" href="app/events/create-an-event#">Create an event</a><a class="nav-link py-1 link-600 fw-medium" href="app/events/event-detail#">Event detail</a><a class="nav-link py-1 link-600 fw-medium" href="app/events/event-list#">Event list</a>
                            <p class="nav-link text-700 mb-0 fw-bold">Email</p><a class="nav-link py-1 link-600 fw-medium" href="app/email/inbox#">Inbox</a><a class="nav-link py-1 link-600 fw-medium" href="app/email/email-detail#">Email detail</a><a class="nav-link py-1 link-600 fw-medium" href="app/email/compose#">Compose</a>
                          </div>
                        </div>
                        <div class="col-6 col-md-4">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">E-Commerce</p><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/product-list#">Product list</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/product-grid#">Product grid</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/product-details#">Product details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/add-product#">Add product</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/orders/order-list#">Order list</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/orders/order-details#">Order details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/customers#">Customers</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/customer-details#">Customer details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/shopping-cart#">Shopping cart</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/checkout#">Checkout</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/billing#">Billing</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/invoice#">Invoice</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="pagess">Pages</a>
                <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="pagess">
                  <div class="card navbar-card-pages shadow-none dark__bg-1000">
                    <div class="card-body scrollbar max-h-dropdown"><img class="img-dropdown" src="assets/images/authentication-corner.png" width="130" alt="" />
                      <div class="row">
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Simple Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/login#">Login</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/logout#">Logout</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/register#">Register</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/forgot-password#">Forgot password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/confirm-mail#">Confirm mail</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/reset-password#">Reset password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/lock-screen#">Lock screen</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Card Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/login#">Login</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/logout#">Logout</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/register#">Register</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/forgot-password#">Forgot password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/confirm-mail#">Confirm mail</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/reset-password#">Reset password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/lock-screen#">Lock screen</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Split Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/login#">Login</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/logout#">Logout</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/register#">Register</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/forgot-password#">Forgot password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/confirm-mail#">Confirm mail</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/reset-password#">Reset password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/lock-screen#">Lock screen</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Layouts</p><a class="nav-link py-1 link-600 fw-medium" href="demo/navbar-vertical#">Navbar vertical</a><a class="nav-link py-1 link-600 fw-medium" href="demo/navbar-top#">Top nav</a><a class="nav-link py-1 link-600 fw-medium" href="demo/navbar-double-top#">Double top<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="demo/combo-nav#">Combo nav</a>
                            <p class="nav-link text-700 mb-0 fw-bold">Others</p><a class="nav-link py-1 link-600 fw-medium" href="pages/starter#">Starter</a><a class="nav-link py-1 link-600 fw-medium" href="pages/landing#">Landing</a>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">User</p><a class="nav-link py-1 link-600 fw-medium" href="pages/user/profile#">Profile</a><a class="nav-link py-1 link-600 fw-medium" href="pages/user/settings#">Settings</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Pricing</p><a class="nav-link py-1 link-600 fw-medium" href="pages/pricing/pricing-default#">Pricing default</a><a class="nav-link py-1 link-600 fw-medium" href="pages/pricing/pricing-alt#">Pricing alt</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Errors</p><a class="nav-link py-1 link-600 fw-medium" href="pages/errors/404#">404</a><a class="nav-link py-1 link-600 fw-medium" href="pages/errors/500#">500</a>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Miscellaneous</p><a class="nav-link py-1 link-600 fw-medium" href="pages/miscellaneous/associations#">Associations</a><a class="nav-link py-1 link-600 fw-medium" href="pages/miscellaneous/invite-people#">Invite people</a><a class="nav-link py-1 link-600 fw-medium" href="pages/miscellaneous/privacy-policy#">Privacy policy</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">FAQ</p><a class="nav-link py-1 link-600 fw-medium" href="pages/faq/faq-basic#">Faq basic</a><a class="nav-link py-1 link-600 fw-medium" href="pages/faq/faq-alt#">Faq alt</a><a class="nav-link py-1 link-600 fw-medium" href="pages/faq/faq-accordion#">Faq accordion</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Other Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/wizard#">Wizard</a><a class="nav-link py-1 link-600 fw-medium" href="#authentication-modal" data-bs-toggle="modal">Modal</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="moduless">Modules</a>
                <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="moduless">
                  <div class="card navbar-card-components shadow-none dark__bg-1000">
                    <div class="card-body scrollbar max-h-dropdown"><img class="img-dropdown" src="assets/images/authentication-corner.png" width="130" alt="" />
                      <div class="row">
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Components</p><a class="nav-link py-1 link-600 fw-medium" href="modules/components/accordion#">Accordion</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/alerts#">Alerts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/anchor#">Anchor</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/animated-icons#">Animated icons</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/background#">Background</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/badges#">Badges</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/bottom-bar#">Bottom bar<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/breadcrumbs#">Breadcrumbs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/buttons#">Buttons</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/calendar#">Calendar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/cards#">Cards</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/carousel/bootstrap#">Bootstrap carousel</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column mt-md-4 pt-md-1"><a class="nav-link py-1 link-600 fw-medium" href="modules/components/carousel/swiper#">Swiper</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/collapse#">Collapse</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/cookie-notice#">Cookie notice</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/countup#">Countup</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/draggable#">Draggable</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/dropdowns#">Dropdowns</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/jquery-components#">Jquery<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/list-group#">List group</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/modals#">Modals</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/navs#">Navs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/navbar#">Navbar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/vertical-navbar#">Navbar vertical</a></div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column mt-xxl-4 pt-xxl-1"><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/top-navbar#">Top nav</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/double-top-navbar#">Double top<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/combo-navbar#">Combo nav</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/tabs#">Tabs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/offcanvas#">Offcanvas</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/avatar#">Avatar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/images#">Images</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/figures#">Figures</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/hoverbox#">Hoverbox</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/lightbox#">Lightbox</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/progress-bar#">Progress bar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/placeholder#">Placeholder</a></div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column mt-xxl-4 pt-xxl-1"><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pagination#">Pagination</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/popovers#">Popovers</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/scrollspy#">Scrollspy</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/search#">Search</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/spinners#">Spinners</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/timeline#">Timeline</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/toasts#">Toasts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/tooltips#">Tooltips</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/treeview#">Treeview</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/typed-text#">Typed text</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/videos/embed#">Embed</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/videos/plyr#">Plyr</a></div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Utilities</p><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/background#">Background</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/borders#">Borders</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/clearfix#">Clearfix</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/colors#">Colors</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/colored-links#">Colored links</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/display#">Display</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/flex#">Flex</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/float#">Float</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/focus-ring#">Focus ring</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/grid#">Grid</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/icon-link#">Icon link</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/overlayscrollbar#">Overlay scrollbar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/position#">Position</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/ratio#">Ratio</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/spacing#">Spacing</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/sizing#">Sizing</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/stretched-link#">Stretched link</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/text-truncation#">Text truncation</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/typography#">Typography</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/vertical-align#">Vertical align</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/vertical-rule#">Vertical rule</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/visibility#">Visibility</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Tables</p><a class="nav-link py-1 link-600 fw-medium" href="modules/tables/basic-tables#">Basic tables</a><a class="nav-link py-1 link-600 fw-medium" href="modules/tables/advance-tables#">Advance tables</a><a class="nav-link py-1 link-600 fw-medium" href="modules/tables/bulk-select#">Bulk select</a>
                            <p class="nav-link text-700 mb-0 fw-bold">Charts</p><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/chartjs#">Chartjs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/d3js#">D3js<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a>
                            <p class="nav-link text-700 mb-0 fw-bold">ECharts</p><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/line-charts#">Line charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/bar-charts#">Bar charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/candlestick-charts#">Candlestick charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/geo-map#">Geo map</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/scatter-charts#">Scatter charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/pie-charts#">Pie charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/gauge-charts#">Gauge charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/radar-charts#">Radar charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/heatmap-charts#">Heatmap charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/how-to-use#">How to use</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column">
                            <p class="nav-link text-700 mb-0 fw-bold">Forms</p><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/form-control#">Form control</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/input-group#">Input group</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/select#">Select</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/checks#">Checks</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/range#">Range</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/layout#">Layout</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/advance-select#">Advance select</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/date-picker#">Date picker</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/editor#">Editor</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/emoji-button#">Emoji button</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/file-uploader#">File uploader</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/input-mask#">Input mask</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/range-slider#">Range slider</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/rating#">Rating</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/floating-labels#">Floating labels</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/wizard#">Wizard</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/validation#">Validation</a>
                          </div>
                        </div>
                        <div class="col-6 col-xxl-3">
                          <div class="nav flex-column pt-xxl-1">
                            <p class="nav-link text-700 mb-0 fw-bold">Icons</p><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/font-awesome#">Font awesome</a><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/bootstrap-icons#">Bootstrap icons</a><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/feather#">Feather</a><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/material-icons#">Material icons</a>
                            <p class="nav-link text-700 mb-0 fw-bold">Maps</p><a class="nav-link py-1 link-600 fw-medium" href="modules/maps/google-map#">Google map</a><a class="nav-link py-1 link-600 fw-medium" href="modules/maps/leaflet-map#">Leaflet map</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="documentations">Documentation</a>
                <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="documentations">
                  <div class="bg-white dark__bg-1000 rounded-3 py-2"><a class="dropdown-item link-600 fw-medium" href="documentation/getting-started#">Getting started</a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/configuration#">Configuration</a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/styling#">Styling<span class="badge rounded-pill ms-2 badge-subtle-success">Updated</span></a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/dark-mode#">Dark mode</a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/plugin#">Plugin</a><a class="dropdown-item link-600 fw-medium" href="documentation/faq#">Faq</a><a class="dropdown-item link-600 fw-medium" href="documentation/gulp#">Gulp</a><a class="dropdown-item link-600 fw-medium" href="documentation/design-file#">Design file</a><a class="dropdown-item link-600 fw-medium" href="changelog#">Changelog</a></div>
                </div>
              </li>
            </ul>
          </div>
          <ul class="navbar-nav navbar-nav-icons ms-auto flex-row align-items-center">
            <li class="nav-item ps-2 pe-0">
              <div class="dropdown theme-control-dropdown"><a class="nav-link d-flex align-items-center dropdown-toggle fa-icon-wait fs-9 pe-1 py-0" href="#" role="button" id="themeSwitchDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-sun fs-7" data-fa-transform="shrink-2" data-theme-dropdown-toggle-icon="light"></span><span class="fas fa-moon fs-7" data-fa-transform="shrink-3" data-theme-dropdown-toggle-icon="dark"></span><span class="fas fa-adjust fs-7" data-fa-transform="shrink-2" data-theme-dropdown-toggle-icon="auto"></span></a>
                <div class="dropdown-menu dropdown-menu-end dropdown-caret border py-0 mt-3" aria-labelledby="themeSwitchDropdown">
                  <div class="bg-white dark__bg-1000 rounded-2 py-2"><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="light" data-theme-control="theme"><span class="fas fa-sun"></span>Light<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="dark" data-theme-control="theme"><span class="fas fa-moon" data-fa-transform=""></span>Dark<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="auto" data-theme-control="theme"><span class="fas fa-adjust" data-fa-transform=""></span>Auto<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button></div>
                </div>
              </div>
            </li>
            <li class="nav-item d-none d-sm-block">
              <a class="nav-link px-0 notification-indicator notification-indicator-warning notification-indicator-fill fa-icon-wait" href="app/e-commerce/shopping-cart#"><span class="fas fa-shopping-cart" data-fa-transform="shrink-7" style="font-size: 33px;"></span><span class="notification-indicator-number">1</span></a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link notification-indicator notification-indicator-primary px-0 fa-icon-wait" id="navbarDropdownNotification" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-hide-on-body-scroll="data-hide-on-body-scroll"><span class="fas fa-bell" data-fa-transform="shrink-6" style="font-size: 33px;"></span></a>
              <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end dropdown-menu-card dropdown-menu-notification dropdown-caret-bg" aria-labelledby="navbarDropdownNotification">
                <div class="card card-notification shadow-none">
                  <div class="card-header">
                    <div class="row justify-content-between align-items-center">
                      <div class="col-auto">
                        <h6 class="card-header-title mb-0">Notifications</h6>
                      </div>
                      <div class="col-auto ps-0 ps-sm-3"><a class="card-link fw-normal" href="#">Mark all as read</a></div>
                    </div>
                  </div>
                  <div class="scrollbar-overlay" style="max-height:19rem">
                    <div class="list-group list-group-flush fw-normal fs-10">
                      <div class="list-group-title border-bottom">NEW</div>
                      <div class="list-group-item">
                        <a class="notification notification-flush notification-unread" href="#!">
                          <div class="notification-avatar">
                            <div class="avatar avatar-2xl me-3">
                              <img class="rounded-circle" src="assets/images/1-thumb.png" alt="" />
                            </div>
                          </div>
                          <div class="notification-body">
                            <p class="mb-1"><strong>Emma Watson</strong> replied to your comment : "Hello world ????"</p>
                            <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????</span>Just now</span>
                          </div>
                        </a>
                      </div>
                      <div class="list-group-item">
                        <a class="notification notification-flush notification-unread" href="#!">
                          <div class="notification-avatar">
                            <div class="avatar avatar-2xl me-3">
                              <div class="avatar-name rounded-circle"><span>AB</span></div>
                            </div>
                          </div>
                          <div class="notification-body">
                            <p class="mb-1"><strong>Albert Brooks</strong> reacted to <strong>Mia Khalifa's</strong> status</p>
                            <span class="notification-time"><span class="me-2 fab fa-gratipay text-danger"></span>9hr</span>
                          </div>
                        </a>
                      </div>
                      <div class="list-group-title border-bottom">EARLIER</div>
                      <div class="list-group-item">
                        <a class="notification notification-flush" href="#!">
                          <div class="notification-avatar">
                            <div class="avatar avatar-2xl me-3">
                              <img class="rounded-circle" src="assets/images/weather-sm.jpg" alt="" />
                            </div>
                          </div>
                          <div class="notification-body">
                            <p class="mb-1">The forecast today shows a low of 20&#8451; in California. See today's weather.</p>
                            <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????️</span>1d</span>
                          </div>
                        </a>
                      </div>
                      <div class="list-group-item">
                        <a class="border-bottom-0 notification-unread  notification notification-flush" href="#!">
                          <div class="notification-avatar">
                            <div class="avatar avatar-xl me-3">
                              <img class="rounded-circle" src="assets/images/oxford.png" alt="" />
                            </div>
                          </div>
                          <div class="notification-body">
                            <p class="mb-1"><strong>University of Oxford</strong> created an event : "Causal Inference Hilary 2019"</p>
                            <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">✌️</span>1w</span>
                          </div>
                        </a>
                      </div>
                      <div class="list-group-item">
                        <a class="border-bottom-0 notification notification-flush" href="#!">
                          <div class="notification-avatar">
                            <div class="avatar avatar-xl me-3">
                              <img class="rounded-circle" src="assets/images/10.jpg" alt="" />
                            </div>
                          </div>
                          <div class="notification-body">
                            <p class="mb-1"><strong>James Cameron</strong> invited to join the group: United Nations International Children's Fund</p>
                            <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????‍</span>2d</span>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                  <div class="card-footer text-center border-top"><a class="card-link d-block" href="app/social/notifications#">View all</a></div>
                </div>
              </div>
            </li>
            <li class="nav-item dropdown px-1">
              <a class="nav-link fa-icon-wait nine-dots p-1" id="navbarDropdownMenu" role="button" data-hide-on-body-scroll="data-hide-on-body-scroll" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="43" viewBox="0 0 16 16" fill="none">
                  <circle cx="2" cy="2" r="2" fill="#6C6E71"></circle>
                  <circle cx="2" cy="8" r="2" fill="#6C6E71"></circle>
                  <circle cx="2" cy="14" r="2" fill="#6C6E71"></circle>
                  <circle cx="8" cy="8" r="2" fill="#6C6E71"></circle>
                  <circle cx="8" cy="14" r="2" fill="#6C6E71"></circle>
                  <circle cx="14" cy="8" r="2" fill="#6C6E71"></circle>
                  <circle cx="14" cy="14" r="2" fill="#6C6E71"></circle>
                  <circle cx="8" cy="2" r="2" fill="#6C6E71"></circle>
                  <circle cx="14" cy="2" r="2" fill="#6C6E71"></circle>
                </svg></a>
              <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end dropdown-menu-card dropdown-caret-bg" aria-labelledby="navbarDropdownMenu">
                <div class="card shadow-none">
                  <div class="scrollbar-overlay nine-dots-dropdown">
                    <div class="card-body px-3">
                      <div class="row text-center gx-0 gy-0">
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="pages/user/profile#" target="_blank">
                            <div class="avatar avatar-2xl"> <img class="rounded-circle" src="assets/images/3.jpg" alt="" /></div>
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11">Account</p>
                          </a></div>
                       
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/google.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Google</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/spotify.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Spotify</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/steam.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Steam</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/github-light.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Github</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/discord.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Discord</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/xbox.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">xbox</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/trello.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Kanban</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/hp.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Hp</p>
                          </a></div>
                        <div class="col-12">
                          <hr class="my-3 mx-n3 bg-200" />
                        </div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/linkedin.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Linkedin</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/twitter.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Twitter</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/facebook.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Facebook</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/instagram.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Instagram</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/pinterest.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Pinterest</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/slack.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Slack</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/deviantart.png" alt="" width="40" height="40" />
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Deviantart</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="app/events/event-detail#" target="_blank">
                            <div class="avatar avatar-2xl">
                              <div class="avatar-name rounded-circle bg-primary-subtle text-primary"><span class="fs-7">E</span></div>
                            </div>
                            <p class="mb-0 fw-medium text-800 text-truncate fs-11">Events</p>
                          </a></div>
                        <div class="col-12"><a class="btn btn-outline-primary btn-sm mt-4" href="#!">Show more</a></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="nav-item dropdown"><a class="nav-link pe-0 ps-2" id="navbarDropdownUser" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <div class="avatar avatar-xl">
                  <img class="rounded-circle" src="assets/images/3-thumb.png" alt="" />
                </div>
              </a>
              <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end py-0" aria-labelledby="navbarDropdownUser">
                <div class="bg-white dark__bg-1000 rounded-2 py-2">
                  <a class="dropdown-item fw-bold text-warning" href="#!"><span class="fas fa-crown me-1"></span><span>Go Pro</span></a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#!">Set status</a>
                  <a class="dropdown-item" href="pages/user/profile#">Profile &amp; account</a>
                  <a class="dropdown-item" href="#!">Feedback</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="pages/user/settings#">Settings</a>
                  <a class="dropdown-item" href="pages/authentication/card/logout#">Logout</a>
                </div>
              </div>
            </li>
          </ul>
        </nav>
        <div class="content">
          <nav class="navbar navbar-light navbar-glass navbar-top navbar-expand" style="display: none;">
            <button class="btn navbar-toggler-humburger-icon navbar-toggler me-1 me-sm-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarVerticalCollapse" aria-controls="navbarVerticalCollapse" aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggle-icon"><span class="toggle-line"></span></span></button>
            <a class="navbar-brand me-1 me-sm-3" href="#">
              <div class="d-flex align-items-center"><img class="me-2" src="assets/images/falcon.png" alt="" width="40" /><span class="font-sans-serif text-primary">falcon</span></div>
            </a>
            <ul class="navbar-nav align-items-center d-none d-lg-block">
              <li class="nav-item">
                <div class="search-box" data-list='{"valueNames":["title"]}'>
                  <form class="position-relative" data-bs-toggle="search" data-bs-display="static"><input class="form-control search-input fuzzy-search" type="search" placeholder="Search..." aria-label="Search" />
                    <span class="fas fa-search search-box-icon"></span>
                  </form>
                  <div class="btn-close-falcon-container position-absolute end-0 top-50 translate-middle shadow-none" data-bs-dismiss="search"><button class="btn btn-link btn-close-falcon p-0" aria-label="Close"></button></div>
                  <div class="dropdown-menu border font-base start-0 mt-2 py-0 overflow-hidden w-100">
                    <div class="scrollbar list py-3" style="max-height: 24rem;">
                      <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Recently Browsed</h6><a class="dropdown-item fs-10 px-x1 py-1 hover-primary" href="app/events/event-detail#">
                        <div class="d-flex align-items-center">
                          <span class="fas fa-circle me-2 text-300 fs-11"></span>
                          <div class="fw-normal title">Pages <span class="fas fa-chevron-right mx-1 text-500 fs-11" data-fa-transform="shrink-2"></span> Events</div>
                        </div>
                      </a>
                      <a class="dropdown-item fs-10 px-x1 py-1 hover-primary" href="app/e-commerce/customers#">
                        <div class="d-flex align-items-center">
                          <span class="fas fa-circle me-2 text-300 fs-11"></span>
                          <div class="fw-normal title">E-commerce <span class="fas fa-chevron-right mx-1 text-500 fs-11" data-fa-transform="shrink-2"></span> Customers</div>
                        </div>
                      </a>
                      <hr class="text-200 dark__text-900" />
                      <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Suggested Filter</h6><a class="dropdown-item px-x1 py-1 fs-9" href="app/e-commerce/customers#">
                        <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-subtle-warning">customers:</span>
                          <div class="flex-1 fs-10 title">All customers list</div>
                        </div>
                      </a>
                      <a class="dropdown-item px-x1 py-1 fs-9" href="app/events/event-detail#">
                        <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-subtle-success">events:</span>
                          <div class="flex-1 fs-10 title">Latest events in current month</div>
                        </div>
                      </a>
                      <a class="dropdown-item px-x1 py-1 fs-9" href="app/e-commerce/product/product-grid#">
                        <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-subtle-info">products:</span>
                          <div class="flex-1 fs-10 title">Most popular products</div>
                        </div>
                      </a>
                      <hr class="text-200 dark__text-900" />
                      <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Files</h6><a class="dropdown-item px-x1 py-2" href="#!">
                        <div class="d-flex align-items-center">
                          <div class="file-thumbnail me-2"><img class="border h-100 w-100 object-fit-cover rounded-3" src="assets/images/3-thumb.png" alt="" /></div>
                          <div class="flex-1">
                            <h6 class="mb-0 title">iPhone</h6>
                            <p class="fs-11 mb-0 d-flex"><span class="fw-semi-bold">Antony</span><span class="fw-medium text-600 ms-2">27 Sep at 10:30 AM</span></p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item px-x1 py-2" href="#!">
                        <div class="d-flex align-items-center">
                          <div class="file-thumbnail me-2"><img class="img-fluid" src="assets/images/zip.png" alt="" /></div>
                          <div class="flex-1">
                            <h6 class="mb-0 title">Falcon v1.8.2</h6>
                            <p class="fs-11 mb-0 d-flex"><span class="fw-semi-bold">John</span><span class="fw-medium text-600 ms-2">30 Sep at 12:30 PM</span></p>
                          </div>
                        </div>
                      </a>
                      <hr class="text-200 dark__text-900" />
                      <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Members</h6><a class="dropdown-item px-x1 py-2" href="pages/user/profile#">
                        <div class="d-flex align-items-center">
                          <div class="avatar avatar-l status-online me-2">
                            <img class="rounded-circle" src="assets/images/1.jpg" alt="" />
                          </div>
                          <div class="flex-1">
                            <h6 class="mb-0 title">Anna Karinina</h6>
                            <p class="fs-11 mb-0 d-flex">Technext Limited</p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item px-x1 py-2" href="pages/user/profile#">
                        <div class="d-flex align-items-center">
                          <div class="avatar avatar-l me-2">
                            <img class="rounded-circle" src="assets/images/2.jpg" alt="" />
                          </div>
                          <div class="flex-1">
                            <h6 class="mb-0 title">Antony Hopkins</h6>
                            <p class="fs-11 mb-0 d-flex">Brain Trust</p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item px-x1 py-2" href="pages/user/profile#">
                        <div class="d-flex align-items-center">
                          <div class="avatar avatar-l me-2">
                            <img class="rounded-circle" src="assets/images/3.jpg" alt="" />
                          </div>
                          <div class="flex-1">
                            <h6 class="mb-0 title">Emma Watson</h6>
                            <p class="fs-11 mb-0 d-flex">Google</p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <div class="text-center mt-n3">
                      <p class="fallback fw-bold fs-8 d-none">No Result Found.</p>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <ul class="navbar-nav navbar-nav-icons ms-auto flex-row align-items-center">
              <li class="nav-item ps-2 pe-0">
                <div class="dropdown theme-control-dropdown"><a class="nav-link d-flex align-items-center dropdown-toggle fa-icon-wait fs-9 pe-1 py-0" href="#" role="button" id="themeSwitchDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-sun fs-7" data-fa-transform="shrink-2" data-theme-dropdown-toggle-icon="light"></span><span class="fas fa-moon fs-7" data-fa-transform="shrink-3" data-theme-dropdown-toggle-icon="dark"></span><span class="fas fa-adjust fs-7" data-fa-transform="shrink-2" data-theme-dropdown-toggle-icon="auto"></span></a>
                  <div class="dropdown-menu dropdown-menu-end dropdown-caret border py-0 mt-3" aria-labelledby="themeSwitchDropdown">
                    <div class="bg-white dark__bg-1000 rounded-2 py-2"><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="light" data-theme-control="theme"><span class="fas fa-sun"></span>Light<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="dark" data-theme-control="theme"><span class="fas fa-moon" data-fa-transform=""></span>Dark<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="auto" data-theme-control="theme"><span class="fas fa-adjust" data-fa-transform=""></span>Auto<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button></div>
                  </div>
                </div>
              </li>
              <li class="nav-item d-none d-sm-block">
                <a class="nav-link px-0 notification-indicator notification-indicator-warning notification-indicator-fill fa-icon-wait" href="app/e-commerce/shopping-cart#"><span class="fas fa-shopping-cart" data-fa-transform="shrink-7" style="font-size: 33px;"></span><span class="notification-indicator-number">1</span></a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link notification-indicator notification-indicator-primary px-0 fa-icon-wait" id="navbarDropdownNotification" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-hide-on-body-scroll="data-hide-on-body-scroll"><span class="fas fa-bell" data-fa-transform="shrink-6" style="font-size: 33px;"></span></a>
                <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end dropdown-menu-card dropdown-menu-notification dropdown-caret-bg" aria-labelledby="navbarDropdownNotification">
                  <div class="card card-notification shadow-none">
                    <div class="card-header">
                      <div class="row justify-content-between align-items-center">
                        <div class="col-auto">
                          <h6 class="card-header-title mb-0">Notifications</h6>
                        </div>
                        <div class="col-auto ps-0 ps-sm-3"><a class="card-link fw-normal" href="#">Mark all as read</a></div>
                      </div>
                    </div>
                    <div class="scrollbar-overlay" style="max-height:19rem">
                      <div class="list-group list-group-flush fw-normal fs-10">
                        <div class="list-group-title border-bottom">NEW</div>
                        <div class="list-group-item">
                          <a class="notification notification-flush notification-unread" href="#!">
                            <div class="notification-avatar">
                              <div class="avatar avatar-2xl me-3">
                                <img class="rounded-circle" src="assets/images/1-thumb.png" alt="" />
                              </div>
                            </div>
                            <div class="notification-body">
                              <p class="mb-1"><strong>Emma Watson</strong> replied to your comment : "Hello world ????"</p>
                              <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????</span>Just now</span>
                            </div>
                          </a>
                        </div>
                        <div class="list-group-item">
                          <a class="notification notification-flush notification-unread" href="#!">
                            <div class="notification-avatar">
                              <div class="avatar avatar-2xl me-3">
                                <div class="avatar-name rounded-circle"><span>AB</span></div>
                              </div>
                            </div>
                            <div class="notification-body">
                              <p class="mb-1"><strong>Albert Brooks</strong> reacted to <strong>Mia Khalifa's</strong> status</p>
                              <span class="notification-time"><span class="me-2 fab fa-gratipay text-danger"></span>9hr</span>
                            </div>
                          </a>
                        </div>
                        <div class="list-group-title border-bottom">EARLIER</div>
                        <div class="list-group-item">
                          <a class="notification notification-flush" href="#!">
                            <div class="notification-avatar">
                              <div class="avatar avatar-2xl me-3">
                                <img class="rounded-circle" src="assets/images/weather-sm.jpg" alt="" />
                              </div>
                            </div>
                            <div class="notification-body">
                              <p class="mb-1">The forecast today shows a low of 20&#8451; in California. See today's weather.</p>
                              <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????️</span>1d</span>
                            </div>
                          </a>
                        </div>
                        <div class="list-group-item">
                          <a class="border-bottom-0 notification-unread  notification notification-flush" href="#!">
                            <div class="notification-avatar">
                              <div class="avatar avatar-xl me-3">
                                <img class="rounded-circle" src="assets/images/oxford.png" alt="" />
                              </div>
                            </div>
                            <div class="notification-body">
                              <p class="mb-1"><strong>University of Oxford</strong> created an event : "Causal Inference Hilary 2019"</p>
                              <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">✌️</span>1w</span>
                            </div>
                          </a>
                        </div>
                        <div class="list-group-item">
                          <a class="border-bottom-0 notification notification-flush" href="#!">
                            <div class="notification-avatar">
                              <div class="avatar avatar-xl me-3">
                                <img class="rounded-circle" src="assets/images/10.jpg" alt="" />
                              </div>
                            </div>
                            <div class="notification-body">
                              <p class="mb-1"><strong>James Cameron</strong> invited to join the group: United Nations International Children's Fund</p>
                              <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????‍</span>2d</span>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="card-footer text-center border-top"><a class="card-link d-block" href="app/social/notifications#">View all</a></div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown px-1">
                <a class="nav-link fa-icon-wait nine-dots p-1" id="navbarDropdownMenu" role="button" data-hide-on-body-scroll="data-hide-on-body-scroll" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="43" viewBox="0 0 16 16" fill="none">
                    <circle cx="2" cy="2" r="2" fill="#6C6E71"></circle>
                    <circle cx="2" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="2" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="2" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="2" r="2" fill="#6C6E71"></circle>
                  </svg></a>
                <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end dropdown-menu-card dropdown-caret-bg" aria-labelledby="navbarDropdownMenu">
                  <div class="card shadow-none">
                    <div class="scrollbar-overlay nine-dots-dropdown">
                      <div class="card-body px-3">
                        <div class="row text-center gx-0 gy-0">
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="pages/user/profile#" target="_blank">
                              <div class="avatar avatar-2xl"> <img class="rounded-circle" src="assets/images/3.jpg" alt="" /></div>
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11">Account</p>
                            </a></div>
                         
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/google.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Google</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/spotify.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Spotify</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/steam.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Steam</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/github-light.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Github</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/discord.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Discord</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/xbox.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">xbox</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/trello.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Kanban</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/hp.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Hp</p>
                            </a></div>
                          <div class="col-12">
                            <hr class="my-3 mx-n3 bg-200" />
                          </div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/linkedin.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Linkedin</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/twitter.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Twitter</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/facebook.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Facebook</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/instagram.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Instagram</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/pinterest.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Pinterest</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/slack.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Slack</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/deviantart.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Deviantart</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="app/events/event-detail#" target="_blank">
                              <div class="avatar avatar-2xl">
                                <div class="avatar-name rounded-circle bg-primary-subtle text-primary"><span class="fs-7">E</span></div>
                              </div>
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11">Events</p>
                            </a></div>
                          <div class="col-12"><a class="btn btn-outline-primary btn-sm mt-4" href="#!">Show more</a></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown"><a class="nav-link pe-0 ps-2" id="navbarDropdownUser" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <div class="avatar avatar-xl">
                    <img class="rounded-circle" src="assets/images/3-thumb.png" alt="" />
                  </div>
                </a>
                <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end py-0" aria-labelledby="navbarDropdownUser">
                  <div class="bg-white dark__bg-1000 rounded-2 py-2">
                    <a class="dropdown-item fw-bold text-warning" href="#!"><span class="fas fa-crown me-1"></span><span>Go Pro</span></a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#!">Set status</a>
                    <a class="dropdown-item" href="pages/user/profile#">Profile &amp; account</a>
                    <a class="dropdown-item" href="#!">Feedback</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="pages/user/settings#">Settings</a>
                    <a class="dropdown-item" href="pages/authentication/card/logout#">Logout</a>
                  </div>
                </div>
              </li>
            </ul>
          </nav>
          <nav class="navbar navbar-light navbar-glass navbar-top navbar-expand-lg" style="display: none;" data-move-target="#navbarVerticalNav" data-navbar-top="combo">
            <button class="btn navbar-toggler-humburger-icon navbar-toggler me-1 me-sm-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarVerticalCollapse" aria-controls="navbarVerticalCollapse" aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggle-icon"><span class="toggle-line"></span></span></button>
            <a class="navbar-brand me-1 me-sm-3" href="#">
              <div class="d-flex align-items-center"><img class="me-2" src="assets/images/falcon.png" alt="" width="40" /><span class="font-sans-serif text-primary">falcon</span></div>
            </a>
            <div class="collapse navbar-collapse scrollbar" id="navbarStandard">
              <ul class="navbar-nav" data-top-nav-dropdowns="data-top-nav-dropdowns">
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dashboards">Dashboard</a>
                  <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="dashboards">
                    <div class="bg-white dark__bg-1000 rounded-3 py-2"><a class="dropdown-item link-600 fw-medium" href="#">Default</a><a class="dropdown-item link-600 fw-medium" href="dashboard/analytics#">Analytics</a><a class="dropdown-item link-600 fw-medium" href="dashboard/crm#">CRM</a><a class="dropdown-item link-600 fw-medium" href="dashboard/e-commerce#">E commerce</a><a class="dropdown-item link-600 fw-medium" href="dashboard/lms#">LMS<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="dropdown-item link-600 fw-medium" href="dashboard/project-management#">Management</a><a class="dropdown-item link-600 fw-medium" href="dashboard/saas#">SaaS</a><a class="dropdown-item link-600 fw-medium" href="dashboard/support-desk#">Support desk<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a></div>
                  </div>
                </li>
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="apps">App</a>
                  <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="apps">
                    <div class="card navbar-card-app shadow-none dark__bg-1000">
                      <div class="card-body scrollbar max-h-dropdown"><img class="img-dropdown" src="assets/images/authentication-corner.png" width="130" alt="" />
                        <div class="row">
                          <div class="col-6 col-md-4">
                            <div class="nav flex-column"><a class="nav-link py-1 link-600 fw-medium" href="app/calendar#">Calendar</a><a class="nav-link py-1 link-600 fw-medium" href="app/chat#">Chat</a><a class="nav-link py-1 link-600 fw-medium" href="app/kanban#">Kanban</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Social</p><a class="nav-link py-1 link-600 fw-medium" href="app/social/feed#">Feed</a><a class="nav-link py-1 link-600 fw-medium" href="app/social/activity-log#">Activity log</a><a class="nav-link py-1 link-600 fw-medium" href="app/social/notifications#">Notifications</a><a class="nav-link py-1 link-600 fw-medium" href="app/social/followers#">Followers</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Support Desk</p><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/table-view#">Table view</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/card-view#">Card view</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/contacts#">Contacts</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/contact-details#">Contact details</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/tickets-preview#">Tickets preview</a><a class="nav-link py-1 link-600 fw-medium" href="app/support-desk/quick-links#">Quick links</a>
                            </div>
                          </div>
                          <div class="col-6 col-md-4">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">E-Learning</p><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/course-list#">Course list</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/course-grid#">Course grid</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/course-details#">Course details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/course/create-a-course#">Create a course</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/student-overview#">Student overview</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-learning/trainer-profile#">Trainer profile</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Events</p><a class="nav-link py-1 link-600 fw-medium" href="app/events/create-an-event#">Create an event</a><a class="nav-link py-1 link-600 fw-medium" href="app/events/event-detail#">Event detail</a><a class="nav-link py-1 link-600 fw-medium" href="app/events/event-list#">Event list</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Email</p><a class="nav-link py-1 link-600 fw-medium" href="app/email/inbox#">Inbox</a><a class="nav-link py-1 link-600 fw-medium" href="app/email/email-detail#">Email detail</a><a class="nav-link py-1 link-600 fw-medium" href="app/email/compose#">Compose</a>
                            </div>
                          </div>
                          <div class="col-6 col-md-4">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">E-Commerce</p><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/product-list#">Product list</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/product-grid#">Product grid</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/product-details#">Product details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/product/add-product#">Add product</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/orders/order-list#">Order list</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/orders/order-details#">Order details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/customers#">Customers</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/customer-details#">Customer details</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/shopping-cart#">Shopping cart</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/checkout#">Checkout</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/billing#">Billing</a><a class="nav-link py-1 link-600 fw-medium" href="app/e-commerce/invoice#">Invoice</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="pagess">Pages</a>
                  <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="pagess">
                    <div class="card navbar-card-pages shadow-none dark__bg-1000">
                      <div class="card-body scrollbar max-h-dropdown"><img class="img-dropdown" src="assets/images/authentication-corner.png" width="130" alt="" />
                        <div class="row">
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Simple Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/login#">Login</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/logout#">Logout</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/register#">Register</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/forgot-password#">Forgot password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/confirm-mail#">Confirm mail</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/reset-password#">Reset password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/simple/lock-screen#">Lock screen</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Card Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/login#">Login</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/logout#">Logout</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/register#">Register</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/forgot-password#">Forgot password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/confirm-mail#">Confirm mail</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/reset-password#">Reset password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/card/lock-screen#">Lock screen</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Split Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/login#">Login</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/logout#">Logout</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/register#">Register</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/forgot-password#">Forgot password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/confirm-mail#">Confirm mail</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/reset-password#">Reset password</a><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/split/lock-screen#">Lock screen</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Layouts</p><a class="nav-link py-1 link-600 fw-medium" href="demo/navbar-vertical#">Navbar vertical</a><a class="nav-link py-1 link-600 fw-medium" href="demo/navbar-top#">Top nav</a><a class="nav-link py-1 link-600 fw-medium" href="demo/navbar-double-top#">Double top<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="demo/combo-nav#">Combo nav</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Others</p><a class="nav-link py-1 link-600 fw-medium" href="pages/starter#">Starter</a><a class="nav-link py-1 link-600 fw-medium" href="pages/landing#">Landing</a>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">User</p><a class="nav-link py-1 link-600 fw-medium" href="pages/user/profile#">Profile</a><a class="nav-link py-1 link-600 fw-medium" href="pages/user/settings#">Settings</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Pricing</p><a class="nav-link py-1 link-600 fw-medium" href="pages/pricing/pricing-default#">Pricing default</a><a class="nav-link py-1 link-600 fw-medium" href="pages/pricing/pricing-alt#">Pricing alt</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Errors</p><a class="nav-link py-1 link-600 fw-medium" href="pages/errors/404#">404</a><a class="nav-link py-1 link-600 fw-medium" href="pages/errors/500#">500</a>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Miscellaneous</p><a class="nav-link py-1 link-600 fw-medium" href="pages/miscellaneous/associations#">Associations</a><a class="nav-link py-1 link-600 fw-medium" href="pages/miscellaneous/invite-people#">Invite people</a><a class="nav-link py-1 link-600 fw-medium" href="pages/miscellaneous/privacy-policy#">Privacy policy</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">FAQ</p><a class="nav-link py-1 link-600 fw-medium" href="pages/faq/faq-basic#">Faq basic</a><a class="nav-link py-1 link-600 fw-medium" href="pages/faq/faq-alt#">Faq alt</a><a class="nav-link py-1 link-600 fw-medium" href="pages/faq/faq-accordion#">Faq accordion</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Other Auth</p><a class="nav-link py-1 link-600 fw-medium" href="pages/authentication/wizard#">Wizard</a><a class="nav-link py-1 link-600 fw-medium" href="#authentication-modal" data-bs-toggle="modal">Modal</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="moduless">Modules</a>
                  <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="moduless">
                    <div class="card navbar-card-components shadow-none dark__bg-1000">
                      <div class="card-body scrollbar max-h-dropdown"><img class="img-dropdown" src="assets/images/authentication-corner.png" width="130" alt="" />
                        <div class="row">
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Components</p><a class="nav-link py-1 link-600 fw-medium" href="modules/components/accordion#">Accordion</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/alerts#">Alerts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/anchor#">Anchor</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/animated-icons#">Animated icons</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/background#">Background</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/badges#">Badges</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/bottom-bar#">Bottom bar<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/breadcrumbs#">Breadcrumbs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/buttons#">Buttons</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/calendar#">Calendar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/cards#">Cards</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/carousel/bootstrap#">Bootstrap carousel</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column mt-md-4 pt-md-1"><a class="nav-link py-1 link-600 fw-medium" href="modules/components/carousel/swiper#">Swiper</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/collapse#">Collapse</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/cookie-notice#">Cookie notice</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/countup#">Countup</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/draggable#">Draggable</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/dropdowns#">Dropdowns</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/jquery-components#">Jquery<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/list-group#">List group</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/modals#">Modals</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/navs#">Navs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/navbar#">Navbar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/vertical-navbar#">Navbar vertical</a></div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column mt-xxl-4 pt-xxl-1"><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/top-navbar#">Top nav</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/double-top-navbar#">Double top<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/combo-navbar#">Combo nav</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/navs-and-tabs/tabs#">Tabs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/offcanvas#">Offcanvas</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/avatar#">Avatar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/images#">Images</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/figures#">Figures</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/hoverbox#">Hoverbox</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pictures/lightbox#">Lightbox</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/progress-bar#">Progress bar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/placeholder#">Placeholder</a></div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column mt-xxl-4 pt-xxl-1"><a class="nav-link py-1 link-600 fw-medium" href="modules/components/pagination#">Pagination</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/popovers#">Popovers</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/scrollspy#">Scrollspy</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/search#">Search</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/spinners#">Spinners</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/timeline#">Timeline</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/toasts#">Toasts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/tooltips#">Tooltips</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/treeview#">Treeview</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/typed-text#">Typed text</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/videos/embed#">Embed</a><a class="nav-link py-1 link-600 fw-medium" href="modules/components/videos/plyr#">Plyr</a></div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Utilities</p><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/background#">Background</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/borders#">Borders</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/clearfix#">Clearfix</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/colors#">Colors</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/colored-links#">Colored links</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/display#">Display</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/flex#">Flex</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/float#">Float</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/focus-ring#">Focus ring</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/grid#">Grid</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/icon-link#">Icon link</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/overlayscrollbar#">Overlay scrollbar</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/position#">Position</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/ratio#">Ratio</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/spacing#">Spacing</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/sizing#">Sizing</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/stretched-link#">Stretched link</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/text-truncation#">Text truncation</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/typography#">Typography</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/vertical-align#">Vertical align</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/vertical-rule#">Vertical rule</a><a class="nav-link py-1 link-600 fw-medium" href="modules/utilities/visibility#">Visibility</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Tables</p><a class="nav-link py-1 link-600 fw-medium" href="modules/tables/basic-tables#">Basic tables</a><a class="nav-link py-1 link-600 fw-medium" href="modules/tables/advance-tables#">Advance tables</a><a class="nav-link py-1 link-600 fw-medium" href="modules/tables/bulk-select#">Bulk select</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Charts</p><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/chartjs#">Chartjs</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/d3js#">D3js<span class="badge rounded-pill ms-2 badge-subtle-success">New</span></a>
                              <p class="nav-link text-700 mb-0 fw-bold">ECharts</p><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/line-charts#">Line charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/bar-charts#">Bar charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/candlestick-charts#">Candlestick charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/geo-map#">Geo map</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/scatter-charts#">Scatter charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/pie-charts#">Pie charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/gauge-charts#">Gauge charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/radar-charts#">Radar charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/heatmap-charts#">Heatmap charts</a><a class="nav-link py-1 link-600 fw-medium" href="modules/charts/echarts/how-to-use#">How to use</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column">
                              <p class="nav-link text-700 mb-0 fw-bold">Forms</p><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/form-control#">Form control</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/input-group#">Input group</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/select#">Select</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/checks#">Checks</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/range#">Range</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/basic/layout#">Layout</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/advance-select#">Advance select</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/date-picker#">Date picker</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/editor#">Editor</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/emoji-button#">Emoji button</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/file-uploader#">File uploader</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/input-mask#">Input mask</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/range-slider#">Range slider</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/advance/rating#">Rating</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/floating-labels#">Floating labels</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/wizard#">Wizard</a><a class="nav-link py-1 link-600 fw-medium" href="modules/forms/validation#">Validation</a>
                            </div>
                          </div>
                          <div class="col-6 col-xxl-3">
                            <div class="nav flex-column pt-xxl-1">
                              <p class="nav-link text-700 mb-0 fw-bold">Icons</p><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/font-awesome#">Font awesome</a><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/bootstrap-icons#">Bootstrap icons</a><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/feather#">Feather</a><a class="nav-link py-1 link-600 fw-medium" href="modules/icons/material-icons#">Material icons</a>
                              <p class="nav-link text-700 mb-0 fw-bold">Maps</p><a class="nav-link py-1 link-600 fw-medium" href="modules/maps/google-map#">Google map</a><a class="nav-link py-1 link-600 fw-medium" href="modules/maps/leaflet-map#">Leaflet map</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="documentations">Documentation</a>
                  <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="documentations">
                    <div class="bg-white dark__bg-1000 rounded-3 py-2"><a class="dropdown-item link-600 fw-medium" href="documentation/getting-started#">Getting started</a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/configuration#">Configuration</a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/styling#">Styling<span class="badge rounded-pill ms-2 badge-subtle-success">Updated</span></a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/dark-mode#">Dark mode</a><a class="dropdown-item link-600 fw-medium" href="documentation/customization/plugin#">Plugin</a><a class="dropdown-item link-600 fw-medium" href="documentation/faq#">Faq</a><a class="dropdown-item link-600 fw-medium" href="documentation/gulp#">Gulp</a><a class="dropdown-item link-600 fw-medium" href="documentation/design-file#">Design file</a><a class="dropdown-item link-600 fw-medium" href="changelog#">Changelog</a></div>
                  </div>
                </li>
              </ul>
            </div>
            <ul class="navbar-nav navbar-nav-icons ms-auto flex-row align-items-center">
              <li class="nav-item ps-2 pe-0">
                <div class="dropdown theme-control-dropdown"><a class="nav-link d-flex align-items-center dropdown-toggle fa-icon-wait fs-9 pe-1 py-0" href="#" role="button" id="themeSwitchDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-sun fs-7" data-fa-transform="shrink-2" data-theme-dropdown-toggle-icon="light"></span><span class="fas fa-moon fs-7" data-fa-transform="shrink-3" data-theme-dropdown-toggle-icon="dark"></span><span class="fas fa-adjust fs-7" data-fa-transform="shrink-2" data-theme-dropdown-toggle-icon="auto"></span></a>
                  <div class="dropdown-menu dropdown-menu-end dropdown-caret border py-0 mt-3" aria-labelledby="themeSwitchDropdown">
                    <div class="bg-white dark__bg-1000 rounded-2 py-2"><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="light" data-theme-control="theme"><span class="fas fa-sun"></span>Light<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="dark" data-theme-control="theme"><span class="fas fa-moon" data-fa-transform=""></span>Dark<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="auto" data-theme-control="theme"><span class="fas fa-adjust" data-fa-transform=""></span>Auto<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button></div>
                  </div>
                </div>
              </li>
              <li class="nav-item d-none d-sm-block">
                <a class="nav-link px-0 notification-indicator notification-indicator-warning notification-indicator-fill fa-icon-wait" href="app/e-commerce/shopping-cart#"><span class="fas fa-shopping-cart" data-fa-transform="shrink-7" style="font-size: 33px;"></span><span class="notification-indicator-number">1</span></a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link notification-indicator notification-indicator-primary px-0 fa-icon-wait" id="navbarDropdownNotification" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-hide-on-body-scroll="data-hide-on-body-scroll"><span class="fas fa-bell" data-fa-transform="shrink-6" style="font-size: 33px;"></span></a>
                <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end dropdown-menu-card dropdown-menu-notification dropdown-caret-bg" aria-labelledby="navbarDropdownNotification">
                  <div class="card card-notification shadow-none">
                    <div class="card-header">
                      <div class="row justify-content-between align-items-center">
                        <div class="col-auto">
                          <h6 class="card-header-title mb-0">Notifications</h6>
                        </div>
                        <div class="col-auto ps-0 ps-sm-3"><a class="card-link fw-normal" href="#">Mark all as read</a></div>
                      </div>
                    </div>
                    <div class="scrollbar-overlay" style="max-height:19rem">
                      <div class="list-group list-group-flush fw-normal fs-10">
                        <div class="list-group-title border-bottom">NEW</div>
                        <div class="list-group-item">
                          <a class="notification notification-flush notification-unread" href="#!">
                            <div class="notification-avatar">
                              <div class="avatar avatar-2xl me-3">
                                <img class="rounded-circle" src="assets/images/1-thumb.png" alt="" />
                              </div>
                            </div>
                            <div class="notification-body">
                              <p class="mb-1"><strong>Emma Watson</strong> replied to your comment : "Hello world ????"</p>
                              <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????</span>Just now</span>
                            </div>
                          </a>
                        </div>
                        <div class="list-group-item">
                          <a class="notification notification-flush notification-unread" href="#!">
                            <div class="notification-avatar">
                              <div class="avatar avatar-2xl me-3">
                                <div class="avatar-name rounded-circle"><span>AB</span></div>
                              </div>
                            </div>
                            <div class="notification-body">
                              <p class="mb-1"><strong>Albert Brooks</strong> reacted to <strong>Mia Khalifa's</strong> status</p>
                              <span class="notification-time"><span class="me-2 fab fa-gratipay text-danger"></span>9hr</span>
                            </div>
                          </a>
                        </div>
                        <div class="list-group-title border-bottom">EARLIER</div>
                        <div class="list-group-item">
                          <a class="notification notification-flush" href="#!">
                            <div class="notification-avatar">
                              <div class="avatar avatar-2xl me-3">
                                <img class="rounded-circle" src="assets/images/weather-sm.jpg" alt="" />
                              </div>
                            </div>
                            <div class="notification-body">
                              <p class="mb-1">The forecast today shows a low of 20&#8451; in California. See today's weather.</p>
                              <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????️</span>1d</span>
                            </div>
                          </a>
                        </div>
                        <div class="list-group-item">
                          <a class="border-bottom-0 notification-unread  notification notification-flush" href="#!">
                            <div class="notification-avatar">
                              <div class="avatar avatar-xl me-3">
                                <img class="rounded-circle" src="assets/images/oxford.png" alt="" />
                              </div>
                            </div>
                            <div class="notification-body">
                              <p class="mb-1"><strong>University of Oxford</strong> created an event : "Causal Inference Hilary 2019"</p>
                              <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">✌️</span>1w</span>
                            </div>
                          </a>
                        </div>
                        <div class="list-group-item">
                          <a class="border-bottom-0 notification notification-flush" href="#!">
                            <div class="notification-avatar">
                              <div class="avatar avatar-xl me-3">
                                <img class="rounded-circle" src="assets/images/10.jpg" alt="" />
                              </div>
                            </div>
                            <div class="notification-body">
                              <p class="mb-1"><strong>James Cameron</strong> invited to join the group: United Nations International Children's Fund</p>
                              <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">????‍</span>2d</span>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="card-footer text-center border-top"><a class="card-link d-block" href="app/social/notifications#">View all</a></div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown px-1">
                <a class="nav-link fa-icon-wait nine-dots p-1" id="navbarDropdownMenu" role="button" data-hide-on-body-scroll="data-hide-on-body-scroll" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="43" viewBox="0 0 16 16" fill="none">
                    <circle cx="2" cy="2" r="2" fill="#6C6E71"></circle>
                    <circle cx="2" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="2" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="2" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="2" r="2" fill="#6C6E71"></circle>
                  </svg></a>
                <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end dropdown-menu-card dropdown-caret-bg" aria-labelledby="navbarDropdownMenu">
                  <div class="card shadow-none">
                    <div class="scrollbar-overlay nine-dots-dropdown">
                      <div class="card-body px-3">
                        <div class="row text-center gx-0 gy-0">
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="pages/user/profile#" target="_blank">
                              <div class="avatar avatar-2xl"> <img class="rounded-circle" src="assets/images/3.jpg" alt="" /></div>
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11">Account</p>
                            </a></div>
                         
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/google.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Google</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/spotify.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Spotify</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/steam.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Steam</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/github-light.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Github</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/discord.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Discord</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/xbox.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">xbox</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/trello.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Kanban</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/hp.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Hp</p>
                            </a></div>
                          <div class="col-12">
                            <hr class="my-3 mx-n3 bg-200" />
                          </div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/linkedin.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Linkedin</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/twitter.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Twitter</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/facebook.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Facebook</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/instagram.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Instagram</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/pinterest.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Pinterest</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/slack.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Slack</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="#!" target="_blank"><img class="rounded" src="assets/images/deviantart.png" alt="" width="40" height="40" />
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11 pt-1">Deviantart</p>
                            </a></div>
                          <div class="col-4"><a class="d-block hover-bg-200 px-2 py-3 rounded-3 text-center text-decoration-none" href="app/events/event-detail#" target="_blank">
                              <div class="avatar avatar-2xl">
                                <div class="avatar-name rounded-circle bg-primary-subtle text-primary"><span class="fs-7">E</span></div>
                              </div>
                              <p class="mb-0 fw-medium text-800 text-truncate fs-11">Events</p>
                            </a></div>
                          <div class="col-12"><a class="btn btn-outline-primary btn-sm mt-4" href="#!">Show more</a></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown"><a class="nav-link pe-0 ps-2" id="navbarDropdownUser" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <div class="avatar avatar-xl">
                    <img class="rounded-circle" src="assets/images/3-thumb.png" alt="" />
                  </div>
                </a>
                <div class="dropdown-menu dropdown-caret dropdown-caret dropdown-menu-end py-0" aria-labelledby="navbarDropdownUser">
                  <div class="bg-white dark__bg-1000 rounded-2 py-2">
                    <a class="dropdown-item fw-bold text-warning" href="#!"><span class="fas fa-crown me-1"></span><span>Go Pro</span></a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#!">Set status</a>
                    <a class="dropdown-item" href="pages/user/profile#">Profile &amp; account</a>
                    <a class="dropdown-item" href="#!">Feedback</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="pages/user/settings#">Settings</a>
                    <a class="dropdown-item" href="pages/authentication/card/logout#">Logout</a>
                  </div>
                </div>
              </li>
            </ul>
          </nav>
         
          <div class="row g-3 mb-3">
            <div class="col-md-6 col-xxl-3">
              <div class="card h-md-100 ecommerce-card-min-width">
                <div class="card-header pb-0">
                  <h6 class="mb-0 mt-2 d-flex align-items-center">Weekly Sales<span class="ms-1 text-400" data-bs-toggle="tooltip" data-bs-placement="top" title="Calculated according to last week's sales"><span class="far fa-question-circle" data-fa-transform="shrink-1"></span></span></h6>
                </div>
                <div class="card-body d-flex flex-column justify-content-end">
                  <div class="row">
                    <div class="col">
                      <p class="font-sans-serif lh-1 mb-1 fs-5">$47K</p><span class="badge badge-subtle-success rounded-pill fs-11">+3.5%</span>
                    </div>
                    <div class="col-auto ps-0">
                      <div class="echart-bar-weekly-sales h-100"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xxl-3">
              <div class="card h-md-100">
                <div class="card-header pb-0">
                  <h6 class="mb-0 mt-2">Total Order</h6>
                </div>
                <div class="card-body d-flex flex-column justify-content-end">
                  <div class="row justify-content-between">
                    <div class="col-auto align-self-end">
                      <div class="fs-5 fw-normal font-sans-serif text-700 lh-1 mb-1">58.4K</div><span class="badge rounded-pill fs-11 bg-200 text-primary"><span class="fas fa-caret-up me-1"></span>13.6%</span>
                    </div>
                    <div class="col-auto ps-0 mt-n4">
                      <div class="echart-default-total-order" data-echarts='{"tooltip":{"trigger":"axis","formatter":"{b0} : {c0}"},"xAxis":{"data":["Week 4","Week 5","Week 6","Week 7"]},"series":[{"type":"line","data":[20,40,100,120],"smooth":true,"lineStyle":{"width":3}}],"grid":{"bottom":"2%","top":"2%","right":"10px","left":"10px"}}' data-echart-responsive="true"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xxl-3">
              <div class="card h-md-100">
                <div class="card-body">
                  <div class="row h-100 justify-content-between g-0">
                    <div class="col-5 col-sm-6 col-xxl pe-2">
                      <h6 class="mt-1">Market Share</h6>
                      <div class="fs-11 mt-3">
                        <div class="d-flex flex-between-center mb-1">
                          <div class="d-flex align-items-center"><span class="dot bg-primary"></span><span class="fw-semi-bold">Samsung</span></div>
                          <div class="d-xxl-none">33%</div>
                        </div>
                        <div class="d-flex flex-between-center mb-1">
                          <div class="d-flex align-items-center"><span class="dot bg-info"></span><span class="fw-semi-bold">Huawei</span></div>
                          <div class="d-xxl-none">29%</div>
                        </div>
                        <div class="d-flex flex-between-center mb-1">
                          <div class="d-flex align-items-center"><span class="dot bg-300"></span><span class="fw-semi-bold">Apple</span></div>
                          <div class="d-xxl-none">20%</div>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto position-relative">
                      <div class="echart-market-share"></div>
                      <div class="position-absolute top-50 start-50 translate-middle text-1100 fs-7">26M</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xxl-3">
              <div class="card h-md-100">
                <div class="card-header d-flex flex-between-center pb-0">
                  <h6 class="mb-0">Weather</h6>
                  <div class="dropdown font-sans-serif btn-reveal-trigger"><button class="btn btn-link text-600 btn-sm dropdown-toggle dropdown-caret-none btn-reveal" type="button" id="dropdown-weather-update" data-bs-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-11"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown-weather-update"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
                    </div>
                  </div>
                </div>
                <div class="card-body pt-2">
                  <div class="row g-0 h-100 align-items-center">
                    <div class="col">
                      <div class="d-flex align-items-center"><img class="me-3" src="assets/images/weather-icon.png" alt="" height="60" />
                        <div>
                          <h6 class="mb-2">New York City</h6>
                          <div class="fs-11 fw-semi-bold">
                            <div class="text-warning">Sunny</div>Precipitation: 50%
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto text-center ps-2">
                      <div class="fs-5 fw-normal font-sans-serif text-primary mb-1 lh-1">31&deg;</div>
                      <div class="fs-10 text-800">32&deg; / 25&deg;</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row g-0">
            <div class="col-lg-6 pe-lg-2 mb-3">
              <div class="card h-lg-100 overflow-hidden">
                <div class="card-header bg-body-tertiary">
                  <div class="row align-items-center">
                    <div class="col">
                      <h6 class="mb-0">Running Projects</h6>
                    </div>
                    <div class="col-auto text-center pe-x1"><select class="form-select form-select-sm">
                        <option>Working Time</option>
                        <option>Estimated Time</option>
                        <option>Billable Time</option>
                      </select></div>
                  </div>
                </div>
                <div class="card-body p-0">
                  <div class="row g-0 align-items-center py-2 position-relative border-bottom border-200">
                    <div class="col ps-x1 py-1 position-static">
                      <div class="d-flex align-items-center">
                        <div class="avatar avatar-xl me-3">
                          <div class="avatar-name rounded-circle bg-primary-subtle text-dark"><span class="fs-9 text-primary">F</span></div>
                        </div>
                        <div class="flex-1">
                          <h6 class="mb-0 d-flex align-items-center"><a class="text-800 stretched-link" href="#!">Falcon</a><span class="badge rounded-pill ms-2 bg-200 text-primary">38%</span></h6>
                        </div>
                      </div>
                    </div>
                    <div class="col py-1">
                      <div class="row flex-end-center g-0">
                        <div class="col-auto pe-2">
                          <div class="fs-10 fw-semi-bold">12:50:00</div>
                        </div>
                        <div class="col-5 pe-x1 ps-2">
                          <div class="progress bg-200 me-2" style="height: 5px;" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar rounded-pill" style="width: 38%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row g-0 align-items-center py-2 position-relative border-bottom border-200">
                    <div class="col ps-x1 py-1 position-static">
                      <div class="d-flex align-items-center">
                        <div class="avatar avatar-xl me-3">
                          <div class="avatar-name rounded-circle bg-success-subtle text-dark"><span class="fs-9 text-success">R</span></div>
                        </div>
                        <div class="flex-1">
                          <h6 class="mb-0 d-flex align-items-center"><a class="text-800 stretched-link" href="#!">Reign</a><span class="badge rounded-pill ms-2 bg-200 text-primary">79%</span></h6>
                        </div>
                      </div>
                    </div>
                    <div class="col py-1">
                      <div class="row flex-end-center g-0">
                        <div class="col-auto pe-2">
                          <div class="fs-10 fw-semi-bold">25:20:00</div>
                        </div>
                        <div class="col-5 pe-x1 ps-2">
                          <div class="progress bg-200 me-2" style="height: 5px;" role="progressbar" aria-valuenow="79" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar rounded-pill" style="width: 79%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row g-0 align-items-center py-2 position-relative border-bottom border-200">
                    <div class="col ps-x1 py-1 position-static">
                      <div class="d-flex align-items-center">
                        <div class="avatar avatar-xl me-3">
                          <div class="avatar-name rounded-circle bg-info-subtle text-dark"><span class="fs-9 text-info">B</span></div>
                        </div>
                        <div class="flex-1">
                          <h6 class="mb-0 d-flex align-items-center"><a class="text-800 stretched-link" href="#!">Boots4</a><span class="badge rounded-pill ms-2 bg-200 text-primary">90%</span></h6>
                        </div>
                      </div>
                    </div>
                    <div class="col py-1">
                      <div class="row flex-end-center g-0">
                        <div class="col-auto pe-2">
                          <div class="fs-10 fw-semi-bold">58:20:00</div>
                        </div>
                        <div class="col-5 pe-x1 ps-2">
                          <div class="progress bg-200 me-2" style="height: 5px;" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar rounded-pill" style="width: 90%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row g-0 align-items-center py-2 position-relative border-bottom border-200">
                    <div class="col ps-x1 py-1 position-static">
                      <div class="d-flex align-items-center">
                        <div class="avatar avatar-xl me-3">
                          <div class="avatar-name rounded-circle bg-warning-subtle text-dark"><span class="fs-9 text-warning">R</span></div>
                        </div>
                        <div class="flex-1">
                          <h6 class="mb-0 d-flex align-items-center"><a class="text-800 stretched-link" href="#!">Raven</a><span class="badge rounded-pill ms-2 bg-200 text-primary">40%</span></h6>
                        </div>
                      </div>
                    </div>
                    <div class="col py-1">
                      <div class="row flex-end-center g-0">
                        <div class="col-auto pe-2">
                          <div class="fs-10 fw-semi-bold">21:20:00</div>
                        </div>
                        <div class="col-5 pe-x1 ps-2">
                          <div class="progress bg-200 me-2" style="height: 5px;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar rounded-pill" style="width: 40%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row g-0 align-items-center py-2 position-relative">
                    <div class="col ps-x1 py-1 position-static">
                      <div class="d-flex align-items-center">
                        <div class="avatar avatar-xl me-3">
                          <div class="avatar-name rounded-circle bg-danger-subtle text-dark"><span class="fs-9 text-danger">S</span></div>
                        </div>
                        <div class="flex-1">
                          <h6 class="mb-0 d-flex align-items-center"><a class="text-800 stretched-link" href="#!">Slick</a><span class="badge rounded-pill ms-2 bg-200 text-primary">70%</span></h6>
                        </div>
                      </div>
                    </div>
                    <div class="col py-1">
                      <div class="row flex-end-center g-0">
                        <div class="col-auto pe-2">
                          <div class="fs-10 fw-semi-bold">31:20:00</div>
                        </div>
                        <div class="col-5 pe-x1 ps-2">
                          <div class="progress bg-200 me-2" style="height: 5px;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar rounded-pill" style="width: 70%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-footer bg-body-tertiary p-0"><a class="btn btn-sm btn-link d-block w-100 py-2" href="#!">Show all projects<span class="fas fa-chevron-right ms-1 fs-11"></span></a></div>
              </div>
            </div>
            <div class="col-lg-6 ps-lg-2 mb-3">
              <div class="card h-lg-100">
                <div class="card-header">
                  <div class="row flex-between-center">
                    <div class="col-auto">
                      <h6 class="mb-0">Total Sales</h6>
                    </div>
                    <div class="col-auto d-flex"><select class="form-select form-select-sm select-month me-2">
                        <option value="0">January</option>
                        <option value="1">February</option>
                        <option value="2">March</option>
                        <option value="3">April</option>
                        <option value="4">May</option>
                        <option value="5">Jun</option>
                        <option value="6">July</option>
                        <option value="7">August</option>
                        <option value="8">September</option>
                        <option value="9">October</option>
                        <option value="10">November</option>
                        <option value="11">December</option>
                      </select>
                      <div class="dropdown font-sans-serif btn-reveal-trigger"><button class="btn btn-link text-600 btn-sm dropdown-toggle dropdown-caret-none btn-reveal" type="button" id="dropdown-total-sales" data-bs-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-11"></span></button>
                        <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown-total-sales"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                          <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-body h-100 pe-0"><!-- Find the JS file for the following chart at: src\js\charts\echarts\total-sales.js--><!-- If you are not using gulp based workflow, you can find the transpiled code at: public\assets\js\theme.js-->
                  <div class="echart-line-total-sales h-100" data-echart-responsive="true"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="row g-0">
            <div class="col-lg-6 col-xl-7 col-xxl-8 mb-3 pe-lg-2 mb-3">
              <div class="card h-lg-100">
                <div class="card-body d-flex align-items-center">
                  <div class="w-100">
                    <h6 class="mb-3 text-800">Using Storage <strong class="text-1100">1775.06 MB </strong>of 2 GB</h6>
                    <div class="progress-stacked mb-3 rounded-3" style="height: 10px;">
                      <div class="progress" style="width: 43.72%;" role="progressbar" aria-valuenow="43.72" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar bg-progress-gradient border-end border-100 border-2"></div>
                      </div>
                      <div class="progress" style="width: 18.76%;" role="progressbar" aria-valuenow="18.76" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar bg-info border-end border-100 border-2"></div>
                      </div>
                      <div class="progress" style="width: 9.38%;" role="progressbar" aria-valuenow="9.38" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar bg-success border-end border-100 border-2"></div>
                      </div>
                      <div class="progress" style="width: 28.14%;" role="progressbar" aria-valuenow="28.14" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar bg-200"></div>
                      </div>
                    </div>
                    <div class="row fs-10 fw-semi-bold text-500 g-0">
                      <div class="col-auto d-flex align-items-center pe-3"><span class="dot bg-primary"></span><span>Regular</span><span class="d-none d-md-inline-block d-lg-none d-xxl-inline-block">(895MB)</span></div>
                      <div class="col-auto d-flex align-items-center pe-3"><span class="dot bg-info"></span><span>System</span><span class="d-none d-md-inline-block d-lg-none d-xxl-inline-block">(379MB)</span></div>
                      <div class="col-auto d-flex align-items-center pe-3"><span class="dot bg-success"></span><span>Shared</span><span class="d-none d-md-inline-block d-lg-none d-xxl-inline-block">(192MB)</span></div>
                      <div class="col-auto d-flex align-items-center"><span class="dot bg-200"></span><span>Free</span><span class="d-none d-md-inline-block d-lg-none d-xxl-inline-block">(576MB)</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-xl-5 col-xxl-4 mb-3 ps-lg-2">
              <div class="card h-lg-100">
                <div class="bg-holder bg-card" style="background-image:url(assets/images/corner-1.png);"></div><!--/.bg-holder-->
                <div class="card-body position-relative">
                  <h5 class="text-warning">Running out of your space?</h5>
                  <p class="fs-10 mb-0">Your storage will be running out soon. Get more space and powerful productivity features.</p><a class="btn btn-link fs-10 text-warning mt-lg-3 ps-0" href="#!">Upgrade storage<span class="fas fa-chevron-right ms-1" data-fa-transform="shrink-4 down-1"></span></a>
                </div>
              </div>
            </div>
          </div>
          <div class="row g-0">
            <div class="col-lg-7 col-xl-8 pe-lg-2 mb-3">
              <div class="card h-lg-100 overflow-hidden">
                <div class="card-body p-0">
                  <div class="table-responsive scrollbar">
                    <table class="table table-dashboard mb-0 table-borderless fs-10 border-200">
                      <thead class="bg-body-tertiary">
                        <tr>
                          <th class="text-900">Best Selling Products</th>
                          <th class="text-900 text-end">Revenue ($3333)</th>
                          <th class="text-900 pe-x1 text-end" style="width: 8rem">Revenue (%)</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="border-bottom border-200">
                          <td>
                            <div class="d-flex align-items-center position-relative"><img class="rounded-1 border border-200" src="assets/images/12.png" width="60" alt="" />
                              <div class="flex-1 ms-3">
                                <h6 class="mb-1 fw-semi-bold"><a class="text-1100 stretched-link" href="#!">Raven Pro</a></h6>
                                <p class="fw-semi-bold mb-0 text-500">Landing</p>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-end fw-semi-bold">$1311</td>
                          <td class="align-middle pe-x1">
                            <div class="d-flex align-items-center">
                              <div class="progress me-3 rounded-3 bg-200" style="height: 5px; width:80px;" role="progressbar" aria-valuenow="39" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar rounded-pill" style="width: 39%;"></div>
                              </div>
                              <div class="fw-semi-bold ms-2">39%</div>
                            </div>
                          </td>
                        </tr>
                        <tr class="border-bottom border-200">
                          <td>
                            <div class="d-flex align-items-center position-relative"><img class="rounded-1 border border-200" src="assets/images/10.png" width="60" alt="" />
                              <div class="flex-1 ms-3">
                                <h6 class="mb-1 fw-semi-bold"><a class="text-1100 stretched-link" href="#!">Boots4</a></h6>
                                <p class="fw-semi-bold mb-0 text-500">Portfolio</p>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-end fw-semi-bold">$860</td>
                          <td class="align-middle pe-x1">
                            <div class="d-flex align-items-center">
                              <div class="progress me-3 rounded-3 bg-200" style="height: 5px; width:80px;" role="progressbar" aria-valuenow="26" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar rounded-pill" style="width: 26%;"></div>
                              </div>
                              <div class="fw-semi-bold ms-2">26%</div>
                            </div>
                          </td>
                        </tr>
                        <tr class="border-bottom border-200">
                          <td>
                            <div class="d-flex align-items-center position-relative"><img class="rounded-1 border border-200" src="assets/images/11.png" width="60" alt="" />
                              <div class="flex-1 ms-3">
                                <h6 class="mb-1 fw-semi-bold"><a class="text-1100 stretched-link" href="#!">Falcon</a></h6>
                                <p class="fw-semi-bold mb-0 text-500">Admin</p>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-end fw-semi-bold">$539</td>
                          <td class="align-middle pe-x1">
                            <div class="d-flex align-items-center">
                              <div class="progress me-3 rounded-3 bg-200" style="height: 5px; width:80px;" role="progressbar" aria-valuenow="16" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar rounded-pill" style="width: 16%;"></div>
                              </div>
                              <div class="fw-semi-bold ms-2">16%</div>
                            </div>
                          </td>
                        </tr>
                        <tr class="border-bottom border-200">
                          <td>
                            <div class="d-flex align-items-center position-relative"><img class="rounded-1 border border-200" src="assets/images/14.png" width="60" alt="" />
                              <div class="flex-1 ms-3">
                                <h6 class="mb-1 fw-semi-bold"><a class="text-1100 stretched-link" href="#!">Slick</a></h6>
                                <p class="fw-semi-bold mb-0 text-500">Builder</p>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-end fw-semi-bold">$343</td>
                          <td class="align-middle pe-x1">
                            <div class="d-flex align-items-center">
                              <div class="progress me-3 rounded-3 bg-200" style="height: 5px; width:80px;" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar rounded-pill" style="width: 10%;"></div>
                              </div>
                              <div class="fw-semi-bold ms-2">10%</div>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>
                            <div class="d-flex align-items-center position-relative"><img class="rounded-1 border border-200" src="assets/images/13.png" width="60" alt="" />
                              <div class="flex-1 ms-3">
                                <h6 class="mb-1 fw-semi-bold"><a class="text-1100 stretched-link" href="#!">Reign Pro</a></h6>
                                <p class="fw-semi-bold mb-0 text-500">Agency</p>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-end fw-semi-bold">$280</td>
                          <td class="align-middle pe-x1">
                            <div class="d-flex align-items-center">
                              <div class="progress me-3 rounded-3 bg-200" style="height: 5px; width:80px;" role="progressbar" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar rounded-pill" style="width: 8%;"></div>
                              </div>
                              <div class="fw-semi-bold ms-2">8%</div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="card-footer bg-body-tertiary py-2">
                  <div class="row flex-between-center">
                    <div class="col-auto"><select class="form-select form-select-sm">
                        <option>Last 7 days</option>
                        <option>Last Month</option>
                        <option>Last Year</option>
                      </select></div>
                    <div class="col-auto"><a class="btn btn-sm btn-falcon-default" href="#!">View All</a></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-5 col-xl-4 ps-lg-2 mb-3">
              <div class="card h-100">
                <div class="card-header d-flex flex-between-center bg-body-tertiary py-2">
                  <h6 class="mb-0">Shared Files</h6><a class="py-1 fs-10 font-sans-serif" href="#!">View All</a>
                </div>
                <div class="card-body pb-0">
                  <div class="d-flex mb-3 hover-actions-trigger align-items-center">
                    <div class="file-thumbnail"><img class="border h-100 w-100 object-fit-cover rounded-2" src="assets/images/5-thumb.png" alt="" /></div>
                    <div class="ms-3 flex-shrink-1 flex-grow-1">
                      <h6 class="mb-1"><a class="stretched-link text-900 fw-semi-bold" href="#!">apple-smart-watch.png</a></h6>
                      <div class="fs-10"><span class="fw-semi-bold">Antony</span><span class="fw-medium text-600 ms-2">Just Now</span></div>
                      <div class="hover-actions end-0 top-50 translate-middle-y"><a class="btn btn-tertiary border-300 btn-sm me-1 text-600" data-bs-toggle="tooltip" data-bs-placement="top" title="Download" href="assets/images/cloud-download.svg" download="download"><img src="assets/images/cloud-download.svg" alt="" width="15" /></a><button class="btn btn-tertiary border-300 btn-sm me-1 text-600 shadow-none" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><img src="assets/images/edit-alt.svg" alt="" width="15" /></button></div>
                    </div>
                  </div>
                  <hr class="text-200" />
                  <div class="d-flex mb-3 hover-actions-trigger align-items-center">
                    <div class="file-thumbnail"><img class="border h-100 w-100 object-fit-cover rounded-2" src="assets/images/3-thumb.png" alt="" /></div>
                    <div class="ms-3 flex-shrink-1 flex-grow-1">
                      <h6 class="mb-1"><a class="stretched-link text-900 fw-semi-bold" href="#!">iphone.jpg</a></h6>
                      <div class="fs-10"><span class="fw-semi-bold">Antony</span><span class="fw-medium text-600 ms-2">Yesterday at 1:30 PM</span></div>
                      <div class="hover-actions end-0 top-50 translate-middle-y"><a class="btn btn-tertiary border-300 btn-sm me-1 text-600" data-bs-toggle="tooltip" data-bs-placement="top" title="Download" href="assets/images/cloud-download.svg" download="download"><img src="assets/images/cloud-download.svg" alt="" width="15" /></a><button class="btn btn-tertiary border-300 btn-sm me-1 text-600 shadow-none" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><img src="assets/images/edit-alt.svg" alt="" width="15" /></button></div>
                    </div>
                  </div>
                  <hr class="text-200" />
                  <div class="d-flex mb-3 hover-actions-trigger align-items-center">
                    <div class="file-thumbnail"><img class="img-fluid" src="assets/images/zip.png" alt="" /></div>
                    <div class="ms-3 flex-shrink-1 flex-grow-1">
                      <h6 class="mb-1"><a class="stretched-link text-900 fw-semi-bold" href="#!">Falcon v1.8.2</a></h6>
                      <div class="fs-10"><span class="fw-semi-bold">Jane</span><span class="fw-medium text-600 ms-2">27 Sep at 10:30 AM</span></div>
                      <div class="hover-actions end-0 top-50 translate-middle-y"><a class="btn btn-tertiary border-300 btn-sm me-1 text-600" data-bs-toggle="tooltip" data-bs-placement="top" title="Download" href="assets/images/cloud-download.svg" download="download"><img src="assets/images/cloud-download.svg" alt="" width="15" /></a><button class="btn btn-tertiary border-300 btn-sm me-1 text-600 shadow-none" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><img src="assets/images/edit-alt.svg" alt="" width="15" /></button></div>
                    </div>
                  </div>
                  <hr class="text-200" />
                  <div class="d-flex mb-3 hover-actions-trigger align-items-center">
                    <div class="file-thumbnail"><img class="border h-100 w-100 object-fit-cover rounded-2" src="assets/images/2-thumb.png" alt="" /></div>
                    <div class="ms-3 flex-shrink-1 flex-grow-1">
                      <h6 class="mb-1"><a class="stretched-link text-900 fw-semi-bold" href="#!">iMac.jpg</a></h6>
                      <div class="fs-10"><span class="fw-semi-bold">Rowen</span><span class="fw-medium text-600 ms-2">23 Sep at 6:10 PM</span></div>
                      <div class="hover-actions end-0 top-50 translate-middle-y"><a class="btn btn-tertiary border-300 btn-sm me-1 text-600" data-bs-toggle="tooltip" data-bs-placement="top" title="Download" href="assets/images/cloud-download.svg" download="download"><img src="assets/images/cloud-download.svg" alt="" width="15" /></a><button class="btn btn-tertiary border-300 btn-sm me-1 text-600 shadow-none" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><img src="assets/images/edit-alt.svg" alt="" width="15" /></button></div>
                    </div>
                  </div>
                  <hr class="text-200" />
                  <div class="d-flex mb-3 hover-actions-trigger align-items-center">
                    <div class="file-thumbnail"><img class="img-fluid" src="assets/images/docs.png" alt="" /></div>
                    <div class="ms-3 flex-shrink-1 flex-grow-1">
                      <h6 class="mb-1"><a class="stretched-link text-900 fw-semi-bold" href="#!">functions.php</a></h6>
                      <div class="fs-10"><span class="fw-semi-bold">John</span><span class="fw-medium text-600 ms-2">1 Oct at 4:30 PM</span></div>
                      <div class="hover-actions end-0 top-50 translate-middle-y"><a class="btn btn-tertiary border-300 btn-sm me-1 text-600" data-bs-toggle="tooltip" data-bs-placement="top" title="Download" href="assets/images/cloud-download.svg" download="download"><img src="assets/images/cloud-download.svg" alt="" width="15" /></a><button class="btn btn-tertiary border-300 btn-sm me-1 text-600 shadow-none" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><img src="assets/images/edit-alt.svg" alt="" width="15" /></button></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row g-0">
            <div class="col-md-6 col-xxl-3 pe-md-2 mb-3 mb-xxl-0">
              <div class="card">
                <div class="card-header d-flex flex-between-center bg-body-tertiary py-2">
                  <h6 class="mb-0">Active Users</h6>
                  <div class="dropdown font-sans-serif btn-reveal-trigger"><button class="btn btn-link text-600 btn-sm dropdown-toggle dropdown-caret-none btn-reveal" type="button" id="dropdown-active-user" data-bs-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-11"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown-active-user"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
                    </div>
                  </div>
                </div>
                <div class="card-body py-2">
                  <div class="d-flex align-items-center position-relative mb-3">
                    <div class="avatar avatar-2xl status-online">
                      <img class="rounded-circle" src="assets/images/1.jpg" alt="" />
                    </div>
                    <div class="flex-1 ms-3">
                      <h6 class="mb-0 fw-semi-bold"><a class="stretched-link text-900" href="pages/user/profile#">Emma Watson</a></h6>
                      <p class="text-500 fs-11 mb-0">Admin</p>
                    </div>
                  </div>
                  <div class="d-flex align-items-center position-relative mb-3">
                    <div class="avatar avatar-2xl status-online">
                      <img class="rounded-circle" src="assets/images/2.jpg" alt="" />
                    </div>
                    <div class="flex-1 ms-3">
                      <h6 class="mb-0 fw-semi-bold"><a class="stretched-link text-900" href="pages/user/profile#">Antony Hopkins</a></h6>
                      <p class="text-500 fs-11 mb-0">Moderator</p>
                    </div>
                  </div>
                  <div class="d-flex align-items-center position-relative mb-3">
                    <div class="avatar avatar-2xl status-away">
                      <img class="rounded-circle" src="assets/images/3.jpg" alt="" />
                    </div>
                    <div class="flex-1 ms-3">
                      <h6 class="mb-0 fw-semi-bold"><a class="stretched-link text-900" href="pages/user/profile#">Anna Karinina</a></h6>
                      <p class="text-500 fs-11 mb-0">Editor</p>
                    </div>
                  </div>
                  <div class="d-flex align-items-center position-relative mb-3">
                    <div class="avatar avatar-2xl status-offline">
                      <img class="rounded-circle" src="assets/images/4.jpg" alt="" />
                    </div>
                    <div class="flex-1 ms-3">
                      <h6 class="mb-0 fw-semi-bold"><a class="stretched-link text-900" href="pages/user/profile#">John Lee</a></h6>
                      <p class="text-500 fs-11 mb-0">Admin</p>
                    </div>
                  </div>
                  <div class="d-flex align-items-center position-relative false">
                    <div class="avatar avatar-2xl status-offline">
                      <img class="rounded-circle" src="assets/images/5.jpg" alt="" />
                    </div>
                    <div class="flex-1 ms-3">
                      <h6 class="mb-0 fw-semi-bold"><a class="stretched-link text-900" href="pages/user/profile#">Rowen Atkinson</a></h6>
                      <p class="text-500 fs-11 mb-0">Editor</p>
                    </div>
                  </div>
                </div>
                <div class="card-footer bg-body-tertiary p-0"><a class="btn btn-sm btn-link d-block w-100 py-2" href="app/social/followers#">All active users<span class="fas fa-chevron-right ms-1 fs-11"></span></a></div>
              </div>
            </div>
            <div class="col-md-6 col-xxl-3 ps-md-2 order-xxl-1 mb-3 mb-xxl-0">
              <div class="card h-100">
                <div class="card-header bg-body-tertiary d-flex flex-between-center py-2">
                  <h6 class="mb-0">Bandwidth Saved</h6>
                  <div class="dropdown font-sans-serif btn-reveal-trigger"><button class="btn btn-link text-600 btn-sm dropdown-toggle dropdown-caret-none btn-reveal" type="button" id="dropdown-bandwidth-saved" data-bs-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-11"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown-bandwidth-saved"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
                    </div>
                  </div>
                </div>
                <div class="card-body d-flex flex-center flex-column"><!-- Find the JS file for the following chart at: src/js/charts/echarts/bandwidth-saved.js--><!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js-->
                  <div class="echart-bandwidth-saved" data-echart-responsive="true"></div>
                  <div class="text-center mt-3">
                    <h6 class="fs-9 mb-1"><span class="fas fa-check text-success me-1" data-fa-transform="shrink-2"></span>35.75 GB saved</h6>
                    <p class="fs-10 mb-0">38.44 GB total bandwidth</p>
                  </div>
                </div>
                <div class="card-footer bg-body-tertiary py-2">
                  <div class="row flex-between-center">
                    <div class="col-auto"><select class="form-select form-select-sm">
                        <option>Last 6 Months</option>
                        <option>Last Year</option>
                        <option>Last 2 Year</option>
                      </select></div>
                    <div class="col-auto"><a class="fs-10 font-sans-serif" href="#!">Help</a></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xxl-6 px-xxl-2">
              <div class="card h-100">
                <div class="card-header bg-body-tertiary py-2">
                  <div class="row flex-between-center">
                    <div class="col-auto">
                      <h6 class="mb-0">Top Products</h6>
                    </div>
                    <div class="col-auto d-flex"><a class="btn btn-link btn-sm me-2" href="#!">View Details</a>
                      <div class="dropdown font-sans-serif btn-reveal-trigger"><button class="btn btn-link text-600 btn-sm dropdown-toggle dropdown-caret-none btn-reveal" type="button" id="dropdown-top-products" data-bs-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-11"></span></button>
                        <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown-top-products"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                          <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-body h-100"><!-- Find the JS file for the following chart at: src/js/charts/echarts/top-products.js--><!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js-->
                  <div class="echart-bar-top-products h-100" data-echart-responsive="true"></div>
                </div>
              </div>
            </div>
          </div>
          <footer class="footer">
            <div class="row g-0 justify-content-between fs-10 mt-4 mb-3">
              <div class="col-12 col-sm-auto text-center">
                <p class="mb-0 text-600">Thank you for your love <span class="d-none d-sm-inline-block">| </span><br class="d-sm-none" /> 2024 &copy; <a href="https://therichpost.com">More Demos</a></p>
              </div>
              <div class="col-12 col-sm-auto text-center">
                <p class="mb-0 text-600">v3.19.0</p>
              </div>
            </div>
          </footer>
        </div>
        <div class="modal fade" id="authentication-modal" tabindex="-1" role="dialog" aria-labelledby="authentication-modal-label" aria-hidden="true">
          <div class="modal-dialog mt-6" role="document">
            <div class="modal-content border-0">
              <div class="modal-header px-5 position-relative modal-shape-header bg-shape">
                <div class="position-relative z-1">
                  <h4 class="mb-0 text-white" id="authentication-modal-label">Register</h4>
                  <p class="fs-10 mb-0 text-white">Please create your free Falcon account</p>
                </div><button class="btn-close position-absolute top-0 end-0 mt-2 me-2" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body py-4 px-5">
                <form>
                  <div class="mb-3"><label class="form-label" for="modal-auth-name">Name</label><input class="form-control" type="text" autocomplete="on" id="modal-auth-name" /></div>
                  <div class="mb-3"><label class="form-label" for="modal-auth-email">Email address</label><input class="form-control" type="email" autocomplete="on" id="modal-auth-email" /></div>
                  <div class="row gx-2">
                    <div class="mb-3 col-sm-6"><label class="form-label" for="modal-auth-password">Password</label><input class="form-control" type="password" autocomplete="on" id="modal-auth-password" /></div>
                    <div class="mb-3 col-sm-6"><label class="form-label" for="modal-auth-confirm-password">Confirm Password</label><input class="form-control" type="password" autocomplete="on" id="modal-auth-confirm-password" /></div>
                  </div>
                  <div class="form-check"><input class="form-check-input" type="checkbox" id="modal-auth-register-checkbox" /><label class="form-label" for="modal-auth-register-checkbox">I accept the <a href="#!">terms </a>and <a class="white-space-nowrap" href="#!">privacy policy</a></label></div>
                  <div class="mb-3"><button class="btn btn-primary d-block w-100 mt-3" type="submit" name="submit">Register</button></div>
                </form>
                <div class="position-relative mt-5">
                  <hr />
                  <div class="divider-content-center">or register with</div>
                </div>
                <div class="row g-2 mt-2">
                  <div class="col-sm-6"><a class="btn btn-outline-google-plus btn-sm d-block w-100" href="#"><span class="fab fa-google-plus-g me-2" data-fa-transform="grow-8"></span> google</a></div>
                  <div class="col-sm-6"><a class="btn btn-outline-facebook btn-sm d-block w-100" href="#"><span class="fab fa-facebook-square me-2" data-fa-transform="grow-8"></span> facebook</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main><!-- ===============================================--><!--    End of Main Content--><!-- ===============================================-->

    <div class="offcanvas offcanvas-end settings-panel border-0" id="settings-offcanvas" tabindex="-1" aria-labelledby="settings-offcanvas">
      <div class="offcanvas-header settings-panel-header bg-shape">
        <div class="z-1 py-1">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <h5 class="text-white mb-0 me-2"><span class="fas fa-palette me-2 fs-9"></span>Settings</h5><button class="btn btn-primary btn-sm rounded-pill mt-0 mb-0" data-theme-control="reset" style="font-size:12px"> <span class="fas fa-redo-alt me-1" data-fa-transform="shrink-3"></span>Reset</button>
          </div>
          <p class="mb-0 fs-10 text-white opacity-75"> Set your own customized style</p>
        </div>
        <div class="z-1" data-bs-theme="dark"><button class="btn-close z-1 mt-0" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button></div>
      </div>
      <div class="offcanvas-body scrollbar-overlay px-x1 h-100" id="themeController">
        <h5 class="fs-9">Color Scheme</h5>
        <p class="fs-10">Choose the perfect color mode for your app.</p>
        <div class="btn-group d-block w-100 btn-group-navbar-style">
          <div class="row gx-2">
            <div class="col-4"><input class="btn-check" id="themeSwitcherLight" name="theme-color" type="radio" value="light" data-theme-control="theme" /><label class="btn d-inline-block btn-navbar-style fs-10" for="themeSwitcherLight"> <span class="hover-overlay mb-2 rounded d-block"><img class="img-fluid img-prototype mb-0" src="assets/images/falcon-mode-default.jpg" alt=""/></span><span class="label-text">Light</span></label></div>
            <div class="col-4"><input class="btn-check" id="themeSwitcherDark" name="theme-color" type="radio" value="dark" data-theme-control="theme" /><label class="btn d-inline-block btn-navbar-style fs-10" for="themeSwitcherDark"> <span class="hover-overlay mb-2 rounded d-block"><img class="img-fluid img-prototype mb-0" src="assets/images/falcon-mode-dark.jpg" alt=""/></span><span class="label-text"> Dark</span></label></div>
            <div class="col-4"><input class="btn-check" id="themeSwitcherAuto" name="theme-color" type="radio" value="auto" data-theme-control="theme" /><label class="btn d-inline-block btn-navbar-style fs-10" for="themeSwitcherAuto"> <span class="hover-overlay mb-2 rounded d-block"><img class="img-fluid img-prototype mb-0" src="assets/images/falcon-mode-auto.jpg" alt=""/></span><span class="label-text"> Auto</span></label></div>
          </div>
        </div>
        <hr />
        <h5 class="fs-9 d-flex align-items-center">Vertical Navbar Style</h5>
        <p class="fs-10 mb-0">Switch between styles for your vertical navbar </p>
        <p> <a class="fs-10" href="modules/components/navs-and-tabs/vertical-navbar##navbar-styles">See Documentation</a></p>
        <div class="btn-group d-block w-100 btn-group-navbar-style">
          <div class="row gx-2">
            <div class="col-6"><input class="btn-check" id="navbar-style-transparent" type="radio" name="navbarStyle" value="transparent" data-theme-control="navbarStyle" /><label class="btn d-block w-100 btn-navbar-style fs-10" for="navbar-style-transparent"> <img class="img-fluid img-prototype" src="assets/images/default.png" alt="" /><span class="label-text"> Transparent</span></label></div>
            <div class="col-6"><input class="btn-check" id="navbar-style-inverted" type="radio" name="navbarStyle" value="inverted" data-theme-control="navbarStyle" /><label class="btn d-block w-100 btn-navbar-style fs-10" for="navbar-style-inverted"> <img class="img-fluid img-prototype" src="assets/images/inverted.png" alt="" /><span class="label-text"> Inverted</span></label></div>
            <div class="col-6"><input class="btn-check" id="navbar-style-card" type="radio" name="navbarStyle" value="card" data-theme-control="navbarStyle" /><label class="btn d-block w-100 btn-navbar-style fs-10" for="navbar-style-card"> <img class="img-fluid img-prototype" src="assets/images/card.png" alt="" /><span class="label-text"> Card</span></label></div>
            <div class="col-6"><input class="btn-check" id="navbar-style-vibrant" type="radio" name="navbarStyle" value="vibrant" data-theme-control="navbarStyle" /><label class="btn d-block w-100 btn-navbar-style fs-10" for="navbar-style-vibrant"> <img class="img-fluid img-prototype" src="assets/images/vibrant.png" alt="" /><span class="label-text"> Vibrant</span></label></div>
          </div>
        </div>
        <div class="text-center mt-5"><img class="mb-4" src="assets/images/47.png" alt="" width="120" />
          <h5>Like What You See?</h5>
          <p class="fs-10">Get Falcon now and create beautiful dashboards with hundreds of widgets.</p><a class="mb-3 btn btn-primary" href="https://therichpost.com" target="_blank">Free Admins</a>
        </div>
      </div>
    </div><a class="card setting-toggle" href="#settings-offcanvas" data-bs-toggle="offcanvas">
      <div class="card-body d-flex align-items-center py-md-2 px-2 py-1">
        <div class="bg-primary-subtle position-relative rounded-start" style="height:34px;width:28px">
          <div class="settings-popover"><span class="ripple"><span class="fa-spin position-absolute all-0 d-flex flex-center"><span class="icon-spin position-absolute all-0 d-flex flex-center"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.7369 12.3941L19.1989 12.1065C18.4459 11.7041 18.0843 10.8487 18.0843 9.99495C18.0843 9.14118 18.4459 8.28582 19.1989 7.88336L19.7369 7.59581C19.9474 7.47484 20.0316 7.23291 19.9474 7.03131C19.4842 5.57973 18.6843 4.28943 17.6738 3.20075C17.5053 3.03946 17.2527 2.99914 17.0422 3.12011L16.393 3.46714C15.6883 3.84379 14.8377 3.74529 14.1476 3.3427C14.0988 3.31422 14.0496 3.28621 14.0002 3.25868C13.2568 2.84453 12.7055 2.10629 12.7055 1.25525V0.70081C12.7055 0.499202 12.5371 0.297594 12.2845 0.257272C10.7266 -0.105622 9.16879 -0.0653007 7.69516 0.257272C7.44254 0.297594 7.31623 0.499202 7.31623 0.70081V1.23474C7.31623 2.09575 6.74999 2.8362 5.99824 3.25599C5.95774 3.27861 5.91747 3.30159 5.87744 3.32493C5.15643 3.74527 4.26453 3.85902 3.53534 3.45302L2.93743 3.12011C2.72691 2.99914 2.47429 3.03946 2.30587 3.20075C1.29538 4.28943 0.495411 5.57973 0.0322686 7.03131C-0.051939 7.23291 0.0322686 7.47484 0.242788 7.59581L0.784376 7.8853C1.54166 8.29007 1.92694 9.13627 1.92694 9.99495C1.92694 10.8536 1.54166 11.6998 0.784375 12.1046L0.242788 12.3941C0.0322686 12.515 -0.051939 12.757 0.0322686 12.9586C0.495411 14.4102 1.29538 15.7005 2.30587 16.7891C2.47429 16.9504 2.72691 16.9907 2.93743 16.8698L3.58669 16.5227C4.29133 16.1461 5.14131 16.2457 5.8331 16.6455C5.88713 16.6767 5.94159 16.7074 5.99648 16.7375C6.75162 17.1511 7.31623 17.8941 7.31623 18.7552V19.2891C7.31623 19.4425 7.41373 19.5959 7.55309 19.696C7.64066 19.7589 7.74815 19.7843 7.85406 19.8046C9.35884 20.0925 10.8609 20.0456 12.2845 19.7729C12.5371 19.6923 12.7055 19.4907 12.7055 19.2891V18.7346C12.7055 17.8836 13.2568 17.1454 14.0002 16.7312C14.0496 16.7037 14.0988 16.6757 14.1476 16.6472C14.8377 16.2446 15.6883 16.1461 16.393 16.5227L17.0422 16.8698C17.2527 16.9907 17.5053 16.9504 17.6738 16.7891C18.7264 15.7005 19.4842 14.4102 19.9895 12.9586C20.0316 12.757 19.9474 12.515 19.7369 12.3941ZM10.0109 13.2005C8.1162 13.2005 6.64257 11.7893 6.64257 9.97478C6.64257 8.20063 8.1162 6.74905 10.0109 6.74905C11.8634 6.74905 13.3792 8.20063 13.3792 9.97478C13.3792 11.7893 11.8634 13.2005 10.0109 13.2005Z" fill="#2A7BE4"></path></svg></span></span></span></div>
        </div><small class="text-uppercase text-primary fw-bold bg-primary-subtle py-2 pe-2 ps-1 rounded-end">customize</small>
      </div>
    </a>
</template>

5. Now guys we need to add below code inside project/public/index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="author" content="Oluwafemi Olukoya">
    <meta name="description"
        content="Are you looking for new clothes to wear in the summer season? Buy-it online store has got you covered. We sell the best quality products for an affordable price that fits your budget.">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <!-- <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/assets/css/all.css" /> -->

    <title>Falcon | Dashboard &amp; Web App Template</title>
    
  
     <!-- ===============================================--><!--    Favicons--><!-- ===============================================-->
     <link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
     <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
     <link rel="manifest" href="assets/images/manifest.json">
     <meta name="msapplication-TileImage" content="assets/images/mstile-150x150.png">
     <meta name="theme-color" content="#ffffff">
     <script src="assets/js/config.js"></script>
     <script src="assets/js/simplebar.min.js"></script>
     <!-- ===============================================--><!--    Stylesheets--><!-- ===============================================-->
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700%7cPoppins:300,400,500,600,700,800,900&amp;display=swap" rel="stylesheet">
     <link href="assets/css/simplebar.min.css" rel="stylesheet">
     <link href="assets/css/theme-rtl.min.css" rel="stylesheet" id="style-rtl">
     <link href="assets/css/theme.min.css" rel="stylesheet" id="style-default">
     <link href="assets/css/user-rtl.min.css" rel="stylesheet" id="user-style-rtl">
     <link href="assets/css/user.min.css" rel="stylesheet" id="user-style-default">
  </head>

<body>
    <noscript>
        <strong>
            We're sorry but Buy-It Online Store - Online Fashion Store doesn't
            work properly without JavaScript enabled. Please enable it to
            continue.
        </strong>
    </noscript>
    <div id="app"></div>
   <!-- ======================================================   JavaScripts--><!-- ===============================================-->
  <script>
    setTimeout(function(){
    var isFluid = JSON.parse(localStorage.getItem('isFluid'));
    if (isFluid) {
      var container = document.querySelector('[data-layout]');
      container.classList.remove('container');
      container.classList.add('container-fluid');
    }
    var isRTL = JSON.parse(localStorage.getItem('isRTL'));
    if (isRTL) {
      var linkDefault = document.getElementById('style-default');
      var userLinkDefault = document.getElementById('user-style-default');
      linkDefault.setAttribute('disabled', true);
      userLinkDefault.setAttribute('disabled', true);
      document.querySelector('html').setAttribute('dir', 'rtl');
    } else {
      var linkRTL = document.getElementById('style-rtl');
      var userLinkRTL = document.getElementById('user-style-rtl');
      linkRTL.setAttribute('disabled', true);
      userLinkRTL.setAttribute('disabled', true);
    }
  }, 800);
  </script>
   <script>
      setTimeout(function(){
        var navbarPosition = localStorage.getItem('navbarPosition');
        var navbarVertical = document.querySelector('.navbar-vertical');
        var navbarTopVertical = document.querySelector('.content .navbar-top');
        var navbarTop = document.querySelector('[data-layout] .navbar-top:not([data-double-top-nav');
        var navbarDoubleTop = document.querySelector('[data-double-top-nav]');
        var navbarTopCombo = document.querySelector('.content [data-navbar-top="combo"]');
        if (localStorage.getItem('navbarPosition') === 'double-top') {
          document.documentElement.classList.toggle('double-top-nav-layout');
        }
        if (navbarPosition === 'top') {
          navbarTop.removeAttribute('style');
          navbarTopVertical.remove(navbarTopVertical);
          navbarVertical.remove(navbarVertical);
          navbarTopCombo.remove(navbarTopCombo);
          navbarDoubleTop.remove(navbarDoubleTop);
        } else if (navbarPosition === 'combo') {
          navbarVertical.removeAttribute('style');
          navbarTopCombo.removeAttribute('style');
          navbarTop.remove(navbarTop);
          navbarTopVertical.remove(navbarTopVertical);
          navbarDoubleTop.remove(navbarDoubleTop);
        } else if (navbarPosition === 'double-top') {
          navbarDoubleTop.removeAttribute('style');
          navbarTopVertical.remove(navbarTopVertical);
          navbarVertical.remove(navbarVertical);
          navbarTop.remove(navbarTop);
          navbarTopCombo.remove(navbarTopCombo);
        } else {
          navbarVertical.removeAttribute('style');
          navbarTopVertical.removeAttribute('style');
          navbarTop.remove(navbarTop);
          navbarDoubleTop.remove(navbarDoubleTop);
          navbarTopCombo.remove(navbarTopCombo);
        }
      }, 900);
  </script>
   <script>
        setTimeout(function(){
        var navbarStyle = localStorage.getItem("navbarStyle");
        if (navbarStyle && navbarStyle !== 'transparent') {
          document.querySelector('.navbar-vertical').classList.add(`navbar-${navbarStyle}`);
        }
      }, 1000);
  </script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/anchor.min.js"></script>
  <script src="assets/js/is.min.js"></script>
  <script src="assets/js/echarts.min.js"></script>
  <script src="assets/js/all.min.js"></script>
  <script src="assets/js/lodash.min.js"></script>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
  <script src="assets/js/list.min.js"></script>
  <script src="assets/js/theme.js"></script>
</body>

</html>

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Next Parts will come soon.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

January 30, 2024

Category: Vue3

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

2. Guys now run below command to install node modules and run the project:

3. Now guys please create assets folder inside plublic folder and download zip(in this zip file there are js, css and images for admintemplate) file from below path and extract zip inside public/assets folder and get all the folders:

4. In the end please add below code inside scr/App.vue file:

5. Guys please add below code inside index.html file:

Step 1: Set Up the Vue.js Project

Step 2: Install Bootstrap 5

Step 3: Create the Project Structure

Step 4: Define Routes

Step 5: Create Components

Step 6: Create Views

Step 8: Run the Application

1. Install Laravel

2. Setting Up Vue.js

3. Create Your Vue Component

4. Include Vue in Your Application

5. Modify Blade Template

6. Compile Assets

7. Testing

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

2. Guys now run below command to install node modules and run the project:

3. Now guys please create assets folder inside plublic folder and download zip(in this zip file there are js, css and images for ecommercetemplate) file from below path and extract zip inside public/assets folder and get all the folders:

4. In the end please add below code inside scr/App.vue file:

5. Guys please add below code inside index.html file:

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

2. Guys now run below command to install node modules and run the project:

3. Now guys please create assets folder inside plublic folder and download zip(in this zip file there are js, css and images for ecommercetemplate) file from below path and extract zip inside public/assets folder and get all the folders:

4. In the end please add below code inside scr/App.vue file:

5. Guys please add below code inside index.html file:

1. Setup Your Micro Frontend Architecture

2. Create a Vue Component

3. Expose Your Vue Component as a Module

4. Consume the Vue Component in Your React Application

5. Dynamically Import the Vue Component

6. Considerations for Integration

Step 1: Setting Up Your Vue.js Project

Step 2: Install PeerJS

Step 3: Create the Video Chat Component

Step 4: Use the Video Chat Component

Step 5: Run Your Application

Basic Example

Using Vuex in Components

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

2. Guys after run command please select things according to your project:

3. Guys now run below command to install node modules and run the project:

4. Now guys please download zip(in this zip file there are js, css and images for ecommercetemplate) file from below path and extract zip inside src/assets folder and get all the folders:

5. In the end please add below code inside scr/App.vue file:

6. Guys please add below code inside index.html file:

Key Features

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

2. Guys after run command please select things according to your project:

3. Guys now run below command to install node modules and run the project:

3. Now guys please download zip(in this zip file there are js, css and images for admintemplate) file from below path and extract zip and get all the folders. Then create assets folder on project root and paste all the folders inside that:

4. Now guys add below code inside project/src/App.vue file:

5. Now guys we need to add below code inside project/public/index.html file: