UI Components – Trizzle Library

<section>
  <nav class="navbar d-lg-none navbar-dark-light bg-dark-light flex-wrap">
    <div class="container-fluid">
      <div class="d-flex w-100 align-items-center">
        <a class="navbar-brand" href="#">
          <img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt="alt" width="auto">
        </a>
        <button class="navbar-burger navbar-toggler bg-primary ms-auto" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </div>
  </nav>
  <div class="navbar-menu position-relative d-lg-block d-none" style="z-index: 9999">
    <div class="navbar-backdrop d-lg-none position-fixed top-0 end-0 bottom-0 start-0 bg-dark-light" style="opacity: .5"></div>
    <div class="position-fixed top-0 start-0 bottom-0 w-75 mw-sm-xs py-8 px-4 bg-dark-light overflow-auto">
      <div class="mb-6">
        <a class="mb-12 d-inline-block" href="#">
          <img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <ul class="list-unstyled mb-8">
          <li class="mb-4"><a class="btn w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 11H1C0.734784 11 0.48043 11.1054 0.292893 11.2929C0.105357 11.4804 0 11.7348 0 12V19C0 19.2652 0.105357 19.5196 0.292893 19.7071C0.48043 19.8946 0.734784 20 1 20H8C8.26522 20 8.51957 19.8946 8.70711 19.7071C8.89464 19.5196 9 19.2652 9 19V12C9 11.7348 8.89464 11.4804 8.70711 11.2929C8.51957 11.1054 8.26522 11 8 11ZM7 18H2V13H7V18ZM19 0H12C11.7348 0 11.4804 0.105357 11.2929 0.292893C11.1054 0.48043 11 0.734784 11 1V8C11 8.26522 11.1054 8.51957 11.2929 8.70711C11.4804 8.89464 11.7348 9 12 9H19C19.2652 9 19.5196 8.89464 19.7071 8.70711C19.8946 8.51957 20 8.26522 20 8V1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0ZM18 7H13V2H18V7ZM19 11H12C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20H19C19.2652 20 19.5196 19.8946 19.7071 19.7071C19.8946 19.5196 20 19.2652 20 19V12C20 11.7348 19.8946 11.4804 19.7071 11.2929C19.5196 11.1054 19.2652 11 19 11ZM18 18H13V13H18V18ZM8 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V8C0 8.26522 0.105357 8.51957 0.292893 8.70711C0.48043 8.89464 0.734784 9 1 9H8C8.26522 9 8.51957 8.89464 8.70711 8.70711C8.89464 8.51957 9 8.26522 9 8V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0ZM7 7H2V2H7V7Z" fill="currentColor"></path>
              </svg><span class="ms-4 fs-9 fw-semibold">Overview</span></a></li>
          <li class="mb-4"><a class="btn w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 4C9.73478 4 9.48043 4.10536 9.29289 4.29289C9.10536 4.48043 9 4.73478 9 5V15C9 15.2652 9.10536 15.5196 9.29289 15.7071C9.48043 15.8946 9.73478 16 10 16C10.2652 16 10.5196 15.8946 10.7071 15.7071C10.8946 15.5196 11 15.2652 11 15V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4ZM5 10C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16C5.26522 16 5.51957 15.8946 5.70711 15.7071C5.89464 15.5196 6 15.2652 6 15V11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10ZM15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9V15C14 15.2652 14.1054 15.5196 14.2929 15.7071C14.4804 15.8946 14.7348 16 15 16C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15V9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
              </svg><span class="ms-4 fs-9 fw-semibold">Analytics</span></a></li>
          <li class="mb-4"><a class="btn w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 4.5H14V3.5C14 2.70435 13.6839 1.94129 13.1213 1.37868C12.5587 0.816071 11.7956 0.5 11 0.5H9C8.20435 0.5 7.44129 0.816071 6.87868 1.37868C6.31607 1.94129 6 2.70435 6 3.5V4.5H3C2.20435 4.5 1.44129 4.81607 0.87868 5.37868C0.316071 5.94129 0 6.70435 0 7.5V16.5C0 17.2956 0.316071 18.0587 0.87868 18.6213C1.44129 19.1839 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.1839 19.1213 18.6213C19.6839 18.0587 20 17.2956 20 16.5V7.5C20 6.70435 19.6839 5.94129 19.1213 5.37868C18.5587 4.81607 17.7956 4.5 17 4.5ZM8 3.5C8 3.23478 8.10536 2.98043 8.29289 2.79289C8.48043 2.60536 8.73478 2.5 9 2.5H11C11.2652 2.5 11.5196 2.60536 11.7071 2.79289C11.8946 2.98043 12 3.23478 12 3.5V4.5H8V3.5ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3946 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3946 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V11C2.97544 11.3869 3.97818 11.7011 5 11.94V12.53C5 12.7952 5.10536 13.0496 5.29289 13.2371C5.48043 13.4246 5.73478 13.53 6 13.53C6.26522 13.53 6.51957 13.4246 6.70711 13.2371C6.89464 13.0496 7 12.7952 7 12.53V12.32C7.99435 12.4554 8.99649 12.5255 10 12.53C11.0035 12.5255 12.0057 12.4554 13 12.32V12.53C13 12.7952 13.1054 13.0496 13.2929 13.2371C13.4804 13.4246 13.7348 13.53 14 13.53C14.2652 13.53 14.5196 13.4246 14.7071 13.2371C14.8946 13.0496 15 12.7952 15 12.53V11.94C16.0218 11.7011 17.0246 11.3869 18 11V16.5ZM18 8.81C17.0274 9.22049 16.0244 9.55483 15 9.81V9.5C15 9.23478 14.8946 8.98043 14.7071 8.79289C14.5196 8.60536 14.2652 8.5 14 8.5C13.7348 8.5 13.4804 8.60536 13.2929 8.79289C13.1054 8.98043 13 9.23478 13 9.5V10.24C11.0113 10.54 8.98875 10.54 7 10.24V9.5C7 9.23478 6.89464 8.98043 6.70711 8.79289C6.51957 8.60536 6.26522 8.5 6 8.5C5.73478 8.5 5.48043 8.60536 5.29289 8.79289C5.10536 8.98043 5 9.23478 5 9.5V9.83C3.97562 9.57483 2.9726 9.24049 2 8.83V7.5C2 7.23478 2.10536 6.98043 2.29289 6.79289C2.48043 6.60536 2.73478 6.5 3 6.5H17C17.2652 6.5 17.5196 6.60536 17.7071 6.79289C17.8946 6.98043 18 7.23478 18 7.5V8.81Z" fill="currentColor"></path>
              </svg><span class="ms-4 fs-9 fw-semibold">Products</span></a></li>
          <li class="mb-4"><a class="btn w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 17C12.2653 17 12.5196 16.8947 12.7071 16.7071C12.8947 16.5196 13 16.2652 13 16V14C13 13.7348 12.8947 13.4805 12.7071 13.2929C12.5196 13.1054 12.2653 13 12 13C11.7348 13 11.4805 13.1054 11.2929 13.2929C11.1054 13.4805 11 13.7348 11 14V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4805 16.8947 11.7348 17 12 17ZM8.00004 17C8.26525 17 8.51961 16.8947 8.70714 16.7071C8.89468 16.5196 9.00004 16.2652 9.00004 16V14C9.00004 13.7348 8.89468 13.4805 8.70714 13.2929C8.51961 13.1054 8.26525 13 8.00004 13C7.73482 13 7.48047 13.1054 7.29293 13.2929C7.10539 13.4805 7.00004 13.7348 7.00004 14V16C7.00004 16.2652 7.10539 16.5196 7.29293 16.7071C7.48047 16.8947 7.73482 17 8.00004 17ZM17 5.00003H15.62L13.89 1.55003C13.8372 1.42308 13.7587 1.3084 13.6595 1.21316C13.5603 1.11791 13.4426 1.04414 13.3136 0.996469C13.1846 0.948794 13.0472 0.928235 12.9099 0.936075C12.7726 0.943915 12.6384 0.979987 12.5157 1.04204C12.3929 1.10408 12.2843 1.19078 12.1966 1.2967C12.1089 1.40261 12.044 1.52548 12.006 1.65762C11.9679 1.78976 11.9575 1.92833 11.9754 2.06467C11.9933 2.20102 12.0391 2.3322 12.11 2.45003L13.38 5.00003H6.62004L7.89004 2.45003C7.9871 2.21693 7.9924 1.95575 7.90486 1.71891C7.81732 1.48208 7.64343 1.28712 7.4181 1.17319C7.19277 1.05926 6.93268 1.03479 6.69005 1.10469C6.44742 1.17458 6.24022 1.33368 6.11004 1.55003L4.38004 5.00003H3.00004C2.29323 5.01078 1.61291 5.27077 1.07909 5.73416C0.545259 6.19755 0.192211 6.83455 0.0822073 7.53283C-0.0277959 8.23112 0.112313 8.94581 0.477823 9.55088C0.843332 10.1559 1.41076 10.6125 2.08004 10.84L2.82004 18.3C2.89466 19.0426 3.24338 19.7307 3.79811 20.2299C4.35284 20.7292 5.07374 21.0038 5.82004 21H14.2C14.9463 21.0038 15.6672 20.7292 16.222 20.2299C16.7767 19.7307 17.1254 19.0426 17.2 18.3L17.94 10.84C18.6108 10.6118 19.1791 10.1536 19.5443 9.54651C19.9096 8.93942 20.0482 8.22266 19.9356 7.52317C19.823 6.82368 19.4665 6.18661 18.9292 5.7248C18.3919 5.26299 17.7085 5.00624 17 5.00003ZM15.19 18.1C15.1652 18.3475 15.0489 18.5769 14.864 18.7433C14.6791 18.9098 14.4388 19.0013 14.19 19H5.81004C5.56127 19.0013 5.32097 18.9098 5.13606 18.7433C4.95115 18.5769 4.83491 18.3475 4.81004 18.1L4.10004 11H15.9L15.19 18.1ZM17 9.00003H3.00004C2.73482 9.00003 2.48047 8.89467 2.29293 8.70713C2.10539 8.5196 2.00004 8.26524 2.00004 8.00003C2.00004 7.73481 2.10539 7.48046 2.29293 7.29292C2.48047 7.10538 2.73482 7.00003 3.00004 7.00003H17C17.2653 7.00003 17.5196 7.10538 17.7071 7.29292C17.8947 7.48046 18 7.73481 18 8.00003C18 8.26524 17.8947 8.5196 17.7071 8.70713C17.5196 8.89467 17.2653 9.00003 17 9.00003Z" fill="currentColor"></path>
              </svg><span class="ms-4 me-auto fs-9 fw-semibold">Orders</span><span class="ms-2 d-flex align-items-center justify-content-center bg-secondary rounded-pill text-white fw-semibold fs-10" style="width: 22px; height: 22px;">4</span></a></li>
          <li><a class="btn w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.81 10.28C13.443 9.60024 13.7996 8.70877 13.81 7.78C13.81 6.77748 13.4118 5.81602 12.7029 5.10714C11.994 4.39825 11.0325 4 10.03 4C9.02748 4 8.06602 4.39825 7.35714 5.10714C6.64825 5.81602 6.25 6.77748 6.25 7.78C6.26044 8.70877 6.61702 9.60024 7.25 10.28C6.36865 10.7189 5.61022 11.3699 5.04292 12.1746C4.47561 12.9793 4.11723 13.9124 4 14.89C3.97083 15.1552 4.0482 15.4212 4.21511 15.6293C4.38202 15.8375 4.62478 15.9708 4.89 16C5.15522 16.0292 5.42116 15.9518 5.62932 15.7849C5.83749 15.618 5.97083 15.3752 6 15.11C6.11933 14.1411 6.58885 13.2494 7.32009 12.6027C8.05133 11.956 8.99382 11.599 9.97 11.599C10.9462 11.599 11.8887 11.956 12.6199 12.6027C13.3512 13.2494 13.8207 14.1411 13.94 15.11C13.9678 15.3664 14.0936 15.6022 14.2911 15.768C14.4887 15.9339 14.7426 16.017 15 16H15.11C15.3721 15.9698 15.6117 15.8373 15.7766 15.6313C15.9414 15.4252 16.0181 15.1624 15.99 14.9C15.8815 13.9276 15.5344 12.997 14.9796 12.191C14.4248 11.3851 13.6796 10.7286 12.81 10.28ZM10 9.56C9.64795 9.56 9.3038 9.4556 9.01108 9.26002C8.71836 9.06443 8.49022 8.78643 8.35549 8.46118C8.22077 8.13592 8.18552 7.77803 8.2542 7.43274C8.32288 7.08745 8.49241 6.77029 8.74135 6.52135C8.99029 6.27241 9.30745 6.10288 9.65274 6.0342C9.99803 5.96552 10.3559 6.00077 10.6812 6.13549C11.0064 6.27022 11.2844 6.49837 11.48 6.79109C11.6756 7.0838 11.78 7.42795 11.78 7.78C11.78 8.25208 11.5925 8.70484 11.2586 9.03865C10.9248 9.37247 10.4721 9.56 10 9.56ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
              </svg><span class="ms-4 fs-9 fw-semibold">Customers</span></a></li>
        </ul>
      </div>
      <span class="ps-4 mb-8 fs-10 fw-semibold text-light-dark">TEAMS</span>
      <ul class="ps-4 list-unstyled">
        <li class="d-flex mb-6 align-items-center">
          <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="4" cy="4" r="4" fill="#1890FF"></circle>
          </svg><span class="ms-2 fs-9 fw-semibold text-secondary-light">Front-End Team</span>
        </li>
        <li class="d-flex mb-6 align-items-center">
          <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="4" cy="4" r="4" fill="#54D62C"></circle>
          </svg><span class="ms-2 fs-9 fw-semibold text-secondary-light">Back-End Team</span>
        </li>
        <li class="d-flex mb-6 align-items-center">
          <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="4" cy="4" r="4" fill="#FFC107"></circle>
          </svg><span class="ms-2 fs-9 fw-semibold text-secondary-light">Design</span>
        </li>
        <li class="d-flex mb-6 align-items-center">
          <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="4" cy="4" r="4" fill="#FF4842"></circle>
          </svg><span class="ms-2 fs-9 fw-semibold text-secondary-light">Marketing</span>
        </li>
      </ul>
      <div class="mt-auto"><a class="btn mb-4 w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19.8999 12.66C19.7396 12.4775 19.6512 12.2429 19.6512 12C19.6512 11.7571 19.7396 11.5225 19.8999 11.34L21.1799 9.90002C21.3209 9.74269 21.4085 9.54472 21.4301 9.33452C21.4516 9.12433 21.4061 8.9127 21.2999 8.73002L19.2999 5.27002C19.1948 5.08754 19.0348 4.94289 18.8426 4.8567C18.6505 4.77051 18.4361 4.74718 18.2299 4.79002L16.3499 5.17002C16.1107 5.21945 15.8616 5.17961 15.6498 5.05802C15.4379 4.93643 15.2779 4.7415 15.1999 4.51002L14.5899 2.68002C14.5228 2.4814 14.395 2.30888 14.2245 2.18686C14.0541 2.06484 13.8495 1.99948 13.6399 2.00002H9.6399C9.42183 1.98864 9.20603 2.04894 9.02546 2.17173C8.84489 2.29452 8.70948 2.47304 8.6399 2.68002L8.0799 4.51002C8.0019 4.7415 7.84187 4.93643 7.63001 5.05802C7.41815 5.17961 7.16911 5.21945 6.9299 5.17002L4.9999 4.79002C4.80445 4.7624 4.6052 4.79324 4.42724 4.87866C4.24929 4.96407 4.1006 5.10025 3.9999 5.27002L1.9999 8.73002C1.89106 8.91067 1.84212 9.1211 1.86008 9.33124C1.87804 9.54138 1.96198 9.74046 2.0999 9.90002L3.3699 11.34C3.53022 11.5225 3.61863 11.7571 3.61863 12C3.61863 12.2429 3.53022 12.4775 3.3699 12.66L2.0999 14.1C1.96198 14.2596 1.87804 14.4587 1.86008 14.6688C1.84212 14.8789 1.89106 15.0894 1.9999 15.27L3.9999 18.73C4.10499 18.9125 4.26502 19.0571 4.45715 19.1433C4.64928 19.2295 4.86372 19.2529 5.0699 19.21L6.9499 18.83C7.18911 18.7806 7.43815 18.8204 7.65001 18.942C7.86187 19.0636 8.0219 19.2585 8.0999 19.49L8.7099 21.32C8.77948 21.527 8.91489 21.7055 9.09546 21.8283C9.27603 21.9511 9.49183 22.0114 9.7099 22H13.7099C13.9195 22.0006 14.1241 21.9352 14.2945 21.8132C14.465 21.6912 14.5928 21.5186 14.6599 21.32L15.2699 19.49C15.3479 19.2585 15.5079 19.0636 15.7198 18.942C15.9316 18.8204 16.1807 18.7806 16.4199 18.83L18.2999 19.21C18.5061 19.2529 18.7205 19.2295 18.9126 19.1433C19.1048 19.0571 19.2648 18.9125 19.3699 18.73L21.3699 15.27C21.4761 15.0873 21.5216 14.8757 21.5001 14.6655C21.4785 14.4553 21.3909 14.2573 21.2499 14.1L19.8999 12.66ZM18.4099 14L19.2099 14.9L17.9299 17.12L16.7499 16.88C16.0297 16.7328 15.2805 16.8551 14.6445 17.2238C14.0085 17.5925 13.53 18.1819 13.2999 18.88L12.9199 20H10.3599L9.9999 18.86C9.76975 18.1619 9.29128 17.5725 8.6553 17.2038C8.01932 16.8351 7.27012 16.7128 6.5499 16.86L5.3699 17.1L4.0699 14.89L4.8699 13.99C5.36185 13.44 5.63383 12.7279 5.63383 11.99C5.63383 11.2521 5.36185 10.54 4.8699 9.99002L4.0699 9.09002L5.3499 6.89002L6.5299 7.13002C7.25012 7.27724 7.99932 7.1549 8.6353 6.78622C9.27128 6.41753 9.74975 5.82818 9.9799 5.13002L10.3599 4.00002H12.9199L13.2999 5.14002C13.53 5.83818 14.0085 6.42753 14.6445 6.79622C15.2805 7.1649 16.0297 7.28724 16.7499 7.14002L17.9299 6.90002L19.2099 9.12002L18.4099 10.02C17.9235 10.5688 17.6549 11.2767 17.6549 12.01C17.6549 12.7433 17.9235 13.4513 18.4099 14ZM11.6399 8.00002C10.8488 8.00002 10.0754 8.23461 9.41761 8.67414C8.75982 9.11366 8.24713 9.73838 7.94438 10.4693C7.64163 11.2002 7.56241 12.0045 7.71675 12.7804C7.8711 13.5563 8.25206 14.269 8.81147 14.8284C9.37088 15.3879 10.0836 15.7688 10.8595 15.9232C11.6355 16.0775 12.4397 15.9983 13.1706 15.6955C13.9015 15.3928 14.5262 14.8801 14.9658 14.2223C15.4053 13.5645 15.6399 12.7911 15.6399 12C15.6399 10.9392 15.2185 9.92174 14.4683 9.17159C13.7182 8.42144 12.7008 8.00002 11.6399 8.00002ZM11.6399 14C11.2443 14 10.8577 13.8827 10.5288 13.663C10.1999 13.4432 9.94351 13.1308 9.79214 12.7654C9.64076 12.3999 9.60116 11.9978 9.67833 11.6098C9.7555 11.2219 9.94598 10.8655 10.2257 10.5858C10.5054 10.3061 10.8618 10.1156 11.2497 10.0384C11.6377 9.96128 12.0398 10.0009 12.4053 10.1523C12.7707 10.3036 13.0831 10.56 13.3028 10.8889C13.5226 11.2178 13.6399 11.6045 13.6399 12C13.6399 12.5304 13.4292 13.0392 13.0541 13.4142C12.679 13.7893 12.1703 14 11.6399 14Z" fill="currentColor"></path>
        </svg><span class="ms-4 fs-9 fw-semibold">Settings</span></a><a class="btn mb-4 w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.59 13L10.29 15.29C10.1963 15.3829 10.1219 15.4935 10.0711 15.6154C10.0203 15.7373 9.9942 15.868 9.9942 16C9.9942 16.132 10.0203 16.2627 10.0711 16.3846C10.1219 16.5064 10.1963 16.617 10.29 16.71C10.383 16.8037 10.4936 16.8781 10.6154 16.9289C10.7373 16.9796 10.868 17.0058 11 17.0058C11.132 17.0058 11.2627 16.9796 11.3846 16.9289C11.5064 16.8781 11.617 16.8037 11.71 16.71L15.71 12.71C15.801 12.6149 15.8724 12.5027 15.92 12.38C16.02 12.1365 16.02 11.8634 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L11.71 7.28998C11.6168 7.19674 11.5061 7.12278 11.3842 7.07232C11.2624 7.02186 11.1319 6.99589 11 6.99589C10.8681 6.99589 10.7376 7.02186 10.6158 7.07232C10.4939 7.12278 10.3832 7.19674 10.29 7.28998C10.1968 7.38322 10.1228 7.49391 10.0723 7.61573C10.0219 7.73755 9.99591 7.86812 9.99591 7.99998C9.99591 8.13184 10.0219 8.26241 10.0723 8.38423C10.1228 8.50605 10.1968 8.61674 10.29 8.70998L12.59 11H3C2.73478 11 2.48043 11.1053 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5195 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H12.59ZM12 1.99998C10.1311 1.99163 8.29724 2.50719 6.70647 3.48817C5.11569 4.46915 3.83165 5.87629 3 7.54998C2.88065 7.78867 2.86101 8.065 2.94541 8.31818C3.0298 8.57135 3.21131 8.78063 3.45 8.89998C3.68869 9.01932 3.96502 9.03896 4.2182 8.95457C4.47137 8.87018 4.68065 8.68867 4.8 8.44998C5.43219 7.1733 6.39383 6.0886 7.58555 5.30797C8.77727 4.52733 10.1558 4.0791 11.5788 4.00957C13.0017 3.94004 14.4174 4.25175 15.6795 4.91249C16.9417 5.57322 18.0045 6.55901 18.7581 7.76797C19.5118 8.97694 19.9289 10.3652 19.9664 11.7894C20.0039 13.2135 19.6605 14.6218 18.9715 15.8688C18.2826 17.1158 17.2731 18.1561 16.0475 18.8824C14.8219 19.6087 13.4246 19.9945 12 20C10.5089 20.0064 9.04615 19.5923 7.77969 18.8052C6.51323 18.0181 5.49435 16.8899 4.84 15.55C4.72065 15.3113 4.51137 15.1298 4.2582 15.0454C4.00502 14.961 3.72869 14.9806 3.49 15.1C3.25131 15.2193 3.0698 15.4286 2.98541 15.6818C2.90101 15.935 2.92065 16.2113 3.04 16.45C3.83283 18.0455 5.03752 19.4002 6.52947 20.374C8.02142 21.3478 9.74645 21.9054 11.5261 21.989C13.3058 22.0726 15.0755 21.6792 16.6521 20.8495C18.2288 20.0198 19.5552 18.784 20.4941 17.2698C21.433 15.7556 21.9503 14.0181 21.9925 12.237C22.0347 10.4558 21.6003 8.69577 20.7342 7.13881C19.8682 5.58185 18.6018 4.28454 17.0663 3.38108C15.5307 2.47762 13.7816 2.00081 12 1.99998Z" fill="currentColor"></path>
        </svg><span class="ms-4 fs-9 fw-semibold">Log Out</span></a>
      </div>
    </div>
  </div>
  <div class="mx-auto ms-lg-80"></div>
