UI Components – Vista Library

<section class="position-relative pb-12 pb-lg-24 bg-primary-dark">
  <div class="container">
    <div class="py-7 mb-16 mb-sm-24 border-bottom border-white border-opacity-10">
      <div class="row">
        <div class="col-sm-6 mb-8 mb-sm-0">
          <div class="d-flex align-items-center"><img class="img-fluid" style="height: 24px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""><span class="mx-8">
              <svg width="1" height="24" viewBox="0 0 1 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line x1="0.5" y1="24" x2="0.5" stroke="white" style="stroke:white;stroke-opacity:1;"></line>
              </svg></span><span class="fw-semibold">Careers</span></div>
        </div>
        <div class="col-sm-6 text-sm-end"><a class="btn p-0 fs-9 border-0" href="#"><span class="me-2">View openings</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.5 3L10.5 8L5.5 13" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
      </div>
    </div>
    <div class="mw-5xl mx-auto">
      <div class="d-flex mb-24 align-items-center justify-content-center py-12 py-md-24 px-8 bg-gradient-primary-top rounded-2">
        <div class="mw-3xl mx-auto text-center mb-12">
          <h2 class="font-heading mb-4">Careers at Vista</h2>
          <p class="text-white text-opacity-50 mb-10">Using the power of generative AI, we help anyone tap into the collective genius across their universe of ideas and people. Because AI's true potential isn't just improving how we interact with machines.</p><a class="btn d-inline-flex align-items-center text-primary-dark btn-light border-2 border-secondary border-opacity-25" href="#">View Openings </a>
        </div>
      </div>
      <div class="mw-2xl mx-auto text-center mb-16">

<section class="position-relative py-24 bg-primary-dark">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="border-bottom border-white border-opacity-10 mb-24">
        <div class="row">
          <div class="col-lg-8 mb-8 mb-lg-0">
            <div class="d-flex flex-wrap gap-6 gap-lg-10"><a class="position-relative btn text-primary px-0 pt-0 pb-4 border-0" href="#"><span>Trending</span>
                <div class="position-absolute bottom-0 start-0 w-100 border-bottom border-2 border-primary"></div></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Accounting</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Entrepreneurship</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Payments</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Company</span></a></div>
          </div>
          <div class="col-lg-4">
            <div class="position-relative d-flex ms-auto align-items-center" style="max-width: 100px;">
              <button class="position-absolute top-50 start-0 ms-1 translate-middle-y btn p-0 border-0">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.58335 17.5C13.9556 17.5 17.5 13.9556 17.5 9.58335C17.5 5.2111 13.9556 1.66669 9.58335 1.66669C5.2111 1.66669 1.66669 5.2111 1.66669 9.58335C1.66669 13.9556 5.2111 17.5 9.58335 17.5Z" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M18.3334 18.3334L16.6667 16.6667" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
              <input class="form-control ps-10 py-2 pe-0 bg-transparent border-0" type="search" placeholder="Search">
            </div>
          </div>
        </div>
      </div>
      <div class="py-24 py-lg-48 px-8 px-md-12 px-lg-20 mb-12 bg-gradient-primary-top rounded-2">
        <div class="mw-3xl mx-auto text-center">

