About Components in Vista library

<section class="bg-darkPink-900 pt-24 pb-28">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-center mb-28 text-5xl md:text-7xl font-bold max-w-4xl mx-auto">Our mission is to make bookkeeping simple</h1>
        <div class="relative mx-auto mb-32 max-w-sm">
            <div class="absolute left-0 top-0 bg-pink-500 blur-3xl filter opacity-50 rounded-full h-full w-full"></div>
            <img class="relative z-50" style="height:400px" src="vista-assets/images/logos/vista-logo-small-dark.svg" alt="">
        </div>
        <div class="border-b border-pink-500 pb-9 mb-20">
            <div class="flex flex-wrap items-stretch -m-4">
                <div class="w-full md:w-1/3 lg:w-1/2 p-4">
                    <div class="border-r border-transparent md:border-white md:border-opacity-10 flex flex-col justify-center h-full">
                        <p class="text-white text-center md:text-left text-opacity-50 mb-2">Investors</p>
                        <p class="text-white text-center md:text-left mx-auto md:mx-0 text-2xl font-semibold max-w-xs">Funded by industry-leading investors</p>
                    </div>
                </div>
                <div class="w-full md:w-1/3 lg:w-1/4 p-4">
                    <div class="border-r border-transparent md:border-white md:border-opacity-10 flex flex-col justify-center h-full">
                        <p class="text-white text-opacity-50 mb-2 text-center">Team members</p>
                        <p class="text-white text-5xl font-bold text-center">110</p>
                    </div>
                </div>
                <div class="w-full md:w-1/3 lg:w-1/4 p-4">
                    <div class="flex flex-col justify-center h-full">
                        <p class="text-white text-opacity-50 mb-2 text-center">Founded in</p>
                        <p class="text-white text-5xl font-bold text-center">2024</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -m-4 mb-32">
            <div class="w-full lg:w-1/2 p-4">
                <p class="text-white text-xl max-w-lg">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>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <p class="text-white text-xl max-w-3xl">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 class="bg-pinkSecondary-900 rounded-3xl py-20 px-4 mb-32">
            <p class="uppercase text-center text-sweetPink-400 tracking-widest text-xs mb-4">CAREERS</p>
            <h2 class="font-heading text-white text-center text-4xl md:text-5xl font-bold mb-4">Join our amazing global team</h2>
            <p class="text-white text-opacity-70 mb-10 text-center max-w-4xl mx-auto">We're a small but strong team that enjoys having a lot of ownership and autonomy. We take pride in our work and come from places such as Pipe, AngelList, and - to name a few.</p>
            <div class="flex justify-center">
                <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full shadow-pink">
                    <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                    <div class="relative z-50 flex items-center py-3 px-5 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                        <p class="text-pinkSecondary-900">Open positions</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="rounded-3xl bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 py-20 px-7 md:px-14 relative overflow-hidden">
            <img class="absolute top-0 right-0 object-cover h-80" src="vista-assets/images/about/illustration-pink.svg" alt="">
            <div class="relative z-50">
                <h2 class="font-heading text-white text-4xl md:text-5xl font-bold mb-10 max-w-md md:max-w-lg">Ready to make accounting a breeze?</h2>
                <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full">
                    <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                    <div class="relative z-50 flex items-center py-3 px-5 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                        <p class="text-pinkSecondary-900">Get Started</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

<section class="position-relative py-12 py-lg-24 bg-danger-dark overflow-hidden">
  <div class="container">
    <div class="mw-4xl mx-auto mb-16 mb-sm-32 text-center">
      <h1 class="font-heading mb-12 mb-sm-24">Our mission is to make bookkeeping simple</h1>
      <div class="position-relative mx-auto mw-sm">
        <div class="position-absolute start-0 top-0 mt-n10 bg-gradient-danger-top opacity-50 rounded-pill h-100 w-100" style="filter: blur(90px);"></div><img class="position-relative img-fluid" style="height:400px" src="vista-assets/images/logos/vista-logo-small-dark.svg" alt="">
      </div>
    </div>
    <div class="mw-xs mw-sm-xl mx-auto mb-8 mw-lg-none">
      <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">
            <div class="text-center"><span class="d-block mb-1 text-white text-opacity-50">Founded in</span><span class="d-block fs-3 text-white fw-bold">2024</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-20 mb-14 mb-md-32 mb-border-top border-2 border-danger">
      <div class="row">
        <div class="col-lg-5 mb-6 mb-lg-0">
          <div>
            <p class="fs-6 mb-0">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>
          </div>
        </div>
        <div class="col-lg-7">
          <div class="mw-lg-lg mw-xl-xl ms-lg-auto">
            <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>
    <div class="mb-14 mb-md-24 py-16 py-md-20 px-8 px-md-16 px-lg-32 bg-danger bg-opacity-10 rounded-2">
      <div class="mw-2xl mx-auto text-center"><span class="badge mb-4 text-danger-light" style="letter-spacing: 1.44px;">CAREERS</span>
        <h3 class="font-heading mb-4">Join our amazing global team</h3>
        <p class="text-white text-opacity-50 mb-10">We're a small but strong team that enjoys having a lot of ownership and autonomy. We take pride in our work and come from places such as Pipe, AngelList, and - to name a few.</p>
        <div class="position-relative">
          <div class="position-absolute start-50 top-50 translate-middle bg-white bg-opacity-25 rounded-pill px-20 py-6" style="filter: blur(26px);"></div><a class="position-relative btn d-inline-flex align-items-center text-danger-dark btn-light border-2 border-danger-dark border-opacity-50" href="#">Open positions</a>
        </div>
      </div>
    </div>
    <div class="py-16 py-md-20 px-8 px-sm-14 bg-gradient-danger-top rounded-2 position-relative overflow-hidden"><img class="position-absolute top-0 end-0 h-100 img-fluid" src="vista-assets/images/cta/illustration-pink.svg" alt="">
      <div class="mw-sm mw-lg-lg position-relative">
        <h3 class="font-heading mb-10">Ready to make accounting a breeze?</h3><a class="btn d-inline-flex align-items-center text-danger-dark btn-light border-2 border-dark border-opacity-25" href="#">Get started</a>
      </div>
    </div>
  </div>
</section>