</section>

<section class="py-8">
  <div class="container">
    <div class="bg-secondary py-6 px-5 rounded-3">
      <nav class="w-100" aria-label="pagination">
        <ul class="pagination d-flex w-100 justify-content-center mb-0">
          <li class="page-item me-auto"><a class="page-link d-flex h-100 align-items-center fs-10 border-secondary text-secondary-light bg-transparent rounded-start-3" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.3329 7.33338H6.27294L8.47294 5.14004C8.59847 5.01451 8.669 4.84424 8.669 4.66671C8.669 4.48917 8.59847 4.31891 8.47294 4.19338C8.3474 4.06784 8.17714 3.99731 7.99961 3.99731C7.82207 3.99731 7.65181 4.06784 7.52627 4.19338L4.19294 7.52671C4.13224 7.59011 4.08467 7.66487 4.05294 7.74671C3.98626 7.90902 3.98626 8.09107 4.05294 8.25338C4.08467 8.33521 4.13224 8.40997 4.19294 8.47338L7.52627 11.8067C7.58825 11.8692 7.66198 11.9188 7.74322 11.9526C7.82446 11.9865 7.9116 12.0039 7.99961 12.0039C8.08761 12.0039 8.17475 11.9865 8.25599 11.9526C8.33723 11.9188 8.41096 11.8692 8.47294 11.8067C8.53542 11.7447 8.58502 11.671 8.61887 11.5898C8.65271 11.5085 8.67014 11.4214 8.67014 11.3334C8.67014 11.2454 8.65271 11.1582 8.61887 11.077C8.58502 10.9958 8.53542 10.922 8.47294 10.86L6.27294 8.66671H11.3329C11.5097 8.66671 11.6793 8.59647 11.8043 8.47145C11.9294 8.34642 11.9996 8.17685 11.9996 8.00004C11.9996 7.82323 11.9294 7.65366 11.8043 7.52864C11.6793 7.40361 11.5097 7.33338 11.3329 7.33338Z" fill="#3D485B"></path>
              </svg><span class="ms-1 fw-semibold text-light">Previous</span></a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-light bg-transparent" href="#">1</a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-light bg-transparent" href="#">2</a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-light bg-transparent" href="#">3</a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-secondary-light bg-transparent" href="#">...</a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-light bg-transparent" href="#">44</a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-light bg-transparent" href="#">45</a></li>
          <li class="page-item ms-auto"><a class="page-link fs-10 border-secondary text-secondary-light bg-transparent rounded-end-3" href="#"><span class="me-1 fw-semibold text-light">Next</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.66706 8.66663L9.72706 8.66662L7.52706 10.86C7.40152 10.9855 7.331 11.1558 7.331 11.3333C7.331 11.5108 7.40152 11.6811 7.52706 11.8066C7.6526 11.9322 7.82286 12.0027 8.00039 12.0027C8.17793 12.0027 8.34819 11.9322 8.47373 11.8066L11.8071 8.47329C11.8678 8.40989 11.9153 8.33513 11.9471 8.25329C12.0137 8.09098 12.0137 7.90893 11.9471 7.74662C11.9153 7.66479 11.8678 7.59003 11.8071 7.52662L8.47373 4.19329C8.41175 4.13081 8.33802 4.08121 8.25678 4.04736C8.17554 4.01352 8.0884 3.99609 8.00039 3.99609C7.91239 3.99609 7.82525 4.01352 7.74401 4.04736C7.66277 4.08121 7.58904 4.13081 7.52706 4.19329C7.46457 4.25527 7.41498 4.329 7.38113 4.41024C7.34729 4.49148 7.32986 4.57862 7.32986 4.66663C7.32986 4.75463 7.34729 4.84177 7.38113 4.92301C7.41498 5.00425 7.46457 5.07798 7.52706 5.13996L9.72706 7.33329L4.66706 7.33329C4.49025 7.33329 4.32068 7.40353 4.19566 7.52855C4.07063 7.65358 4.00039 7.82315 4.00039 7.99996C4.00039 8.17677 4.07063 8.34634 4.19566 8.47136C4.32068 8.59639 4.49025 8.66663 4.66706 8.66663Z" fill="#3D485B"></path>
              </svg></a></li>
        </ul>
      </nav>
    </div>
  </div>
</section>

<section>
  <div class="position-fixed top-0 start-0 end-0 bottom-0 d-flex align-items-center w-100 h-100 p-4 bg-secondary bg-opacity-75 overflow-auto">
    <div class="mw-xl w-100 mx-auto bg-secondary rounded-2 overflow-hidden">
      <div class="mw-md mx-auto pt-12 pb-12 px-5">
        <h4 class="fs-5 text-light fw-semibold mb-5">Default modal tittle</h4>
        <p class="text-secondary-light fw-medium mb-0">Default modals in Trizzle are used for displaying information that is important to the user.</p>
      </div>
      <div class="d-flex gap-4 justify-content-end pt-5 pb-6 px-6 text-right bg-dark-light"><a class="btn px-5 py-3 btn-secondary" href="#">Cancel</a><a class="btn px-5 py-3 btn-primary" href="#">Confirm</a></div>
    </div>
  </div>
</section>

<section>
  <div class="pt-4 pb-6 bg-dark-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-4 mb-5 mb-md-0">
          <div class="d-flex align-items-center"><img class="img-fluid" src="trizzle-assets/images/avatar-photo-form.png" alt="" style="width: 56px;">
            <h6 class="ms-4 fs-5 fw-bold mb-0">Subpage name</h6>
          </div>
        </div>
        <div class="col-12 col-md-8">
          <div class="d-flex justify-content-end"><a class="btn btn-sm d-flex align-items-center px-6 me-4 btn-secondary rounded-4" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.4993 10C17.2783 10 17.0664 10.0878 16.9101 10.2441C16.7538 10.4004 16.666 10.6124 16.666 10.8334V15.8334C16.666 16.0544 16.5782 16.2663 16.4219 16.4226C16.2657 16.5789 16.0537 16.6667 15.8327 16.6667H4.16602C3.945 16.6667 3.73304 16.5789 3.57676 16.4226C3.42048 16.2663 3.33268 16.0544 3.33268 15.8334V4.1667C3.33268 3.94568 3.42048 3.73372 3.57676 3.57744C3.73304 3.42116 3.945 3.33336 4.16602 3.33336H9.16602C9.38703 3.33336 9.59899 3.24557 9.75527 3.08929C9.91155 2.93301 9.99935 2.72104 9.99935 2.50003C9.99935 2.27902 9.91155 2.06706 9.75527 1.91077C9.59899 1.75449 9.38703 1.6667 9.16602 1.6667H4.16602C3.50297 1.6667 2.86709 1.93009 2.39825 2.39893C1.92941 2.86777 1.66602 3.50366 1.66602 4.1667V15.8334C1.66602 16.4964 1.92941 17.1323 2.39825 17.6011C2.86709 18.07 3.50297 18.3334 4.16602 18.3334H15.8327C16.4957 18.3334 17.1316 18.07 17.6005 17.6011C18.0693 17.1323 18.3327 16.4964 18.3327 15.8334V10.8334C18.3327 10.6124 18.2449 10.4004 18.0886 10.2441C17.9323 10.0878 17.7204 10 17.4993 10ZM4.99935 10.6334V14.1667C4.99935 14.3877 5.08715 14.5997 5.24343 14.756C5.39971 14.9122 5.61167 15 5.83268 15H9.36602C9.47569 15.0007 9.58441 14.9796 9.68594 14.9382C9.78747 14.8967 9.87982 14.8356 9.95768 14.7584L15.7243 8.98336L18.091 6.6667C18.1691 6.58923 18.2311 6.49706 18.2734 6.39551C18.3157 6.29396 18.3375 6.18504 18.3375 6.07503C18.3375 5.96502 18.3157 5.8561 18.2734 5.75455C18.2311 5.653 18.1691 5.56083 18.091 5.48336L14.5577 1.90836C14.4802 1.83026 14.388 1.76826 14.2865 1.72595C14.1849 1.68365 14.076 1.66187 13.966 1.66187C13.856 1.66187 13.7471 1.68365 13.6455 1.72595C13.544 1.76826 13.4518 1.83026 13.3743 1.90836L11.0243 4.2667L5.24102 10.0417C5.16378 10.1196 5.10268 10.2119 5.06121 10.3134C5.01974 10.415 4.99871 10.5237 4.99935 10.6334ZM13.966 3.67503L16.3243 6.03336L15.141 7.2167L12.7827 4.85836L13.966 3.67503ZM6.66602 10.975L11.6077 6.03336L13.966 8.3917L9.02435 13.3334H6.66602V10.975Z" fill="#3D485B"></path>
              </svg><span class="ms-1">Edit</span></a><a class="btn btn-sm d-flex align-items-center px-6 btn-primary rounded-4" href="#">Publish</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark-light">
    <div class="container position-relative" type="button" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt=""></a>
      <div class="position-absolute top-50 start-50 translate-middle collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Overview</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Analytics</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" hre="" f="#">Products</a></li>
          <li class="nav-item"><a class="nav-link d-flex align-items-center" aria-current="page" href="#"><span>Orders</span>
              <div class="ms-2 d-flex align-items-center justify-content-center bg-primary rounded-pill text-white fs-10" style="width: 22px; height: 22px;">4</div></a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" hre="" f="#">Customers</a></li>
        </ul>
      </div>
      <div class="d-none d-xl-flex align-items-center ms-auto"><a class="btn border-0 p-0 me-6" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM5 6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7L12 11.88L4 7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V9.28L11.48 13.85C11.632 13.9378 11.8045 13.984 11.98 13.984C12.1555 13.984 12.328 13.9378 12.48 13.85L20 9.28V17Z" fill="#3D485B"></path>
          </svg></a><a class="btn border-0 p-0 me-8" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z" fill="#3D485B"></path>
          </svg></a><a class="btn border-0 d-flex align-items-center p-0" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-4 fw-bold text-white">John Doe</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <button class="d-block d-xl-none navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark-light bg-opacity-25"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-8 pb-10 px-8 bg-dark-light overflow-auto">
      <div class="d-flex align-items-center justify-content-between mb-16"><a class="inline-flex items-center" href="#"><img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt=""></a><a class="navbar-close text-light" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
            <path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" fill="currentColor"></path>
          </svg></a></div>
      <ul class="list-unstyled mb-10">
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Overview</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Analytics</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Products</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light d-flex align-items-center" aria-current="page" href="#"><span>Orders</span>
            <div class="ms-2 d-flex align-items-center justify-content-center bg-primary rounded-pill text-white fs-10" style="width: 22px; height: 22px;">4</div></a></li>
        <li><a class="btn p-0 btn-link text-light" href="#">Customers</a></li>
      </ul><a class="btn mt-auto border-0 d-flex align-items-center p-0" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-4 fw-bold text-white">John Doe</span>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </nav>
  </div>
</section>

<section class="py-8">
  <div class="container">
    <div class="px-4 pt-6 pb-8 bg-secondary rounded-4">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <div class="d-flex align-items-center">
          <h3 class="fs-8 fw-semibold text-light me-2 mb-0">To do</h3><span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded-pill bg-dark-light fs-10 fw-medium text-light-dark">3</span>
        </div>
        <div>
          <button class="btn p-0 border-0 bg-transparent me-2 btn-outline-light-dark">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
            </svg>
          </button><a class="btn p-0 border-0 bg-transparent btn-outline-light-dark" href="#">
            <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
            </svg></a>
        </div>
      </div>
      <div class="pt-1 w-100 rounded-pill bg-info"></div>
    </div>
  </div>
</section>