<section class="position-relative py-12 py-lg-24 bg-primary-dark overflow-hidden">
  <div class="container">
    <div class="text-center mb-20">
      <h3 class="font-heading text-gradient mb-4">Flexible pricing plan</h3>
      <p class="text-white text-opacity-50 mb-10">Pricing that scales with your business immediately.</p>
      <div class="d-inline-flex p-1 mb-4 rounded-pill bg-white bg-opacity-10 border-white border-opacity-25">
        <button class="btn py-1 px-3 fs-10 rounded-pill">Monthly</button>
        <button class="btn py-1 px-3 fs-10 bg-white bg-opacity-10 border-white border-opacity-10 rounded-pill"><span>Yearly</span><span class="ms-1 bg-primary text-gradient">10% OFF</span></button>
      </div>
    </div>
    <div class="mw-sm mw-lg-5xl mx-auto">
      <div class="row">
        <div class="col-lg-4 mb-8 mb-lg-0">
          <div class="p-8">
            <h6 class="fs-5 mb-6">Basic</h6>
            <div class="d-flex mb-8 align-items-end"><span class="fs-2 fw-semibold lh-1">$9</span><span class="ms-1 text-white text-opacity-50">/per month</span></div><a class="btn mb-8 d-flex py-2 w-100 align-items-center justify-content-center btn-primary-dark border border-white border-opacity-10" href="#" style="height: 40px;">Get started</a>
            <div class="pt-8 border-white border-opacity-10" style="border-top: 1px dashed;">
              <ul class="list-unstyled mb-0">
                <li class="d-flex mb-4 align-items-center">
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g opacity="0.3">
                      <path d="M17.9667 8.94997L16.8334 7.6333C16.6167 7.3833 16.4417 6.91663 16.4417 6.5833V5.16663C16.4417 4.2833 15.7167 3.5583 14.8334 3.5583H13.4167C13.0917 3.5583 12.6167 3.3833 12.3667 3.16663L11.0501 2.0333C10.4751 1.54163 9.5334 1.54163 8.95007 2.0333L7.64173 3.17497C7.39173 3.3833 6.91673 3.5583 6.59173 3.5583H5.15006C4.26673 3.5583 3.54173 4.2833 3.54173 5.16663V6.59163C3.54173 6.91663 3.36673 7.3833 3.1584 7.6333L2.0334 8.9583C1.55007 9.5333 1.55007 10.4666 2.0334 11.0416L3.1584 12.3666C3.36673 12.6166 3.54173 13.0833 3.54173 13.4083V14.8333C3.54173 15.7166 4.26673 16.4416 5.15006 16.4416H6.59173C6.91673 16.4416 7.39173 16.6166 7.64173 16.8333L8.9584 17.9666C9.5334 18.4583 10.4751 18.4583 11.0584 17.9666L12.3751 16.8333C12.6251 16.6166 13.0917 16.4416 13.4251 16.4416H14.8417C15.7251 16.4416 16.4501 15.7166 16.4501 14.8333V13.4166C16.4501 13.0916 16.6251 12.6166 16.8417 12.3666L17.9751 11.05C18.4584 10.475 18.4584 9.52497 17.9667 8.94997ZM13.4667 8.42497L9.44173 12.45C9.32507 12.5666 9.16673 12.6333 9.00007 12.6333C8.8334 12.6333 8.67507 12.5666 8.5584 12.45L6.54173 10.4333C6.30007 10.1916 6.30007 9.79163 6.54173 9.54997C6.7834 9.3083 7.1834 9.3083 7.42507 9.54997L9.00007 11.125L12.5834 7.54163C12.8251 7.29997 13.2251 7.29997 13.4667 7.54163C13.7084 7.7833 13.7084 8.1833 13.4667 8.42497Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                    </g>
                  </svg><span class="ms-3 fs-9 text-white text-opacity-75">Customized invoices</span>

