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="mb-24 bg-gradient-primary-bottom rounded-2" style="padding: 1px;">
      <div class="position-relative bg-primary-dark rounded-2"><img class="position-absolute top-0 start-0 w-100 h-100" src="vista-assets/images/careers/illustration-blue.svg" alt="">
        <div class="bg-primary bg-opacity-10 py-12 pt-md-20 pb-md-24 px-8 rounded-2 position-relative">
          <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 py-1 d-inline-flex align-items-center text-primary-dark btn-light border-2 border-secondary border-opacity-25" href="#">Join us</a>
          </div>
        </div>

<section class="position-relative pb-12 pb-lg-24 bg-primary-dark overflow-hidden">
  <div class="pt-16 pt-md-24 pt-lg-32 pb-24 pb-md-32 pb-lg-40 pb-xl-52 mb-24 bg-gradient-primary-bottom">
    <div class="container">
      <div class="mw-3xl mx-auto text-center">
        <h1 class="font-heading text-gradient text-shadow mb-0">We’re a passionate team building the future of bookkeeping</h1>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="mb-14 mb-md-24 mb-lg-32"><span class="d-block text-center fs-6 fw-medium mb-10">Our investors</span>
      <div class="row mb-n10">
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/aurevo-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/cronix-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
      </div>
    </div>
    <div class="row mb-14 mb-md-24 mb-lg-32">
      <div class="col-lg-6 mb-6 mb-lg-0">
        <div class="mw-xl mx-auto mx-lg-0">

