UI Components – Vista Library

<section class="position-relative bg-danger-dark">
  <div class="position-absolute top-0 end-0 col-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-pink1.png" alt=""></div>
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-6 pt-8 pb-24 pb-lg-52">
        <div class="mw-md mx-auto">
          <div class="mb-8"><img class="img-fluid d-block mb-40" src="vista-assets/images/logos/vista-logo.svg" alt="">
            <h2 class="font-heading h4 mb-4">Login</h2>
            <p class="d-flex align-items-center mb-0"><span class="me-1 text-white text-opacity-50">Don’t have an account?</span><a class="btn btn-link p-0 text-white fw-medium" href="#">Sign up</a></p>
          </div>
          <form action="">
            <div class="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>
            <div class="mb-8">
              <label class="form-label fs-9" for="">Password</label>
              <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>

<section class="position-relative py-12 py-lg-24 pb-xl-32 bg-danger-dark">
  <div class="container">
    <div class="mw-xs mw-md-lg mx-auto mw-md-5xl">
      <div class="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-xs mx-auto mw-lg-none">
        <div class="row">
          <div class="col-lg-4 mb-16 mb-lg-0">
            <div class="p-4 bg-danger bg-opacity-10 rounded-2">
              <div class="position-relative d-flex mb-4 align-items-end pt-9 bg-gradient-danger-top rounded-2 overflow-hidden" style="height: 276px;"><img class="img-fluid d-block w-100" src="vista-assets/images/team/team1.png" alt=""></div>
              <div class="position-relative p-4 bg-danger-dark rounded-2">
                <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 bottom-0 end-0 m-4"><a class="btn me-2 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>

<section class="position-relative pb-12 pb-lg-24 bg-danger-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="text-center mb-12">
      <h2 class="font-heading mb-4">Careers at Vista</h2>
      <p class="text-white text-opacity-50 mb-12">We are on our mission is to make bookkeeping simple. Join us to make bookkeeping fun.</p><a class="btn d-inline-flex align-items-center text-danger-dark btn-light border-2 border-secondary border-opacity-25" href="#">View Openings </a>
    </div>
    <div class="mw-5xl mx-auto">
      <div class="d-flex mb-24 align-items-center justify-content-center py-20 py-sm-40 bg-gradient-danger-top rounded-2">
        <div class="position-relative" style="width: 224px;">
          <div class="position-absolute top-50 start-50 mt-n16 translate-middle-x d-inline-block h-100 w-100 bg-gradient-danger-top rounded-pill" style="filter: blur(65px);"></div>