<section class="py-8">
  <div class="container">
    <div class="position-relative p-6 bg-secondary rounded-4">
      <h6 class="fs-5 fw-semibold text-white mb-2">Latest files</h6>
      <p class="fs-10 fw-medium text-secondary-light mb-4">Your subtitle text about files goes here</p>
      <div class="d-flex align-items-center justify-content-between py-3 px-4 bg-dark-light rounded-3">
        <div class="d-flex align-items-center">
          <div class="d-flex align-items-center justify-content-center rounded-3 bg-secondary" style="width: 40px; height: 40px;">
            <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 14C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V10.58L5.3 7.29C5.48693 7.10677 5.73825 7.00414 6 7.00414C6.26175 7.00414 6.51307 7.10677 6.7 7.29L13.41 14H3ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H16.23L12.42 10.17L13.3 9.29C13.4869 9.10677 13.7382 9.00414 14 9.00414C14.2618 9.00414 14.5131 9.10677 14.7 9.29L18 12.58V13ZM18 9.76L16.12 7.89C15.5501 7.34243 14.7904 7.03663 14 7.03663C13.2096 7.03663 12.4499 7.34243 11.88 7.89L11 8.77L8.12 5.89C7.55006 5.34243 6.79036 5.03663 6 5.03663C5.20964 5.03663 4.44994 5.34243 3.88 5.89L2 7.76V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V9.76Z" fill="#FACC15"></path>
            </svg>
          </div>
          <div class="ms-3"><span class="d-block lh-sm fs-9 fw-medium text-light">Images</span><span class="d-block lh-sm fs-10 fw-medium text-secondary-light">344 images</span></div>
        </div>
        <div><span class="fs-9 fw-medium text-light">16 GB</span></div>
      </div>
      <div class="d-flex align-items-center justify-content-between py-3 px-4">
        <div class="d-flex align-items-center">
          <div class="d-flex align-items-center justify-content-center rounded-3 bg-dark-light" style="width: 40px; height: 40px;">
            <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 6.94C15.9896 6.84813 15.9695 6.75763 15.94 6.67V6.58C15.8919 6.47718 15.8278 6.38267 15.75 6.3L9.75 0.3C9.66734 0.222216 9.57282 0.158081 9.47 0.11H9.38C9.27841 0.0517412 9.16622 0.0143442 9.05 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H13C13.7956 20 14.5587 19.6839 15.1213 19.1213C15.6839 18.5587 16 17.7956 16 17V7C16 7 16 7 16 6.94ZM10 3.41L12.59 6H11C10.7348 6 10.4804 5.89464 10.2929 5.70711C10.1054 5.51957 10 5.26522 10 5V3.41ZM14 17C14 17.2652 13.8946 17.5196 13.7071 17.7071C13.5196 17.8946 13.2652 18 13 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H8V5C8 5.79565 8.31607 6.55871 8.87868 7.12132C9.44129 7.68393 10.2044 8 11 8H14V17Z" fill="#24D164"></path>
            </svg>
          </div>
          <div class="ms-3"><span class="d-block lh-sm fs-9 fw-medium text-light">Files</span><span class="d-block lh-sm fs-10 fw-medium text-secondary-light">424 files</span></div>
        </div>
        <div><span class="fs-9 fw-medium text-light">45 GB</span></div>
      </div>
      <div class="d-flex align-items-center justify-content-between py-3 px-4 bg-dark-light rounded-3">
        <div class="d-flex align-items-center">
          <div class="d-flex align-items-center justify-content-center rounded-3 bg-secondary" style="width: 40px; height: 40px;">
            <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 14C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V10.58L5.3 7.29C5.48693 7.10677 5.73825 7.00414 6 7.00414C6.26175 7.00414 6.51307 7.10677 6.7 7.29L13.41 14H3ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H16.23L12.42 10.17L13.3 9.29C13.4869 9.10677 13.7382 9.00414 14 9.00414C14.2618 9.00414 14.5131 9.10677 14.7 9.29L18 12.58V13ZM18 9.76L16.12 7.89C15.5501 7.34243 14.7904 7.03663 14 7.03663C13.2096 7.03663 12.4499 7.34243 11.88 7.89L11 8.77L8.12 5.89C7.55006 5.34243 6.79036 5.03663 6 5.03663C5.20964 5.03663 4.44994 5.34243 3.88 5.89L2 7.76V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V9.76Z" fill="#FACC15"></path>
            </svg>
          </div>
          <div class="ms-3"><span class="d-block lh-sm fs-9 fw-medium text-light">Images</span><span class="d-block lh-sm fs-10 fw-medium text-secondary-light">344 images</span></div>
        </div>
        <div><span class="fs-9 fw-medium text-light">16 GB</span></div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-dark-light overflow-hidden">
  <div class="d-none d-lg-block position-absolute top-0 start-0 h-100 col-6"><img class="img-fluid d-block w-100 h-100" src="trizzle-assets/images/placeholder-laptop-dark-light.png" alt=""></div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 col-xl-5 ms-auto pt-12 pt-md-24 pb-24 py-lg-40">
        <div class="mw-sm mw-xl-md mx-auto text-center">
          <div class="d-inline-flex mb-10 align-items-center justify-content-center bg-primary rounded-3" style="width: 64px; height: 64px;">
            <svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_477_4243)">
                <path d="M9.51378 21.5224L5.26933 21.5224L1.80985 15.5951L5.02136 9.85416L2.09284 9.85416L0 5.84631L14.0948 5.84631L16.2995 9.62501L9.61522 9.62501L6.15051 15.6598L9.51378 21.5224Z" fill="#E8EDFF"></path>
                <path d="M8.69727 15.563L10.9076 11.7249L14.2552 17.8138L20.9661 17.8138L24.5218 11.919L26.6041 15.401L23.0802 21.7329L16.4012 21.7329L17.7787 23.8058L15.6967 28.0001L8.69727 15.563Z" fill="#E8EDFF"></path>
                <path d="M15.4236 15.4982L19.7002 15.4982L26.833 3.20644L22.3591 3.08759L20.9707 5.61392L17.7249 -1.57947e-06L10.5387 -3.2299e-07L8.69141 3.63828L15.4184 3.63828L18.8138 9.54403L15.4236 15.4982Z" fill="#E8EDFF"></path>
              </g>
            </svg>
          </div>
          <div class="text-center mb-10">
            <h6 class="fs-5 fw-semibold text-light mb-2">Log in to your account</h6>
            <p class="fw-medium text-secondary-light mb-0">Welcome back! Please enter your details.</p>
          </div>
          <form action="">
            <div class="position-relative mb-10">
              <input class="form-control text-light fs-9 bg-transparent" type="email"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-secondary-light bg-dark-light">Email</span>
            </div>
            <div class="position-relative mb-6">
              <input class="form-control text-light fs-9 bg-transparent" type="password"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-secondary-light bg-dark-light">Password</span>
            </div>
            <div class="d-flex mb-6 flex-wrap gap-4 align-items-center justify-content-between">
              <div class="form-check">
                <input class="form-check-input bg-transparent border-light-dark" type="checkbox" value="" id="">
                <label class="form-check-label fs-10 lh-lg fw-semibold text-secondary-light" for="">Remember for 30 days</label>
              </div><a class="btn btn-link p-0 fs-10 fw-semibold" href="#">Forgot password?</a>
            </div><a class="btn mb-4 btn-primary lh-sm w-100" href="#">Sign In</a><a class="btn mb-6 btn-secondary lh-sm w-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 2H2V14H14V2Z" fill="#ECEFF1"></path>
                <path d="M8 9.262L14 14V4.646L8 9.262Z" fill="#CFD8DC"></path>
                <path d="M14.5 2H14L8 6.738L2 2H1.5C0.672 2 0 2.672 0 3.5V12.5C0 13.328 0.672 14 1.5 14H2V4.646L8 9.261L14 4.645V14H14.5C15.328 14 16 13.328 16 12.5V3.5C16 2.672 15.328 2 14.5 2Z" fill="#F44336"></path>
              </svg><span class="ms-3">Sign In with Gmail</span></a>
            <p class="text-center fw-medium mb-0 text-secondary-light"><span>Don’t have an account?</span><a class="btn btn-link fw-medium p-0" href="#">Sign up</a></p>
          </form>
        </div>
      </div>
    </div>
  </div><img class="d-lg-none img-fluid d-block w-100" src="trizzle-assets/images/placeholder-laptop-dark-light.png" alt="">
</section>

<section class="py-8">
  <div class="container">
    <div class="py-6 px-5 h-100 bg-secondary rounded-4">
      <div class="d-flex flex-wrap align-items-center justify-content-between">
        <div class="d-flex align-items-center"><span class="d-block me-1 fw-bold text-light">Audience Insight</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#919EB0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8 5.33337V8.00004" stroke="#919EB0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8 10.6666H8.00667" stroke="#919EB0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <button class="btn btn-outline-secondary-light p-0 bg-transparent border-0">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="chart mt-8 mb-3" data-type="columns-thin"></div>
      <div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
        <div class="d-flex mb-4 mb-md-0 me-md-20 align-items-center">
          <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect y="0.5" width="10" height="10" rx="4" fill="#2563EB"></rect>
          </svg><span class="ms-2 fs-10 fw-semibold text-secondary-light">Men</span>
        </div>
        <div class="d-flex mb-4 mb-md-0 me-md-20 align-items-center">
          <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="0.5" y="0.5" width="10" height="10" rx="4" fill="#936DFF"></rect>
          </svg><span class="ms-2 fs-10 fw-semibold text-secondary-light">Woman</span>
        </div>
        <div class="d-flex align-items-center">
          <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect y="0.5" width="10" height="10" rx="4" fill="#FACC15"></rect>
          </svg><span class="ms-2 fs-10 fw-semibold text-secondary-light">Not Specific</span>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-dark-light overflow-hidden">
  <div class="d-none d-lg-block position-absolute top-0 start-0 h-100 col-6"><img class="img-fluid d-block w-100 h-100" src="trizzle-assets/images/placeholder-laptop-dark-light.png" alt=""></div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 col-xl-5 ms-auto pt-12 pt-md-24 pb-24 py-lg-40">
        <div class="mw-sm mw-xl-md mx-auto text-center">
          <div class="d-inline-flex mb-10 align-items-center justify-content-center bg-primary rounded-3" style="width: 64px; height: 64px;">
            <svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_477_4243)">
                <path d="M9.51378 21.5224L5.26933 21.5224L1.80985 15.5951L5.02136 9.85416L2.09284 9.85416L0 5.84631L14.0948 5.84631L16.2995 9.62501L9.61522 9.62501L6.15051 15.6598L9.51378 21.5224Z" fill="#E8EDFF"></path>
                <path d="M8.69727 15.563L10.9076 11.7249L14.2552 17.8138L20.9661 17.8138L24.5218 11.919L26.6041 15.401L23.0802 21.7329L16.4012 21.7329L17.7787 23.8058L15.6967 28.0001L8.69727 15.563Z" fill="#E8EDFF"></path>
                <path d="M15.4236 15.4982L19.7002 15.4982L26.833 3.20644L22.3591 3.08759L20.9707 5.61392L17.7249 -1.57947e-06L10.5387 -3.2299e-07L8.69141 3.63828L15.4184 3.63828L18.8138 9.54403L15.4236 15.4982Z" fill="#E8EDFF"></path>
              </g>
            </svg>
          </div>
          <div class="text-center mb-10">
            <h6 class="fs-5 fw-semibold text-light mb-2">Sign up with new account</h6>
            <p class="fw-medium text-secondary-light mb-0">Start your journey with us</p>
          </div>
          <form action="">
            <div class="position-relative mb-10">
              <input class="form-control text-light fs-9 bg-transparent" type="text"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-secondary-light bg-dark-light">Name</span>
            </div>
            <div class="position-relative mb-10">
              <input class="form-control text-light fs-9 bg-transparent" type="email"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-secondary-light bg-dark-light">Email*</span>
            </div>
            <div class="position-relative mb-4">
              <input class="form-control text-light fs-9 bg-transparent" type="password"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-secondary-light bg-dark-light">Password*</span>
            </div><span class="d-block text-start mb-6 fs-10 fw-medium text-secondary-light">Must be at least 12 characters.</span><a class="btn mb-4 btn-primary lh-sm w-100" href="#">Create account</a><a class="btn mb-8 btn-secondary lh-sm w-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 2H2V14H14V2Z" fill="#ECEFF1"></path>
                <path d="M8 9.262L14 14V4.646L8 9.262Z" fill="#CFD8DC"></path>
                <path d="M14.5 2H14L8 6.738L2 2H1.5C0.672 2 0 2.672 0 3.5V12.5C0 13.328 0.672 14 1.5 14H2V4.646L8 9.261L14 4.645V14H14.5C15.328 14 16 13.328 16 12.5V3.5C16 2.672 15.328 2 14.5 2Z" fill="#F44336"></path>
              </svg><span class="ms-3">Sign Up with Gmail</span></a>
            <p class="text-center fw-medium mb-0 text-secondary-light"><span>Already have an acoount?</span><a class="btn btn-link fw-medium p-0" href="#">Sign in</a></p>
          </form>
        </div>
      </div>
    </div>
  </div><img class="d-lg-none img-fluid d-block w-100" src="trizzle-assets/images/placeholder-laptop-dark-light.png" alt="">
</section>

<section class="py-8">
  <div class="container"><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
      <h4 class="fs-7 fw-semibold text-light-light mb-2">Implement Login</h4>
      <div class="d-flex align-items-center mb-4">
        <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="3" cy="3.5" r="3" fill="#b9ddff"></circle>
        </svg><span class="ms-1 fs-10 fw-medium text-primary-light">Development</span>
      </div>
      <p class="fs-10 text-secondary-light lh-sm mb-10">This is an example task that can be used within a Kanban system.</p>
      <div class="pt-4 border-top border-secondary border-opacity-75">
        <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
          <div class="p-2">
            <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
            </div>
          </div>
          <div class="p-2">
            <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""></div>
          </div>
        </div>
      </div></a></div>
</section>