<section class="pb-24 pb-lg-32 bg-primary-dark">
  <nav class="navbar mb-12 mb-lg-40 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 py-12 py-lg-24 pb-xl-32 bg-primary-dark">
  <div class="container">
    <div>
      <div class="mw-md mx-auto mw-lg-none text-center mb-20">
        <h3 class="font-heading mb-4">Meet our team</h3>
        <p class="text-white text-opacity-50">Meet our diverse and world-class problem solvers. We come from all corners of the globe.</p>
      </div>
      <div class="mw-sm mw-md-xl mx-auto mw-lg-none">
        <div class="row mb-n16">
          <div class="col-md-6 col-lg-3 mb-16">
            <div>
              <div class="position-relative d-flex mb-4 align-items-end pt-9 bg-primary bg-opacity-10 rounded-2 overflow-hidden" style="height: 312px;">
                <div class="position-absolute top-50 start-50 mt-n16 translate-middle-x d-inline-block h-100 w-100 bg-gradient-primary-top rounded-pill" style="filter: blur(65px);"></div>
                <div class="position-absolute top-50 start-50 translate-middle">
                  <svg width="225" height="226" viewBox="0 0 225 226" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_315_5549)">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M166.81 16.6607H43.6246C42.7569 16.6607 41.916 16.7819 41.0976 16.9956C40.933 17.0394 40.7767 17.1073 40.6197 17.1755C40.5043 17.2256 40.3885 17.2759 40.2689 17.3168C40.1722 17.3533 40.0749 17.3889 39.9776 17.4245C39.5707 17.5734 39.1625 17.7228 38.7828 17.94C38.6036 18.0433 38.4435 18.1674 38.2841 18.2909C38.1762 18.3745 38.0686 18.4579 37.9556 18.5344C37.8904 18.5805 37.825 18.6263 37.7594 18.6721C37.4191 18.9101 37.0773 19.1491 36.777 19.4391C36.5955 19.6176 36.4406 19.8194 36.2844 20.0227C36.2231 20.1025 36.1616 20.1826 36.0983 20.2616C36.0158 20.3583 35.929 20.4522 35.8419 20.5463C35.6493 20.7546 35.4557 20.9639 35.3066 21.2073L1.61973 73.8792C1.54947 73.9943 1.49988 74.1181 1.44983 74.243C1.4106 74.3409 1.3711 74.4395 1.32114 74.5352C1.27919 74.6102 1.22523 74.6805 1.17069 74.7516C1.09969 74.8441 1.02774 74.9378 0.980094 75.0448C0.935378 75.1449 0.912243 75.2476 0.889374 75.349C0.867063 75.448 0.845005 75.5458 0.803407 75.6392C0.624329 76.1168 0.477894 76.6059 0.365114 77.1034C0.27888 77.4916 0.213046 77.8841 0.167883 78.2792C0.125747 78.7723 0.119567 79.2679 0.149392 79.7619L0.153244 79.8126C0.182672 80.2006 0.211632 80.5823 0.272662 80.9603C0.357908 81.4282 0.503094 81.868 0.651612 82.3179L0.66781 82.367C0.691326 82.4338 0.714434 82.5007 0.737501 82.5674C0.851472 82.897 0.964425 83.2238 1.12048 83.5353C1.1518 83.6011 1.1741 83.6716 1.19655 83.7426C1.21828 83.8113 1.24014 83.8805 1.27046 83.9462C1.38575 84.1607 1.53691 84.3449 1.68816 84.5292C1.76871 84.6273 1.84928 84.7255 1.92448 84.8283C1.99278 84.9299 2.05047 85.0336 2.10746 85.136C2.19448 85.2924 2.2799 85.446 2.39907 85.585L104.217 205.846C105.973 207.919 108.605 209.391 111.229 209.316C111.248 209.316 111.268 209.322 111.285 209.327C111.297 209.33 111.308 209.333 111.317 209.333C111.463 209.341 111.603 209.341 111.751 209.341H111.772C112.652 209.341 113.515 209.177 114.346 208.955C114.592 208.877 114.815 208.799 115.062 208.704C115.68 208.485 116.275 208.204 116.838 207.865C116.884 207.838 116.931 207.811 116.978 207.784C117.124 207.699 117.274 207.613 117.414 207.519C118.084 207.054 118.713 206.52 119.256 205.875L222.12 85.6158C222.196 85.5252 222.253 85.4234 222.31 85.3217C222.351 85.2482 222.392 85.1748 222.441 85.1056C222.502 85.028 222.569 84.9553 222.637 84.8824C222.75 84.7604 222.863 84.6377 222.951 84.4906C223.041 84.3486 223.104 84.1957 223.167 84.0415C223.208 83.9437 223.248 83.8454 223.296 83.749C223.469 83.4305 223.633 83.1093 223.761 82.7642C223.954 82.2629 224.086 81.7541 224.201 81.2445C224.215 81.179 224.23 81.1141 224.244 81.0496C224.305 80.7736 224.364 80.5046 224.39 80.2248C224.456 79.6571 224.431 79.1038 224.39 78.5408C224.381 78.4139 224.377 78.2902 224.374 78.1689C224.368 77.9719 224.363 77.7812 224.333 77.593C224.222 76.878 223.995 76.1782 223.719 75.5043C223.689 75.4334 223.674 75.3619 223.658 75.2901C223.642 75.2142 223.626 75.1379 223.592 75.0619C223.582 75.0519 223.574 75.0409 223.567 75.029C223.567 75.0214 223.565 75.0155 223.563 75.0104C223.559 75.0045 223.555 74.9996 223.551 74.9941L212.139 50.7628L139.32 137.545L99.4193 141.035L95.9285 101.134L166.81 16.6607Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                    </g>
                  </svg>
                </div><img class="position-relative img-fluid d-block mx-auto" src="vista-assets/images/team/team1.png" alt="">
              </div>
              <div class="position-relative">
                <div><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 class="position-absolute end-0 top-0"><a class="btn me-3 p-0 border-0 bg-primary bg-opacity-10 rounded-pill" href="#" style="width: 28px; height: 28px;">

<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-lg mw-lg-5xl mx-auto">
      <div class="row mb-24">
        <div class="col-lg-6 mb-8 mb-lg-0">
          <div class="pt-8 px-8 pb-16">
            <h6 class="fs-5 text-center mb-6">Basic</h6>
            <div class="d-flex mb-8 align-items-end justify-content-center"><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;">
              <div class="row">
                <div class="col-lg-6 mb-4 mb-lg-0">
                  <div 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>

<section class="position-relative bg-primary-dark position-relative">
  <div class="container position-relative">
    <div class="d-none d-sm-block position-absolute top-0 start-0 ms-5 h-100">
      <div class="h-100 border-white border-opacity-10" style="border-left: 2px dashed"></div>
    </div>
    <div class="d-none d-sm-block position-absolute top-0 end-0 me-5 h-100">
      <div class="h-100 border-white border-opacity-10" style="border-right: 2px dashed"></div>
    </div>
    <div class="mw-sm mw-sm-md mw-md-xl mw-lg-4xl mw-xl-5xl py-12 py-lg-24 mx-auto"><span class="mb-4 badge text-primary-light" style="letter-spacing: 1.44px;">HOW IT WORKS</span>
      <h3 class="font-heading mb-20">See how we simplifies your financial tasks</h3>
      <div class="row align-items-center">
        <div class="col-lg-5 mb-12 mb-lg-0">
          <div>
            <div class="mw-xs pe-8 mb-10">
              <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>