<section class="position-relative py-12 py-lg-24 bg-danger-dark overflow-hidden">
  <div class="container position-relative">
    <div class="text-center mb-16">
      <h3 class="font-heading text-gradient mb-4">One pricing plan for you</h3>
      <p class="text-white text-opacity-50 mb-0">Pricing that scales with your business immediately.</p>
    </div>
  </div>
  <div class="position-relative mb-20">
    <div class="position-absolute top-100 start-50 translate-middle-x py-20 px-32 bg-danger rounded-pill" style="filter: blur(220px);"></div>
    <div class="position-relative py-8 bg-danger-dark border-bottom border-white border-opacity-10">
      <div class="container position-relative">
        <div class="mw-5xl mx-auto">
          <div class="d-flex gap-8 flex-wrap align-items-center justify-content-center justify-content-lg-between"><img class="img-fluid d-block" style="height: 32px;" src="vista-assets/images/logos/aurevo-logo.svg" alt=""><img class="img-fluid d-block" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""><img class="img-fluid d-block" style="height: 32px;" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""><img class="img-fluid d-block" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""><img class="img-fluid d-block" style="height: 32px;" src="vista-assets/images/logos/cronix-logo.svg" alt=""></div>
        </div>
      </div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-xl mx-auto">
      <div class="p-10 bg-danger-dark bg-opacity-50 rounded-2" style="box-shadow: 1px -1px 1px 1px rgba(80, 106, 138, 0.10);">
        <div class="row mb-10">
          <div class="col-lg-6 mb-8 mb-lg-0">
            <h6 class="fs-5 mb-2">Custom</h6>
            <p class="mb-0 fs-9 text-white text-opacity-50">Choose resources for your needs</p>

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="mb-20"><span class="badge mb-4 text-danger-light" style="letter-spacing: 1.44px;">FEATURES</span>
        <h3 class="font-heading mb-4">Easy bookkeeping for your business</h3>
        <p class="mw-2xl fs-7 text-white text-opacity-75 mb-0">Our software provides intuitive bookkeeping solutions, allowing you to focus on growing your business rather than crunching numbers.</p>
      </div>
      <div class="px-6 pt-6 pb-8 mb-10 border border-white border-opacity-10 rounded-2">
        <div class="row mb-6 align-items-center">
          <div class="col-md-5 col-lg-4 mb-10 mb-md-0">
            <div class="mw-md-xs pt-8 pt-md-0 ps-8">
              <div class="d-flex mb-6 align-items-center justify-content-center border border-danger rounded-pill" style="width: 40px; height: 40px;">
                <div class="d-flex align-items-center justify-content-center bg-dark bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 32px; height: 32px;">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.3334 2.66675H4.66671C2.66671 2.66675 1.33337 3.66675 1.33337 6.00008V8.37341C1.33337 8.62008 1.58671 8.77341 1.80671 8.67341C2.46004 8.37341 3.21337 8.26008 4.00671 8.40008C5.76004 8.71341 7.04671 10.3401 7.00004 12.1201C6.99337 12.4001 6.95337 12.6734 6.88004 12.9401C6.82671 13.1467 6.99337 13.3401 7.20671 13.3401H11.3334C13.3334 13.3401 14.6667 12.3401 14.6667 10.0067V6.00008C14.6667 3.66675 13.3334 2.66675 11.3334 2.66675ZM8.00004 9.66675C7.08004 9.66675 6.33337 8.92008 6.33337 8.00008C6.33337 7.08008 7.08004 6.33341 8.00004 6.33341C8.92004 6.33341 9.66671 7.08008 9.66671 8.00008C9.66671 8.92008 8.92004 9.66675 8.00004 9.66675ZM12.8334 9.33341C12.8334 9.60675 12.6067 9.83341 12.3334 9.83341C12.06 9.83341 11.8334 9.60675 11.8334 9.33341V6.66675C11.8334 6.39341 12.06 6.16675 12.3334 6.16675C12.6067 6.16675 12.8334 6.39341 12.8334 6.66675V9.33341Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                    <path d="M3.33329 9.33325C1.85996 9.33325 0.666626 10.5266 0.666626 11.9999C0.666626 12.4999 0.806626 12.9733 1.05329 13.3733C1.51329 14.1466 2.35996 14.6666 3.33329 14.6666C4.30663 14.6666 5.15329 14.1466 5.61329 13.3733C5.85996 12.9733 5.99996 12.4999 5.99996 11.9999C5.99996 10.5266 4.80663 9.33325 3.33329 9.33325ZM4.64663 11.7799L3.22663 13.0933C3.13329 13.1799 3.00663 13.2266 2.88663 13.2266C2.75996 13.2266 2.63329 13.1799 2.53329 13.0799L1.87329 12.4199C1.67996 12.2266 1.67996 11.9066 1.87329 11.7133C2.06663 11.5199 2.38663 11.5199 2.57996 11.7133L2.89996 12.0333L3.96663 11.0466C4.16663 10.8599 4.48663 10.8733 4.67329 11.0733C4.85996 11.2733 4.84663 11.5933 4.64663 11.7799Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  </svg>
                </div>
              </div>
              <h4>Simple Accounting</h4>
            </div>
          </div>
          <div class="col-md-7 col-lg-8">
            <div class="p-8 px-sm-12 py-sm-14 bg-gradient-danger-bottom rounded-2"><img class="img-fluid d-block w-100" src="vista-assets/images/features/picture-pink1.png" alt=""></div>

<section class="position-relative bg-danger-dark overflow-hidden">
  <div class="py-12 py-lg-24 mb-24 bg-gradient-danger-top">
    <div class="container position-relative"><img class="d-none d-md-block position-absolute start-0 ms-20 top-0 mt-10" src="vista-assets/images/hero/stars-pattern1.svg" alt=""><img class="d-none d-md-block position-absolute end-0 me-20 top-0 mt-10" src="vista-assets/images/hero/stars-pattern2.svg" alt="">
      <div class="mw-3xl mx-auto mb-24 text-center">
        <h1 class="font-heading mb-6">Our mission is to make bookkeeping simple</h1>
      </div>
      <div class="p-10 bg-danger-dark rounded-2">
        <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">
            <div class="d-flex justify-content-center">

<section class="pb-12 pb-lg-24 pb-xl-32 bg-danger-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 py-24 bg-danger-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-danger 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-danger"></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>
        <div class="d-flex mb-4 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>