<section class="py-8">
  <div class="container">
    <div class="row mb-6">
      <div class="col-sm-6 col-lg-3 mb-6">
        <div class="py-8 px-6 h-100 bg-secondary rounded-4">
          <div class="text-center">
            <div class="d-inline-flex mb-4 align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 17H2C1.73478 17 1.48043 17.1054 1.29289 17.2929C1.10536 17.4804 1 17.7348 1 18C1 18.2652 1.10536 18.5196 1.29289 18.7071C1.48043 18.8946 1.73478 19 2 19H22C22.2652 19 22.5196 18.8946 22.7071 18.7071C22.8946 18.5196 23 18.2652 23 18C23 17.7348 22.8946 17.4804 22.7071 17.2929C22.5196 17.1054 22.2652 17 22 17ZM22 21H2C1.73478 21 1.48043 21.1054 1.29289 21.2929C1.10536 21.4804 1 21.7348 1 22C1 22.2652 1.10536 22.5196 1.29289 22.7071C1.48043 22.8946 1.73478 23 2 23H22C22.2652 23 22.5196 22.8946 22.7071 22.7071C22.8946 22.5196 23 22.2652 23 22C23 21.7348 22.8946 21.4804 22.7071 21.2929C22.5196 21.1054 22.2652 21 22 21ZM6 7C5.80222 7 5.60888 7.05865 5.44443 7.16853C5.27998 7.27841 5.15181 7.43459 5.07612 7.61732C5.00043 7.80004 4.98063 8.00111 5.01921 8.19509C5.0578 8.38907 5.15304 8.56725 5.29289 8.70711C5.43275 8.84696 5.61093 8.9422 5.80491 8.98079C5.99889 9.01937 6.19996 8.99957 6.38268 8.92388C6.56541 8.84819 6.72159 8.72002 6.83147 8.55557C6.94135 8.39112 7 8.19778 7 8C7 7.73478 6.89464 7.48043 6.70711 7.29289C6.51957 7.10536 6.26522 7 6 7ZM20 1H4C3.20435 1 2.44129 1.31607 1.87868 1.87868C1.31607 2.44129 1 3.20435 1 4V12C1 12.7956 1.31607 13.5587 1.87868 14.1213C2.44129 14.6839 3.20435 15 4 15H20C20.7956 15 21.5587 14.6839 22.1213 14.1213C22.6839 13.5587 23 12.7956 23 12V4C23 3.20435 22.6839 2.44129 22.1213 1.87868C21.5587 1.31607 20.7956 1 20 1ZM21 12C21 12.2652 20.8946 12.5196 20.7071 12.7071C20.5196 12.8946 20.2652 13 20 13H4C3.73478 13 3.48043 12.8946 3.29289 12.7071C3.10536 12.5196 3 12.2652 3 12V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V12ZM12 5C11.4067 5 10.8266 5.17595 10.3333 5.50559C9.83994 5.83524 9.45542 6.30377 9.22836 6.85195C9.0013 7.40013 8.94189 8.00333 9.05764 8.58527C9.1734 9.16721 9.45912 9.70176 9.87868 10.1213C10.2982 10.5409 10.8328 10.8266 11.4147 10.9424C11.9967 11.0581 12.5999 10.9987 13.1481 10.7716C13.6962 10.5446 14.1648 10.1601 14.4944 9.66671C14.8241 9.17336 15 8.59334 15 8C15 7.20435 14.6839 6.44129 14.1213 5.87868C13.5587 5.31607 12.7956 5 12 5ZM12 9C11.8022 9 11.6089 8.94135 11.4444 8.83147C11.28 8.72159 11.1518 8.56541 11.0761 8.38268C11.0004 8.19996 10.9806 7.99889 11.0192 7.80491C11.0578 7.61093 11.153 7.43275 11.2929 7.29289C11.4327 7.15304 11.6109 7.0578 11.8049 7.01921C11.9989 6.98063 12.2 7.00043 12.3827 7.07612C12.5654 7.15181 12.7216 7.27998 12.8315 7.44443C12.9414 7.60888 13 7.80222 13 8C13 8.26522 12.8946 8.51957 12.7071 8.70711C12.5196 8.89464 12.2652 9 12 9ZM18 7C17.8022 7 17.6089 7.05865 17.4444 7.16853C17.28 7.27841 17.1518 7.43459 17.0761 7.61732C17.0004 7.80004 16.9806 8.00111 17.0192 8.19509C17.0578 8.38907 17.153 8.56725 17.2929 8.70711C17.4327 8.84696 17.6109 8.9422 17.8049 8.98079C17.9989 9.01937 18.2 8.99957 18.3827 8.92388C18.5654 8.84819 18.7216 8.72002 18.8315 8.55557C18.9414 8.39112 19 8.19778 19 8C19 7.73478 18.8946 7.48043 18.7071 7.29289C18.5196 7.10536 18.2652 7 18 7Z" fill="#194BFB"></path>
              </svg>
            </div>
            <div class="mb-4"><span class="d-block fs-10 fw-semibold text-secondary-light">Budget</span><span class="d-block fs-6 fw-semibold text-light">$28k</span></div>
            <div>
              <div class="d-inline-flex me-2 ps-2 pe-2 py-1 bg-success-dark bg-opacity-50 text-success rounded-pill"><span class="fs-10 fw-medium">1,0%</span></div><span class="d-inline-block fs-10 fw-medium text-secondary-light">Since last month</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3 mb-6">
        <div class="py-8 px-6 h-100 bg-secondary rounded-4">
          <div class="text-center">
            <div class="d-inline-flex mb-4 align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.3 12.22C12.8336 11.7581 13.2616 11.1869 13.5549 10.545C13.8482 9.90316 14 9.20571 14 8.5C14 7.17392 13.4732 5.90215 12.5355 4.96447C11.5979 4.02678 10.3261 3.5 9 3.5C7.67392 3.5 6.40215 4.02678 5.46447 4.96447C4.52678 5.90215 4 7.17392 4 8.5C3.99999 9.20571 4.1518 9.90316 4.44513 10.545C4.73845 11.1869 5.16642 11.7581 5.7 12.22C4.30014 12.8539 3.11247 13.8775 2.27898 15.1685C1.4455 16.4596 1.00147 17.9633 1 19.5C1 19.7652 1.10536 20.0196 1.29289 20.2071C1.48043 20.3946 1.73478 20.5 2 20.5C2.26522 20.5 2.51957 20.3946 2.70711 20.2071C2.89464 20.0196 3 19.7652 3 19.5C3 17.9087 3.63214 16.3826 4.75736 15.2574C5.88258 14.1321 7.4087 13.5 9 13.5C10.5913 13.5 12.1174 14.1321 13.2426 15.2574C14.3679 16.3826 15 17.9087 15 19.5C15 19.7652 15.1054 20.0196 15.2929 20.2071C15.4804 20.3946 15.7348 20.5 16 20.5C16.2652 20.5 16.5196 20.3946 16.7071 20.2071C16.8946 20.0196 17 19.7652 17 19.5C16.9985 17.9633 16.5545 16.4596 15.721 15.1685C14.8875 13.8775 13.6999 12.8539 12.3 12.22ZM9 11.5C8.40666 11.5 7.82664 11.3241 7.33329 10.9944C6.83994 10.6648 6.45542 10.1962 6.22836 9.64805C6.0013 9.09987 5.94189 8.49667 6.05764 7.91473C6.1734 7.33279 6.45912 6.79824 6.87868 6.37868C7.29824 5.95912 7.83279 5.6734 8.41473 5.55764C8.99667 5.44189 9.59987 5.5013 10.1481 5.72836C10.6962 5.95542 11.1648 6.33994 11.4944 6.83329C11.8241 7.32664 12 7.90666 12 8.5C12 9.29565 11.6839 10.0587 11.1213 10.6213C10.5587 11.1839 9.79565 11.5 9 11.5ZM18.74 11.82C19.38 11.0993 19.798 10.2091 19.9438 9.25634C20.0896 8.30362 19.9569 7.32907 19.5618 6.45C19.1666 5.57093 18.5258 4.8248 17.7165 4.30142C16.9071 3.77805 15.9638 3.49974 15 3.5C14.7348 3.5 14.4804 3.60536 14.2929 3.79289C14.1054 3.98043 14 4.23478 14 4.5C14 4.76522 14.1054 5.01957 14.2929 5.20711C14.4804 5.39464 14.7348 5.5 15 5.5C15.7956 5.5 16.5587 5.81607 17.1213 6.37868C17.6839 6.94129 18 7.70435 18 8.5C17.9986 9.02524 17.8593 9.5409 17.5961 9.99542C17.3328 10.4499 16.9549 10.8274 16.5 11.09C16.3517 11.1755 16.2279 11.2977 16.1404 11.4447C16.0528 11.5918 16.0045 11.7589 16 11.93C15.9958 12.0998 16.0349 12.2678 16.1137 12.4183C16.1924 12.5687 16.3081 12.6967 16.45 12.79L16.84 13.05L16.97 13.12C18.1754 13.6917 19.1923 14.596 19.901 15.7263C20.6096 16.8566 20.9805 18.1659 20.97 19.5C20.97 19.7652 21.0754 20.0196 21.2629 20.2071C21.4504 20.3946 21.7048 20.5 21.97 20.5C22.2352 20.5 22.4896 20.3946 22.6771 20.2071C22.8646 20.0196 22.97 19.7652 22.97 19.5C22.9782 17.9654 22.5938 16.4543 21.8535 15.1101C21.1131 13.7659 20.0413 12.6333 18.74 11.82Z" fill="#194BFB"></path>
              </svg>
            </div>
            <div class="mb-4"><span class="d-block fs-10 fw-semibold text-secondary-light">Total customers</span><span class="d-block fs-6 fw-semibold text-light">1.6K</span></div>
            <div>
              <div class="d-inline-flex me-2 ps-2 pe-2 py-1 bg-success-dark bg-opacity-50 text-success rounded-pill"><span class="fs-10 fw-medium">1,0%</span></div><span class="d-inline-block fs-10 fw-medium text-secondary-light">Since last month</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3 mb-6">
        <div class="py-8 px-6 h-100 bg-secondary rounded-4">
          <div class="text-center">
            <div class="d-inline-flex mb-4 align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 4H15.82C15.6137 3.41645 15.2319 2.911 14.7271 2.55294C14.2222 2.19488 13.6189 2.00174 13 2H11C10.3811 2.00174 9.7778 2.19488 9.27293 2.55294C8.76807 2.911 8.38631 3.41645 8.18 4H7C6.20435 4 5.44129 4.31607 4.87868 4.87868C4.31607 5.44129 4 6.20435 4 7V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V7C20 6.20435 19.6839 5.44129 19.1213 4.87868C18.5587 4.31607 17.7956 4 17 4ZM10 5C10 4.73478 10.1054 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V6H10V5ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V7C6 6.73478 6.10536 6.48043 6.29289 6.29289C6.48043 6.10536 6.73478 6 7 6H8V7C8 7.26522 8.10536 7.51957 8.29289 7.70711C8.48043 7.89464 8.73478 8 9 8H15C15.2652 8 15.5196 7.89464 15.7071 7.70711C15.8946 7.51957 16 7.26522 16 7V6H17C17.2652 6 17.5196 6.10536 17.7071 6.29289C17.8946 6.48043 18 6.73478 18 7V19Z" fill="#194BFB"></path>
              </svg>
            </div>
            <div class="mb-4"><span class="d-block fs-10 fw-semibold text-secondary-light">Tasks Progress</span><span class="d-block fs-6 fw-semibold text-light">64.5%</span></div>
            <div>
              <div class="d-inline-flex me-2 ps-2 pe-2 py-1 bg-success-dark bg-opacity-50 text-success rounded-pill"><span class="fs-10 fw-medium">1,0%</span></div><span class="d-inline-block fs-10 fw-medium text-secondary-light">Since last month</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3 mb-6">
        <div class="py-8 px-6 h-100 bg-secondary rounded-4">
          <div class="text-center">
            <div class="d-inline-flex mb-4 align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 1H4C3.20435 1 2.44129 1.31607 1.87868 1.87868C1.31607 2.44129 1 3.20435 1 4V20C1 20.7956 1.31607 21.5587 1.87868 22.1213C2.44129 22.6839 3.20435 23 4 23H20C20.7956 23 21.5587 22.6839 22.1213 22.1213C22.6839 21.5587 23 20.7956 23 20V4C23 3.20435 22.6839 2.44129 22.1213 1.87868C21.5587 1.31607 20.7956 1 20 1ZM8 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V18.82C3.32067 18.9364 3.65886 18.9973 4 19H8V21ZM8 17H4C3.73478 17 3.48043 16.8946 3.29289 16.7071C3.10536 16.5196 3 16.2652 3 16V14.82C3.32067 14.9364 3.65886 14.9973 4 15H8V17ZM8 13H4C3.73478 13 3.48043 12.8946 3.29289 12.7071C3.10536 12.5196 3 12.2652 3 12V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3H8V13ZM14 21H10V15H14V21ZM14 13H10V3H14V13ZM21 20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H16V19H20C20.3411 18.9973 20.6793 18.9364 21 18.82V20ZM21 16C21 16.2652 20.8946 16.5196 20.7071 16.7071C20.5196 16.8946 20.2652 17 20 17H16V15H20C20.3411 14.9973 20.6793 14.9364 21 14.82V16ZM21 12C21 12.2652 20.8946 12.5196 20.7071 12.7071C20.5196 12.8946 20.2652 13 20 13H16V3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V12ZM18 7C17.8022 7 17.6089 7.05865 17.4444 7.16853C17.28 7.27841 17.1518 7.43459 17.0761 7.61732C17.0004 7.80004 16.9806 8.00111 17.0192 8.19509C17.0578 8.38907 17.153 8.56725 17.2929 8.70711C17.4327 8.84696 17.6109 8.9422 17.8049 8.98079C17.9989 9.01937 18.2 8.99957 18.3827 8.92388C18.5654 8.84819 18.7216 8.72002 18.8315 8.55557C18.9414 8.39112 19 8.19778 19 8C19 7.73478 18.8946 7.48043 18.7071 7.29289C18.5196 7.10536 18.2652 7 18 7ZM6 9C6.19778 9 6.39112 8.94135 6.55557 8.83147C6.72002 8.72159 6.84819 8.56541 6.92388 8.38268C6.99957 8.19996 7.01937 7.99889 6.98079 7.80491C6.9422 7.61093 6.84696 7.43275 6.70711 7.29289C6.56725 7.15304 6.38907 7.0578 6.19509 7.01921C6.00111 6.98063 5.80004 7.00043 5.61732 7.07612C5.43459 7.15181 5.27841 7.27998 5.16853 7.44443C5.05865 7.60888 5 7.80222 5 8C5 8.26522 5.10536 8.51957 5.29289 8.70711C5.48043 8.89464 5.73478 9 6 9Z" fill="#194BFB"></path>
              </svg>
            </div>
            <div class="mb-4"><span class="d-block fs-10 fw-semibold text-secondary-light">Total profit</span><span class="d-block fs-6 fw-semibold text-light">$23k</span></div>
            <div>
              <div class="d-inline-flex me-2 ps-2 pe-2 py-1 bg-success-dark bg-opacity-50 text-success rounded-pill"><span class="fs-10 fw-medium">1,0%</span></div><span class="d-inline-block fs-10 fw-medium text-secondary-light">Since last month</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="mw-xs mw-sm-xl mw-lg-6xl mx-auto">
      <div class="row">
        <div class="col-sm-6 col-lg-3 mb-6 mb-lg-0">
          <div class="h-100 px-4 pt-6 pb-24 bg-secondary rounded-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <div class="d-flex align-items-center">
                <h3 class="fs-8 fw-semibold text-light me-2 mb-0">To do</h3><span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded-pill bg-dark-light fs-10 fw-medium text-light-dark">3</span>
              </div>
              <div>
                <button class="btn p-0 border-0 bg-transparent me-2 btn-outline-light-dark">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                  </svg>
                </button><a class="btn p-0 border-0 bg-transparent text-light-dark" href="#">
                  <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                  </svg></a>
              </div>
            </div>
            <div class="pt-1 w-100 mb-4 rounded-pill bg-info"></div><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">Implement Login</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#b9ddff"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-primary-light">Development</span>
              </div>
              <p class="fs-10 text-secondary-light lh-sm mb-10">This is an example task that can be used within a Kanban system.</p>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">Release MVP</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#24D164"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-success">Planning</span>
              </div>
              <p class="fs-10 text-secondary-light lh-sm mb-10">This is an example task that can be used within a Kanban system.</p>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-2-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">Design Review</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#8565E6"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-info">Design</span>
              </div>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-2-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-6 mb-lg-0">
          <div class="h-100 px-4 pt-6 pb-24 bg-secondary rounded-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <div class="d-flex align-items-center">
                <h3 class="fs-8 fw-semibold text-light me-2 mb-0">In progress</h3><span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded-pill bg-dark-light fs-10 fw-medium text-light-dark">2</span>
              </div>
              <div>
                <button class="btn p-0 border-0 bg-transparent me-2 btn-outline-light-dark">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                  </svg>
                </button><a class="btn p-0 border-0 bg-transparent text-light-dark" href="#">
                  <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                  </svg></a>
              </div>
            </div>
            <div class="pt-1 w-100 mb-4 rounded-pill bg-primary"></div><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">UI Adjustments</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#8565E6"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-info">Design</span>
              </div>
              <p class="fs-10 text-secondary-light lh-sm mb-10">This is an example task that can be used within a Kanban system.</p>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">Design Review</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#8565E6"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-info">Design</span>
              </div>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">Shuffle Improvements</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#24D164"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-success">Planning</span>
              </div><img class="img-fluid d-block mb-3 w-100 rounded-4" src="trizzle-assets/images/laptop-photo-placeholder.png" alt="">
              <p class="fs-10 text-secondary-light lh-sm mb-4">This is an example task that can be used within a Kanban system.</p>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="h-100 px-4 pt-6 pb-24 bg-secondary rounded-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <div class="d-flex align-items-center">
                <h3 class="fs-8 fw-semibold text-light me-2 mb-0">In Review</h3><span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded-pill bg-dark-light fs-10 fw-medium text-light-dark">10</span>
              </div>
              <div>
                <button class="btn p-0 border-0 bg-transparent me-2 btn-outline-light-dark">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                  </svg>
                </button><a class="btn p-0 border-0 bg-transparent text-light-dark" href="#">
                  <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                  </svg></a>
              </div>
            </div>
            <div class="pt-1 w-100 mb-4 rounded-pill bg-warning"></div><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">Implement Login</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#b9ddff"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-primary-light">Development</span>
              </div>
              <p class="fs-10 text-secondary-light lh-sm mb-10">This is an example task that can be used within a Kanban system.</p>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#"><img class="img-fluid d-block mb-3 w-100 rounded-4" src="trizzle-assets/images/working-women-laptop.png" alt="">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">Posts for Social Media</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#24D164"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-success">Planning</span>
              </div>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex">
                      <div class="d-flex me-2 align-items-center p-2 bg-secondary rounded-3">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M6.66675 9.3333C6.884 9.55503 7.14331 9.73118 7.4295 9.85144C7.71568 9.9717 8.02299 10.0336 8.33341 10.0336C8.64384 10.0336 8.95114 9.9717 9.23733 9.85144C9.52352 9.73118 9.78283 9.55503 10.0001 9.3333L12.6667 6.66663C13.1088 6.22461 13.3571 5.62509 13.3571 4.99997C13.3571 4.37485 13.1088 3.77533 12.6667 3.3333C12.2247 2.89127 11.6252 2.64294 11.0001 2.64294C10.375 2.64294 9.77544 2.89127 9.33341 3.3333L9.00008 3.66663" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M9.33342 6.66665C9.11617 6.44492 8.85686 6.26876 8.57067 6.14851C8.28449 6.02825 7.97718 5.96631 7.66676 5.96631C7.35633 5.96631 7.04903 6.02825 6.76284 6.14851C6.47665 6.26876 6.21734 6.44492 6.00009 6.66665L3.33342 9.33332C2.89139 9.77534 2.64307 10.3749 2.64307 11C2.64307 11.6251 2.89139 12.2246 3.33342 12.6666C3.77545 13.1087 4.37497 13.357 5.00009 13.357C5.62521 13.357 6.22473 13.1087 6.66676 12.6666L7.00009 12.3333" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">2</span>
                      </div>
                      <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1 12.3333L1.86667 9.7333C1.11763 8.62549 0.846662 7.31358 1.10415 6.04151C1.36163 4.76943 2.13004 3.62375 3.26651 2.81749C4.40298 2.01122 5.83017 1.59924 7.28273 1.65813C8.73528 1.71703 10.1143 2.24279 11.1635 3.13768C12.2127 4.03256 12.8606 5.23567 12.9867 6.52329C13.1128 7.81092 12.7086 9.09546 11.8492 10.1381C10.9899 11.1807 9.73377 11.9104 8.31453 12.1915C6.89529 12.4727 5.40947 12.2862 4.13333 11.6666L1 12.3333Z" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M7 7V7.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M4.33325 7V7.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M9.66675 7V7.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">5</span>
                      </div>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">Design Review</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#8565E6"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-info">Design</span>
              </div>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-2-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="h-100 px-4 pt-6 pb-24 bg-secondary rounded-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <div class="d-flex align-items-center">
                <h3 class="fs-8 fw-semibold text-light me-2 mb-0">Done</h3><span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded-pill bg-dark-light fs-10 fw-medium text-light-dark">2</span>
              </div>
              <div>
                <button class="btn p-0 border-0 bg-transparent me-2 btn-outline-light-dark">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                  </svg>
                </button><a class="btn p-0 border-0 bg-transparent text-light-dark" href="#">
                  <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                  </svg></a>
              </div>
            </div>
            <div class="pt-1 w-100 mb-4 rounded-pill bg-success"></div><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">UI Adjustments</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#8565E6"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-info">Design</span>
              </div>
              <p class="fs-10 text-secondary-light lh-sm mb-10">This is an example task that can be used within a Kanban system.</p>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">Design Review</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#8565E6"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-info">Design</span>
              </div>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
              <h4 class="fs-7 fw-semibold text-light-light mb-2">Shuffle Improvements</h4>
              <div class="d-flex align-items-center mb-4">
                <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="3" cy="3.5" r="3" fill="#24D164"></circle>
                </svg><span class="ms-1 fs-10 fw-medium text-success">Planning</span>
              </div><img class="img-fluid d-block mb-3 w-100 rounded-4" src="trizzle-assets/images/laptop-photo-placeholder.png" alt="">
              <p class="fs-10 text-secondary-light lh-sm mb-4">This is an example task that can be used within a Kanban system.</p>
              <div class="pt-4 border-top border-secondary border-opacity-75">
                <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
                  <div class="p-2">
                    <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
                    </div>
                  </div>
                  <div class="p-2">
                    <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""></div>
                  </div>
                </div>
              </div></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-8">
  <div class="container">
    <div class="py-6 px-5 h-100 bg-secondary rounded-4">
      <div class="d-flex align-items-center justify-content-between">
        <div><span class="d-block fs-10 text-secondary-light">Activity</span>
          <div class="d-flex align-items-end"><span class="fs-8 fw-bold text-light">4,535</span><span class="ms-2 fs-10 text-danger">-16%</span></div>
        </div>
        <div class="position-relative bg-dark-light rounded-4">
          <select class="form-select py-3 ps-3 pe-7 fs-10 fw-semibold text-secondary-light bg-transparent border-0" name="" id="">
            <option value="1">This Week</option>
            <option value="1">This Month</option>
            <option value="1">This Year</option>
          </select><span class="position-absolute top-50 end-0 me-2 translate-middle-y">
            <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.5 6L8.5 10L12.5 6" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
        </div>
      </div>
      <div class="chart p-6" data-type="columns" style="min-height: 215px;"></div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark-light">
    <div class="container position-relative" type="button" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt=""></a>
      <div class="position-absolute top-50 start-50 translate-middle collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link px-4 d-flex align-items-center" aria-current="page" href="#">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.33317 9.83329H1.49984C1.27882 9.83329 1.06686 9.92109 0.910582 10.0774C0.754301 10.2337 0.666504 10.4456 0.666504 10.6666V16.5C0.666504 16.721 0.754301 16.9329 0.910582 17.0892C1.06686 17.2455 1.27882 17.3333 1.49984 17.3333H7.33317C7.55418 17.3333 7.76615 17.2455 7.92243 17.0892C8.07871 16.9329 8.1665 16.721 8.1665 16.5V10.6666C8.1665 10.4456 8.07871 10.2337 7.92243 10.0774C7.76615 9.92109 7.55418 9.83329 7.33317 9.83329ZM6.49984 15.6666H2.33317V11.5H6.49984V15.6666ZM16.4998 0.666626H10.6665C10.4455 0.666626 10.2335 0.754423 10.0772 0.910704C9.92097 1.06698 9.83317 1.27895 9.83317 1.49996V7.33329C9.83317 7.55431 9.92097 7.76627 10.0772 7.92255C10.2335 8.07883 10.4455 8.16663 10.6665 8.16663H16.4998C16.7208 8.16663 16.9328 8.07883 17.0891 7.92255C17.2454 7.76627 17.3332 7.55431 17.3332 7.33329V1.49996C17.3332 1.27895 17.2454 1.06698 17.0891 0.910704C16.9328 0.754423 16.7208 0.666626 16.4998 0.666626ZM15.6665 6.49996H11.4998V2.33329H15.6665V6.49996ZM16.4998 9.83329H10.6665C10.4455 9.83329 10.2335 9.92109 10.0772 10.0774C9.92097 10.2337 9.83317 10.4456 9.83317 10.6666V16.5C9.83317 16.721 9.92097 16.9329 10.0772 17.0892C10.2335 17.2455 10.4455 17.3333 10.6665 17.3333H16.4998C16.7208 17.3333 16.9328 17.2455 17.0891 17.0892C17.2454 16.9329 17.3332 16.721 17.3332 16.5V10.6666C17.3332 10.4456 17.2454 10.2337 17.0891 10.0774C16.9328 9.92109 16.7208 9.83329 16.4998 9.83329ZM15.6665 15.6666H11.4998V11.5H15.6665V15.6666ZM7.33317 0.666626H1.49984C1.27882 0.666626 1.06686 0.754423 0.910582 0.910704C0.754301 1.06698 0.666504 1.27895 0.666504 1.49996V7.33329C0.666504 7.55431 0.754301 7.76627 0.910582 7.92255C1.06686 8.07883 1.27882 8.16663 1.49984 8.16663H7.33317C7.55418 8.16663 7.76615 8.07883 7.92243 7.92255C8.07871 7.76627 8.1665 7.55431 8.1665 7.33329V1.49996C8.1665 1.27895 8.07871 1.06698 7.92243 0.910704C7.76615 0.754423 7.55418 0.666626 7.33317 0.666626ZM6.49984 6.49996H2.33317V2.33329H6.49984V6.49996Z" fill="#3D485B"></path>
              </svg><span class="ms-2">Overview</span></a></li>
          <li class="nav-item"><a class="nav-link px-4 d-flex align-items-center" aria-current="page" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.99984 4.99996C9.77882 4.99996 9.56686 5.08776 9.41058 5.24404C9.2543 5.40032 9.1665 5.61228 9.1665 5.83329V14.1666C9.1665 14.3876 9.2543 14.5996 9.41058 14.7559C9.56686 14.9122 9.77882 15 9.99984 15C10.2209 15 10.4328 14.9122 10.5891 14.7559C10.7454 14.5996 10.8332 14.3876 10.8332 14.1666V5.83329C10.8332 5.61228 10.7454 5.40032 10.5891 5.24404C10.4328 5.08776 10.2209 4.99996 9.99984 4.99996ZM5.83317 9.99996C5.61216 9.99996 5.4002 10.0878 5.24392 10.244C5.08763 10.4003 4.99984 10.6123 4.99984 10.8333V14.1666C4.99984 14.3876 5.08763 14.5996 5.24392 14.7559C5.4002 14.9122 5.61216 15 5.83317 15C6.05418 15 6.26615 14.9122 6.42243 14.7559C6.57871 14.5996 6.6665 14.3876 6.6665 14.1666V10.8333C6.6665 10.6123 6.57871 10.4003 6.42243 10.244C6.26615 10.0878 6.05418 9.99996 5.83317 9.99996ZM14.1665 8.33329C13.9455 8.33329 13.7335 8.42109 13.5772 8.57737C13.421 8.73365 13.3332 8.94561 13.3332 9.16663V14.1666C13.3332 14.3876 13.421 14.5996 13.5772 14.7559C13.7335 14.9122 13.9455 15 14.1665 15C14.3875 15 14.5995 14.9122 14.7558 14.7559C14.912 14.5996 14.9998 14.3876 14.9998 14.1666V9.16663C14.9998 8.94561 14.912 8.73365 14.7558 8.57737C14.5995 8.42109 14.3875 8.33329 14.1665 8.33329ZM15.8332 1.66663H4.1665C3.50346 1.66663 2.86758 1.93002 2.39874 2.39886C1.9299 2.8677 1.6665 3.50358 1.6665 4.16663V15.8333C1.6665 16.4963 1.9299 17.1322 2.39874 17.6011C2.86758 18.0699 3.50346 18.3333 4.1665 18.3333H15.8332C16.4962 18.3333 17.1321 18.0699 17.6009 17.6011C18.0698 17.1322 18.3332 16.4963 18.3332 15.8333V4.16663C18.3332 3.50358 18.0698 2.8677 17.6009 2.39886C17.1321 1.93002 16.4962 1.66663 15.8332 1.66663ZM16.6665 15.8333C16.6665 16.0543 16.5787 16.2663 16.4224 16.4225C16.2661 16.5788 16.0542 16.6666 15.8332 16.6666H4.1665C3.94549 16.6666 3.73353 16.5788 3.57725 16.4225C3.42097 16.2663 3.33317 16.0543 3.33317 15.8333V4.16663C3.33317 3.94561 3.42097 3.73365 3.57725 3.57737C3.73353 3.42109 3.94549 3.33329 4.1665 3.33329H15.8332C16.0542 3.33329 16.2661 3.42109 16.4224 3.57737C16.5787 3.73365 16.6665 3.94561 16.6665 4.16663V15.8333Z" fill="#3D485B"></path>
              </svg><span class="ms-2">Analytics</span></a></li>
          <li class="nav-item"><a class="nav-link px-4 d-flex align-items-center" aria-current="page" hre="" f="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.8334 5.41671H13.3334V4.58337C13.3334 3.92033 13.07 3.28445 12.6012 2.81561C12.1323 2.34677 11.4965 2.08337 10.8334 2.08337H9.16675C8.50371 2.08337 7.86782 2.34677 7.39898 2.81561C6.93014 3.28445 6.66675 3.92033 6.66675 4.58337V5.41671H4.16675C3.50371 5.41671 2.86782 5.6801 2.39898 6.14894C1.93014 6.61778 1.66675 7.25367 1.66675 7.91671V15.4167C1.66675 16.0797 1.93014 16.7156 2.39898 17.1845C2.86782 17.6533 3.50371 17.9167 4.16675 17.9167H15.8334C16.4965 17.9167 17.1323 17.6533 17.6012 17.1845C18.07 16.7156 18.3334 16.0797 18.3334 15.4167V7.91671C18.3334 7.25367 18.07 6.61778 17.6012 6.14894C17.1323 5.6801 16.4965 5.41671 15.8334 5.41671ZM8.33341 4.58337C8.33341 4.36236 8.42121 4.1504 8.57749 3.99412C8.73377 3.83784 8.94573 3.75004 9.16675 3.75004H10.8334C11.0544 3.75004 11.2664 3.83784 11.4227 3.99412C11.5789 4.1504 11.6667 4.36236 11.6667 4.58337V5.41671H8.33341V4.58337ZM16.6667 15.4167C16.6667 15.6377 16.579 15.8497 16.4227 16.006C16.2664 16.1622 16.0544 16.25 15.8334 16.25H4.16675C3.94573 16.25 3.73377 16.1622 3.57749 16.006C3.42121 15.8497 3.33341 15.6377 3.33341 15.4167V10.8334C4.14628 11.1558 4.9819 11.4176 5.83341 11.6167V12.1084C5.83341 12.3294 5.92121 12.5413 6.07749 12.6976C6.23377 12.8539 6.44573 12.9417 6.66675 12.9417C6.88776 12.9417 7.09972 12.8539 7.256 12.6976C7.41228 12.5413 7.50008 12.3294 7.50008 12.1084V11.9334C8.3287 12.0462 9.16382 12.1046 10.0001 12.1084C10.8363 12.1046 11.6715 12.0462 12.5001 11.9334V12.1084C12.5001 12.3294 12.5879 12.5413 12.7442 12.6976C12.9004 12.8539 13.1124 12.9417 13.3334 12.9417C13.5544 12.9417 13.7664 12.8539 13.9227 12.6976C14.079 12.5413 14.1667 12.3294 14.1667 12.1084V11.6167C15.0183 11.4176 15.8539 11.1558 16.6667 10.8334V15.4167ZM16.6667 9.00837C15.8562 9.35045 15.0204 9.62907 14.1667 9.84171V9.58337C14.1667 9.36236 14.079 9.1504 13.9227 8.99412C13.7664 8.83784 13.5544 8.75004 13.3334 8.75004C13.1124 8.75004 12.9004 8.83784 12.7442 8.99412C12.5879 9.1504 12.5001 9.36236 12.5001 9.58337V10.2C10.8428 10.4501 9.15737 10.4501 7.50008 10.2V9.58337C7.50008 9.36236 7.41228 9.1504 7.256 8.99412C7.09972 8.83784 6.88776 8.75004 6.66675 8.75004C6.44573 8.75004 6.23377 8.83784 6.07749 8.99412C5.92121 9.1504 5.83341 9.36236 5.83341 9.58337V9.85837C4.97977 9.64573 4.14392 9.36712 3.33341 9.02504V7.91671C3.33341 7.69569 3.42121 7.48373 3.57749 7.32745C3.73377 7.17117 3.94573 7.08337 4.16675 7.08337H15.8334C16.0544 7.08337 16.2664 7.17117 16.4227 7.32745C16.579 7.48373 16.6667 7.69569 16.6667 7.91671V9.00837Z" fill="#3D485B"></path>
              </svg><span class="ms-2">Products</span></a></li>
          <li class="nav-item"><a class="nav-link px-4 d-flex align-items-center" aria-current="page" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.6666 15C11.8876 15 12.0996 14.9122 12.2558 14.756C12.4121 14.5997 12.4999 14.3877 12.4999 14.1667V12.5C12.4999 12.279 12.4121 12.0671 12.2558 11.9108C12.0996 11.7545 11.8876 11.6667 11.6666 11.6667C11.4456 11.6667 11.2336 11.7545 11.0773 11.9108C10.921 12.0671 10.8332 12.279 10.8332 12.5V14.1667C10.8332 14.3877 10.921 14.5997 11.0773 14.756C11.2336 14.9122 11.4456 15 11.6666 15ZM8.33324 15C8.55426 15 8.76622 14.9122 8.9225 14.756C9.07878 14.5997 9.16658 14.3877 9.16658 14.1667V12.5C9.16658 12.279 9.07878 12.0671 8.9225 11.9108C8.76622 11.7545 8.55426 11.6667 8.33324 11.6667C8.11223 11.6667 7.90027 11.7545 7.74399 11.9108C7.58771 12.0671 7.49991 12.279 7.49991 12.5V14.1667C7.49991 14.3877 7.58771 14.5997 7.74399 14.756C7.90027 14.9122 8.11223 15 8.33324 15ZM15.8332 5.00004H14.6832L13.2416 2.12504C13.1975 2.01925 13.1321 1.92369 13.0495 1.84432C12.9668 1.76494 12.8687 1.70347 12.7612 1.66374C12.6537 1.62402 12.5392 1.60688 12.4248 1.61342C12.3104 1.61995 12.1985 1.65001 12.0963 1.70172C11.994 1.75342 11.9035 1.82567 11.8304 1.91393C11.7573 2.0022 11.7032 2.10459 11.6715 2.2147C11.6398 2.32482 11.6311 2.4403 11.646 2.55392C11.661 2.66753 11.6992 2.77685 11.7582 2.87504L12.8166 5.00004H7.18324L8.24158 2.87504C8.32246 2.6808 8.32688 2.46315 8.25393 2.26578C8.18098 2.06842 8.03607 1.90596 7.84829 1.81101C7.66052 1.71607 7.44378 1.69568 7.24159 1.75393C7.0394 1.81217 6.86673 1.94475 6.75824 2.12504L5.31658 5.00004H4.16658C3.57757 5.009 3.01064 5.22567 2.56578 5.61182C2.12093 5.99797 1.82672 6.52881 1.73505 7.11072C1.64338 7.69262 1.76014 8.2882 2.06473 8.79242C2.36932 9.29664 2.84218 9.6771 3.39991 9.86671L4.01658 16.0834C4.07876 16.7022 4.36936 17.2756 4.83164 17.6916C5.29391 18.1077 5.89466 18.3365 6.51658 18.3334H13.4999C14.1218 18.3365 14.7226 18.1077 15.1848 17.6916C15.6471 17.2756 15.9377 16.7022 15.9999 16.0834L16.6166 9.86671C17.1755 9.67654 17.6491 9.29468 17.9535 8.78878C18.2579 8.28287 18.3734 7.68557 18.2796 7.10266C18.1857 6.51976 17.8886 5.98886 17.4409 5.60402C16.9931 5.21918 16.4236 5.00522 15.8332 5.00004ZM14.3249 15.9167C14.3042 16.123 14.2073 16.3141 14.0532 16.4528C13.8991 16.5915 13.6989 16.6677 13.4916 16.6667H6.50824C6.30094 16.6677 6.10069 16.5915 5.9466 16.4528C5.7925 16.3141 5.69564 16.123 5.67491 15.9167L5.08324 10H14.9166L14.3249 15.9167ZM15.8332 8.33338H4.16658C3.94556 8.33338 3.7336 8.24558 3.57732 8.0893C3.42104 7.93302 3.33324 7.72106 3.33324 7.50004C3.33324 7.27903 3.42104 7.06707 3.57732 6.91079C3.7336 6.75451 3.94556 6.66671 4.16658 6.66671H15.8332C16.0543 6.66671 16.2662 6.75451 16.4225 6.91079C16.5788 7.06707 16.6666 7.27903 16.6666 7.50004C16.6666 7.72106 16.5788 7.93302 16.4225 8.0893C16.2662 8.24558 16.0543 8.33338 15.8332 8.33338Z" fill="#3D485B"></path>
              </svg><span class="ms-2">Orders</span>
              <div class="ms-2 d-flex align-items-center justify-content-center bg-primary rounded-pill text-white fs-10" style="width: 22px; height: 22px;">4</div></a></li>
          <li class="nav-item"><a class="nav-link px-4 d-flex align-items-center" aria-current="page" hre="" f="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.3417 10.2333C12.8692 9.66683 13.1664 8.92394 13.1751 8.14996C13.1751 7.31453 12.8432 6.51331 12.2525 5.92257C11.6617 5.33183 10.8605 4.99996 10.0251 4.99996C9.18965 4.99996 8.38843 5.33183 7.7977 5.92257C7.20696 6.51331 6.87508 7.31453 6.87508 8.14996C6.88378 8.92394 7.18093 9.66683 7.70841 10.2333C6.97396 10.599 6.34193 11.1416 5.86918 11.8122C5.39642 12.4827 5.09777 13.2603 5.00008 14.075C4.97577 14.296 5.04025 14.5176 5.17934 14.6911C5.31843 14.8645 5.52073 14.9756 5.74175 15C5.96276 15.0243 6.18438 14.9598 6.35785 14.8207C6.53132 14.6816 6.64244 14.4793 6.66675 14.2583C6.76619 13.4509 7.15745 12.7078 7.76682 12.1688C8.37619 11.6299 9.16159 11.3324 9.97508 11.3324C10.7886 11.3324 11.574 11.6299 12.1833 12.1688C12.7927 12.7078 13.184 13.4509 13.2834 14.2583C13.3066 14.472 13.4114 14.6684 13.576 14.8066C13.7406 14.9448 13.9523 15.0141 14.1667 15H14.2584C14.4769 14.9748 14.6765 14.8644 14.8139 14.6927C14.9512 14.521 15.0152 14.3019 14.9917 14.0833C14.9013 13.2729 14.6121 12.4975 14.1498 11.8258C13.6875 11.1542 13.0664 10.6071 12.3417 10.2333ZM10.0001 9.63329C9.70671 9.63329 9.41992 9.5463 9.17598 9.38331C8.93205 9.22031 8.74193 8.98865 8.62966 8.71761C8.51739 8.44656 8.48801 8.14831 8.54525 7.86058C8.60248 7.57284 8.74376 7.30853 8.95121 7.10108C9.15865 6.89364 9.42296 6.75236 9.7107 6.69513C9.99844 6.63789 10.2967 6.66727 10.5677 6.77954C10.8388 6.89181 11.0704 7.08193 11.2334 7.32586C11.3964 7.5698 11.4834 7.85658 11.4834 8.14996C11.4834 8.54336 11.3271 8.92066 11.049 9.19883C10.7708 9.47701 10.3935 9.63329 10.0001 9.63329ZM15.8334 1.66663H4.16675C3.50371 1.66663 2.86782 1.93002 2.39898 2.39886C1.93014 2.8677 1.66675 3.50358 1.66675 4.16663V15.8333C1.66675 16.4963 1.93014 17.1322 2.39898 17.6011C2.86782 18.0699 3.50371 18.3333 4.16675 18.3333H15.8334C16.4965 18.3333 17.1323 18.0699 17.6012 17.6011C18.07 17.1322 18.3334 16.4963 18.3334 15.8333V4.16663C18.3334 3.50358 18.07 2.8677 17.6012 2.39886C17.1323 1.93002 16.4965 1.66663 15.8334 1.66663ZM16.6667 15.8333C16.6667 16.0543 16.579 16.2663 16.4227 16.4225C16.2664 16.5788 16.0544 16.6666 15.8334 16.6666H4.16675C3.94573 16.6666 3.73377 16.5788 3.57749 16.4225C3.42121 16.2663 3.33341 16.0543 3.33341 15.8333V4.16663C3.33341 3.94561 3.42121 3.73365 3.57749 3.57737C3.73377 3.42109 3.94573 3.33329 4.16675 3.33329H15.8334C16.0544 3.33329 16.2664 3.42109 16.4227 3.57737C16.579 3.73365 16.6667 3.94561 16.6667 4.16663V15.8333Z" fill="#3D485B"></path>
              </svg><span class="ms-2">Customers</span></a></li>
        </ul>
      </div>
      <div class="d-none d-xl-flex align-items-center ms-auto"><a class="btn border-0 d-flex align-items-center p-0" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-4 fw-bold text-white">John Doe</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <button class="d-block d-xl-none navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark-light bg-opacity-25"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-8 pb-10 px-8 bg-dark-light overflow-auto">
      <div class="d-flex align-items-center justify-content-between mb-16"><a class="inline-flex items-center" href="#"><img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt=""></a><a class="navbar-close text-light" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
            <path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" fill="currentColor"></path>
          </svg></a></div>
      <ul class="list-unstyled mb-10">
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Overview</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Analytics</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Products</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light d-flex align-items-center" aria-current="page" href="#"><span>Orders</span>
            <div class="ms-2 d-flex align-items-center justify-content-center bg-primary rounded-pill text-white fs-10" style="width: 22px; height: 22px;">4</div></a></li>
        <li><a class="btn p-0 btn-link text-light" href="#">Customers</a></li>
      </ul><a class="btn mt-auto border-0 d-flex align-items-center p-0" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-4 fw-bold text-white">John Doe</span>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </nav>
  </div>