<section class="position-relative py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="mw-md mw-lg-5xl mx-auto">
      <div class="text-center mb-20">
        <h3 class="font-heading mb-0">Our features</h3>
      </div>
      <div class="mb-8 border border-white border-opacity-10 rounded-2 overflow-hidden">
        <div class="row">
          <div class="col-lg-6 mb-14 mb-lg-0">
            <div class="mw-md pt-12 ps-12 pe-6 pt-lg-32"><span class="d-block mb-1 fs-3 fw-bold">Simple Accounting</span>
              <p class="mw-xs fs-9 text-white text-opacity-50 mb-0">Keep track of your financial transactions with ease and simplicity.</p>
            </div>
          </div>
          <div class="col-lg-6 p-0"><img class="img-fluid d-block w-100 h-100" src="vista-assets/images/features/picture-blue5.png" alt=""></div>
        </div>
      </div>
      <div class="row mb-8">
        <div class="col-lg-6 mb-8 mb-lg-0">
          <div class="border border-white border-opacity-10 rounded-2 overflow-hidden"><img class="img-fluid d-block w-100" style="height: 400px;" src="vista-assets/images/features/picture-blue6.png" alt="">
            <div class="mw-sm ms-6 px-6 pt-12 pb-8 pb-lg-20"><span class="d-block mb-1 fs-3 fw-bold">Detailed Analytics</span>
              <p class="fs-9 text-white text-opacity-50 mb-0">Get detailed insights about your financial health with our analytics feature.</p>
            </div>
          </div>
        </div>

<section class="position-relative py-12 py-md-24 bg-primary-dark">
  <div class="container">
    <div class="mw-lg-5xl mx-auto bg-gradient-primary-bottom rounded-2" style="padding: 2px;">
      <div class="bg-primary-dark rounded-2">
        <div class="py-16 px-8 w-100 bg-primary-light bg-opacity-10 rounded-2">
          <div class="text-center">
            <h3 class="font-heading mb-4">Join our newsletter</h3>
            <p class="mw-xs mx-auto mw-md-none text-white text-opacity-50 mb-12">Get the latest updates delivered into your inbox.</p>
            <div class="position-relative mw-sm mx-auto mb-5" style="height: 48px;">
              <div class="bg-primary bg-opacity-75" style="height: 48px; filter: blur(25px);"></div>
              <div class="position-absolute w-100 top-0 start-0" 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-white btn-primary btn-shadow-primary border-2 border-white border-opacity-10" type="submit">Subscribe</button>
                </div>
              </div>
            </div>
            <p class="fs-9 text-white text-opacity-50 mb-0">No spam. You can unsubscribe anytime.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-md-24 py-lg-40 pt-xl-52 pb-xl-64 bg-primary-dark overflow-hidden">
  <div class="container">
    <div class="position-relative d-flex align-items-center justify-content-center mw-2xl mx-auto" style="min-height: 592px;">
      <div class="position-absolute top-50 start-50 w-100 h-100 translate-middle bg-primary-light rounded-pill" style="max-width: 592px; max-height: 592px; filter: blur(25px);"></div>
      <div class="position-absolute top-50 start-50 w-100 h-100 translate-middle bg-gradient-primary-top rounded-pill" style="max-width: 592px; max-height: 592px;"></div>
      <div class="position-absolute top-50 start-50 w-100 h-100 translate-middle bg-primary-dark rounded-pill" style="max-width: 586px; max-height: 586px;"></div>
      <div class="position-relative text-center px-10 px-sm-0"><img class="d-block mx-auto img-fluid mb-12" src="vista-assets/images/http-codes/http-code-blue3.png" alt="">
        <h4 class="font-heading mb-10">Oops. Page not found.</h4><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>
</section>