<section class="position-relative pt-12 pt-lg-24 pb-32 pb-md-64 bg-gradient-danger-top">
  <div class="container position-relative">
    <div class="row">
      <div class="col-lg-4 mb-12 mb-lg-0">
        <div><img class="img-fluid d-block" src="vista-assets/images/logos/vista-logo.svg" alt=""></div>
      </div>
      <div class="col-lg-8">
        <div class="row mb-n8">
          <div class="col-6 col-md-3 mb-8"><span class="d-block mb-6 fw-semibold fs-7">Product</span>
            <ul class="list-unstyled">
              <li class="mb-6"><a class="btn btn-link p-0 text-white fs-7" href="#">Features</a></li>
              <li class="mb-6"><a class="btn btn-link p-0 text-white fs-7" href="#">How it works</a></li>
              <li><a class="btn btn-link p-0 text-white fs-7" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-3 mb-8"><span class="d-block mb-6 fw-semibold fs-7">Company</span>
            <ul class="list-unstyled">
              <li class="mb-6"><a class="btn btn-link p-0 text-white fs-7" href="#">About</a></li>
              <li class="mb-6"><a class="btn btn-link p-0 text-white fs-7" href="#">Blog</a></li>
              <li class="mb-6"><a class="btn btn-link p-0 text-white fs-7" href="#">FAQs</a></li>
              <li><a class="btn btn-link p-0 text-white fs-7" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-3 mb-8"><span class="d-block mb-6 fw-semibold fs-7">Socials</span>

<section class="position-relative py-12 py-md-24 py-lg-32 bg-danger-dark">
  <div class="container">
    <div class="mw-lg mx-auto text-center"><img class="img-fluid d-block mx-auto mb-24" src="vista-assets/images/http-codes/http-code-pink1.png" alt="">
      <h4 class="font-heading mb-4">Oops. Page not found.</h4>
      <p class="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-danger 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>
</section>

<section class="position-relative py-24 bg-danger-dark">
  <div class="container">
    <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>
        <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="row mb-12 mb-lg-20">
        <div class="col-lg-8 mb-12 mb-lg-0"><img class="img-fluid d-block w-100 h-100" src="vista-assets/images/blog-content/placeholder-pink.png" alt=""></div>
        <div class="col-lg-4">
          <div class="h-100 bg-gradient-danger-bottom rounded-3" style="padding: 2px;">
            <div class="d-flex flex-column align-items-center h-100 px-10 pt-20 text-center bg-danger-dark rounded-3">
              <h4 class="mb-4">Start Bookkeeping Today</h4>
              <p class="px-4 text-white text-opacity-50 mb-10">Streamline your bookkeeping journey and pave the way for a prosperous future.</p><a class="btn mb-12 btn-light bg-white border-2 border-dark border-opacity-10" href="#">Sign up now</a><img class="img-fluid d-block mx-auto mt-auto" src="vista-assets/images/blog-content/shapes.svg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <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-pink-small.png" alt="">
            <h6 class="font-heading mb-3">Make Your Phone Your Best Study Tool</h6><span class="d-block fs-9 fw-medium mb-3">17 Jul 2023</span>
            <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><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span></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-pink-small.png" alt="">
            <h6 class="font-heading mb-3">Make Your Phone Your Best Study Tool</h6><span class="d-block fs-9 fw-medium mb-3">17 Jul 2023</span>

<section class="py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <h1 class="font-heading mb-6">FAQ</h1>
      <p class="d-inline-flex flex-wrap mb-16"><span class="d-inline-block me-1 text-white text-opacity-50">Still have more questions?</span><a class="btn p-0 btn-outline-danger 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 class="row">
        <div class="col-lg-6 mb-6 mb-lg-0">
          <div class="position-relative">
            <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-start">
                <h6 class="fs-7 mb-0">Do you facilitate any regular events or offer rooms for?</h6><span class="ms-5">
                  <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></span>
              </div>
            </button>
            <button class="btn d-block w-100 px-0 pt-6 pb-0 text-start fw-normal border-0 border-top border-white border-opacity-10 rounded-0">
              <div class="d-flex justify-content-between align-items-start">
                <h6 class="fs-7 mb-0">Can I make it a fun group study session by inviting?</h6><span class="ms-5">
                  <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>

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-danger-dark">
    <div class="container">
      <div class="d-flex align-items-center"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 24px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""></a><span class="ms-4 me-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><a class="btn p-0" href="#">Careers</a></div>
      <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="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">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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-6 pb-10 px-8 bg-white overflow-auto">
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="vista-assets/images/logos/vista-logo-dark.svg" alt=""></a><a class="navbar-close" href="#">