<section class="position-relative py-12 py-lg-24 pb-xl-32 bg-primary-dark">
  <div class="container">
    <div class="position-relative mw-md mw-md-2xl mw-lg-4xl mx-auto mw-xl-none" style="padding: 1.5px;">
      <div class="position-absolute top-0 start-0 w-100 h-100 d-inline-flex align-items-center justify-content-center rounded-2 bg-gradient-primary-bottom opacity-75"></div>
      <div class="position-relative py-14 py-xl-24 px-8 px-lg-20 text-center rounded-2 bg-primary-dark bg-opacity-75">
        <h3 class="font-heading mb-24">Meet our team</h3>
        <div class="row">
          <div class="col-md-6 col-xl-3 mb-10 mb-xl-0">
            <div class="text-center">
              <div class="d-flex mx-auto mb-2 align-items-end bg-gradient-primary-top rounded-pill overflow-hidden" style="width: 191px; height: 191px;"><img class="img-fluid" src="vista-assets/images/team/team1.png" alt=""></div>
              <div class="mb-3"><span class="d-block fs-7 fw-semibold">David Dobryk</span><span class="fs-9 text-white text-opacity-50">Founder &amp; CEO</span></div>
              <div><a class="btn me-4 p-0 border-0 bg-transparent btn-outline-secondary" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.1362 1.5H14.3416L9.52357 7.00667L15.1916 14.5H10.7529L7.2769 9.95533L3.29957 14.5H1.0929L6.24624 8.61L0.80957 1.5H5.35957L8.50157 5.654L12.1362 1.5ZM11.3622 13.18H12.5842L4.69624 2.75067H3.3849L11.3622 13.18Z" fill="currentColor"></path>
                  </svg></a><a class="btn p-0 border-0 bg-transparent btn-outline-secondary" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.1849 1.33334C13.5778 1.33334 13.9546 1.48943 14.2324 1.76726C14.5103 2.04509 14.6663 2.42191 14.6663 2.81483V13.1852C14.6663 13.5781 14.5103 13.9549 14.2324 14.2328C13.9546 14.5106 13.5778 14.6667 13.1849 14.6667H2.81449C2.42158 14.6667 2.04476 14.5106 1.76692 14.2328C1.48909 13.9549 1.33301 13.5781 1.33301 13.1852V2.81483C1.33301 2.42191 1.48909 2.04509 1.76692 1.76726C2.04476 1.48943 2.42158 1.33334 2.81449 1.33334H13.1849ZM12.8145 12.8148V8.8889C12.8145 8.24845 12.5601 7.63423 12.1072 7.18137C11.6543 6.7285 11.0401 6.47408 10.3997 6.47408C9.77005 6.47408 9.03671 6.85927 8.68116 7.43705V6.61483H6.61449V12.8148H8.68116V9.16297C8.68116 8.5926 9.14042 8.12594 9.71079 8.12594C9.98583 8.12594 10.2496 8.2352 10.4441 8.42968C10.6386 8.62416 10.7478 8.88793 10.7478 9.16297V12.8148H12.8145ZM4.20708 5.45186C4.53713 5.45186 4.85366 5.32075 5.08704 5.08737C5.32042 4.85399 5.45153 4.53747 5.45153 4.20742C5.45153 3.51853 4.89597 2.95557 4.20708 2.95557C3.87507 2.95557 3.55666 3.08746 3.32189 3.32222C3.08712 3.55699 2.95523 3.87541 2.95523 4.20742C2.95523 4.89631 3.51819 5.45186 4.20708 5.45186ZM5.23671 12.8148V6.61483H3.18486V12.8148H5.23671Z" fill="currentColor"></path>
                  </svg></a></div>
            </div>
          </div>
          <div class="col-md-6 col-xl-3 mb-10 mb-xl-0">
            <div class="text-center">
              <div class="d-flex mx-auto mb-2 align-items-end bg-gradient-primary-top rounded-pill overflow-hidden" style="width: 191px; height: 191px;"><img class="img-fluid" src="vista-assets/images/team/team2.png" alt=""></div>
              <div class="mb-3"><span class="d-block fs-7 fw-semibold">Milena Graz</span><span class="fs-9 text-white text-opacity-50">Founder &amp; CMO</span></div>

<section class="position-relative py-24 bg-primary-dark">
  <div class="container">
    <div class="border-bottom border-white border-opacity-10 mb-20">
      <div class="row">
        <div class="col-lg-8 mb-8 mb-lg-0">
          <div class="d-flex flex-wrap gap-6 gap-lg-10"><a class="position-relative btn text-primary px-0 pt-0 pb-4 border-0" href="#"><span>Trending</span>
              <div class="position-absolute bottom-0 start-0 w-100 border-bottom border-2 border-primary"></div></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Accounting</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Entrepreneurship</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Payments</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Company</span></a></div>
        </div>
        <div class="col-lg-4">
          <div class="position-relative d-flex ms-auto align-items-center" style="max-width: 100px;">
            <button class="position-absolute top-50 start-0 ms-1 translate-middle-y btn p-0 border-0">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.58335 17.5C13.9556 17.5 17.5 13.9556 17.5 9.58335C17.5 5.2111 13.9556 1.66669 9.58335 1.66669C5.2111 1.66669 1.66669 5.2111 1.66669 9.58335C1.66669 13.9556 5.2111 17.5 9.58335 17.5Z" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M18.3334 18.3334L16.6667 16.6667" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
            <input class="form-control ps-10 py-2 pe-0 bg-transparent border-0" type="search" placeholder="Search">
          </div>
        </div>
      </div>
    </div>
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="mb-8"><span class="d-block mb-4 fs-9 text-white fw-medium">17 Jul 2023</span>
        <h4 class="font-heading mb-4">Effective email marketing on a budget</h4>