<section class="position-relative py-12 py-md-24 bg-primary-dark">
  <div class="container">
    <div class="position-relative mw-md mw-md-2xl mw-lg-7xl mx-auto py-12 py-lg-20 px-8 rounded-2 bg-primary bg-opacity-10 overflow-hidden"><img class="d-none d-md-block position-absolute top-50 translate-middle-y start-0 h-100" src="vista-assets/images/stats/mapbase.svg" alt=""><img class="d-md-none position-absolute top-0 start-0" src="vista-assets/images/stats/mapbase.svg" alt="">
      <div class="position-relative mw-xl mx-auto me-lg-0">
        <p class="d-flex flex-wrap align-items-center mw-xs mx-auto mw-md-none fs-6 fw-medium mb-16"><span class="d-inline-block">Founded in</span><span class="d-inline-block mb-1 mx-3 fs-2 fw-semibold">2024</span><span class="d-inline-block">but already making numbers</span></p>
        <div class="row">
          <div class="d-none d-md-block col-md-4">
            <div class="p-8 rounded-start text-center bg-light bg-opacity-25"><span class="d-block fs-3 fw-medium">$5M+</span><span class="d-block text-white text-opacity-50">Revenue saved</span></div>
          </div>
          <div class="d-none d-md-block col-md-4">
            <div class="p-8 text-center bg-white bg-opacity-10"><span class="d-block fs-3 fw-medium">214</span><span class="d-block text-white text-opacity-50">Partners</span></div>
          </div>
          <div class="d-none d-md-block col-md-4">
            <div class="p-8 rounded-end text-center bg-light-dark bg-opacity-10"><span class="d-block fs-3 fw-medium">37+</span><span class="d-block text-white text-opacity-50">Countries</span></div>
          </div>
          <div class="d-md-none col-12 mb-6">
            <div class="mw-xs mx-auto p-8 rounded-top text-center bg-light bg-opacity-25"><span class="d-block fs-3 fw-medium">$5M+</span><span class="d-block text-white text-opacity-50">Revenue saved</span></div>
          </div>
          <div class="d-md-none col-12 mb-6">
            <div class="mw-xs mx-auto p-8 text-center bg-white bg-opacity-10"><span class="d-block fs-3 fw-medium">214</span><span class="d-block text-white text-opacity-50">Partners</span></div>
          </div>
          <div class="d-md-none col-12">
            <div class="mw-xs mx-auto p-8 rounded-bottom text-center bg-light-dark bg-opacity-10"><span class="d-block fs-3 fw-medium">37+</span><span class="d-block text-white text-opacity-50">Countries</span></div>
          </div>

<section class="position-relative py-12 py-sm-24 bg-primary-dark">
  <div class="container">
    <div class="row justify-content-center mb-n10">
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/aurevo-logo.svg" alt=""></div>
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-xl-6 mb-16">
        <div class="mw-md mx-auto mx-lg-0 p-6 bg-primary bg-opacity-10 rounded-3">
          <div class="d-flex align-items-start"><img class="img-fluid" src="vista-assets/images/testimonials/avatar2.png" alt="">
            <div class="ms-6"><span class="d-block fw-medium">Hanna Stanton</span><span class="d-block mb-4 fs-9 text-secondary">Founder of AIME Inc.</span>
              <p class="fs-9 mb-0">We use Vista daily and we’re very happy that they are created this amazing bookkeeping software.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6 mb-16 d-none d-xl-block">
        <div class="mw-md ms-xl-auto me-xl-20 p-6 bg-primary bg-opacity-10 rounded-3">
          <div class="d-flex align-items-start"><img class="img-fluid" src="vista-assets/images/testimonials/avatar2.png" alt="">
            <div class="ms-6"><span class="d-block fw-medium">Hanna Stanton</span><span class="d-block mb-4 fs-9 text-secondary">Founder of AIME Inc.</span>
              <p class="fs-9 mb-0">We use Vista daily and we’re very happy that they are created this amazing bookkeeping software.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-auto mb-16 mt-6">
        <div class="d-inline-block me-lg-0 ms-20 ms-lg-n20 p-8 bg-primary bg-opacity-10 rounded-3">
          <div class="d-flex align-items-start"><img class="img-fluid" src="vista-assets/images/testimonials/avatar2.png" alt="">