<section class="position-relative pt-8 pb-12 pb-lg-24 pb-xl-32 bg-danger-dark">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none"><img class="img-fluid d-block mb-20 mb-lg-32" src="vista-assets/images/logos/vista-logo.svg" alt="">
      <div class="row">
        <div class="col-lg-6 mt-16 mt-lg-0 order-last order-lg-first"><img class="img-fluid" src="vista-assets/images/sign-up/picture-pink2.png" alt=""></div>
        <div class="col-lg-6">
          <div class="mw-lg-sm ms-lg-auto">
            <div class="mb-8">
              <h2 class="font-heading h4 mb-4">Sign up</h2>
              <p class="mb-0">Enter your details below to register an account.</p>
            </div>
            <form action="">
              <div class="mb-6">
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="text" id="" aria-describedby="" placeholder="Name">
              </div>
              <div class="mb-6">
                <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>

<section class="position-relative py-12 py-md-24 bg-danger-dark">
  <div class="container">
    <div class="mw-2xl mw-lg-5xl mx-auto py-12 px-8 px-sm-12 rounded-2 bg-danger bg-opacity-10"><span class="badge text-danger mb-4" style="letter-spacing: 1.44px;">STATS</span>
      <h4 class="font-heading fw-semibold mb-20">We’re just getting started but...</h4>
      <div class="row">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="ps-12 border-start border-white border-opacity-10">
            <h2 class="fw-semibold mb-6">2024</h2><span class="d-block fs-7 fw-medium text-white text-opacity-25 mb-5 fs-6">FOUNDED</span>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="ps-12 border-start border-white border-opacity-10">
            <h2 class="fw-semibold mb-6">$55,199.00</h2><span class="d-block fs-7 fw-medium text-white text-opacity-25 mb-5 fs-6">REVENUE SAVED</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-md mw-md-xl mw-lg-3xl mx-auto mb-20"><img class="img-fluid d-block mx-auto mb-10" src="vista-assets/images/testimonials/quote.svg" alt="">
      <h3 class="font-heading text-center fw-semibold mb-10"><span>We’re</span> <span class="text-danger-light">very happy</span> <span>that they are created this amazing bookkeeping software.</span></h3>
      <div class="d-flex align-items-center justify-content-center mb-10">
        <svg width="1" height="80" viewBox="0 0 1 80" fill="none" xmlns="http://www.w3.org/2000/svg">
          <line x1="0.5" y1="2.18557e-08" x2="0.499997" y2="80" stroke="white" stroke-opacity="0.2" style="stroke:white;stroke-opacity:0.2;"></line>
        </svg>
      </div>
      <div class="d-flex flex-wrap flex-sm-nowrap align-items-center justify-content-center justify-content-sm-between gap-6"><a class="order-first btn d-inline-flex align-items-center btn-danger border-2 border-white border-opacity-10 rounded-pill" href="#" style="width: 56px; height: 56px;">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.75 19.5L8.25 12L15.75 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a>
        <div class="col-12 col-sm-auto text-center">
          <div class="d-inline-flex align-items-center ps-2 py-2 pe-8 bg-white bg-opacity-10 rounded-pill"><img class="img-fluid" src="vista-assets/images/testimonials/avatar.png" alt="">
            <div class="ms-4 text-start"><span class="d-block fw-semibold">Cooper Levin</span><span class="fs-9 text-secondary">Founder of AIME Inc.</span></div>
          </div>
        </div><a class="order-first order-sm-last btn d-inline-flex align-items-center btn-danger border-2 border-white border-opacity-10 rounded-pill" href="#" style="width: 56px; height: 56px;">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a>
      </div>
    </div>
  </div>

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-sm mw-md-lg mw-lg-6xl mx-auto">
      <h6 class="text-center font-heading mb-16">Trusted by over 10,000 companies</h6>
      <div class="row justify-content-center justify-content-lg-between mb-n10">
        <div class="col-sm-4 col-4 col-lg-auto mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/aurevo-logo.svg" alt=""></div>
        <div class="col-sm-4 col-4 col-lg-auto mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
        <div class="col-sm-4 col-4 col-lg-auto mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
        <div class="col-sm-4 col-4 col-lg-auto mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-sm-4 col-4 col-lg-auto mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
      </div>
      <div class="row justify-content-center justify-content-lg-between mt-10 mt-lg-20 mb-n10">
        <div class="col-sm-4 col-4 col-lg-auto mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
        <div class="col-sm-4 col-4 col-lg-auto mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/cronix-logo.svg" alt=""></div>
        <div class="col-sm-4 col-4 col-lg-auto mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
        <div class="col-sm-4 col-4 col-lg-auto mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
        <div class="col-sm-4 col-4 col-lg-auto mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
      </div>
      <div class="mt-20 text-center"><a class="btn p-0 fs-9 border-0" href="#"><span class="me-2">Meet our customers</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></div>
    </div>
  </div>