</section>

<section>
  <div class="pt-4 pb-6 bg-dark-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-4 mb-5 mb-md-0">
          <h6 class="fs-5 fw-bold mb-0">Subpage name</h6>
        </div>
        <div class="col-12 col-md-8">
          <div class="d-flex justify-content-end"><a class="btn btn-sm d-flex align-items-center px-6 me-4 btn-secondary rounded-4" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.4993 10C17.2783 10 17.0664 10.0878 16.9101 10.2441C16.7538 10.4004 16.666 10.6124 16.666 10.8334V15.8334C16.666 16.0544 16.5782 16.2663 16.4219 16.4226C16.2657 16.5789 16.0537 16.6667 15.8327 16.6667H4.16602C3.945 16.6667 3.73304 16.5789 3.57676 16.4226C3.42048 16.2663 3.33268 16.0544 3.33268 15.8334V4.1667C3.33268 3.94568 3.42048 3.73372 3.57676 3.57744C3.73304 3.42116 3.945 3.33336 4.16602 3.33336H9.16602C9.38703 3.33336 9.59899 3.24557 9.75527 3.08929C9.91155 2.93301 9.99935 2.72104 9.99935 2.50003C9.99935 2.27902 9.91155 2.06706 9.75527 1.91077C9.59899 1.75449 9.38703 1.6667 9.16602 1.6667H4.16602C3.50297 1.6667 2.86709 1.93009 2.39825 2.39893C1.92941 2.86777 1.66602 3.50366 1.66602 4.1667V15.8334C1.66602 16.4964 1.92941 17.1323 2.39825 17.6011C2.86709 18.07 3.50297 18.3334 4.16602 18.3334H15.8327C16.4957 18.3334 17.1316 18.07 17.6005 17.6011C18.0693 17.1323 18.3327 16.4964 18.3327 15.8334V10.8334C18.3327 10.6124 18.2449 10.4004 18.0886 10.2441C17.9323 10.0878 17.7204 10 17.4993 10ZM4.99935 10.6334V14.1667C4.99935 14.3877 5.08715 14.5997 5.24343 14.756C5.39971 14.9122 5.61167 15 5.83268 15H9.36602C9.47569 15.0007 9.58441 14.9796 9.68594 14.9382C9.78747 14.8967 9.87982 14.8356 9.95768 14.7584L15.7243 8.98336L18.091 6.6667C18.1691 6.58923 18.2311 6.49706 18.2734 6.39551C18.3157 6.29396 18.3375 6.18504 18.3375 6.07503C18.3375 5.96502 18.3157 5.8561 18.2734 5.75455C18.2311 5.653 18.1691 5.56083 18.091 5.48336L14.5577 1.90836C14.4802 1.83026 14.388 1.76826 14.2865 1.72595C14.1849 1.68365 14.076 1.66187 13.966 1.66187C13.856 1.66187 13.7471 1.68365 13.6455 1.72595C13.544 1.76826 13.4518 1.83026 13.3743 1.90836L11.0243 4.2667L5.24102 10.0417C5.16378 10.1196 5.10268 10.2119 5.06121 10.3134C5.01974 10.415 4.99871 10.5237 4.99935 10.6334ZM13.966 3.67503L16.3243 6.03336L15.141 7.2167L12.7827 4.85836L13.966 3.67503ZM6.66602 10.975L11.6077 6.03336L13.966 8.3917L9.02435 13.3334H6.66602V10.975Z" fill="#3D485B"></path>
              </svg><span class="ms-1">Edit</span></a><a class="btn btn-sm d-flex align-items-center px-6 btn-primary rounded-4" href="#">Publish</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="position-fixed top-0 start-0 end-0 bottom-0 d-flex align-items-center w-100 h-100 p-4 bg-secondary bg-opacity-75 overflow-auto">
    <div class="mw-xl w-100 mx-auto p-6 bg-secondary rounded-2 overflow-hidden">
      <div>
        <div class="d-flex mb-6 align-items-center justify-content-between">
          <h6 class="fs-6 fw-semibold text-light mb-0">Add members</h6>
          <button class="btn p-0 bg-transparent border-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z" fill="#3D485B"></path>
            </svg>
          </button>
        </div>
        <div class="position-relative mb-6">
          <button class="position-absolute top-50 start-0 ms-3 translate-middle-y btn bg-transparent btn-outline-secondary-light border-0 p-0">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.4733 13.5267L11.9999 11.0734C12.96 9.87633 13.4249 8.35692 13.2991 6.82759C13.1733 5.29826 12.4664 3.87525 11.3236 2.85115C10.1808 1.82706 8.68914 1.27973 7.15522 1.32171C5.62129 1.36368 4.16175 1.99177 3.0767 3.07682C1.99164 4.16187 1.36356 5.62142 1.32158 7.15534C1.27961 8.68926 1.82694 10.181 2.85103 11.3237C3.87512 12.4665 5.29814 13.1735 6.82747 13.2993C8.3568 13.4251 9.87621 12.9601 11.0733 12.0001L13.5266 14.4534C13.5886 14.5159 13.6623 14.5655 13.7436 14.5993C13.8248 14.6332 13.9119 14.6506 13.9999 14.6506C14.0879 14.6506 14.1751 14.6332 14.2563 14.5993C14.3376 14.5655 14.4113 14.5159 14.4733 14.4534C14.5934 14.3291 14.6606 14.163 14.6606 13.9901C14.6606 13.8172 14.5934 13.651 14.4733 13.5267ZM7.33327 12.0001C6.41029 12.0001 5.50804 11.7264 4.74061 11.2136C3.97318 10.7008 3.37504 9.97197 3.02183 9.11925C2.66862 8.26653 2.57621 7.32821 2.75627 6.42297C2.93634 5.51773 3.38079 4.6862 4.03344 4.03356C4.68608 3.38091 5.5176 2.93646 6.42285 2.75639C7.32809 2.57633 8.2664 2.66874 9.11913 3.02195C9.97185 3.37516 10.7007 3.9733 11.2135 4.74073C11.7262 5.50816 11.9999 6.41041 11.9999 7.33339C11.9999 8.57107 11.5083 9.75805 10.6331 10.6332C9.75793 11.5084 8.57095 12.0001 7.33327 12.0001Z" fill="currentColor"></path>
            </svg>
          </button>
          <input class="form-control text-light ps-10 fs-9 bg-transparent" type="search" placeholder="Search products...">
        </div>
        <div class="pb-6 mb-6 border-bottom border-secondary-dark">
          <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center"><img class="img-fluid" style="width: 56px; height: 56px;" src="trizzle-assets/images/avatar-men-2.png" alt="">
              <div class="ms-4"><span class="d-block fw-semibold text-light-light">John Doe</span>
                <div class="d-flex align-items-center">
                  <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="3" cy="3" r="3" fill="#54D62C"></circle>
                  </svg><span class="ms-1 fs-10 fw-semibold text-secondary-light">Online</span>
                </div>
              </div>
            </div><a class="btn py-3 px-4 px-sm-6 fs-9 btn-dark-light" href="#">Follow</a>
          </div>
        </div>
        <div class="pb-6 mb-6 border-bottom border-secondary-dark">
          <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center"><img class="img-fluid" style="width: 56px; height: 56px;" src="trizzle-assets/images/avatar-men-2.png" alt="">
              <div class="ms-4"><span class="d-block fw-semibold text-light-light">John Doe</span>
                <div class="d-flex align-items-center">
                  <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="3" cy="3" r="3" fill="#54D62C"></circle>
                  </svg><span class="ms-1 fs-10 fw-semibold text-secondary-light">Online</span>
                </div>
              </div>
            </div><a class="btn py-3 px-4 px-sm-6 fs-9 btn-dark-light" href="#">Follow</a>
          </div>
        </div>
        <div class="pb-6 mb-6 border-bottom border-secondary-dark">
          <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center"><img class="img-fluid" style="width: 56px; height: 56px;" src="trizzle-assets/images/avatar-men-2.png" alt="">
              <div class="ms-4"><span class="d-block fw-semibold text-light-light">John Doe</span>
                <div class="d-flex align-items-center">
                  <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="3" cy="3" r="3" fill="#54D62C"></circle>
                  </svg><span class="ms-1 fs-10 fw-semibold text-secondary-light">Online</span>
                </div>
              </div>
            </div><a class="btn py-3 px-4 px-sm-6 fs-9 btn-dark-light" href="#">Follow</a>
          </div>
        </div>
        <div>
          <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center"><img class="img-fluid" style="width: 56px; height: 56px;" src="trizzle-assets/images/avatar-men-2.png" alt="">
              <div class="ms-4"><span class="d-block fw-semibold text-light-light">John Doe</span>
                <div class="d-flex align-items-center">
                  <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="3" cy="3" r="3" fill="#54D62C"></circle>
                  </svg><span class="ms-1 fs-10 fw-semibold text-secondary-light">Online</span>
                </div>
              </div>
            </div><a class="btn py-3 px-4 px-sm-6 fs-9 btn-dark-light" href="#">Follow</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="pt-6 bg-secondary rounded-4">
      <div class="px-6 pb-6 border-bottom border-secondary-light border-opacity-25">
        <div class="d-flex mb-6 align-items-center justify-content-between">
          <div class="position-relative mw-xs">
            <input class="form-control text-light ps-10 fs-9 bg-transparent" type="search" placeholder="Search products...">
            <button class="position-absolute top-50 start-0 ms-4 translate-middle-y btn btn-outline-secondary-light p-0 border-0 bg-transparent">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.4733 13.5267L11.9999 11.0734C12.96 9.87633 13.4249 8.35692 13.2991 6.82759C13.1733 5.29826 12.4664 3.87525 11.3236 2.85115C10.1808 1.82706 8.68914 1.27973 7.15522 1.32171C5.62129 1.36368 4.16175 1.99177 3.0767 3.07682C1.99164 4.16187 1.36356 5.62142 1.32158 7.15534C1.27961 8.68926 1.82694 10.181 2.85103 11.3237C3.87512 12.4665 5.29814 13.1735 6.82747 13.2993C8.3568 13.4251 9.87621 12.9601 11.0733 12.0001L13.5266 14.4534C13.5886 14.5159 13.6623 14.5655 13.7436 14.5993C13.8248 14.6332 13.9119 14.6506 13.9999 14.6506C14.0879 14.6506 14.1751 14.6332 14.2563 14.5993C14.3376 14.5655 14.4113 14.5159 14.4733 14.4534C14.5934 14.3291 14.6606 14.163 14.6606 13.9901C14.6606 13.8172 14.5934 13.651 14.4733 13.5267ZM7.33327 12.0001C6.41029 12.0001 5.50804 11.7264 4.74061 11.2136C3.97318 10.7008 3.37504 9.97197 3.02183 9.11925C2.66862 8.26653 2.57621 7.32821 2.75627 6.42297C2.93634 5.51773 3.38079 4.6862 4.03344 4.03356C4.68608 3.38091 5.5176 2.93646 6.42285 2.75639C7.32809 2.57633 8.2664 2.66874 9.11913 3.02195C9.97185 3.37516 10.7007 3.9733 11.2135 4.74073C11.7262 5.50816 11.9999 6.41041 11.9999 7.33339C11.9999 8.57107 11.5083 9.75805 10.6331 10.6332C9.75793 11.5084 8.57095 12.0001 7.33327 12.0001Z" fill="currentColor"></path>
              </svg>
            </button><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-light bg-secondary">Search</span>
          </div>
          <button class="btn d-flex align-items-center btn-sm btn-dark-light text-light fs-10">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.6668 1.33337H3.3335C2.80306 1.33337 2.29436 1.54409 1.91928 1.91916C1.54421 2.29423 1.3335 2.80294 1.3335 3.33337V4.11337C1.3334 4.38867 1.39014 4.66102 1.50016 4.91337V4.95337C1.59435 5.16735 1.72776 5.36181 1.8935 5.52671L6.00016 9.60671V14C5.99994 14.1133 6.02859 14.2248 6.08341 14.324C6.13823 14.4231 6.21742 14.5067 6.3135 14.5667C6.41959 14.6325 6.54201 14.6671 6.66683 14.6667C6.77119 14.6661 6.87395 14.641 6.96683 14.5934L9.6335 13.26C9.74344 13.2046 9.83589 13.1199 9.90061 13.0152C9.96533 12.9104 9.99979 12.7898 10.0002 12.6667V9.60671L14.0802 5.52671C14.2459 5.36181 14.3793 5.16735 14.4735 4.95337V4.91337C14.5927 4.66299 14.6585 4.39056 14.6668 4.11337V3.33337C14.6668 2.80294 14.4561 2.29423 14.081 1.91916C13.706 1.54409 13.1973 1.33337 12.6668 1.33337ZM8.86016 8.86004C8.79837 8.92233 8.74949 8.99621 8.71632 9.07744C8.68314 9.15866 8.66632 9.24564 8.66683 9.33337V12.2534L7.3335 12.92V9.33337C7.334 9.24564 7.31719 9.15866 7.28401 9.07744C7.25083 8.99621 7.20195 8.92233 7.14016 8.86004L3.60683 5.33337H12.3935L8.86016 8.86004ZM13.3335 4.00004H2.66683V3.33337C2.66683 3.15656 2.73707 2.98699 2.86209 2.86197C2.98712 2.73695 3.15669 2.66671 3.3335 2.66671H12.6668C12.8436 2.66671 13.0132 2.73695 13.1382 2.86197C13.2633 2.98699 13.3335 3.15656 13.3335 3.33337V4.00004Z" fill="#3D485B"></path>
            </svg><span class="ms-1">Filters</span>
          </button>
        </div>
        <div class="w-100 overflow-scroll">
          <table class="table table-borderless w-100" style="min-width: max-content;">
            <thead>
              <tr><th class="p-0 bg-transparent" scope="col">
                <div class="rounded-start-4 py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">PRODUCT</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">CREATE AT</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">STATUS</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="rounded-end-4 py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">PRICE</span></div>
              </th>
            </tr></thead>
            <tbody>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;"><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/shoe-white-table.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">Kappa training shoes</span></div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 al" style="height: 64px;"><span class="fs-9 fw-medium text-light">25 July 2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-warning-dark bg-opacity-50 rounded-pill"><span class="fs-10 fw-medium text-warning">LOW STOCK</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">$35.50</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;"><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/shoe-white-table.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">Kappa training shoes</span></div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">25 July 2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-danger-dark bg-opacity-50 rounded-pill"><span class="fs-10 fw-medium text-danger">OUT OF STOCK</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">$35.50</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;"><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/shoe-white-table.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">Kappa training shoes</span></div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">25 July 2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-success-dark bg-opacity-50 rounded-pill"><span class="fs-10 fw-medium text-success">IN STOCK</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">$35.50</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;"><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/shoe-white-table.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">Kappa training shoes</span></div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">25 July 2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-warning-dark bg-opacity-50 rounded-pill"><span class="fs-10 fw-medium text-warning">LOW STOCK</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">$35.50</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;"><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/shoe-white-table.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">Kappa training shoes</span></div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">25 July 2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-danger-dark bg-opacity-50 rounded-pill"><span class="fs-10 fw-medium text-danger">OUT OF STOCK</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">$35.50</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;"><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/shoe-white-table.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">Kappa training shoes</span></div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">25 July 2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-warning-dark bg-opacity-50 rounded-pill"><span class="fs-10 fw-medium text-warning">LOW STOCK</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">$35.50</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;"><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/shoe-white-table.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">Kappa training shoes</span></div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">25 July 2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-success-dark bg-opacity-50 rounded-pill"><span class="fs-10 fw-medium text-success">IN STOCK</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">$35.50</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;"><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/shoe-white-table.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">Kappa training shoes</span></div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">25 July 2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-warning-dark bg-opacity-50 rounded-pill"><span class="fs-10 fw-medium text-warning">LOW STOCK</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">$35.50</span></div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="py-8 px-6">
        <div class="d-flex flex-column flex-sm-row gap-6 gap-sm-2 align-items-center">
          <div class="d-flex me-sm-auto align-items-center">
            <div class="d-inline-flex p-1 bg-dark-light rounded-pill">
              <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
              <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
            </div><span class="ms-2 fs-9 fw-medium text-secondary-light">Dense</span>
          </div>
          <div class="d-flex align-items-center">
            <div class="d-flex me-12 align-items-center"><span class="d-inline-block flex-shrink-0 fs-9 fw-medium text-secondary-light me-4">Rows per page</span>
              <select class="form-select flex-shrink-0 d-inline-block p-0 border-0 bg-transparent fs-9" name="" id="" style="max-width: 48px;">
                <option value="1">1</option>
                <option value="1">2</option>
                <option value="1">3</option>
              </select>
            </div><span class="fs-9 fw-medium text-secondary-light">1-10 of 50</span>
          </div>
          <div class="ms-sm-6"><a class="btn me-2 btn-sm fs-10 btn-dark-light text-secondary-light" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.52655 7.99988L9.88655 5.63988C10.0107 5.51498 10.0804 5.34601 10.0804 5.16988C10.0804 4.99376 10.0107 4.82479 9.88655 4.69988C9.82457 4.6374 9.75084 4.5878 9.6696 4.55396C9.58836 4.52011 9.50122 4.50269 9.41321 4.50269C9.32521 4.50269 9.23807 4.52011 9.15683 4.55396C9.07559 4.5878 9.00186 4.6374 8.93988 4.69988L6.11321 7.52655C6.05073 7.58853 6.00113 7.66226 5.96729 7.7435C5.93344 7.82474 5.91602 7.91188 5.91602 7.99988C5.91602 8.08789 5.93344 8.17503 5.96729 8.25627C6.00113 8.33751 6.05073 8.41124 6.11321 8.47322L8.93988 11.3332C9.00217 11.395 9.07605 11.4439 9.15728 11.4771C9.2385 11.5102 9.32548 11.5271 9.41321 11.5266C9.50095 11.5271 9.58793 11.5102 9.66915 11.4771C9.75038 11.4439 9.82425 11.395 9.88655 11.3332C10.0107 11.2083 10.0804 11.0393 10.0804 10.8632C10.0804 10.6871 10.0107 10.5181 9.88655 10.3932L7.52655 7.99988Z" fill="#919EB0"></path>
              </svg></a><a class="btn btn-sm fs-10 btn-primary" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.3602 7.52661L6.58682 3.75994C6.52484 3.69746 6.45111 3.64786 6.36987 3.61402C6.28863 3.58017 6.20149 3.56274 6.11348 3.56274C6.02548 3.56274 5.93834 3.58017 5.8571 3.61402C5.77586 3.64786 5.70213 3.69746 5.64015 3.75994C5.51598 3.88485 5.44629 4.05382 5.44629 4.22994C5.44629 4.40607 5.51598 4.57503 5.64015 4.69994L8.94015 8.03328L5.64015 11.3333C5.51598 11.4582 5.44629 11.6272 5.44629 11.8033C5.44629 11.9794 5.51598 12.1484 5.64015 12.2733C5.70189 12.3363 5.77552 12.3864 5.85677 12.4207C5.93802 12.455 6.02528 12.4729 6.11348 12.4733C6.20169 12.4729 6.28894 12.455 6.37019 12.4207C6.45144 12.3864 6.52507 12.3363 6.58682 12.2733L10.3602 8.50661C10.4278 8.44418 10.4818 8.36841 10.5188 8.28408C10.5557 8.19975 10.5748 8.10868 10.5748 8.01661C10.5748 7.92454 10.5557 7.83347 10.5188 7.74914C10.4818 7.66481 10.4278 7.58904 10.3602 7.52661Z" fill="#F4F6FF"></path>
              </svg></a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar d-lg-none navbar-dark-light bg-dark-light flex-wrap">
    <div class="container-fluid">
      <div class="d-flex w-100 align-items-center">
        <a class="navbar-brand" href="#">
          <img class="img-fluid" src="trizzle-assets/logos/logo-only-trizzle.svg" alt="alt" width="auto">
        </a>
        <button class="navbar-burger navbar-toggler bg-primary ms-auto" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </div>
  </nav>
  <div class="navbar-menu position-relative d-lg-block d-none" style="z-index: 9999">
    <div class="navbar-backdrop d-lg-none position-fixed top-0 end-0 bottom-0 start-0 bg-dark-light" style="opacity: .5"></div>
    <div class="position-fixed top-0 start-0 bottom-0 py-8 px-4 bg-dark-light overflow-auto" style="width: 80px">
      <div class="mb-6">
        <a class="mb-12 d-inline-block" href="#">
          <img class="img-fluid" src="trizzle-assets/logos/logo-only-trizzle.svg" alt="" style="width: 42px; height: 42px;">
        </a>
        <ul class="my-auto list-unstyled">
          <li class="mb-4"><a class="btn btn-outline-dark text-light border-0 d-flex align-items-center p-4 rounded-4" style="width: 48px; height: 48px;" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 11H1C0.734784 11 0.48043 11.1054 0.292893 11.2929C0.105357 11.4804 0 11.7348 0 12V19C0 19.2652 0.105357 19.5196 0.292893 19.7071C0.48043 19.8946 0.734784 20 1 20H8C8.26522 20 8.51957 19.8946 8.70711 19.7071C8.89464 19.5196 9 19.2652 9 19V12C9 11.7348 8.89464 11.4804 8.70711 11.2929C8.51957 11.1054 8.26522 11 8 11ZM7 18H2V13H7V18ZM19 0H12C11.7348 0 11.4804 0.105357 11.2929 0.292893C11.1054 0.48043 11 0.734784 11 1V8C11 8.26522 11.1054 8.51957 11.2929 8.70711C11.4804 8.89464 11.7348 9 12 9H19C19.2652 9 19.5196 8.89464 19.7071 8.70711C19.8946 8.51957 20 8.26522 20 8V1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0ZM18 7H13V2H18V7ZM19 11H12C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20H19C19.2652 20 19.5196 19.8946 19.7071 19.7071C19.8946 19.5196 20 19.2652 20 19V12C20 11.7348 19.8946 11.4804 19.7071 11.2929C19.5196 11.1054 19.2652 11 19 11ZM18 18H13V13H18V18ZM8 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V8C0 8.26522 0.105357 8.51957 0.292893 8.70711C0.48043 8.89464 0.734784 9 1 9H8C8.26522 9 8.51957 8.89464 8.70711 8.70711C8.89464 8.51957 9 8.26522 9 8V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0ZM7 7H2V2H7V7Z" fill="currentColor"></path>
              </svg></a></li>
          <li class="mb-4"><a class="btn btn-outline-dark text-light border-0 d-flex align-items-center p-4 rounded-4" style="width: 48px; height: 48px;" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 4C9.73478 4 9.48043 4.10536 9.29289 4.29289C9.10536 4.48043 9 4.73478 9 5V15C9 15.2652 9.10536 15.5196 9.29289 15.7071C9.48043 15.8946 9.73478 16 10 16C10.2652 16 10.5196 15.8946 10.7071 15.7071C10.8946 15.5196 11 15.2652 11 15V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4ZM5 10C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16C5.26522 16 5.51957 15.8946 5.70711 15.7071C5.89464 15.5196 6 15.2652 6 15V11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10ZM15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9V15C14 15.2652 14.1054 15.5196 14.2929 15.7071C14.4804 15.8946 14.7348 16 15 16C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15V9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
              </svg></a></li>
          <li class="mb-4"><a class="btn btn-outline-dark text-light border-0 d-flex align-items-center p-4 rounded-4" style="width: 48px; height: 48px;" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 4.5H14V3.5C14 2.70435 13.6839 1.94129 13.1213 1.37868C12.5587 0.816071 11.7956 0.5 11 0.5H9C8.20435 0.5 7.44129 0.816071 6.87868 1.37868C6.31607 1.94129 6 2.70435 6 3.5V4.5H3C2.20435 4.5 1.44129 4.81607 0.87868 5.37868C0.316071 5.94129 0 6.70435 0 7.5V16.5C0 17.2956 0.316071 18.0587 0.87868 18.6213C1.44129 19.1839 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.1839 19.1213 18.6213C19.6839 18.0587 20 17.2956 20 16.5V7.5C20 6.70435 19.6839 5.94129 19.1213 5.37868C18.5587 4.81607 17.7956 4.5 17 4.5ZM8 3.5C8 3.23478 8.10536 2.98043 8.29289 2.79289C8.48043 2.60536 8.73478 2.5 9 2.5H11C11.2652 2.5 11.5196 2.60536 11.7071 2.79289C11.8946 2.98043 12 3.23478 12 3.5V4.5H8V3.5ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3946 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3946 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V11C2.97544 11.3869 3.97818 11.7011 5 11.94V12.53C5 12.7952 5.10536 13.0496 5.29289 13.2371C5.48043 13.4246 5.73478 13.53 6 13.53C6.26522 13.53 6.51957 13.4246 6.70711 13.2371C6.89464 13.0496 7 12.7952 7 12.53V12.32C7.99435 12.4554 8.99649 12.5255 10 12.53C11.0035 12.5255 12.0057 12.4554 13 12.32V12.53C13 12.7952 13.1054 13.0496 13.2929 13.2371C13.4804 13.4246 13.7348 13.53 14 13.53C14.2652 13.53 14.5196 13.4246 14.7071 13.2371C14.8946 13.0496 15 12.7952 15 12.53V11.94C16.0218 11.7011 17.0246 11.3869 18 11V16.5ZM18 8.81C17.0274 9.22049 16.0244 9.55483 15 9.81V9.5C15 9.23478 14.8946 8.98043 14.7071 8.79289C14.5196 8.60536 14.2652 8.5 14 8.5C13.7348 8.5 13.4804 8.60536 13.2929 8.79289C13.1054 8.98043 13 9.23478 13 9.5V10.24C11.0113 10.54 8.98875 10.54 7 10.24V9.5C7 9.23478 6.89464 8.98043 6.70711 8.79289C6.51957 8.60536 6.26522 8.5 6 8.5C5.73478 8.5 5.48043 8.60536 5.29289 8.79289C5.10536 8.98043 5 9.23478 5 9.5V9.83C3.97562 9.57483 2.9726 9.24049 2 8.83V7.5C2 7.23478 2.10536 6.98043 2.29289 6.79289C2.48043 6.60536 2.73478 6.5 3 6.5H17C17.2652 6.5 17.5196 6.60536 17.7071 6.79289C17.8946 6.98043 18 7.23478 18 7.5V8.81Z" fill="currentColor"></path>
              </svg></a></li>
          <li class="mb-4"><a class="btn btn-outline-dark text-light border-0 d-flex align-items-center p-4 rounded-4" style="width: 48px; height: 48px;" href="#">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 17C12.2653 17 12.5196 16.8947 12.7071 16.7071C12.8947 16.5196 13 16.2652 13 16V14C13 13.7348 12.8947 13.4805 12.7071 13.2929C12.5196 13.1054 12.2653 13 12 13C11.7348 13 11.4805 13.1054 11.2929 13.2929C11.1054 13.4805 11 13.7348 11 14V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4805 16.8947 11.7348 17 12 17ZM8.00004 17C8.26525 17 8.51961 16.8947 8.70714 16.7071C8.89468 16.5196 9.00004 16.2652 9.00004 16V14C9.00004 13.7348 8.89468 13.4805 8.70714 13.2929C8.51961 13.1054 8.26525 13 8.00004 13C7.73482 13 7.48047 13.1054 7.29293 13.2929C7.10539 13.4805 7.00004 13.7348 7.00004 14V16C7.00004 16.2652 7.10539 16.5196 7.29293 16.7071C7.48047 16.8947 7.73482 17 8.00004 17ZM17 5.00003H15.62L13.89 1.55003C13.8372 1.42308 13.7587 1.3084 13.6595 1.21316C13.5603 1.11791 13.4426 1.04414 13.3136 0.996469C13.1846 0.948794 13.0472 0.928235 12.9099 0.936075C12.7726 0.943915 12.6384 0.979987 12.5157 1.04204C12.3929 1.10408 12.2843 1.19078 12.1966 1.2967C12.1089 1.40261 12.044 1.52548 12.006 1.65762C11.9679 1.78976 11.9575 1.92833 11.9754 2.06467C11.9933 2.20102 12.0391 2.3322 12.11 2.45003L13.38 5.00003H6.62004L7.89004 2.45003C7.9871 2.21693 7.9924 1.95575 7.90486 1.71891C7.81732 1.48208 7.64343 1.28712 7.4181 1.17319C7.19277 1.05926 6.93268 1.03479 6.69005 1.10469C6.44742 1.17458 6.24022 1.33368 6.11004 1.55003L4.38004 5.00003H3.00004C2.29323 5.01078 1.61291 5.27077 1.07909 5.73416C0.545259 6.19755 0.192211 6.83455 0.0822073 7.53283C-0.0277959 8.23112 0.112313 8.94581 0.477823 9.55088C0.843332 10.1559 1.41076 10.6125 2.08004 10.84L2.82004 18.3C2.89466 19.0426 3.24338 19.7307 3.79811 20.2299C4.35284 20.7292 5.07374 21.0038 5.82004 21H14.2C14.9463 21.0038 15.6672 20.7292 16.222 20.2299C16.7767 19.7307 17.1254 19.0426 17.2 18.3L17.94 10.84C18.6108 10.6118 19.1791 10.1536 19.5443 9.54651C19.9096 8.93942 20.0482 8.22266 19.9356 7.52317C19.823 6.82368 19.4665 6.18661 18.9292 5.7248C18.3919 5.26299 17.7085 5.00624 17 5.00003ZM15.19 18.1C15.1652 18.3475 15.0489 18.5769 14.864 18.7433C14.6791 18.9098 14.4388 19.0013 14.19 19H5.81004C5.56127 19.0013 5.32097 18.9098 5.13606 18.7433C4.95115 18.5769 4.83491 18.3475 4.81004 18.1L4.10004 11H15.9L15.19 18.1ZM17 9.00003H3.00004C2.73482 9.00003 2.48047 8.89467 2.29293 8.70713C2.10539 8.5196 2.00004 8.26524 2.00004 8.00003C2.00004 7.73481 2.10539 7.48046 2.29293 7.29292C2.48047 7.10538 2.73482 7.00003 3.00004 7.00003H17C17.2653 7.00003 17.5196 7.10538 17.7071 7.29292C17.8947 7.48046 18 7.73481 18 8.00003C18 8.26524 17.8947 8.5196 17.7071 8.70713C17.5196 8.89467 17.2653 9.00003 17 9.00003Z" fill="currentColor"></path>
              </svg></a></li>
          <li class="mb-4"><a class="btn btn-outline-dark text-light border-0 d-flex align-items-center p-4 rounded-4" style="width: 48px; height: 48px;" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.81 10.28C13.443 9.60024 13.7996 8.70877 13.81 7.78C13.81 6.77748 13.4118 5.81602 12.7029 5.10714C11.994 4.39825 11.0325 4 10.03 4C9.02748 4 8.06602 4.39825 7.35714 5.10714C6.64825 5.81602 6.25 6.77748 6.25 7.78C6.26044 8.70877 6.61702 9.60024 7.25 10.28C6.36865 10.7189 5.61022 11.3699 5.04292 12.1746C4.47561 12.9793 4.11723 13.9124 4 14.89C3.97083 15.1552 4.0482 15.4212 4.21511 15.6293C4.38202 15.8375 4.62478 15.9708 4.89 16C5.15522 16.0292 5.42116 15.9518 5.62932 15.7849C5.83749 15.618 5.97083 15.3752 6 15.11C6.11933 14.1411 6.58885 13.2494 7.32009 12.6027C8.05133 11.956 8.99382 11.599 9.97 11.599C10.9462 11.599 11.8887 11.956 12.6199 12.6027C13.3512 13.2494 13.8207 14.1411 13.94 15.11C13.9678 15.3664 14.0936 15.6022 14.2911 15.768C14.4887 15.9339 14.7426 16.017 15 16H15.11C15.3721 15.9698 15.6117 15.8373 15.7766 15.6313C15.9414 15.4252 16.0181 15.1624 15.99 14.9C15.8815 13.9276 15.5344 12.997 14.9796 12.191C14.4248 11.3851 13.6796 10.7286 12.81 10.28ZM10 9.56C9.64795 9.56 9.3038 9.4556 9.01108 9.26002C8.71836 9.06443 8.49022 8.78643 8.35549 8.46118C8.22077 8.13592 8.18552 7.77803 8.2542 7.43274C8.32288 7.08745 8.49241 6.77029 8.74135 6.52135C8.99029 6.27241 9.30745 6.10288 9.65274 6.0342C9.99803 5.96552 10.3559 6.00077 10.6812 6.13549C11.0064 6.27022 11.2844 6.49837 11.48 6.79109C11.6756 7.0838 11.78 7.42795 11.78 7.78C11.78 8.25208 11.5925 8.70484 11.2586 9.03865C10.9248 9.37247 10.4721 9.56 10 9.56ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
              </svg></a></li>
          <li class="mb-4"><a class="btn btn-outline-dark text-light border-0 d-flex align-items-center p-4 rounded-4" style="width: 48px; height: 48px;" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.8999 12.66C19.7396 12.4775 19.6512 12.2429 19.6512 12C19.6512 11.7571 19.7396 11.5225 19.8999 11.34L21.1799 9.9C21.3209 9.74267 21.4085 9.54471 21.4301 9.33451C21.4516 9.12431 21.4061 8.91269 21.2999 8.73L19.2999 5.27C19.1948 5.08752 19.0348 4.94288 18.8426 4.85669C18.6505 4.7705 18.4361 4.74716 18.2299 4.79L16.3499 5.17C16.1107 5.21943 15.8616 5.17959 15.6498 5.058C15.4379 4.93641 15.2779 4.74149 15.1999 4.51L14.5899 2.68C14.5228 2.48138 14.395 2.30887 14.2245 2.18684C14.0541 2.06482 13.8495 1.99946 13.6399 2H9.6399C9.42183 1.98862 9.20603 2.04893 9.02546 2.17172C8.84489 2.2945 8.70948 2.47302 8.6399 2.68L8.0799 4.51C8.0019 4.74149 7.84187 4.93641 7.63001 5.058C7.41815 5.17959 7.16911 5.21943 6.9299 5.17L4.9999 4.79C4.80445 4.76238 4.6052 4.79322 4.42724 4.87864C4.24929 4.96406 4.1006 5.10023 3.9999 5.27L1.9999 8.73C1.89106 8.91065 1.84212 9.12109 1.86008 9.33123C1.87804 9.54136 1.96198 9.74044 2.0999 9.9L3.3699 11.34C3.53022 11.5225 3.61863 11.7571 3.61863 12C3.61863 12.2429 3.53022 12.4775 3.3699 12.66L2.0999 14.1C1.96198 14.2596 1.87804 14.4586 1.86008 14.6688C1.84212 14.8789 1.89106 15.0894 1.9999 15.27L3.9999 18.73C4.10499 18.9125 4.26502 19.0571 4.45715 19.1433C4.64928 19.2295 4.86372 19.2528 5.0699 19.21L6.9499 18.83C7.18911 18.7806 7.43815 18.8204 7.65001 18.942C7.86187 19.0636 8.0219 19.2585 8.0999 19.49L8.7099 21.32C8.77948 21.527 8.91489 21.7055 9.09546 21.8283C9.27603 21.9511 9.49183 22.0114 9.7099 22H13.7099C13.9195 22.0005 14.1241 21.9352 14.2945 21.8132C14.465 21.6911 14.5928 21.5186 14.6599 21.32L15.2699 19.49C15.3479 19.2585 15.5079 19.0636 15.7198 18.942C15.9316 18.8204 16.1807 18.7806 16.4199 18.83L18.2999 19.21C18.5061 19.2528 18.7205 19.2295 18.9126 19.1433C19.1048 19.0571 19.2648 18.9125 19.3699 18.73L21.3699 15.27C21.4761 15.0873 21.5216 14.8757 21.5001 14.6655C21.4785 14.4553 21.3909 14.2573 21.2499 14.1L19.8999 12.66ZM18.4099 14L19.2099 14.9L17.9299 17.12L16.7499 16.88C16.0297 16.7328 15.2805 16.8551 14.6445 17.2238C14.0085 17.5925 13.53 18.1818 13.2999 18.88L12.9199 20H10.3599L9.9999 18.86C9.76975 18.1618 9.29128 17.5725 8.6553 17.2038C8.01932 16.8351 7.27012 16.7128 6.5499 16.86L5.3699 17.1L4.0699 14.89L4.8699 13.99C5.36185 13.44 5.63383 12.7279 5.63383 11.99C5.63383 11.2521 5.36185 10.54 4.8699 9.99L4.0699 9.09L5.3499 6.89L6.5299 7.13C7.25012 7.27722 7.99932 7.15488 8.6353 6.7862C9.27128 6.41752 9.74975 5.82816 9.9799 5.13L10.3599 4H12.9199L13.2999 5.14C13.53 5.83816 14.0085 6.42752 14.6445 6.7962C15.2805 7.16488 16.0297 7.28722 16.7499 7.14L17.9299 6.9L19.2099 9.12L18.4099 10.02C17.9235 10.5688 17.6549 11.2767 17.6549 12.01C17.6549 12.7433 17.9235 13.4512 18.4099 14ZM11.6399 8C10.8488 8 10.0754 8.2346 9.41761 8.67412C8.75982 9.11365 8.24713 9.73836 7.94438 10.4693C7.64163 11.2002 7.56241 12.0044 7.71675 12.7804C7.8711 13.5563 8.25206 14.269 8.81147 14.8284C9.37088 15.3878 10.0836 15.7688 10.8595 15.9231C11.6355 16.0775 12.4397 15.9983 13.1706 15.6955C13.9015 15.3928 14.5262 14.8801 14.9658 14.2223C15.4053 13.5645 15.6399 12.7911 15.6399 12C15.6399 10.9391 15.2185 9.92172 14.4683 9.17157C13.7182 8.42143 12.7008 8 11.6399 8ZM11.6399 14C11.2443 14 10.8577 13.8827 10.5288 13.6629C10.1999 13.4432 9.94351 13.1308 9.79214 12.7654C9.64076 12.3999 9.60116 11.9978 9.67833 11.6098C9.7555 11.2219 9.94598 10.8655 10.2257 10.5858C10.5054 10.3061 10.8618 10.1156 11.2497 10.0384C11.6377 9.96126 12.0398 10.0009 12.4053 10.1522C12.7707 10.3036 13.0831 10.56 13.3028 10.8889C13.5226 11.2178 13.6399 11.6044 13.6399 12C13.6399 12.5304 13.4292 13.0391 13.0541 13.4142C12.679 13.7893 12.1703 14 11.6399 14Z" fill="currentColor"></path>
              </svg></a></li>
          <li><a class="btn btn-outline-dark text-light border-0 d-flex align-items-center p-4 rounded-4" style="width: 48px; height: 48px;" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z" fill="currentColor"></path>
              </svg></a></li>
        </ul>
      </div>
      <div class="mt-auto"><a class="btn btn-outline-dark text-light border-0 d-flex align-items-center p-4 rounded-4" style="width: 48px; height: 48px;" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.71 12.71C16.6904 11.9387 17.406 10.8809 17.7572 9.68394C18.1085 8.48697 18.0779 7.21027 17.6698 6.03147C17.2617 4.85267 16.4963 3.83039 15.4801 3.10686C14.4639 2.38332 13.2474 1.99451 12 1.99451C10.7525 1.99451 9.53611 2.38332 8.51993 3.10686C7.50374 3.83039 6.73834 4.85267 6.33021 6.03147C5.92208 7.21027 5.89151 8.48697 6.24276 9.68394C6.59401 10.8809 7.3096 11.9387 8.29 12.71C6.61007 13.383 5.14428 14.4994 4.04889 15.9399C2.95349 17.3805 2.26956 19.0913 2.07 20.89C2.05555 21.0213 2.06711 21.1542 2.10402 21.2811C2.14093 21.4079 2.20246 21.5263 2.28511 21.6293C2.45202 21.8375 2.69478 21.9708 2.96 22C3.22521 22.0292 3.49116 21.9518 3.69932 21.7849C3.90749 21.618 4.04082 21.3752 4.07 21.11C4.28958 19.1552 5.22168 17.3498 6.68822 16.0388C8.15475 14.7278 10.0529 14.003 12.02 14.003C13.9871 14.003 15.8852 14.7278 17.3518 16.0388C18.8183 17.3498 19.7504 19.1552 19.97 21.11C19.9972 21.3557 20.1144 21.5827 20.2991 21.747C20.4838 21.9114 20.7228 22.0015 20.97 22H21.08C21.3421 21.9698 21.5817 21.8373 21.7466 21.6313C21.9114 21.4252 21.9881 21.1624 21.96 20.9C21.7595 19.0962 21.0719 17.381 19.9708 15.9382C18.8698 14.4954 17.3969 13.3795 15.71 12.71ZM12 12C11.2089 12 10.4355 11.7654 9.77772 11.3259C9.11992 10.8864 8.60723 10.2616 8.30448 9.53074C8.00173 8.79983 7.92251 7.99557 8.07686 7.21964C8.2312 6.44372 8.61216 5.73099 9.17157 5.17158C9.73098 4.61217 10.4437 4.2312 11.2196 4.07686C11.9956 3.92252 12.7998 4.00173 13.5307 4.30448C14.2616 4.60724 14.8863 5.11993 15.3259 5.77772C15.7654 6.43552 16 7.20888 16 8C16 9.06087 15.5786 10.0783 14.8284 10.8284C14.0783 11.5786 13.0609 12 12 12Z" fill="currentColor"></path>
          </svg></a><a class="btn btn-outline-dark text-light border-0 d-flex align-items-center p-4 rounded-4" style="width: 48px; height: 48px;" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.59 13L10.29 15.29C10.1963 15.3829 10.1219 15.4935 10.0711 15.6154C10.0203 15.7373 9.9942 15.868 9.9942 16C9.9942 16.132 10.0203 16.2627 10.0711 16.3846C10.1219 16.5064 10.1963 16.617 10.29 16.71C10.383 16.8037 10.4936 16.8781 10.6154 16.9289C10.7373 16.9796 10.868 17.0058 11 17.0058C11.132 17.0058 11.2627 16.9796 11.3846 16.9289C11.5064 16.8781 11.617 16.8037 11.71 16.71L15.71 12.71C15.801 12.6149 15.8724 12.5027 15.92 12.38C16.02 12.1365 16.02 11.8634 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L11.71 7.28998C11.6168 7.19674 11.5061 7.12278 11.3842 7.07232C11.2624 7.02186 11.1319 6.99589 11 6.99589C10.8681 6.99589 10.7376 7.02186 10.6158 7.07232C10.4939 7.12278 10.3832 7.19674 10.29 7.28998C10.1968 7.38322 10.1228 7.49391 10.0723 7.61573C10.0219 7.73755 9.99591 7.86812 9.99591 7.99998C9.99591 8.13184 10.0219 8.26241 10.0723 8.38423C10.1228 8.50605 10.1968 8.61674 10.29 8.70998L12.59 11H3C2.73478 11 2.48043 11.1053 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5195 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H12.59ZM12 1.99998C10.1311 1.99163 8.29724 2.50719 6.70647 3.48817C5.11569 4.46915 3.83165 5.87629 3 7.54998C2.88065 7.78867 2.86101 8.065 2.94541 8.31818C3.0298 8.57135 3.21131 8.78063 3.45 8.89998C3.68869 9.01932 3.96502 9.03896 4.2182 8.95457C4.47137 8.87018 4.68065 8.68867 4.8 8.44998C5.43219 7.1733 6.39383 6.0886 7.58555 5.30797C8.77727 4.52733 10.1558 4.0791 11.5788 4.00957C13.0017 3.94004 14.4174 4.25175 15.6795 4.91249C16.9417 5.57322 18.0045 6.55901 18.7581 7.76797C19.5118 8.97694 19.9289 10.3652 19.9664 11.7894C20.0039 13.2135 19.6605 14.6218 18.9715 15.8688C18.2826 17.1158 17.2731 18.1561 16.0475 18.8824C14.8219 19.6087 13.4246 19.9945 12 20C10.5089 20.0064 9.04615 19.5923 7.77969 18.8052C6.51323 18.0181 5.49435 16.8899 4.84 15.55C4.72065 15.3113 4.51137 15.1298 4.2582 15.0454C4.00502 14.961 3.72869 14.9806 3.49 15.1C3.25131 15.2193 3.0698 15.4286 2.98541 15.6818C2.90101 15.935 2.92065 16.2113 3.04 16.45C3.83283 18.0455 5.03752 19.4002 6.52947 20.374C8.02142 21.3478 9.74645 21.9054 11.5261 21.989C13.3058 22.0726 15.0755 21.6792 16.6521 20.8495C18.2288 20.0198 19.5552 18.784 20.4941 17.2698C21.433 15.7556 21.9503 14.0181 21.9925 12.237C22.0347 10.4558 21.6003 8.69577 20.7342 7.13881C19.8682 5.58185 18.6018 4.28454 17.0663 3.38108C15.5307 2.47762 13.7816 2.00081 12 1.99998Z" fill="currentColor"></path>
          </svg></a>
      </div>
    </div>
  </div>
  <div class="mx-auto ms-lg-20"></div>