<section class="position-relative bg-primary-dark">
  <div class="position-absolute top-0 start-0 col-lg-7 col-xl-6 h-100 p-8 d-none d-lg-block"><img class="img-fluid d-block h-100 w-100 mw-4xl" src="vista-assets/images/sign-up/picture-blue3.png" alt=""></div>
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-5 col-xl-6 ms-lg-auto py-12 py-md-24 py-lg-52">
        <div class="mw-sm mw-xl-md mx-auto mx-lg-0 ms-xl-auto">
          <div class="mb-8">
            <h2 class="font-heading h4 mb-4">Login</h2>
            <p class="text-white text-opacity-50 mb-0">Welcome back to Vista</p>
          </div>
          <form action="">
            <div class="mb-8">
              <label class="form-label" for="">Email</label>
              <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="email" id="" aria-describedby="" placeholder="john@email.com">
            </div>
            <div class="mb-8">
              <div class="position-relative">
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="password" id="" aria-describedby="" placeholder="Enter password">
                <button class="position-absolute top-50 end-0 me-6 translate-middle-y btn p-0 border-0 text-secondary">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="currentColor" stroke="currentColor"></path>
                    <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="currentColor"></path>
                  </svg>
                </button>

<section class="position-relative bg-primary-dark">
  <div class="container">
    <div class="mw-sm mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 col-xl-7 py-16 py-lg-24">
          <div class="mw-xl">
            <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 text-opacity-50 fs-6" href="#">Features</a></li>
                  <li class="mb-6"><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">How it works</a></li>
                  <li class="mb-6"><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">Pricing</a></li>
                  <li><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">FAQs</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 text-opacity-50 fs-6" href="#">About</a></li>
                  <li class="mb-6"><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">Blog</a></li>
                  <li class="mb-6"><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">Contact</a></li>
                  <li><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">Privacy Policy</a></li>
                </ul>
              </div>
            </div>

<section class="position-relative bg-primary-dark">
  <div class="position-absolute top-0 start-0 col-lg-7 col-xl-6 h-100 p-8 d-none d-lg-block"><img class="img-fluid d-block h-100 w-100 mw-4xl" src="vista-assets/images/sign-up/picture-blue3.png" alt=""></div>
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-5 col-xl-6 ms-lg-auto py-12 py-md-24 py-lg-52">
        <div class="mw-sm mw-xl-md mx-auto mx-lg-0 ms-xl-auto">
          <div class="mb-8">
            <h2 class="font-heading h4 mb-4">Create account</h2>
            <p class="text-white text-opacity-50 mb-0">Enter your details below to register an account.</p>
          </div>
          <form action="">
            <div class="row">
              <div class="col-6 mb-6">
                <label class="form-label fs-9" for="">First name</label>
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="text" id="" aria-describedby="" placeholder="First name">
              </div>
              <div class="col-6 mb-6">
                <label class="form-label fs-9" for="">Last name</label>
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="text" id="" aria-describedby="" placeholder="Last name">
              </div>
              <div class="col-12 mb-6">
                <label class="form-label fs-9" for="">Email</label>
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="email" id="" aria-describedby="" placeholder="john@email.com">
              </div>

<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-20">
        <h4 class="font-heading mb-0">Frequently Asked Questions</h4>
      </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 rounded-0">
          <div class="d-flex align-items-center"><span class="me-2">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_139_2681)">
                  <path d="M10 4.16669V15.8334" stroke="#6691FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.1665 10H15.8332" stroke="#6691FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
              </svg></span>
            <h6 class="fs-7 fw-medium mb-0">What is Vista?</h6>
          </div>
        </button>
        <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 align-items-center"><span class="me-2">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_139_2681)">
                  <path d="M10 4.16669V15.8334" stroke="#6691FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.1665 10H15.8332" stroke="#6691FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="position-relative pt-12 pt-lg-24 bg-primary-dark">
  <div class="container">
    <div class="mw-xl mx-auto text-center">
      <h3 class="font-heading mb-4">Ready to experience seamless accounting?</h3>
      <p class="fs-7 text-white text-opacity-50 mb-10">Say goodbye to hassles and embrace seamless financial management.</p><a class="btn d-inline-flex align-items-center text-primary-dark btn-light border-2 border-dark border-opacity-25" href="#"><span class="me-2">Get Started</span>
        <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.49984 10H15.9165M15.9165 10L10.9165 5M15.9165 10L10.9165 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </div>
  </div><img class="img-fluid d-block mx-auto px-4 mt-24" src="vista-assets/images/cta/vista-text.svg" alt="">