<section class="position-relative py-12 py-lg-24 bg-danger-dark position-relative">
  <div class="container">
    <div class="mw-md mw-md-xl mx-auto mw-lg-5xl"><span class="mb-4 badge text-danger-light" style="letter-spacing: 1.44px;">HOW IT WORKS</span>
      <h3 class="mw-3xl font-heading mb-20">See how we simplifies your financial tasks</h3>
      <div class="row">
        <div class="col-lg-4 mb-10 mb-lg-0">
          <div class="position-relative mw-sm mw-lg-xs mx-auto mx-lg-0 px-6">
            <div class="position-relative rounded-2 overflow-hidden" style="padding: 1.5px;">
              <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-danger-bottom" style="transform: scaleX(400%) rotate(-90deg);"></div>
              <div class="position-relative p-6 text-center bg-danger-dark rounded-2">
                <div class="d-inline-flex mb-4 align-items-center justify-content-center bg-gradient-danger-bottom rounded-pill" style="width: 40px; height: 40px;"><span class="fs-7 fw-bold">1</span></div>
                <p class="fs-9 mb-0">Record your financial transactions such as receipts, and other relevant documents.</p>
              </div>
            </div><img class="d-none d-lg-block position-absolute top-50 start-100 ms-n7 w-25 translate-middle-y img-fluid" src="vista-assets/images/how-it-works/line-pink.svg" alt="">
          </div>
        </div>
        <div class="col-lg-4 mb-10 mb-lg-0">
          <div class="position-relative mw-sm mw-lg-xs mx-auto mx-lg-0 px-6">
            <div class="position-relative rounded-2 overflow-hidden" style="padding: 1.5px;">
              <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-danger-bottom" style="transform: scaleX(400%) rotate(-90deg);"></div>
              <div class="position-relative p-6 text-center bg-danger-dark rounded-2">
                <div class="d-inline-flex mb-4 align-items-center justify-content-center bg-gradient-danger-bottom rounded-pill" style="width: 40px; height: 40px;"><span class="fs-7 fw-bold">1</span></div>
                <p class="fs-9 mb-0">Record your financial transactions such as receipts, and other relevant documents.</p>
              </div>

<section class="position-relative py-12 py-md-24 py-lg-40 bg-danger-dark">
  <div class="container position-relative"><img class="d-none d-md-block position-absolute start-0 top-0 ms-4" src="vista-assets/images/hero/stars-pattern1.svg" alt=""><img class="d-none d-md-block position-absolute end-0 top-0 me-4" src="vista-assets/images/hero/stars-pattern2.svg" alt="">
    <div class="mw-lg mw-lg-3xl mx-auto text-center position-relative">
      <h3 class="font-heading mb-4">Start Bookkeeping Today</h3>
      <p class="fs-7 text-white mb-16">Sign up now to streamline your bookkeeping journey and pave the way for a prosperous future.</p>
      <div class="position-relative mw-sm mx-auto" style="height: 48px;">
        <div class="bg-danger bg-opacity-50" 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-danger-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-danger-dark btn-light border border-white border-opacity-10" type="submit">Get Started</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-8 pb-12 pb-lg-24 pb-xl-32 bg-danger-dark">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none"><img class="img-fluid d-block mb-20 mb-lg-32" src="vista-assets/images/logos/vista-logo.svg" alt="">
      <div class="row">
        <div class="col-lg-6 mt-16 mt-lg-0 order-last order-lg-first"><img class="img-fluid" src="vista-assets/images/sign-up/picture-pink2.png" alt=""></div>
        <div class="col-lg-6">
          <div class="mw-lg-sm ms-lg-auto">
            <div class="mb-8">
              <h2 class="font-heading h4 mb-4">Welcome back</h2>
              <p class="mb-0">Enter your details below to register an account.</p>
            </div>
            <form action="">
              <div class="mb-6">
                <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>