<section class="position-relative py-12 py-md-24 bg-primary-dark">
  <div class="container">
    <div class="mw-md mx-auto mw-md-none">
      <div class="row">
        <div class="col-md-7 mb-12 mb-md-0">
          <div class="mw-md mw-lg-2xl">
            <h3 class="font-heading mb-6">We’re just getting started but...</h3>
            <p class="mw-xl text-white text-opacity-50">Vista founded in 2024, but we’ve already saved more than $50M of our customers revenue.</p>
          </div>
        </div>
        <div class="col-md-5">
          <div class="d-flex mb-12 align-items-center">
            <div class="d-flex align-items-center justify-content-center rounded-pill bg-gradient-primary-bottom" style="width: 72px; height: 72px;">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.92 2.94668L12.7067 10.4267H9.49335C8.96002 10.4267 8.44002 10.4667 7.93335 10.5733L9.26668 7.37334L9.32002 7.25334L9.40002 7.04001C9.44002 6.94668 9.46668 6.86668 9.50668 6.80001C11.0533 3.21334 12.7867 2.09334 15.92 2.94668Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M24.9732 10.7867L24.9466 10.7733C24.1466 10.5467 23.3332 10.4267 22.5066 10.4267H14.1599L17.1599 3.45332L17.1999 3.35999C17.3866 3.42665 17.5866 3.51999 17.7866 3.58665L20.7332 4.82665C22.3732 5.50665 23.5199 6.21332 24.2266 7.06665C24.3466 7.22665 24.4532 7.37332 24.5599 7.54665C24.6799 7.73332 24.7732 7.91999 24.8266 8.11999C24.8799 8.23999 24.9199 8.34665 24.9466 8.46665C25.1466 9.14665 25.1599 9.91999 24.9732 10.7867Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M16.6934 23.5467H17.0267C17.4267 23.5467 17.76 23.1867 17.76 22.7467C17.76 22.1867 17.6 22.1067 17.2534 21.9733L16.6934 21.7733V23.5467Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M24.3866 12.6933C23.7866 12.52 23.1599 12.4267 22.5066 12.4267H9.49324C8.58657 12.4267 7.73324 12.6 6.93324 12.9467C4.61324 13.9467 2.98657 16.2533 2.98657 18.9333V21.5333C2.98657 21.8533 3.01324 22.16 3.05324 22.48C3.34657 26.72 5.61324 28.9867 9.85324 29.2667C10.1599 29.3067 10.4666 29.3333 10.7999 29.3333H21.1999C26.1332 29.3333 28.7332 26.9867 28.9866 22.32C28.9999 22.0667 29.0132 21.8 29.0132 21.5333V18.9333C29.0132 15.9867 27.0532 13.5067 24.3866 12.6933ZM17.7066 20.6667C18.3199 20.88 19.1466 21.3333 19.1466 22.7467C19.1466 23.96 18.1999 24.9333 17.0266 24.9333H16.6932V25.2267C16.6932 25.6133 16.3866 25.92 15.9999 25.92C15.6132 25.92 15.3066 25.6133 15.3066 25.2267V24.9333H15.1866C13.9066 24.9333 12.8532 23.8533 12.8532 22.52C12.8532 22.1333 13.1599 21.8267 13.5466 21.8267C13.9332 21.8267 14.2399 22.1333 14.2399 22.52C14.2399 23.08 14.6666 23.5467 15.1866 23.5467H15.3066V21.2933L14.2932 20.9333C13.6799 20.72 12.8532 20.2667 12.8532 18.8533C12.8532 17.64 13.7999 16.6667 14.9732 16.6667H15.3066V16.3733C15.3066 15.9867 15.6132 15.68 15.9999 15.68C16.3866 15.68 16.6932 15.9867 16.6932 16.3733V16.6667H16.8132C18.0932 16.6667 19.1466 17.7467 19.1466 19.08C19.1466 19.4667 18.8399 19.7733 18.4532 19.7733C18.0666 19.7733 17.7599 19.4667 17.7599 19.08C17.7599 18.52 17.3332 18.0533 16.8132 18.0533H16.6932V20.3067L17.7066 20.6667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M14.24 18.8533C14.24 19.4133 14.4 19.4933 14.7467 19.6267L15.3067 19.8267V18.0533H14.9733C14.56 18.0533 14.24 18.4133 14.24 18.8533Z" fill="white" style="fill:white;fill-opacity:1;"></path>
              </svg>
            </div>
            <div class="ms-6"><span class="d-block lh-sm fs-3 fw-semibold">$55,199.00</span><span class="fw-medium">Revenue saved</span></div>
          </div>
          <div class="d-flex mb-12 align-items-center">