</section>

<section class="position-relative py-24 bg-primary-dark">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-5xl">
      <div class="text-center mb-8">
        <h2 class="font-heading mb-20">Blog</h2>
        <div class="d-flex mb-4 align-items-center justify-content-center gap-4"><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span><span class="d-block fs-9 fw-medium">17 Jul 2023</span></div>
        <h4 class="font-heading mb-4">Effective email marketing on a budget</h4>
        <p class="text-white text-opacity-50 mb-0">Read on to find out what the technique is, what it’s used for, and how you can apply it to your studies.</p>
      </div>
      <div class="mb-20"><img class="img-fluid d-block w-100" src="vista-assets/images/blog-content/placeholder-blue.png" alt=""></div>
      <h4 class="text-center font-heading mb-10">Browse by category</h4>
      <div class="border-bottom border-white border-opacity-10 mb-10">
        <div class="d-flex flex-wrap gap-6 gap-lg-10 justify-content-center"><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="row mb-n12">
        <div class="col-lg-4 mb-12"><a class="btn d-block p-0 text-start fw-normal border-0" href="#"><img class="d-block mb-6 img-fluid w-100" src="vista-assets/images/blog-content/placeholder-blue-small.png" alt="">
            <div class="d-flex mb-3 align-items-center justify-content-between gap-4"><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span><span class="d-block fs-9 fw-medium">17 Jul 2023</span></div>
            <h6 class="font-heading fs-7 mb-3">Make Your Phone Your Best Study Tool</h6>
            <p class="text-white text-opacity-50 fs-9 pe-5 mb-6">How do we make our phone best study tool? Read on to find out more.</p></a></div>
        <div class="col-lg-4 mb-12"><a class="btn d-block p-0 text-start fw-normal border-0" href="#"><img class="d-block mb-6 img-fluid w-100" src="vista-assets/images/blog-content/placeholder-blue-small.png" alt="">
            <div class="d-flex mb-3 align-items-center justify-content-between gap-4"><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span><span class="d-block fs-9 fw-medium">17 Jul 2023</span></div>
            <h6 class="font-heading fs-7 mb-3">Make Your Phone Your Best Study Tool</h6>
            <p class="text-white text-opacity-50 fs-9 pe-5 mb-6">How do we make our phone best study tool? Read on to find out more.</p></a></div>