</section>

<section class="position-relative bg-dark-light overflow-hidden">
  <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 col-6"><img class="position-absolute top-0 end-0 img-fluid d-block w-100 h-100" src="trizzle-assets/images/background-blue-gradient.png" alt="">
    <div class="position-relative ps-xl-24 px-12 pt-24 h-100">
      <div class="mw-xl h-100 position-relative"><img class="position-absolute top-0 start-0 img-fluid" src="trizzle-assets/logos/trizzle-white-logo.svg" alt="">
        <div class="d-flex align-items-center h-100">
          <div>
            <p class="fs-4 fw-semibold text-white mb-8">Trizzle is easy to use and has a lot of great features that make it a valuable tool for any developer.</p>
            <div class="d-flex mb-14 align-items-center"><img class="img-fluid" style="width: 48px; height: 48px;" src="trizzle-assets/images/avatar-men-2.png" alt="">
              <div class="ms-3"><span class="d-block text-white fs-8 fw-semibold lh-sm">John Doe</span><span class="text-white fs-10 fw-semibold lh-sm">Front-End Developer</span></div>
            </div>
            <div>
              <button class="btn me-2 btn-light bg-white p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 col-xl-5 pt-12 pt-md-24 pb-24 py-lg-40">
        <div class="mw-sm mw-xl-md mx-auto text-center">
          <div class="d-inline-flex mb-10 align-items-center justify-content-center bg-primary rounded-3" style="width: 64px; height: 64px;">
            <svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_477_4243)">
                <path d="M9.51378 21.5224L5.26933 21.5224L1.80985 15.5951L5.02136 9.85416L2.09284 9.85416L0 5.84631L14.0948 5.84631L16.2995 9.62501L9.61522 9.62501L6.15051 15.6598L9.51378 21.5224Z" fill="#E8EDFF"></path>
                <path d="M8.69727 15.563L10.9076 11.7249L14.2552 17.8138L20.9661 17.8138L24.5218 11.919L26.6041 15.401L23.0802 21.7329L16.4012 21.7329L17.7787 23.8058L15.6967 28.0001L8.69727 15.563Z" fill="#E8EDFF"></path>
                <path d="M15.4236 15.4982L19.7002 15.4982L26.833 3.20644L22.3591 3.08759L20.9707 5.61392L17.7249 -1.57947e-06L10.5387 -3.2299e-07L8.69141 3.63828L15.4184 3.63828L18.8138 9.54403L15.4236 15.4982Z" fill="#E8EDFF"></path>
              </g>
            </svg>
          </div>
          <div class="text-center mb-10">
            <h6 class="fs-5 fw-semibold text-light mb-2">Log in to your account</h6>
            <p class="fw-medium text-secondary-light mb-0">Welcome back! Please enter your details.</p>
          </div>
          <form action="">
            <div class="position-relative mb-10">
              <input class="form-control text-light fs-9 bg-transparent" type="email"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-secondary-light bg-dark-light">Email</span>
            </div>
            <div class="position-relative mb-6">
              <input class="form-control text-light fs-9 bg-transparent" type="password"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-secondary-light bg-dark-light">Password</span>
            </div>
            <div class="d-flex mb-6 flex-wrap gap-4 align-items-center justify-content-between">
              <div class="form-check">
                <input class="form-check-input bg-transparent border-light-dark" type="checkbox" value="" id="">
                <label class="form-check-label fs-10 lh-lg fw-semibold text-secondary-light" for="">Remember for 30 days</label>
              </div><a class="btn btn-link p-0 fs-10 fw-semibold" href="#">Forgot password?</a>
            </div><a class="btn mb-4 btn-primary lh-sm w-100" href="#">Sign In</a><a class="btn mb-6 btn-secondary lh-sm w-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 2H2V14H14V2Z" fill="#ECEFF1"></path>
                <path d="M8 9.262L14 14V4.646L8 9.262Z" fill="#CFD8DC"></path>
                <path d="M14.5 2H14L8 6.738L2 2H1.5C0.672 2 0 2.672 0 3.5V12.5C0 13.328 0.672 14 1.5 14H2V4.646L8 9.261L14 4.645V14H14.5C15.328 14 16 13.328 16 12.5V3.5C16 2.672 15.328 2 14.5 2Z" fill="#F44336"></path>
              </svg><span class="ms-3">Sign In with Gmail</span></a>
            <p class="text-center fw-medium mb-0 text-secondary-light"><span>Don’t have an account?</span><a class="btn btn-link fw-medium p-0" href="#">Sign up</a></p>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="d-lg-none position-relative"><img class="position-absolute top-0 end-0 img-fluid d-block w-100 h-100" src="trizzle-assets/images/background-blue-gradient.png" alt="">
    <div class="position-relative px-12 py-24">
      <div class="mw-xl mx-auto pt-24 position-relative"><img class="position-absolute top-0 start-0 img-fluid" src="trizzle-assets/logos/trizzle-white-logo.svg" alt="">
        <div class="d-flex align-items-center h-100">
          <div>
            <p class="fs-4 fw-semibold text-white mb-8">Trizzle is easy to use and has a lot of great features that make it a valuable tool for any developer.</p>
            <div class="d-flex mb-14 align-items-center"><img class="img-fluid" style="width: 48px; height: 48px;" src="trizzle-assets/images/avatar-men-2.png" alt="">
              <div class="ms-3"><span class="d-block text-white fs-8 fw-semibold lh-sm">John Doe</span><span class="text-white fs-10 fw-semibold lh-sm">Front-End Developer</span></div>
            </div>
            <div>
              <button class="btn me-2 btn-light bg-white p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>