<section class="position-relative pt-12 pt-lg-24 pb-40 pb-lg-24 pb-xl-32 bg-primary-dark overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-4">
          <div class="position-relative">
            <div class="p-8 mb-8 bg-white rounded-3"><img class="img-fluid d-block mb-8" src="vista-assets/images/logos/syra-logo.svg" alt="">
              <p class="fs-6 text-black fw-medium mb-12">“We use Vista daily and we’re very happy that they are created this amazing bookkeeping software. Thank you Vista!”</p>
              <div class="d-flex align-items-center"><img src="vista-assets/images/testimonials/avatar2.png" alt="">
                <div class="ms-4"><span class="d-block lh-sm text-black fw-semibold">Hanna Stanton</span><span class="d-block fs-sm fs-9 text-secondary">Founder of AIME Inc.</span></div>
              </div>
            </div>
            <div class="d-none d-lg-block position-absolute top-100 start-0 w-100 mt-8 p-8 mb-8 bg-white rounded-3 opacity-50 bg-opacity-25"><img class="img-fluid d-block mb-8" src="vista-assets/images/logos/aurevo-logo.svg" alt="">
              <p class="fs-6 fw-medium text-white mb-12">“We use Vista daily and we’re very happy that they are created this amazing bookkeeping software. Thank you Vista!”</p>
              <div class="d-flex align-items-center"><img src="vista-assets/images/testimonials/avatar2.png" alt="">
                <div class="ms-4"><span class="d-block lh-sm fw-semibold">Hanna Stanton</span><span class="d-block fs-sm fs-9">Founder of AIME Inc.</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="position-relative">
            <div class="p-8 mb-8 bg-white rounded-3"><img class="img-fluid d-block mb-8" src="vista-assets/images/logos/syra-logo.svg" alt="">
              <p class="fs-6 text-black fw-medium mb-12">“We use Vista daily and we’re very happy that they are created this amazing bookkeeping software. Thank you Vista! We use Vista daily and we’re very happy that they are created this amazing bookkeeping software. Thank you Vista! Woohooo”</p>

<section class="position-relative py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="mw-xl mx-auto text-center mb-20">
        <h3 class="font-heading mb-4">Easy bookkeeping for your business</h3>
        <p class="fs-7 text-white text-opacity-50 mb-0">Our software provides intuitive bookkeeping solutions, allowing you to focus on growing your business rather than crunching numbers.</p>
      </div>
      <div class="pt-14 pb-8 px-8 px-sm-14 mb-10 bg-gradient-primary-top rounded-2">
        <div class="row mb-6 align-items-center">
          <div class="col-md-5 mb-10 mb-md-0">
            <div class="mw-sm mw-md-xs pe-md-8">
              <h3 class="font-heading mb-6">Simple Accounting</h3>
              <p class="text-white text-opacity-50">Keep track of your financial transactions with ease and simplicity.</p>
            </div>
          </div>
          <div class="col-md-7"><img class="img-fluid d-block w-100" src="vista-assets/images/features/picture-blue1.png" alt=""></div>
        </div>
        <div class="d-flex flex-wrap gap-6 align-items-center">
          <div class="d-inline-flex align-items-center">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.16666 10.8333L5.73222 12.3988C6.70853 13.3752 8.29145 13.3752 9.26774 12.3988L15.8333 5.83325" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round"></path>
            </svg><span class="ms-4">Automated financial tracking</span>
          </div>
          <div class="d-inline-flex align-items-center">

<section class="position-relative py-12 py-md-24 py-lg-40 py-xl-52 bg-primary-dark">
  <div class="container">
    <div class="mw-sm mw-md-5xl mx-auto">
      <div class="d-flex flex-column flex-md-row align-items-center"><img class="img-fluid d-block w-100 mw-xs pe-md-6 pe-lg-0 mb-14 mb-md-0" src="vista-assets/images/http-codes/http-code-blue2.png" alt="">
        <div class="ms-md-10 ms-lg-24">
          <h4 class="font-heading mb-4">Oops. Page not found.</h4>
          <p class="mw-lg fs-7 text-white text-opacity-50 mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p><a class="btn d-inline-flex align-items-center btn-primary border-2 border-white border-opacity-10" href="#"><span class="me-2">Back to home</span>
            <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-12 pt-lg-24 bg-gradient-primary-bottom">
  <div class="d-none d-md-block position-absolute top-0 end-0 h-100 col-5 border-start border-white border-opacity-25"></div>
  <div class="container position-relative">
    <div class="row mb-20">
      <div class="col-md-7 mb-12 mb-md-0"><span class="d-block mb-4 fs-5 fw-semibold">Subscribe to our newsletter</span>
        <form action="">
          <div class="position-relative mw-sm">
            <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="email">
            <button class="position-absolute top-0 end-0 m-1 btn d-inline-flex align-items-center text-primary-dark btn-light border-2 border-primary border-opacity-25" type="submit">Submit</button>
          </div>
        </form>
      </div>
      <div class="col-md-4 ms-auto">
        <div class="row">
          <div class="col-6"><span class="d-block mb-6 fw-semibold fs-6">Product</span>
            <ul class="list-unstyled">
              <li class="mb-6"><a class="btn btn-link p-0 text-white fs-6" href="#">Features</a></li>
              <li class="mb-6"><a class="btn btn-link p-0 text-white fs-6" href="#">How it works</a></li>
              <li><a class="btn btn-link p-0 text-white fs-6" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="col-6"><span class="d-block mb-6 fw-semibold fs-6">Company</span>
            <ul class="list-unstyled">
              <li class="mb-6"><a class="btn btn-link p-0 text-white fs-6" href="#">About</a></li>

