UI Components – Vista Library

<section class="position-relative bg-success-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-success-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-success-bottom opacity-75"></div>
                  <div class="position-absolute top-50 start-50 translate-middle rounded-pill bg-success-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 bg-success-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-green3.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="position-relative py-12 py-md-24 bg-success-dark">
  <div class="container">
    <div class="mw-lg-5xl mx-auto bg-gradient-success-bottom rounded-2" style="padding: 2px;">
      <div class="bg-success-dark rounded-2">
        <div class="py-16 px-8 w-100 bg-success-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-success 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-success-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-success btn-shadow-success 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-success-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-success-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-success-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-success-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-green3.png" alt="">
        <h4 class="font-heading mb-10">Oops. Page not found.</h4><a class="btn d-inline-flex align-items-center btn-success text-white 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="py-12 py-lg-24 bg-success-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="#7ACC66" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.1665 10H15.8332" stroke="#7ACC66" 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="#7ACC66" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.1665 10H15.8332" stroke="#7ACC66" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="position-relative bg-success-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-success-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-green3.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 py-12 py-sm-24 bg-success-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-md-24 bg-success-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-success 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-lg-24 bg-success-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-success 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-success 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-success 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 py-12 py-lg-24 bg-success-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-green5.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-green6.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 pt-12 pt-lg-24 bg-success-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-success-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-success-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-green.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-success 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-success"></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-green-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-green-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-gradient-success-top 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-success text-gradient">10% OFF</span></button>
      </div>
    </div>
    <div class="mw-lg mw-lg-4xl mx-auto">
      <div class="pt-10 px-10 pb-14 mb-8 bg-success-dark rounded-2 border border-white border-opacity-10">
        <h6 class="fs-4 text-center mb-2">Basic</h6>
        <p class="text-center fs-9 text-white text-opacity-50 mb-10">Perfect for individuals &amp; small teams</p>
        <div class="py-6 mb-10 border-top border-bottom border-white border-opacity-10">
          <div class="row">
            <div class="col-lg-6 mb-8 mb-lg-0">
              <div class="d-flex align-items-end"><span class="fs-2 fw-semibold lh-1">$9</span><span class="ms-1 text-white text-opacity-50">/ per month - billed yearly</span></div>
            </div>
            <div class="col-lg-6 text-lg-end"><a class="btn d-inline-flex align-items-center text-white btn-success btn-shadow-success border-2 border-white border-opacity-10" href="#">Get Started</a></div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 mb-4 mb-lg-0">

<section class="position-relative py-12 py-lg-24 bg-success-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-success rounded-pill" style="width: 72px; height: 72px;">
              <div class="d-flex align-items-center justify-content-center bg-success-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-success-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-green.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-success 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">

<section class="position-relative pb-12 pb-lg-24 bg-success-dark overflow-hidden">
  <div class="position-relative pb-24 mb-24 bg-gradient-success-bottom"><img class="position-absolute bottom-0 start-50 translate-middle-x" src="vista-assets/images/careers/ellipse.svg" alt="">
    <div class="container position-relative">
      <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="text-center"><img class="d-block mb-6 mx-auto img-fluid" src="vista-assets/images/logos/vista-logo-small.svg" alt="">
        <h2 class="font-heading mb-20">Careers at Vista</h2><a class="btn d-inline-flex align-items-center text-success-dark btn-light border-2 border-secondary border-opacity-25" href="#">View Openings</a>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="mw-5xl mx-auto">

<section class="position-relative py-24 bg-success-dark">
  <div class="container">
    <div class="mx-auto mw-lg-5xl">
      <h2 class="font-heading mb-16">Blog</h2>
      <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-success 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-success"></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>

<section class="position-relative py-12 py-md-32 py-lg-52 bg-success-dark overflow-hidden"><img class="d-none d-md-block position-absolute top-0 start-50 translate-middle-x h-100" src="vista-assets/images/sign-up/lines.svg" alt="">
  <div class="container position-relative">
    <div class="mw-sm mx-auto">
      <div class="text-center mb-8"><img src="vista-assets/images/sign-up/logo-green2.png" alt="">
        <h2 class="font-heading h4 mb-4">Sign up</h2>
        <p class="d-flex align-items-center justify-content-center fs-9 mb-0"><span class="me-1 text-white text-opacity-50">Already have an account?</span><a class="btn fs-9 btn-link p-0 text-success fw-medium" href="#">Login</a></p>
      </div>
      <form action="">
        <div class="mb-8">
          <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><a class="btn w-100 mb-8 d-inline-flex align-items-center justify-content-center btn-success btn-shadow-success border-3 border-white border-opacity-10" href="#">Sign up</a>
        <div class="text-center"><span class="d-inline-block fs-10 text-secondary text-opacity-75">You acknowledge that you read, and agree to our</span>
          <div><a class="btn btn-link fs-10 p-0 text-secondary fw-semibold" href="#">Terms</a> <span class="fs-10 text-secondary text-opacity-75"> and</span> <a class="btn btn-link fs-10 p-0 text-secondary fw-semibold" href="#"> Privacy Policy.</a></div>
        </div>
      </form>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-sm-24 bg-success-dark">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <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>
  </div>
</section>