Hero Section Components in Vista library

<section class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-pink-500 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </nav>
        <div class="relative pt-24 pb-14">
            <img class="absolute left-1/2 top-0 transform -translate-x-1/2" src="vista-assets/images/hero/lines.svg" alt="">
            <img class="hidden lg:block absolute left-4 xl:left-36 2xl:left-56 3xl:left-96 top-80 xl:top-64" src="vista-assets/images/hero/cursor-pink1.png" alt="">
            <img class="hidden lg:block absolute right-4 xl:right-36 2xl:right-56 3xl:right-96 top-80" src="vista-assets/images/hero/cursor-pink2.png" alt="">
            <div class="relative z-50">
                <h1 class="font-heading text-white text-center text-4xl sm:text-5xl md:text-7xl font-bold max-w-sm sm:max-w-xl md:max-w-3xl mx-auto mb-6">Bookkeeping tools tailored for business owners</h1>
                <p class="text-center text-white text-lg mb-12">Daily bookkeeping for the modern business owner.</p>
                <div class="mb-20 text-center">
                    <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-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                            <p class="mr-2 text-pinkSecondary-900">Get started</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M9.43032 8.28857L9.4303 8.28856L9.42602 8.29284L6.45312 11.2657V8.20662V4.7275L8.11268 6.38706L9.42602 7.70039C9.59121 7.86558 9.58501 8.13574 9.43032 8.28857Z" fill="black" stroke="currentColor" stroke-width="2"></path>
                            </svg>
                        </div>
                    </a>
                </div>
                <img class="w-full object-cover" src="vista-assets/images/hero/dashboard-pink1.png" alt="">
            </div>
        </div>
    </div>
    <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img src="vista-assets/images/logos/vista-logo-dark.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12 my-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Features</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Pricing</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">About</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Contact</a>
                </li>
            </ul>
            <div class="text-center">
                <a href="#" class="inline-flex items-center gap-2 text-black hover:text-opacity-80 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </nav>
    </div>
</section>

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-danger-dark 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">
        <ul class="navbar-nav bg-white p-1 bg-opacity-10 rounded-pill">
          <li class="nav-item me-2"><a class="nav-link bg-white bg-opacity-10 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 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>
  </nav>
  <div class="position-relative py-12 py-lg-24 bg-gradient-danger-top"><img class="position-absolute top-0 start-0 w-100" src="vista-assets/images/hero/lines.svg" alt="">
    <div class="container position-relative">
      <div class="mw-xl mw-lg-2xl mw-xl-3xl mx-auto mb-20 mb-lg-40 mb-xl-20 text-center">
        <h1 class="font-heading text-gradient text-shadow mb-6"><span>Bookkeeping tools tailored for business</span><span class="d-block">owners</span></h1>
        <p class="fs-8 mb-12">Daily bookkeeping for the modern business owner.</p><a class="btn d-inline-flex align-items-center text-danger-dark btn-light border-2 border-danger border-opacity-25" href="#"><span class="me-2">Get started</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.43032 8.28857L9.4303 8.28856L9.42602 8.29284L6.45312 11.2657V8.20662V4.7275L8.11268 6.38706L9.42602 7.70039C9.59121 7.86558 9.58501 8.13574 9.43032 8.28857Z" fill="currentColor" stroke="currentColor" stroke-width="2"></path>
          </svg></a>
      </div><img class="d-none d-md-block position-absolute start-0 ms-20 ms-lg-6 top-0 mt-40 mt-lg-64 mt-xl-40 col-2 col-lg-auto" src="vista-assets/images/hero/cursor-pink1.png" alt=""><img class="d-none d-md-block position-absolute end-0 me-20 me-lg-6 top-0 mt-52 mt-lg-72 mt-xl-52 col-2 col-lg-auto" src="vista-assets/images/hero/cursor-pink2.png" alt=""><img class="img-fluid d-block w-100" src="vista-assets/images/hero/dashboard-pink1.png" alt="">
    </div>
  </div>
  <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="#">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M23.2 8.79999L8.80005 23.2M8.80005 8.79999L23.2 23.2" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="pt-20 pb-12">
        <ul class="nav flex-column">
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Home</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Features</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Pricing</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">About</a></li>
          <li class="nav-item"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="mt-auto"><a class="btn w-100 btn-danger-dark" 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>
    </nav>
  </div>
</section>