<section class="position-relative pb-12 pb-lg-24 bg-primary-dark overflow-hidden">
  <div class="position-relative pt-24 mb-24 overflow-hidden">
    <div class="position-absolute top-0 end-0 h-100 col-10 d-flex justify-content-end"><img class="img-fluid w-100 mt-n10" src="vista-assets/images/about/illustration-blue2.svg" alt=""></div>
    <div class="container position-relative">
      <div class="mw-xl mb-52">
        <h2 class="font-heading mb-0">We’re a passionate team building the future of bookkeeping</h2>
      </div>
      <div class="mw-xs mw-sm-xl mx-auto mw-lg-none p-10 bg-primary-dark border-2 border-bottom border-primary">
        <div class="row align-items-center">
          <div class="col-12 col-lg-5 mb-12 pb-12 pb-lg-0 mb-lg-0 position-relative">
            <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-white border-opacity-10"></div>
            <div class="d-lg-none position-absolute bottom-0 start-0 w-100 border-bottom border-white border-opacity-10"></div>
            <div class="mw-xs"><span class="d-block mb-1 text-white text-opacity-50">Investors</span>
              <h6 class="text-white mb-0">Funded by industry-leading investors</h6>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 mb-8 pb-8 mb-sm-0 pb-sm-0 position-relative">
            <div class="d-none d-sm-block position-absolute top-0 end-0 h-100 border-end border-white border-opacity-10"></div>
            <div class="d-sm-none position-absolute bottom-0 start-0 w-100 border-bottom border-white border-opacity-10"></div>
            <div class="d-flex justify-content-center">
              <div class="text-center"><span class="d-block mb-1 text-white text-opacity-50">Team members</span><span class="d-block fs-3 text-white fw-bold">110</span></div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3 position-relative">

<section class="position-relative py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="py-20 px-8 px-sm-14 bg-gradient-primary-top rounded-2 position-relative overflow-hidden"><img class="position-absolute top-0 end-0 h-100 img-fluid" src="vista-assets/images/cta/illustration-blue.svg" alt="">
      <div class="mw-sm mw-lg-lg position-relative">
        <h3 class="font-heading mb-10">Ready to make accounting a breeze?</h3><a class="btn d-inline-flex align-items-center text-primary-dark btn-light border-2 border-dark border-opacity-25" href="#">Get started</a>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="py-20 px-8 px-sm-14 bg-gradient-primary-top rounded-2 position-relative overflow-hidden"><img class="position-absolute top-0 end-0 h-100 img-fluid" src="vista-assets/images/cta/illustration-blue.svg" alt="">
      <div class="mw-sm mw-md-lg position-relative">
        <h3 class="font-heading mb-4">Join our newsletter</h3>
        <p class="mb-10">Sign up for our newsletter for product updates and new blog posts!</p>
        <div class="position-relative mw-sm" style="height: 48px;">
          <input class="form-control bg-primary-dark bg-opacity-75 h-100" type="" placeholder="Email address">
          <div class="position-absolute top-0 end-0 h-100 p-1 d-flex align-items-center">
            <button class="btn h-100 d-flex align-items-center py-2 px-4 text-primary-dark btn-light border border-white border-opacity-10" type="submit">Subscribe</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-8 pb-12 pb-lg-24 pb-xl-32 bg-primary-dark">
  <div class="container"><a class="btn btn-link p-0 mb-24 mb-lg-52 fs-9 fw-semibold text-white text-decoration-none" href="#">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg><span class="ms-2">Back to Home</span></a>
    <div class="mw-sm mw-lg-4xl mw-xl-5xl mx-auto">
      <div class="row">
        <div class="col-lg-6">
          <div class="mw-sm"><img class="img-fluid d-block mb-10" src="vista-assets/images/sign-up/logo-pink.png" alt="">
            <p class="mb-10">“Now more than ever, cash is king. Vista meets this need by providing access to a new, non-dilutive financing option with the ability to attract and retain customers through flexible payment options.”</p>
            <div class="mb-10"><span class="d-block fw-semibold">James Dean</span><span class="d-block fs-9 text-white text-opacity-50">Founder, Lume</span></div>
            <div>
              <button class="btn p-0">
                <svg width="20" height="2" viewBox="0 0 20 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="20" height="2" rx="1" fill="white" style="fill:white;fill-opacity:1;"></rect>
                </svg>
              </button>
              <button class="btn p-0">
                <svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect opacity="0.3" width="8" height="2" rx="1" fill="white" style="fill:white;fill-opacity:1;"></rect>
                </svg>
              </button>
              <button class="btn p-0">
                <svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="text-center mb-16">
        <h1 class="font-heading mb-6">FAQ</h1>
        <p class="d-inline-flex flex-wrap mb-lg-0"><span class="d-inline-block me-1 text-white text-opacity-50">Still have more questions?</span><a class="btn p-0 btn-outline-primary d-inline-flex align-items-center border-0 bg-transparent" href="#"><span class="me-1">Talk to us</span>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></p>
      </div>
      <div class="mw-3xl mx-auto">
        <button class="btn d-block w-100 px-0 pt-6 pb-0 mb-6 text-start fw-normal border-0 border-top border-white border-opacity-10 rounded-0">
          <div class="d-flex justify-content-between align-items-center">
            <h6 class="fs-7 mb-0">What is Vista?</h6>
            <div class="position-relative ms-5 flex-shrink-0" style="width: 40px; height: 40px;">
              <div class="position-absolute top-0 start-0 w-100 h-100 d-inline-flex align-items-center justify-content-center rounded-pill bg-gradient-primary-bottom opacity-75"></div>
              <div class="position-absolute top-50 start-50 translate-middle rounded-pill bg-primary-dark bg-opacity-75" style="width: 37px; height: 37px;">
                <div class="d-flex w-100 h-100 align-items-center justify-content-center">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </div>
            </div>

