Features Components in Vista library

<section class="bg-darkPink-900 py-28">
    <div class="container mx-auto px-4">
        <p class="uppercase text-center text-sweetPink-400 text-xs tracking-widest mb-4">FEATURES</p>
        <h1 class="font-heading text-white text-center text-4xl md:text-5xl font-bold mb-4">Designed for the modern business owners</h1>
        <p class="text-white text-opacity-70 text-lg text-center max-w-2xl mx-auto mb-20">Our software provides intuitive bookkeeping solutions, allowing you to focus on growing your business rather than crunching numbers.</p>
        <div class="flex flex-wrap -m-4">
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <div class="bg-pinkSecondary-900 rounded-3xl p-6 h-full">
                    <div class="rounded-full border border-pink-500 w-10 h-10 flex items-center justify-center mb-4">
                        <div class="bg-pinkSecondary-900 w-8 h-8 rounded-full border border-white border-opacity-10 flex items-center justify-center">
                            <img class="h-4" src="vista-assets/images/features/money.svg" alt="">
                        </div>
                    </div>
                    <p class="text-white text-lg font-bold mb-1">Simple Accounting</p>
                    <p class="text-white text-opacity-70 text-sm max-w-xs">Keep track of your financial transactions with ease and simplicity.</p>
                </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <div class="bg-pinkSecondary-900 rounded-3xl p-6 h-full">
                    <div class="rounded-full border border-pink-500 w-10 h-10 flex items-center justify-center mb-4">
                        <div class="bg-pinkSecondary-900 w-8 h-8 rounded-full border border-white border-opacity-10 flex items-center justify-center">
                            <img class="h-4" src="vista-assets/images/features/profile.svg" alt="">
                        </div>
                    </div>
                    <p class="text-white text-lg font-bold mb-1">Multiple Accounts</p>
                    <p class="text-white text-opacity-70 text-sm max-w-xs">Gain a comprehensive financial overview of all your accounts.</p>
                </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <div class="bg-pinkSecondary-900 rounded-3xl p-6 h-full">
                    <div class="rounded-full border border-pink-500 w-10 h-10 flex items-center justify-center mb-4">
                        <div class="bg-pinkSecondary-900 w-8 h-8 rounded-full border border-white border-opacity-10 flex items-center justify-center">
                            <img class="h-4" src="vista-assets/images/features/chart.svg" alt="">
                        </div>
                    </div>
                    <p class="text-white text-lg font-bold mb-1">Detailed Analytics</p>
                    <p class="text-white text-opacity-70 text-sm max-w-xs">Gain in-depth insights into your financial well-being with a diverse range of data.</p>
                </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <div class="bg-pinkSecondary-900 rounded-3xl p-6 h-full">
                    <div class="rounded-full border border-pink-500 w-10 h-10 flex items-center justify-center mb-4">
                        <div class="bg-pinkSecondary-900 w-8 h-8 rounded-full border border-white border-opacity-10 flex items-center justify-center">
                            <img class="h-4" src="vista-assets/images/features/cloud.svg" alt="">
                        </div>
                    </div>
                    <p class="text-white text-lg font-bold mb-1">Cloud-Based</p>
                    <p class="text-white text-opacity-70 text-sm max-w-xs">Our platform is cloud-based, you can access your financial data from anywhere, at any time.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-5xl mx-auto text-center mb-20"><span class="badge mb-4 text-danger-light" style="letter-spacing: 1.44px;">FEATURES</span>
      <h3 class="font-heading mb-4">Designed for the modern business owners</h3>
      <p class="mw-2xl mx-auto fs-7 text-white text-opacity-75 mb-0">Our software provides intuitive bookkeeping solutions, allowing you to focus on growing your business rather than crunching numbers.</p>
    </div>
    <div class="mw-xs mw-sm-none mx-auto">
      <div class="row mb-n8">
        <div class="col-sm-6 col-lg-3 mb-8">
          <div class="h-100 ps-6 pe-12 py-6 bg-danger bg-opacity-10 rounded-2">
            <div class="d-flex mb-4 align-items-center justify-content-center border border-danger rounded-pill" style="width: 40px; height: 40px;">
              <div class="d-flex align-items-center justify-content-center bg-dark bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 32px; height: 32px;">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.3334 2.66675H4.66671C2.66671 2.66675 1.33337 3.66675 1.33337 6.00008V8.37341C1.33337 8.62008 1.58671 8.77341 1.80671 8.67341C2.46004 8.37341 3.21337 8.26008 4.00671 8.40008C5.76004 8.71341 7.04671 10.3401 7.00004 12.1201C6.99337 12.4001 6.95337 12.6734 6.88004 12.9401C6.82671 13.1467 6.99337 13.3401 7.20671 13.3401H11.3334C13.3334 13.3401 14.6667 12.3401 14.6667 10.0067V6.00008C14.6667 3.66675 13.3334 2.66675 11.3334 2.66675ZM8.00004 9.66675C7.08004 9.66675 6.33337 8.92008 6.33337 8.00008C6.33337 7.08008 7.08004 6.33341 8.00004 6.33341C8.92004 6.33341 9.66671 7.08008 9.66671 8.00008C9.66671 8.92008 8.92004 9.66675 8.00004 9.66675ZM12.8334 9.33341C12.8334 9.60675 12.6067 9.83341 12.3334 9.83341C12.06 9.83341 11.8334 9.60675 11.8334 9.33341V6.66675C11.8334 6.39341 12.06 6.16675 12.3334 6.16675C12.6067 6.16675 12.8334 6.39341 12.8334 6.66675V9.33341Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M3.33329 9.33325C1.85996 9.33325 0.666626 10.5266 0.666626 11.9999C0.666626 12.4999 0.806626 12.9733 1.05329 13.3733C1.51329 14.1466 2.35996 14.6666 3.33329 14.6666C4.30663 14.6666 5.15329 14.1466 5.61329 13.3733C5.85996 12.9733 5.99996 12.4999 5.99996 11.9999C5.99996 10.5266 4.80663 9.33325 3.33329 9.33325ZM4.64663 11.7799L3.22663 13.0933C3.13329 13.1799 3.00663 13.2266 2.88663 13.2266C2.75996 13.2266 2.63329 13.1799 2.53329 13.0799L1.87329 12.4199C1.67996 12.2266 1.67996 11.9066 1.87329 11.7133C2.06663 11.5199 2.38663 11.5199 2.57996 11.7133L2.89996 12.0333L3.96663 11.0466C4.16663 10.8599 4.48663 10.8733 4.67329 11.0733C4.85996 11.2733 4.84663 11.5933 4.64663 11.7799Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div><span class="d-block mb-1 fs-7 fw-bold">Simple Accounting</span>
            <p class="fs-9 text-white text-opacity-50">Keep track of your financial transactions with ease and simplicity.</p>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-8">
          <div class="h-100 ps-6 pe-12 py-6 bg-danger bg-opacity-10 rounded-2">
            <div class="d-flex mb-4 align-items-center justify-content-center border border-danger rounded-pill" style="width: 40px; height: 40px;">
              <div class="d-flex align-items-center justify-content-center bg-danger-light bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 32px; height: 32px;">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.3334 2.66675H4.66671C2.66671 2.66675 1.33337 3.66675 1.33337 6.00008V8.37341C1.33337 8.62008 1.58671 8.77341 1.80671 8.67341C2.46004 8.37341 3.21337 8.26008 4.00671 8.40008C5.76004 8.71341 7.04671 10.3401 7.00004 12.1201C6.99337 12.4001 6.95337 12.6734 6.88004 12.9401C6.82671 13.1467 6.99337 13.3401 7.20671 13.3401H11.3334C13.3334 13.3401 14.6667 12.3401 14.6667 10.0067V6.00008C14.6667 3.66675 13.3334 2.66675 11.3334 2.66675ZM8.00004 9.66675C7.08004 9.66675 6.33337 8.92008 6.33337 8.00008C6.33337 7.08008 7.08004 6.33341 8.00004 6.33341C8.92004 6.33341 9.66671 7.08008 9.66671 8.00008C9.66671 8.92008 8.92004 9.66675 8.00004 9.66675ZM12.8334 9.33341C12.8334 9.60675 12.6067 9.83341 12.3334 9.83341C12.06 9.83341 11.8334 9.60675 11.8334 9.33341V6.66675C11.8334 6.39341 12.06 6.16675 12.3334 6.16675C12.6067 6.16675 12.8334 6.39341 12.8334 6.66675V9.33341Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M3.33329 9.33325C1.85996 9.33325 0.666626 10.5266 0.666626 11.9999C0.666626 12.4999 0.806626 12.9733 1.05329 13.3733C1.51329 14.1466 2.35996 14.6666 3.33329 14.6666C4.30663 14.6666 5.15329 14.1466 5.61329 13.3733C5.85996 12.9733 5.99996 12.4999 5.99996 11.9999C5.99996 10.5266 4.80663 9.33325 3.33329 9.33325ZM4.64663 11.7799L3.22663 13.0933C3.13329 13.1799 3.00663 13.2266 2.88663 13.2266C2.75996 13.2266 2.63329 13.1799 2.53329 13.0799L1.87329 12.4199C1.67996 12.2266 1.67996 11.9066 1.87329 11.7133C2.06663 11.5199 2.38663 11.5199 2.57996 11.7133L2.89996 12.0333L3.96663 11.0466C4.16663 10.8599 4.48663 10.8733 4.67329 11.0733C4.85996 11.2733 4.84663 11.5933 4.64663 11.7799Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div><span class="d-block mb-1 fs-7 fw-bold">Multiple Accounts</span>
            <p class="fs-9 text-white text-opacity-50">Gain a comprehensive financial overview of all your accounts.</p>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-8">
          <div class="h-100 ps-6 pe-12 py-6 bg-danger bg-opacity-10 rounded-2">
            <div class="d-flex mb-4 align-items-center justify-content-center border border-danger rounded-pill" style="width: 40px; height: 40px;">
              <div class="d-flex align-items-center justify-content-center bg-danger-light bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 32px; height: 32px;">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 15.1667H2C1.72667 15.1667 1.5 14.9401 1.5 14.6667C1.5 14.3934 1.72667 14.1667 2 14.1667H14C14.2733 14.1667 14.5 14.3934 14.5 14.6667C14.5 14.9401 14.2733 15.1667 14 15.1667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M3.73333 5.58667H2.66667C2.3 5.58667 2 5.88667 2 6.25334V12C2 12.3667 2.3 12.6667 2.66667 12.6667H3.73333C4.1 12.6667 4.4 12.3667 4.4 12V6.25334C4.4 5.88 4.1 5.58667 3.73333 5.58667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M8.53332 3.45996H7.46665C7.09999 3.45996 6.79999 3.75996 6.79999 4.12663V12C6.79999 12.3666 7.09999 12.6666 7.46665 12.6666H8.53332C8.89999 12.6666 9.19999 12.3666 9.19999 12V4.12663C9.19999 3.75996 8.89999 3.45996 8.53332 3.45996Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M13.3333 1.33325H12.2666C11.9 1.33325 11.6 1.63325 11.6 1.99992V11.9999C11.6 12.3666 11.9 12.6666 12.2666 12.6666H13.3333C13.7 12.6666 14 12.3666 14 11.9999V1.99992C14 1.63325 13.7 1.33325 13.3333 1.33325Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div><span class="d-block mb-1 fs-7 fw-bold">Detailed Analytics</span>
            <p class="fs-9 text-white text-opacity-50">Gain in-depth insights into your financial well-being with a diverse range of data.</p>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-8">
          <div class="h-100 ps-6 pe-12 py-6 bg-danger bg-opacity-10 rounded-2">
            <div class="d-flex mb-4 align-items-center justify-content-center border border-danger rounded-pill" style="width: 40px; height: 40px;">
              <div class="d-flex align-items-center justify-content-center bg-danger-light bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 32px; height: 32px;">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.40666 7.9C3.52666 8.03334 3.53333 10.7667 5.40666 10.9H9.85333C10.3933 10.9067 10.9133 10.7 11.3133 10.34C12.6333 9.18667 11.9267 6.87334 10.1933 6.65334C9.57333 2.89334 4.14 4.32 5.42666 7.9" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M6 15.1667C3.15333 15.1667 0.833328 12.8467 0.833328 10C0.833328 9.72667 1.05999 9.5 1.33333 9.5C1.60666 9.5 1.83333 9.72667 1.83333 10C1.83333 11.9733 3.20666 13.6267 5.05333 14.06L4.87333 13.76C4.73333 13.52 4.80666 13.2133 5.04666 13.0733C5.27999 12.9333 5.59333 13.0067 5.73333 13.2467L6.43333 14.4133C6.52666 14.5667 6.52666 14.76 6.43999 14.9133C6.34666 15.0667 6.18 15.1667 6 15.1667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M14.6667 6.49992C14.3933 6.49992 14.1667 6.27325 14.1667 5.99992C14.1667 4.02659 12.7933 2.37325 10.9467 1.93992L11.1267 2.23992C11.2667 2.47992 11.1933 2.78659 10.9533 2.92658C10.72 3.06659 10.4067 2.99325 10.2667 2.75325L9.56666 1.58659C9.47333 1.43325 9.47333 1.23992 9.55999 1.08659C9.65333 0.933252 9.81999 0.833252 9.99999 0.833252C12.8467 0.833252 15.1667 3.15325 15.1667 5.99992C15.1667 6.27325 14.94 6.49992 14.6667 6.49992Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div><span class="d-block mb-1 fs-7 fw-bold">Cloud-Based</span>
            <p class="fs-9 text-white text-opacity-50">Our platform is cloud-based, you can access your financial data from anywhere, at any time.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>