<section class="position-relative py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="text-center mb-24">
      <h4 class="mb-6">We’re just getting started but...</h4>
      <p class="text-white text-opacity-50 mb-0">Vista founded in 2024, but we’ve already saved more than $50M of our customers revenue.</p>
    </div>
    <div class="mw-xs mw-md-5xl mx-auto">
      <div class="row">
        <div class="col-12 col-md-4 mb-12 mb-md-0 text-md-center">
          <div class="d-inline-flex mx-auto text-start align-items-center">
            <div class="d-flex align-items-center justify-content-center border border-primary rounded-pill" style="width: 72px; height: 72px;">
              <div class="d-flex align-items-center justify-content-center bg-primary-light bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 52px; height: 52px;">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.9198 2.94667L12.7064 10.4267H9.49311C8.95977 10.4267 8.43977 10.4667 7.93311 10.5733L9.26644 7.37333L9.31977 7.25333L9.39977 7.04C9.43977 6.94667 9.46644 6.86667 9.50644 6.8C11.0531 3.21333 12.7864 2.09333 15.9198 2.94667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M24.9735 10.7867L24.9468 10.7733C24.1468 10.5467 23.3335 10.4267 22.5068 10.4267H14.1602L17.1602 3.45333L17.2002 3.36C17.3868 3.42667 17.5868 3.52 17.7868 3.58667L20.7335 4.82667C22.3735 5.50667 23.5202 6.21333 24.2268 7.06667C24.3468 7.22667 24.4535 7.37333 24.5602 7.54667C24.6802 7.73333 24.7735 7.92 24.8268 8.12C24.8802 8.24 24.9202 8.34667 24.9468 8.46667C25.1468 9.14667 25.1602 9.92 24.9735 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.3868 12.6933C23.7868 12.52 23.1601 12.4267 22.5068 12.4267H9.49348C8.58682 12.4267 7.73348 12.6 6.93348 12.9467C4.61348 13.9467 2.98682 16.2533 2.98682 18.9333V21.5333C2.98682 21.8533 3.01348 22.16 3.05348 22.48C3.34682 26.72 5.61348 28.9867 9.85348 29.2667C10.1601 29.3067 10.4668 29.3333 10.8002 29.3333H21.2001C26.1335 29.3333 28.7335 26.9867 28.9868 22.32C29.0002 22.0667 29.0135 21.8 29.0135 21.5333V18.9333C29.0135 15.9867 27.0535 13.5067 24.3868 12.6933ZM17.7068 20.6667C18.3202 20.88 19.1468 21.3333 19.1468 22.7467C19.1468 23.96 18.2002 24.9333 17.0268 24.9333H16.6935V25.2267C16.6935 25.6133 16.3868 25.92 16.0002 25.92C15.6135 25.92 15.3068 25.6133 15.3068 25.2267V24.9333H15.1868C13.9068 24.9333 12.8535 23.8533 12.8535 22.52C12.8535 22.1333 13.1602 21.8267 13.5468 21.8267C13.9335 21.8267 14.2402 22.1333 14.2402 22.52C14.2402 23.08 14.6668 23.5467 15.1868 23.5467H15.3068V21.2933L14.2935 20.9333C13.6802 20.72 12.8535 20.2667 12.8535 18.8533C12.8535 17.64 13.8001 16.6667 14.9735 16.6667H15.3068V16.3733C15.3068 15.9867 15.6135 15.68 16.0002 15.68C16.3868 15.68 16.6935 15.9867 16.6935 16.3733V16.6667H16.8135C18.0935 16.6667 19.1468 17.7467 19.1468 19.08C19.1468 19.4667 18.8402 19.7733 18.4535 19.7733C18.0668 19.7733 17.7601 19.4667 17.7601 19.08C17.7601 18.52 17.3335 18.0533 16.8135 18.0533H16.6935V20.3067L17.7068 20.6667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M14.2402 18.8533C14.2402 19.4133 14.4002 19.4933 14.7469 19.6267L15.3069 19.8267V18.0533H14.9736C14.5602 18.0533 14.2402 18.4133 14.2402 18.8533Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div>
            <div class="ms-6"><span class="d-block fs-3 fw-semibold">$55,199.00</span><span class="text-white text-opacity-50">Revenue saved</span></div>
          </div>
        </div>

<section class="position-relative py-12 py-lg-24 bg-primary-dark overflow-hidden">
  <div class="container">
    <div class="mw-4xl mx-auto mb-16 mb-md-24 text-center">
      <h1 class="font-heading mb-0">Our mission is to make bookkeeping simple</h1>
    </div><img class="d-block w-100 mb-12 mb-md-24 mb-lg-32 img-fluid" src="vista-assets/images/about/picture-blue.png" alt="">
    <div class="row mb-16 mb-md-24 mb-lg-32">
      <div class="col-lg-4 mb-12 mb-lg-0">
        <h3 class="fw-semibold mb-0">Our Story</h3>
      </div>
      <div class="col-lg-8">
        <div class="mw-xl ms-lg-auto">
          <p class="fs-6 mb-8">Vista emerged on the scene in 2024, a visionary solution born from the collective expertise of its founders. United by a shared passion for redefining the bookkeeping landscape, they embarked on a journey to create a cutting-edge SaaS platform.</p>
          <p class="fs-6 mb-0">Vista is more than a software; it's the culmination of years of industry insight and dedication to revolutionize the way businesses manage their financial records. Built on the pillars of efficiency, accuracy, and collaboration, Vista sets a new standard for bookkeeping solutions, empowering businesses to navigate their financial landscape with ease and confidence.</p>
        </div>
      </div>
    </div>
    <div class="row mb-14 mb-md-24 mb-lg-32">
      <div class="col-lg-6 mb-12 mb-lg-0">
        <div class="p-12 h-100 bg-primary rounded-2">
          <div class="d-flex mb-8 align-items-center"><img class="img-fluid" style="height: 48px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""><span class="ms-6 fs-7 fw-medium text-white text-opacity-75">OUR MISSION</span></div>
          <p class="fs-5 fw-semibold mb-0">We're transforming how businesses handle bookkeeping to revolutionize financial management.</p>
        </div>
      </div>
      <div class="col-lg-6">