<section class="pb-12 pb-lg-24 pb-xl-32 bg-primary-dark">
  <nav class="navbar mb-12 mb-lg-24 navbar-expand-lg navbar-dark bg-transparent border-bottom border-white border-opacity-10">
    <div class="container"><a class="navbar-brand me-6" href="#"><img class="img-fluid" src="vista-assets/images/logos/vista-logo.svg" alt=""></a>
      <button class="d-lg-none navbar-burger p-1 border-0 bg-white bg-opacity-10 rounded-pill ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.19995 23.2H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 16H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 8.79999H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle" id="nav01">
        <ul class="navbar-nav bg-white p-1 bg-opacity-10 rounded-pill">
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Home</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Features</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Pricing</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link bg-white bg-opacity-10 rounded-pill" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block ms-auto"><a class="btn btn-sm pe-3 d-flex align-items-center btn-outline-light border-0" href="#"><span class="me-1">Sign in</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>

<section class="position-relative pt-8 pb-12 pb-lg-24 pb-xl-32 bg-primary-dark">
  <div class="container"><a class="btn btn-link p-0 mb-24 mb-lg-52 fs-9 fw-semibold text-white text-decoration-none" href="#">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg><span class="ms-2">Back to Home</span></a>
    <div class="mw-sm mw-lg-4xl mw-xl-5xl mx-auto">
      <div class="row">
        <div class="col-lg-6">
          <div class="mw-sm"><img class="img-fluid d-block mb-10" src="vista-assets/images/sign-up/logo-blue.png" alt="">
            <p class="mb-10">“Now more than ever, cash is king. Vista meets this need by providing access to a new, non-dilutive financing option with the ability to attract and retain customers through flexible payment options.”</p>
            <div class="mb-10"><span class="d-block fw-semibold">James Dean</span><span class="d-block fs-9 text-white text-opacity-50">Founder, Lume</span></div>
            <div>
              <button class="btn p-0">
                <svg width="20" height="2" viewBox="0 0 20 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="20" height="2" rx="1" fill="white" style="fill:white;fill-opacity:1;"></rect>
                </svg>
              </button>
              <button class="btn p-0">
                <svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect opacity="0.3" width="8" height="2" rx="1" fill="white" style="fill:white;fill-opacity:1;"></rect>
                </svg>
              </button>
              <button class="btn p-0">
                <svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="position-relative py-12 py-sm-24 bg-primary-dark">
  <div class="container">
    <div class="mw-5xl mx-auto mw-lg-6xl">
      <div class="row align-items-center">
        <div class="col-lg-5 mb-12">
          <div class="mw-sm">
            <h6 class="font-heading mb-0">Powering financial insights for business owners.</h6>
          </div>
        </div>
        <div class="col-lg-7">
          <div class="row justify-content-center mb-n10">
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/aurevo-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/cronix-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
          </div>
        </div>
      </div>
    </div>
  </div>

<section class="position-relative py-12 py-lg-24 bg-primary-dark position-relative">
  <div class="container">
    <div class="mw-md mw-md-xl mx-auto mw-lg-5xl">
      <h3 class="text-center font-heading mb-20">How it works</h3><img class="img-fluid d-block w-100 mb-16" src="vista-assets/images/how-it-works/illustration-blue.png" alt="">
      <div class="row">
        <div class="col-lg-4 mb-10">
          <div class="mw-xs mx-auto mx-lg-0 pe-8">
            <div class="d-flex align-items-center mb-2">
              <div class="position-relative flex-shrink-0" style="width: 24px; height: 24px;">
                <div class="position-absolute top-0 start-0 w-100 h-100 d-inline-flex align-items-center justify-content-center rounded-pill bg-gradient-primary-bottom opacity-75"></div>
                <div class="position-absolute top-50 start-50 translate-middle rounded-pill bg-primary-dark bg-opacity-75" style="width: 23px; height: 23px;">
                  <div class="d-flex w-100 h-100 align-items-center justify-content-center"><span class="fs-10 fw-semibold lh-sm">1</span></div>
                </div>
              </div><span class="ms-2 fs-7 fw-semibold">Input Transactions</span>
            </div>
            <p class="text-white text-opacity-50 mb-0">Record your financial transactions such as receipts, and other relevant documents.</p>
          </div>
        </div>
        <div class="col-lg-4 mb-10">
          <div class="mw-xs mx-auto mx-lg-0 pe-8">
            <div class="d-flex align-items-center mb-2">
              <div class="position-relative flex-shrink-0" style="width: 24px; height: 24px;">
                <div class="position-absolute top-0 start-0 w-100 h-100 d-inline-flex align-items-center justify-content-center rounded-pill bg-gradient-primary-bottom opacity-75"></div>
                <div class="position-absolute top-50 start-50 translate-middle rounded-pill bg-primary-dark bg-opacity-75" style="width: 23px; height: 23px;">

<section class="position-relative py-24 bg-primary-dark">
  <div class="container">
    <div class="mw-md mw-md-2xl mx-auto mw-lg-none">
      <div class="mb-12">
        <nav class="mb-12" aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a class="text-white text-opacity-50" href="#">Blog</a></li>
            <li class="breadcrumb-item text-white active" aria-current="page">Effective email marketing on a budget</li>
          </ol>
        </nav>
        <h3 class="mw-3xl font-heading mb-4">Mastering Cash Basis Accounting: A Step-by-Step Guide</h3>
        <div class="d-flex mb-12 align-items-center"><span class="fs-9 fw-medium">17 Jul 2024</span><span class="badge ms-6 px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span></div><img class="img-fluid d-block w-100" src="vista-assets/images/blog-content/placeholder-blue.png" alt="">
      </div>
      <div class="mw-3xl mx-auto">
        <p class="fs-6 text-white text-opacity-50 mb-12">Cash basis accounting simplifies tracking by only recording transactions when cash enters or exits your business, regardless of when they're earned or billed. It's commonly used by individuals and small businesses with straightforward cash flows. While it offers simplicity and clarity regarding available cash, it may not provide a complete picture of business health or growth opportunities.</p>
        <h4 class="font-heading mb-6">What is cash basis accounting?</h4>
        <p class="fs-6 text-white text-opacity-50 mb-12">Cash basis accounting is when you only record transactions when the money enters or leaves your business, even if they were earned or billed earlier.</p>
        <h4 class="font-heading mb-6">How does cash accounting work?</h4>
        <p class="fs-6 text-white text-opacity-50 mb-6">Cash basis accounting is a simple way to track the cash that’s flowing in and out of your business.</p>
        <p class="fs-6 text-white text-opacity-50 mb-6">Here are a few examples of what it can look like:</p>
        <ul class="mb-12">
          <li class="mb-6 text-white text-opacity-50">With cash basis accounting, you record payments for products as they're received, not beforehand, even with flexible payment options like installment plans for your online shop.</li>
          <li class="mb-6 text-white text-opacity-50">If customers pay with credit cards, revenue isn't recorded immediately but when the payment is received from the credit card company.</li>
          <li class="mb-6 text-white text-opacity-50">You’re a graphic designer who spends a week in April creating a brochure for a local gallery. You submit an invoice of net 30, which means that the gallery is paying you in May. With cash basis accounting, you’d recognize that income in May when you receive the payment rather than in April, when you did the work.</li>