Shuffle 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 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="container mx-auto px-4">
                <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>
            </div>
        </nav>
        <div class="relative pt-24 pb-14">
            <img class="hidden lg:block absolute left-16 xl:left-36 2xl:left-56 3xl:left-96 top-56" src="vista-assets/images/hero/stars-pattern1.svg" alt="">
            <img class="hidden lg:block absolute right-4 xl:right-36 2xl:right-56 3xl:right-96 top-56" src="vista-assets/images/hero/stars-pattern2.svg" 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-6xl mx-auto mb-6">Bookkeeping tools tailored for business owners</h1>
                <p class="text-center text-white max-w-xl mx-auto text-lg mb-12">From effortless transaction tracking to insightful financial reports, take control of your finances with precision and ease.</p>
                <div class="mb-40 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="text-pinkSecondary-900">Get started for free</p>
                        </div>
                    </a>
                </div>
                <img class="w-full object-cover" src="vista-assets/images/hero/dashboard-pink2.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 class="relative bg-darkPink-900 overflow-hidden" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="relative z-50 py-5 border-b border-white border-opacity-10">
            <div class="container mx-auto px-4">
                <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>
            </div>
        </nav>
        <div class="pt-24 pb-14">
            <img class="absolute right-0 top-0" src="vista-assets/images/hero/illustration.png" alt="">
            <div class="relative z-50">
                <p class="mb-6 uppercase text-pink-400 text-xs tracking-widest">For Business Owners</p>
                <h1 class="font-heading text-white text-4xl sm:text-5xl md:text-7xl font-semibold max-w-5xl mb-6">Bookkeeping tools tailored for business owners</h1>
                <p class="text-white max-w-lg text-lg mb-12">Uncover the simplicity of effective financial management designed exclusively for business owners.</p>
                <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                    <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 rounded-full"></div>
                    <div class="relative z-50 flex items-center py-2 px-4 bg-pink-500 group-hover:bg-pink-600 group-focus:bg-pink-600 rounded-full transition duration-200">
                        <p class="text-white">Get started for free</p>
                    </div>
                </a>
            </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 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="flex flex-wrap -m-4 pt-24 pb-40">
            <div class="w-full lg:w-1/2 p-4">
                <h1 class="font-heading text-white text-4xl sm:text-5xl md:text-7xl font-bold max-w-xs md:max-w-lg mb-6">Bookkeeping tools tailored for business owners</h1>
                <p class="text-white text-lg max-w-lg mb-12">From effortless transaction tracking to insightful financial reports, take control of your finances with ease.</p>
                <a href="#" class="group relative inline-block mb-6 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>
                <p class="text-white text-sm text-opacity-70">Free, forever, with unlimited users.</p>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <img src="vista-assets/images/hero/illustration2.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 class="bg-gradient-to-b 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="pt-24">
            <h1 class="font-heading text-white text-center text-4xl sm:text-5xl md:text-7xl font-bold max-w-7xl mx-auto mb-6">Bookkeeping tools tailored for business owners</h1>
            <p class="text-white text-center text-lg mb-12">Daily bookkeeping for the modern business owner.</p>
            <div class="mb-24 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="mx-auto" src="vista-assets/images/hero/illustration3.png" alt="">
        </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 class="bg-gradient-to-b from-darkBlue-900 via-blue-700 to-blue-400" 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-blue-800 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-blue1.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-blue2.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-darkBlue-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-blue1.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 class="bg-gradient-to-b from-darkBlue-900 via-blue-700 to-blue-400" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="container mx-auto px-4">
                <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-blue-800 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>
            </div>
        </nav>
        <div class="relative pt-24 pb-14">
            <img class="hidden lg:block absolute left-16 xl:left-36 2xl:left-56 3xl:left-96 top-56" src="vista-assets/images/hero/stars-pattern1.svg" alt="">
            <img class="hidden lg:block absolute right-4 xl:right-36 2xl:right-56 3xl:right-96 top-56" src="vista-assets/images/hero/stars-pattern2.svg" 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-6xl mx-auto mb-6">Bookkeeping tools tailored for business owners</h1>
                <p class="text-center text-white max-w-xl mx-auto text-lg mb-12">From effortless transaction tracking to insightful financial reports, take control of your finances with precision and ease.</p>
                <div class="mb-40 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="text-darkBlue-900">Get started for free</p>
                        </div>
                    </a>
                </div>
                <img class="w-full object-cover" src="vista-assets/images/hero/dashboard-blue2.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 class="relative bg-darkBlue-900 overflow-hidden" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="relative z-50 py-5 border-b border-white border-opacity-10">
            <div class="container mx-auto px-4">
                <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-blue-800 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>
            </div>
        </nav>
        <div class="pt-24 pb-14">
            <img class="absolute right-0 top-0" src="vista-assets/images/hero/illustration-blue1.png" alt="">
            <div class="relative z-50">
                <p class="mb-6 uppercase text-blue-400 text-xs tracking-widest">For Business Owners</p>
                <h1 class="font-heading text-white text-4xl sm:text-5xl md:text-7xl font-semibold max-w-5xl mb-6">Bookkeeping tools tailored for business owners</h1>
                <p class="text-white max-w-lg text-lg mb-12">Uncover the simplicity of effective financial management designed exclusively for business owners.</p>
                <a href="#" class="bg-gradient-to-t from-darkBlue-900 via-blue-700 to-blue-200 rounded-full p-px text-white group inline-block">
                    </a><a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full shadow-blue hover:shadow-none focus:shadow-none">
                        <div class="absolute inset-0 bg-gradient-to-b from-blue-400 to-blue-500 rounded-full"></div>
                        <div class="relative z-50 flex items-center py-2 px-4 bg-blue-500 group-hover:bg-blue-600 group-focus:bg-blue-600 rounded-full transition duration-200">
                            <p class="text-white">Get started for free</p>
                        </div>
                    </a>
                
            </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 class="bg-gradient-to-b from-darkBlue-900 via-blue-700 to-blue-400" 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-blue-800 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="flex flex-wrap -m-4 pt-24 pb-40">
            <div class="w-full lg:w-1/2 p-4">
                <h1 class="font-heading text-white text-4xl sm:text-5xl md:text-7xl font-bold max-w-xs md:max-w-lg mb-6">Bookkeeping tools tailored for business owners</h1>
                <p class="text-white text-lg max-w-lg mb-12">From effortless transaction tracking to insightful financial reports, take control of your finances with ease.</p>
                <a href="#" class="group relative inline-block mb-6 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-blueSecondary-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>
                <p class="text-white text-sm text-opacity-70">Free, forever, with unlimited users.</p>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <img src="vista-assets/images/hero/illustration-blue2.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 class="bg-gradient-to-t from-darkBlue-900 via-blue-700 to-blue-400" 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-blue-800 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="pt-24">
            <h1 class="font-heading text-white text-center text-4xl sm:text-5xl md:text-7xl font-bold max-w-7xl mx-auto mb-6">Bookkeeping tools tailored for business owners</h1>
            <p class="text-white text-center text-lg mb-12">Daily bookkeeping for the modern business owner.</p>
            <div class="mb-24 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-blueSecondary-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="mx-auto" src="vista-assets/images/hero/illustration3.png" alt="">
        </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 class="bg-gradient-to-t from-green-400 via-green-500 to-darkGreen-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-green-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-green1.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-green2.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-darkGreen-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-green1.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 class="bg-gradient-to-t from-green-400 via-green-500 to-darkGreen-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="container mx-auto px-4">
                <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-green-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>
            </div>
        </nav>
        <div class="relative pt-24 pb-14">
            <img class="hidden lg:block absolute left-16 xl:left-36 2xl:left-56 3xl:left-96 top-56" src="vista-assets/images/hero/stars-pattern1.svg" alt="">
            <img class="hidden lg:block absolute right-4 xl:right-36 2xl:right-56 3xl:right-96 top-56" src="vista-assets/images/hero/stars-pattern2.svg" 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-6xl mx-auto mb-6">Bookkeeping tools tailored for business owners</h1>
                <p class="text-center text-white max-w-xl mx-auto text-lg mb-12">From effortless transaction tracking to insightful financial reports, take control of your finances with precision and ease.</p>
                <div class="mb-40 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="text-blueSecondary-900">Get started for free</p>
                        </div>
                    </a>
                </div>
                <img class="w-full object-cover" src="vista-assets/images/hero/dashboard-green2.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 class="relative bg-darkGreen-900 overflow-hidden" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="relative z-50 py-5 border-b border-white border-opacity-10">
            <div class="container mx-auto px-4">
                <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-green-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>
            </div>
        </nav>
        <div class="pt-24 pb-14">
            <img class="absolute right-0 top-0" src="vista-assets/images/hero/illustration-green1.png" alt="">
            <div class="relative z-50">
                <p class="mb-6 uppercase text-green-400 text-xs tracking-widest">For Business Owners</p>
                <h1 class="font-heading text-white text-4xl sm:text-5xl md:text-7xl font-semibold max-w-5xl mb-6">Bookkeeping tools tailored for business owners</h1>
                <p class="text-white max-w-lg text-lg mb-12">Uncover the simplicity of effective financial management designed exclusively for business owners.</p>
                <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full shadow-green hover:shadow-none focus:shadow-none">
                    <div class="absolute inset-0 bg-gradient-to-b from-green-400 to-green-500 rounded-full"></div>
                    <div class="relative z-50 flex items-center py-2 px-4 bg-green-500 group-hover:bg-green-600 group-focus:bg-green-600 rounded-full transition duration-200">
                        <p class="text-white">Get started for free</p>
                    </div>
                </a>
            </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 class="bg-gradient-to-t from-green-400 via-green-500 to-darkGreen-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-green-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="flex flex-wrap -m-4 pt-24 pb-40">
            <div class="w-full lg:w-1/2 p-4">
                <h1 class="font-heading text-white text-4xl sm:text-5xl md:text-7xl font-bold max-w-xs md:max-w-lg mb-6">Bookkeeping tools tailored for business owners</h1>
                <p class="text-white text-lg max-w-lg mb-12">From effortless transaction tracking to insightful financial reports, take control of your finances with ease.</p>
                <a href="#" class="group relative inline-block mb-6 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-greenSecondary-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>
                <p class="text-white text-sm text-opacity-70">Free, forever, with unlimited users.</p>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <img src="vista-assets/images/hero/illustration-green2.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 class="bg-gradient-to-b from-green-400 via-green-500 to-darkGreen-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-dark.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-black text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-black text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-black text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-black text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-black 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-black hover:text-green-700 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="pt-24">
            <h1 class="font-heading text-white text-center text-4xl sm:text-5xl md:text-7xl font-bold max-w-7xl mx-auto mb-6">Bookkeeping tools tailored for business owners</h1>
            <p class="text-white text-center text-lg mb-12">Daily bookkeeping for the modern business owner.</p>
            <div class="mb-24 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-greenSecondary-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="mx-auto" src="vista-assets/images/hero/illustration3.png" alt="">
        </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 class="bg-darkPink-900 pt-24 pb-56">
    <div class="container mx-auto px-4">
        <div class="pb-24 mb-24 border-b border-white border-opacity-20 border-dashed">
            <div class="flex items-start justify-between flex-wrap gap-6">
                <div class="order-last sm:order-first">
                    <h1 class="font-heading text-white text-4xl md:text-6xl font-bold mb-6">Careers at Vista</h1>
                    <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="text-pinkSecondary-900">View Openings</p>
                        </div>
                    </a>
                </div>
                <div class="relative">
                    <div class="absolute left-0 top-0 bg-pink-500 blur-xl filter opacity-50 h-full w-full"></div>
                    <img class="h-16 relative z-50" src="vista-assets/images/logos/vista-logo-small.svg" alt="">
                </div>
            </div>
        </div>
        <h2 class="font-heading text-white text-4xl font-bold mb-4">Benefits</h2>
        <p class="text-white text-opacity-70 mb-16 max-w-2xl">Our team receives support, enjoys ample vacation time, opportunities to give back, and the financial resources they need to thrive both inside and outside of work.</p>
        <div class="flex flex-wrap -m-4 lg:mb-16">
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/wallet.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Inclusive Health Package</p>
                        <p class="text-white text-opacity-70 max-w-xs">We care for your well-being, no health expense stress.</p>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/weight.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Free Gym Membership</p>
                        <p class="text-white text-opacity-70 max-w-xs">Enjoy a complimentary gym membership for your fitness.</p>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/global.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Flexible Working Style</p>
                        <p class="text-white text-opacity-70 max-w-xs">We're fully remote, working across time zones.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -m-4 mb-24">
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/happyemoji.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Balanced Working Life</p>
                        <p class="text-white text-opacity-70 max-w-xs">Enjoy 4-week vacations. Recharge as needed.</p>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/messages.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Diversity and Inclusion</p>
                        <p class="text-white text-opacity-70 max-w-xs">Diversity in team members and inclusive culture.</p>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/blur.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Generous Perks Program</p>
                        <p class="text-white text-opacity-70 max-w-xs">We offer stipends for home office, learning, and wellness perks.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -m-4 mb-24">
            <div class="w-full lg:w-2/3 p-4">
                <h2 class="font-heading text-white text-4xl font-bold mb-4 max-w-xs">Our hiring process</h2>
                <p class="text-white text-opacity-70 max-w-lg">Our interview process aims to ensure Vista is the right fit for you just as much as ensuring you are the right fit for Vista. We encourage you to apply and see for yourself what makes us a great place to work!</p>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="flex lg:justify-end gap-6">
                    <div class="relative">
                        <div class="relative z-50">
                            <div class="rounded-full bg-pink-500 py-1 w-8 h-8 flex items-center justify-center mb-4">
                                <span class="text-white text-sm font-bold">1</span>
                            </div>
                            <div class="rounded-full bg-pink-500 py-1 w-8 h-8 flex items-center justify-center mb-4">
                                <span class="text-white text-sm font-bold">2</span>
                            </div>
                            <div class="rounded-full bg-pink-500 py-1 w-8 h-8 flex items-center justify-center mb-4">
                                <span class="text-white text-sm font-bold">3</span>
                            </div>
                            <div class="rounded-full bg-pink-500 py-1 w-8 h-8 flex items-center justify-center">
                                <span class="text-white text-sm font-bold">4</span>
                            </div>
                        </div>
                        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 bg-pink-500 h-full w-px"></div>
                    </div>
                    <div class="flex flex-col gap-5">
                        <p class="text-white text-lg font-semibold">Candidate screening</p>
                        <p class="text-white text-lg font-semibold">Technical interview</p>
                        <p class="text-white text-lg font-semibold">Negotiation offer</p>
                        <p class="text-white text-lg font-semibold">Onboarding</p>
                    </div>
                </div>
            </div>
        </div>
        <h2 class="font-heading text-white text-center text-4xl font-bold mb-10">Open roles</h2>
        <p class="text-white text-lg font-semibold mb-4">Engineering</p>
        <a href="#" class="inline-block mb-4 w-full group">
            <div class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                <div class="bg-pinkSecondary-900 rounded-2xl px-8 py-5">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full sm:w-1/2 px-4">
                            <p class="text-white text-lg font-medium mb-2 sm:mb-0">Full-Stack Engineer</p>
                        </div>
                        <div class="w-full sm:w-1/2 px-4">
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 group-hover:text-opacity-100 transition duration-200">Remote</p>
                                <span class="text-white text-opacity-50 group-hover:text-opacity-100 transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <g>
                                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </g>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="inline-block mb-10 w-full group">
            <div class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                <div class="bg-pinkSecondary-900 rounded-2xl px-8 py-5">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full sm:w-1/2 px-4">
                            <p class="text-white text-lg font-medium mb-2 sm:mb-0">Senior Engineer (Platform Team)</p>
                        </div>
                        <div class="w-full sm:w-1/2 px-4">
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 group-hover:text-opacity-100 transition duration-200">Remote</p>
                                <span class="text-white text-opacity-50 group-hover:text-opacity-100 transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <g>
                                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </g>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <p class="text-white text-lg font-semibold mb-4">Design</p>
        <a href="#" class="inline-block mb-4 w-full group">
            <div class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                <div class="bg-pinkSecondary-900 rounded-2xl px-8 py-5">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full sm:w-1/2 px-4">
                            <p class="text-white text-lg font-medium mb-2 sm:mb-0">Staff Product Designer</p>
                        </div>
                        <div class="w-full sm:w-1/2 px-4">
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 group-hover:text-opacity-100 transition duration-200">Remote</p>
                                <span class="text-white text-opacity-50 group-hover:text-opacity-100 transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <g>
                                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </g>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="inline-block w-full group">
            <div class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                <div class="bg-pinkSecondary-900 rounded-2xl px-8 py-5">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full sm:w-1/2 px-4">
                            <p class="text-white text-lg font-medium mb-2 sm:mb-0">Product Designer</p>
                        </div>
                        <div class="w-full sm:w-1/2 px-4">
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 group-hover:text-opacity-100 transition duration-200">Remote</p>
                                <span class="text-white text-opacity-50 group-hover:text-opacity-100 transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <g>
                                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </g>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</section>

<section class="bg-darkPink-900 pt-24 pb-40">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-5xl font-bold mb-6">FAQ</h1>
        <div class="flex flex-wrap gap-3 mb-16">
            <p class="text-white">Still have more questions?</p>
            <a href="#" class="inline-flex items-center gap-2 text-pink-500 hover:text-pink-600 transition duration-200">
                <span class="font-bold">Talk to us</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <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 class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-1/2 px-4">
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 border-t border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">What is Vista?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <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>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="text-white text-lg text-left mt-5 max-w-2xl">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, pariatur! Nobis sint consectetur assumenda corporis.</p>
                    </div>
                </button>
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">Do you facilitate any regular events or offer rooms for?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <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>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="text-white text-lg text-left mt-5 max-w-2xl">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, pariatur! Nobis sint consectetur assumenda corporis.</p>
                    </div>
                </button>
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">Is there a particular subject I should focus on learning?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <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>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="text-white text-lg text-left mt-5 max-w-2xl">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, pariatur! Nobis sint consectetur assumenda corporis.</p>
                    </div>
                </button>
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 lg:border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">Can I make it a fun group study session by inviting?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <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>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="text-white text-lg text-left mt-5 max-w-2xl">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, pariatur! Nobis sint consectetur assumenda corporis.</p>
                    </div>
                </button>
            </div>
            <div class="w-full lg:w-1/2 px-4">
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 border-t border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">What is Vista?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <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>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="text-white text-lg text-left mt-5 max-w-2xl">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, pariatur! Nobis sint consectetur assumenda corporis.</p>
                    </div>
                </button>
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">Do you facilitate any regular events or offer rooms for?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <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>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="text-white text-lg text-left mt-5 max-w-2xl">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, pariatur! Nobis sint consectetur assumenda corporis.</p>
                    </div>
                </button>
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">Is there a particular subject I should focus on learning?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <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>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="text-white text-lg text-left mt-5 max-w-2xl">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, pariatur! Nobis sint consectetur assumenda corporis.</p>
                    </div>
                </button>
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">Can I make it a fun group study session by inviting?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <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>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="text-white text-lg text-left mt-5 max-w-2xl">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, pariatur! Nobis sint consectetur assumenda corporis.</p>
                    </div>
                </button>
            </div>
        </div>
    </div>
</section>

<section class="bg-darkPink-900 py-24" x-data="{ pricing: 'yearly' }">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-center text-5xl font-bold mb-4">Flexible pricing plan</h1>
        <p class="text-white text-center text-opacity-70 mb-10">Pricing that scales with your business immediately.</p>
        <div class="p-1 mb-4 rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 flex items-center w-60 mx-auto gap-4">
            <button x-on:click="pricing='monthly'" class="py-1 px-3 text-white text-sm font-medium" :class="{ 'rounded-full border border-white border-opacity-20 bg-white bg-opacity-10': pricing == 'monthly' }">Monthly</button>
            <button x-on:click="pricing='yearly'" class="flex-1 py-1 px-3 flex items-center justify-center gap-2" :class="{ 'rounded-full border border-white border-opacity-20 bg-white bg-opacity-10': pricing == 'yearly' }">
                <span class="text-white text-sm font-medium">Yearly</span>
                <span class="text-xs text-pink-300">10% OFF</span>
            </button>
        </div>
        <p class="text-center text-white text-opacity-50 text-xs mb-10">No credit card required</p>
        <div class="overflow-x-auto">
            <div class="flex items-end lg:justify-center gap-8">
                <div class="flex-shrink-0 rounded-2xl border border-white border-opacity-30 p-8">
                    <p class="text-white text-2xl font-semibold mb-6">Basic</p>
                    <div class="flex items-end gap-1 flex-wrap mb-8">
                        <h2 class="text-white text-5xl font-semibold">$9</h2>
                        <span class="text-white text-opacity-50 mb-1">/per month</span>
                    </div>
                    <a href="#" class="group relative inline-block mb-8 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="text-pinkSecondary-900">Get started</p>
                        </div>
                    </a>
                    <div class="w-full h-px bg-white bg-opacity-10 mb-8"></div>
                    <ul class="flex flex-col gap-3">
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M13.3333 3.54163C13.3333 4.57496 12.4917 5.41663 11.4583 5.41663H8.54166C8.02499 5.41663 7.55832 5.20829 7.21666 4.86663C6.87499 4.52496 6.66666 4.05829 6.66666 3.54163C6.66666 2.50829 7.50832 1.66663 8.54166 1.66663H11.4583C11.975 1.66663 12.4417 1.87496 12.7833 2.21663C13.125 2.55829 13.3333 3.02496 13.3333 3.54163Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M15.6917 4.19164C15.5 4.0333 15.2833 3.9083 15.05 3.81664C14.8083 3.72497 14.5667 3.91664 14.5167 4.16664C14.2333 5.59164 12.975 6.66664 11.4583 6.66664H8.54168C7.70834 6.66664 6.92501 6.34164 6.33334 5.74997C5.90001 5.31664 5.60001 4.76664 5.48334 4.17497C5.43334 3.92497 5.18334 3.72497 4.94168 3.82497C3.97501 4.21664 3.33334 5.09997 3.33334 6.87497V15C3.33334 17.5 4.82501 18.3333 6.66668 18.3333H13.3333C15.175 18.3333 16.6667 17.5 16.6667 15V6.87497C16.6667 5.51664 16.2917 4.6833 15.6917 4.19164ZM6.66668 10.2083H10C10.3417 10.2083 10.625 10.4916 10.625 10.8333C10.625 11.175 10.3417 11.4583 10 11.4583H6.66668C6.32501 11.4583 6.04168 11.175 6.04168 10.8333C6.04168 10.4916 6.32501 10.2083 6.66668 10.2083ZM13.3333 14.7916H6.66668C6.32501 14.7916 6.04168 14.5083 6.04168 14.1666C6.04168 13.825 6.32501 13.5416 6.66668 13.5416H13.3333C13.675 13.5416 13.9583 13.825 13.9583 14.1666C13.9583 14.5083 13.675 14.7916 13.3333 14.7916Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Customized invoices</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M6.875 4.79163C6.53333 4.79163 6.25 4.50829 6.25 4.16663V1.66663C6.25 1.32496 6.53333 1.04163 6.875 1.04163C7.21667 1.04163 7.5 1.32496 7.5 1.66663V4.16663C7.5 4.50829 7.21667 4.79163 6.875 4.79163Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M13.125 4.79163C12.7833 4.79163 12.5 4.50829 12.5 4.16663V1.66663C12.5 1.32496 12.7833 1.04163 13.125 1.04163C13.4667 1.04163 13.75 1.32496 13.75 1.66663V4.16663C13.75 4.50829 13.4667 4.79163 13.125 4.79163Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M10 11.7416C10.4333 11.7416 10.75 11.4833 10.75 11.075C10.75 10.6583 10.4333 10.4166 10 10.4166C9.56667 10.4166 9.25 10.6583 9.25 11.075C9.25 11.4833 9.56667 11.7416 10 11.7416Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M9.99999 14.1667C10.5247 14.1667 10.95 13.8197 10.95 13.3917C10.95 12.9637 10.5247 12.6167 9.99999 12.6167C9.47532 12.6167 9.04999 12.9637 9.04999 13.3917C9.04999 13.8197 9.47532 14.1667 9.99999 14.1667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M16.3083 3.74996C15.7583 3.34163 14.9667 3.73329 14.9667 4.42496V4.50829C14.9667 5.48329 14.2667 6.38329 13.2917 6.48329C12.1667 6.59996 11.2167 5.71663 11.2167 4.61663V3.74996C11.2167 3.29163 10.8417 2.91663 10.3833 2.91663H9.61668C9.15834 2.91663 8.78334 3.29163 8.78334 3.74996V4.61663C8.78334 5.27496 8.44168 5.85829 7.92501 6.18329C7.85001 6.23329 7.76668 6.27496 7.68334 6.31663C7.60834 6.35829 7.52501 6.39163 7.43334 6.41663C7.33334 6.44996 7.22501 6.47496 7.10834 6.48329C6.97501 6.49996 6.84168 6.49996 6.70834 6.48329C6.59168 6.47496 6.48334 6.44996 6.38334 6.41663C6.30001 6.39163 6.21668 6.35829 6.13334 6.31663C6.05001 6.27496 5.96668 6.23329 5.89168 6.18329C5.36668 5.81663 5.03334 5.18329 5.03334 4.50829V4.42496C5.03334 3.78329 4.35001 3.39996 3.80834 3.67496C3.80001 3.68329 3.79168 3.68329 3.78334 3.69163C3.75001 3.70829 3.72501 3.72496 3.69168 3.74996C3.66668 3.77496 3.63334 3.79163 3.60834 3.81663C3.37501 3.99996 3.16668 4.20829 2.99168 4.43329C2.90001 4.53329 2.82501 4.64163 2.75834 4.74996C2.75001 4.75829 2.74168 4.76663 2.73334 4.78329C2.65834 4.89163 2.59168 5.01663 2.53334 5.13329C2.51668 5.14996 2.50834 5.15829 2.50834 5.17496C2.45834 5.27496 2.40834 5.37496 2.37501 5.48329C2.35001 5.52496 2.34168 5.55829 2.32501 5.59996C2.27501 5.72496 2.24168 5.84996 2.20834 5.97496C2.17501 6.09163 2.15001 6.21663 2.13334 6.34163C2.11668 6.43329 2.10834 6.52496 2.10001 6.62496C2.09168 6.74163 2.08334 6.85829 2.08334 6.97496V14.275C2.08334 16.5166 3.90001 18.3333 6.14168 18.3333H13.8583C16.1 18.3333 17.9167 16.5166 17.9167 14.275V6.97496C17.9167 5.64996 17.2833 4.49163 16.3083 3.74996ZM10 15.2083C8.70834 15.2083 7.91668 14.5666 7.91668 13.5333C7.91668 12.9666 8.20834 12.475 8.71668 12.1833C8.35001 11.925 8.10834 11.5416 8.10834 11.0166C8.10834 9.93329 8.97501 9.37496 10 9.37496C11.025 9.37496 11.8833 9.93329 11.8833 11.0166C11.8833 11.5416 11.65 11.925 11.275 12.1833C11.7917 12.475 12.0833 12.9666 12.0833 13.5333C12.0833 14.5666 11.2833 15.2083 10 15.2083Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Automated reminders</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M14.1667 2.91663H5.83332C3.33332 2.91663 1.66666 4.16663 1.66666 7.08329V12.9166C1.66666 15.8333 3.33332 17.0833 5.83332 17.0833H14.1667C16.6667 17.0833 18.3333 15.8333 18.3333 12.9166V7.08329C18.3333 4.16663 16.6667 2.91663 14.1667 2.91663ZM6.66666 14.7916H4.16666C3.82499 14.7916 3.54166 14.5083 3.54166 14.1666C3.54166 13.825 3.82499 13.5416 4.16666 13.5416H6.66666C7.00832 13.5416 7.29166 13.825 7.29166 14.1666C7.29166 14.5083 7.00832 14.7916 6.66666 14.7916ZM9.99999 12.5C8.61666 12.5 7.49999 11.3833 7.49999 9.99996C7.49999 8.61663 8.61666 7.49996 9.99999 7.49996C11.3833 7.49996 12.5 8.61663 12.5 9.99996C12.5 11.3833 11.3833 12.5 9.99999 12.5ZM15.8333 6.45829H13.3333C12.9917 6.45829 12.7083 6.17496 12.7083 5.83329C12.7083 5.49163 12.9917 5.20829 13.3333 5.20829H15.8333C16.175 5.20829 16.4583 5.49163 16.4583 5.83329C16.4583 6.17496 16.175 6.45829 15.8333 6.45829Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Enable multiple payments</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M17.5 18.9584H2.5C2.15833 18.9584 1.875 18.675 1.875 18.3334C1.875 17.9917 2.15833 17.7084 2.5 17.7084H17.5C17.8417 17.7084 18.125 17.9917 18.125 18.3334C18.125 18.675 17.8417 18.9584 17.5 18.9584Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M4.66667 6.98328H3.33333C2.875 6.98328 2.5 7.35828 2.5 7.81661V14.9999C2.5 15.4583 2.875 15.8333 3.33333 15.8333H4.66667C5.125 15.8333 5.5 15.4583 5.5 14.9999V7.81661C5.5 7.34994 5.125 6.98328 4.66667 6.98328Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M10.6667 4.32495H9.33333C8.875 4.32495 8.5 4.69995 8.5 5.15828V15C8.5 15.4583 8.875 15.8333 9.33333 15.8333H10.6667C11.125 15.8333 11.5 15.4583 11.5 15V5.15828C11.5 4.69995 11.125 4.32495 10.6667 4.32495Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M16.6667 1.66663H15.3333C14.875 1.66663 14.5 2.04163 14.5 2.49996V15C14.5 15.4583 14.875 15.8333 15.3333 15.8333H16.6667C17.125 15.8333 17.5 15.4583 17.5 15V2.49996C17.5 2.04163 17.125 1.66663 16.6667 1.66663Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Helpful reports</span>
                        </li>
                    </ul>
                </div>
                <div class="flex-shrink-0 rounded-2xl px-1 pb-1 pt-2 bg-pink-500">
                    <div class="flex items-center justify-center gap-2 mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.00001 3C6.10865 3.00002 6.21433 3.03543 6.30105 3.10087C6.38778 3.1663 6.45083 3.2582 6.48067 3.36267L7.02267 5.26C7.13937 5.66861 7.3583 6.04073 7.65879 6.34122C7.95927 6.6417 8.33139 6.86063 8.74001 6.97733L10.6373 7.51933C10.7417 7.54924 10.8336 7.61232 10.8989 7.69904C10.9643 7.78576 10.9996 7.8914 10.9996 8C10.9996 8.1086 10.9643 8.21424 10.8989 8.30096C10.8336 8.38768 10.7417 8.45076 10.6373 8.48067L8.74001 9.02267C8.33139 9.13937 7.95927 9.3583 7.65879 9.65878C7.3583 9.95927 7.13937 10.3314 7.02267 10.74L6.48067 12.6373C6.45077 12.7417 6.38769 12.8336 6.30097 12.8989C6.21425 12.9643 6.1086 12.9996 6.00001 12.9996C5.89141 12.9996 5.78577 12.9643 5.69905 12.8989C5.61233 12.8336 5.54925 12.7417 5.51934 12.6373L4.97734 10.74C4.86064 10.3314 4.64171 9.95927 4.34122 9.65878C4.04074 9.3583 3.66862 9.13937 3.26001 9.02267L1.36267 8.48067C1.25828 8.45076 1.16645 8.38768 1.10109 8.30096C1.03572 8.21424 1.00037 8.1086 1.00037 8C1.00037 7.8914 1.03572 7.78576 1.10109 7.69904C1.16645 7.61232 1.25828 7.54924 1.36267 7.51933L3.26001 6.97733C3.66862 6.86063 4.04074 6.6417 4.34122 6.34122C4.64171 6.04073 4.86064 5.66861 4.97734 5.26L5.51934 3.36267C5.54918 3.2582 5.61223 3.1663 5.69896 3.10087C5.78568 3.03543 5.89136 3.00002 6.00001 3ZM12 1C12.1116 0.999938 12.2199 1.03718 12.3079 1.10579C12.3958 1.17441 12.4583 1.27046 12.4853 1.37867L12.6573 2.06933C12.8147 2.696 13.304 3.18533 13.9307 3.34267L14.6213 3.51467C14.7298 3.54152 14.8261 3.6039 14.8949 3.69187C14.9637 3.77983 15.0011 3.88831 15.0011 4C15.0011 4.11169 14.9637 4.22017 14.8949 4.30813C14.8261 4.3961 14.7298 4.45848 14.6213 4.48533L13.9307 4.65733C13.304 4.81467 12.8147 5.304 12.6573 5.93067L12.4853 6.62133C12.4585 6.72975 12.3961 6.82605 12.3081 6.89489C12.2202 6.96372 12.1117 7.00112 12 7.00112C11.8883 7.00112 11.7798 6.96372 11.6919 6.89489C11.6039 6.82605 11.5415 6.72975 11.5147 6.62133L11.3427 5.93067C11.2657 5.62295 11.1066 5.34193 10.8824 5.11765C10.6581 4.89337 10.3771 4.73426 10.0693 4.65733L9.37867 4.48533C9.27026 4.45848 9.17395 4.3961 9.10512 4.30813C9.03629 4.22017 8.99889 4.11169 8.99889 4C8.99889 3.88831 9.03629 3.77983 9.10512 3.69187C9.17395 3.6039 9.27026 3.54152 9.37867 3.51467L10.0693 3.34267C10.3771 3.26574 10.6581 3.10663 10.8824 2.88235C11.1066 2.65807 11.2657 2.37705 11.3427 2.06933L11.5147 1.37867C11.5417 1.27046 11.6042 1.17441 11.6922 1.10579C11.7801 1.03718 11.8885 0.999938 12 1ZM11 10C11.105 9.99994 11.2074 10.0329 11.2926 10.0943C11.3778 10.1557 11.4415 10.2424 11.4747 10.342L11.7373 11.1307C11.8373 11.4287 12.0707 11.6633 12.3693 11.7627L13.158 12.026C13.2573 12.0593 13.3436 12.123 13.4048 12.2081C13.466 12.2931 13.4989 12.3952 13.4989 12.5C13.4989 12.6048 13.466 12.7069 13.4048 12.7919C13.3436 12.877 13.2573 12.9407 13.158 12.974L12.3693 13.2373C12.0713 13.3373 11.8367 13.5707 11.7373 13.8693L11.474 14.658C11.4407 14.7573 11.377 14.8436 11.2919 14.9048C11.2069 14.966 11.1048 14.9989 11 14.9989C10.8952 14.9989 10.7931 14.966 10.7081 14.9048C10.623 14.8436 10.5593 14.7573 10.526 14.658L10.2627 13.8693C10.2136 13.7222 10.1309 13.5885 10.0212 13.4788C9.91152 13.3691 9.77782 13.2864 9.63067 13.2373L8.84201 12.974C8.7427 12.9407 8.65637 12.877 8.59521 12.7919C8.53404 12.7069 8.50114 12.6048 8.50114 12.5C8.50114 12.3952 8.53404 12.2931 8.59521 12.2081C8.65637 12.123 8.7427 12.0593 8.84201 12.026L9.63067 11.7627C9.92867 11.6627 10.1633 11.4293 10.2627 11.1307L10.526 10.342C10.5592 10.2425 10.6228 10.1559 10.7078 10.0945C10.7929 10.0331 10.8951 10.0001 11 10Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                        </svg>
                        <p class="text-white uppercase text-xs font-semibold">RECOMMENDED</p>
                    </div>
                    <div class="rounded-2xl bg-darkPink-900 border border-white border-opacity-30 p-8">
                        <p class="text-white text-2xl font-semibold mb-6">Pro</p>
                    <div class="flex items-end gap-1 flex-wrap mb-8">
                        <h2 class="text-white text-5xl font-semibold">$29</h2>
                        <span class="text-white text-opacity-50 mb-1">/per month</span>
                    </div>
                    <a href="#" class="group relative inline-block mb-8 p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                        <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 rounded-full"></div>
                        <div class="relative z-50 flex items-center py-2 px-4 bg-pink-500 group-hover:bg-pink-600 group-focus:bg-pink-600 rounded-full transition duration-200">
                            <p class="text-white">Get started</p>
                        </div>
                    </a>
                    <div class="w-full h-px bg-white bg-opacity-10 mb-8"></div>
                    <ul class="flex flex-col gap-3">
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M10 1.66663C5.40002 1.66663 1.66669 5.39996 1.66669 9.99996C1.66669 14.6 5.40002 18.3333 10 18.3333C14.6 18.3333 18.3334 14.6 18.3334 9.99996C18.3334 5.39996 14.6 1.66663 10 1.66663ZM9.10835 14.2916C9.10835 14.375 9.09169 14.45 9.05835 14.5333C8.99169 14.6833 8.87502 14.8083 8.71669 14.875C8.64169 14.9083 8.55835 14.925 8.47502 14.925C8.39169 14.925 8.31669 14.9083 8.23335 14.875C8.15835 14.8416 8.09169 14.8 8.03335 14.7416L5.50002 12.2083C5.25835 11.9666 5.25835 11.5666 5.50002 11.325C5.74169 11.0833 6.14169 11.0833 6.38335 11.325L7.85002 12.7916V5.70829C7.85002 5.36663 8.13335 5.08329 8.47502 5.08329C8.81669 5.08329 9.10002 5.36663 9.10002 5.70829V14.2916H9.10835ZM14.4917 8.68329C14.3667 8.80829 14.2084 8.86663 14.05 8.86663C13.8917 8.86663 13.7334 8.80829 13.6084 8.68329L12.1417 7.21663V14.3C12.1417 14.6416 11.8584 14.925 11.5167 14.925C11.175 14.925 10.8917 14.6416 10.8917 14.3V5.70829C10.8917 5.62496 10.9084 5.54996 10.9417 5.46663C11.0084 5.31663 11.125 5.19163 11.2834 5.12496C11.4334 5.05829 11.6084 5.05829 11.7584 5.12496C11.8334 5.15829 11.9 5.19996 11.9584 5.25829L14.4917 7.79163C14.7334 8.04163 14.7334 8.43329 14.4917 8.68329Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Cashflow tracking</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M14.6083 6.47496C14.55 6.46663 14.4916 6.46663 14.4333 6.47496C13.1416 6.43329 12.1166 5.37496 12.1166 4.07496C12.1166 2.74996 13.1916 1.66663 14.525 1.66663C15.85 1.66663 16.9333 2.74163 16.9333 4.07496C16.925 5.37496 15.9 6.43329 14.6083 6.47496Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M17.325 12.25C16.3916 12.875 15.0833 13.1083 13.875 12.95C14.1916 12.2666 14.3583 11.5083 14.3666 10.7083C14.3666 9.87497 14.1833 9.0833 13.8333 8.39164C15.0666 8.22497 16.375 8.4583 17.3166 9.0833C18.6333 9.94997 18.6333 11.375 17.325 12.25Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M5.36665 6.47496C5.42499 6.46663 5.48332 6.46663 5.54165 6.47496C6.83332 6.43329 7.85832 5.37496 7.85832 4.07496C7.85832 2.74163 6.78332 1.66663 5.44999 1.66663C4.12499 1.66663 3.04999 2.74163 3.04999 4.07496C3.04999 5.37496 4.07499 6.43329 5.36665 6.47496Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M5.45831 10.7083C5.45831 11.5167 5.63331 12.2833 5.94998 12.975C4.77498 13.1 3.54998 12.85 2.64998 12.2583C1.33331 11.3833 1.33331 9.95834 2.64998 9.08334C3.54164 8.48334 4.79998 8.24167 5.98331 8.37501C5.64164 9.07501 5.45831 9.86667 5.45831 10.7083Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M10.1 13.225C10.0333 13.2167 9.95833 13.2167 9.88333 13.225C8.35 13.175 7.125 11.9167 7.125 10.3667C7.13333 8.78333 8.40833 7.5 10 7.5C11.5833 7.5 12.8667 8.78333 12.8667 10.3667C12.8583 11.9167 11.6417 13.175 10.1 13.225Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M7.39169 14.95C6.13335 15.7916 6.13335 17.175 7.39169 18.0083C8.82502 18.9666 11.175 18.9666 12.6084 18.0083C13.8667 17.1666 13.8667 15.7833 12.6084 14.95C11.1834 13.9916 8.83335 13.9916 7.39169 14.95Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Add unlimited collaborators</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M17.9166 9.08329V3.41663C17.9166 2.16663 17.3833 1.66663 16.0583 1.66663H12.6916C11.3666 1.66663 10.8333 2.16663 10.8333 3.41663V9.08329C10.8333 10.3333 11.3666 10.8333 12.6916 10.8333H16.0583C17.3833 10.8333 17.9166 10.3333 17.9166 9.08329Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M9.16665 10.9166V16.5833C9.16665 17.8333 8.63331 18.3333 7.30831 18.3333H3.94165C2.61665 18.3333 2.08331 17.8333 2.08331 16.5833V10.9166C2.08331 9.66663 2.61665 9.16663 3.94165 9.16663H7.30831C8.63331 9.16663 9.16665 9.66663 9.16665 10.9166Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M17.9166 16.5833V14.25C17.9166 13 17.3833 12.5 16.0583 12.5H12.6916C11.3666 12.5 10.8333 13 10.8333 14.25V16.5833C10.8333 17.8333 11.3666 18.3333 12.6916 18.3333H16.0583C17.3833 18.3333 17.9166 17.8333 17.9166 16.5833Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M9.16665 5.74996V3.41663C9.16665 2.16663 8.63331 1.66663 7.30831 1.66663H3.94165C2.61665 1.66663 2.08331 2.16663 2.08331 3.41663V5.74996C2.08331 6.99996 2.61665 7.49996 3.94165 7.49996H7.30831C8.63331 7.49996 9.16665 6.99996 9.16665 5.74996Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Customized dashboard</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M12.6834 5.45837H4.81669C4.58335 5.45837 4.36669 5.46671 4.16669 5.47504C2.19169 5.59171 1.66669 6.31671 1.66669 8.56671V9.05004C1.66669 9.50837 2.04169 9.88337 2.50002 9.88337H15C15.4584 9.88337 15.8334 9.50837 15.8334 9.05004V8.56671C15.8334 6.08337 15.2 5.45837 12.6834 5.45837Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M2.50002 11.1333C2.04169 11.1333 1.66669 11.5083 1.66669 11.9666V14.3916C1.66669 16.875 2.30002 17.5 4.81669 17.5H12.6834C15.1584 17.5 15.8084 16.9 15.8334 14.525V11.9666C15.8334 11.5083 15.4584 11.1333 15 11.1333H2.50002ZM5.80002 15.4666H4.37502C4.03335 15.4666 3.75002 15.1833 3.75002 14.8416C3.75002 14.5 4.03335 14.2166 4.37502 14.2166H5.80835C6.15002 14.2166 6.43335 14.5 6.43335 14.8416C6.43335 15.1833 6.15002 15.4666 5.80002 15.4666ZM10.4584 15.4666H7.59169C7.25002 15.4666 6.96669 15.1833 6.96669 14.8416C6.96669 14.5 7.25002 14.2166 7.59169 14.2166H10.4584C10.8 14.2166 11.0834 14.5 11.0834 14.8416C11.0834 15.1833 10.8084 15.4666 10.4584 15.4666Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M18.3333 11.1083V6.74167C18.3333 4.13333 16.8417 3 14.5917 3H7.15001C6.51668 3 5.95001 3.09167 5.45001 3.28333C5.05834 3.425 4.70834 3.63333 4.42501 3.90833C4.27501 4.05 4.39168 4.28333 4.60834 4.28333H13.6667C15.5417 4.28333 17.0583 5.8 17.0583 7.675V13.65C17.0583 13.8583 17.2833 13.975 17.4333 13.825C18.0083 13.2167 18.3333 12.325 18.3333 11.1083Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Unlimited bank and credit card</span>
                        </li>
                    </ul>
                    </div>
                </div>
                <div class="flex-shrink-0 rounded-2xl border border-white border-opacity-30 p-8">
                    <p class="text-white text-2xl font-semibold mb-6">Enterprise</p>
                    <div class="flex items-end gap-1 flex-wrap mb-8">
                        <h2 class="text-white text-5xl font-semibold">$49</h2>
                        <span class="text-white text-opacity-50 mb-1">/per month</span>
                    </div>
                    <a href="#" class="group relative inline-block mb-8 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="text-pinkSecondary-900">Get started</p>
                        </div>
                    </a>
                    <div class="w-full h-px bg-white bg-opacity-10 mb-8"></div>
                    <ul class="flex flex-col gap-3">
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <g>
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.50004 3.75C7.63584 3.75003 7.76794 3.79429 7.87635 3.87608C7.98475 3.95788 8.06357 4.07275 8.10087 4.20333L8.77837 6.575C8.92425 7.08577 9.19791 7.55092 9.57352 7.92652C9.94912 8.30213 10.4143 8.57579 10.925 8.72167L13.2967 9.39917C13.4272 9.43655 13.542 9.5154 13.6237 9.6238C13.7054 9.7322 13.7496 9.86426 13.7496 10C13.7496 10.1357 13.7054 10.2678 13.6237 10.3762C13.542 10.4846 13.4272 10.5635 13.2967 10.6008L10.925 11.2783C10.4143 11.4242 9.94912 11.6979 9.57352 12.0735C9.19791 12.4491 8.92425 12.9142 8.77837 13.425L8.10087 15.7967C8.06349 15.9272 7.98464 16.0419 7.87624 16.1236C7.76784 16.2054 7.63578 16.2496 7.50004 16.2496C7.36429 16.2496 7.23224 16.2054 7.12384 16.1236C7.01544 16.0419 6.93659 15.9272 6.8992 15.7967L6.2217 13.425C6.07583 12.9142 5.80217 12.4491 5.42656 12.0735C5.05095 11.6979 4.5858 11.4242 4.07504 11.2783L1.70337 10.6008C1.57288 10.5635 1.4581 10.4846 1.37639 10.3762C1.29468 10.2678 1.25049 10.1357 1.25049 10C1.25049 9.86426 1.29468 9.7322 1.37639 9.6238C1.4581 9.5154 1.57288 9.43655 1.70337 9.39917L4.07504 8.72167C4.5858 8.57579 5.05095 8.30213 5.42656 7.92652C5.80217 7.55092 6.07583 7.08577 6.2217 6.575L6.8992 4.20333C6.93651 4.07275 7.01532 3.95788 7.12373 3.87608C7.23214 3.79429 7.36423 3.75003 7.50004 3.75ZM15 1.25C15.1395 1.24992 15.2749 1.29647 15.3848 1.38224C15.4948 1.46801 15.5729 1.58807 15.6067 1.72333L15.8217 2.58667C16.0184 3.37 16.63 3.98167 17.4134 4.17833L18.2767 4.39333C18.4122 4.4269 18.5326 4.50488 18.6186 4.61483C18.7047 4.72479 18.7514 4.86038 18.7514 5C18.7514 5.13962 18.7047 5.27521 18.6186 5.38517C18.5326 5.49512 18.4122 5.5731 18.2767 5.60667L17.4134 5.82167C16.63 6.01833 16.0184 6.63 15.8217 7.41333L15.6067 8.27667C15.5731 8.41219 15.4952 8.53257 15.3852 8.61861C15.2753 8.70465 15.1397 8.7514 15 8.7514C14.8604 8.7514 14.7248 8.70465 14.6149 8.61861C14.5049 8.53257 14.4269 8.41219 14.3934 8.27667L14.1784 7.41333C14.0822 7.02869 13.8833 6.67742 13.603 6.39706C13.3226 6.11671 12.9713 5.91782 12.5867 5.82167L11.7234 5.60667C11.5878 5.5731 11.4675 5.49512 11.3814 5.38517C11.2954 5.27521 11.2486 5.13962 11.2486 5C11.2486 4.86038 11.2954 4.72479 11.3814 4.61483C11.4675 4.50488 11.5878 4.4269 11.7234 4.39333L12.5867 4.17833C12.9713 4.08218 13.3226 3.88329 13.603 3.60294C13.8833 3.32258 14.0822 2.97131 14.1784 2.58667L14.3934 1.72333C14.4272 1.58807 14.5053 1.46801 14.6152 1.38224C14.7252 1.29647 14.8606 1.24992 15 1.25ZM13.75 12.5C13.8813 12.4999 14.0093 12.5412 14.1158 12.6179C14.2223 12.6946 14.3019 12.803 14.3434 12.9275L14.6717 13.9133C14.7967 14.2858 15.0884 14.5792 15.4617 14.7033L16.4475 15.0325C16.5717 15.0742 16.6796 15.1538 16.756 15.2601C16.8325 15.3664 16.8736 15.4941 16.8736 15.625C16.8736 15.7559 16.8325 15.8836 16.756 15.9899C16.6796 16.0962 16.5717 16.1758 16.4475 16.2175L15.4617 16.5467C15.0892 16.6717 14.7959 16.9633 14.6717 17.3367L14.3425 18.3225C14.3009 18.4466 14.2212 18.5546 14.1149 18.631C14.0086 18.7075 13.881 18.7486 13.75 18.7486C13.6191 18.7486 13.4915 18.7075 13.3851 18.631C13.2788 18.5546 13.1992 18.4466 13.1575 18.3225L12.8284 17.3367C12.767 17.1527 12.6637 16.9856 12.5265 16.8485C12.3894 16.7114 12.2223 16.6081 12.0384 16.5467L11.0525 16.2175C10.9284 16.1758 10.8205 16.0962 10.744 15.9899C10.6676 15.8836 10.6265 15.7559 10.6265 15.625C10.6265 15.4941 10.6676 15.3664 10.744 15.2601C10.8205 15.1538 10.9284 15.0742 11.0525 15.0325L12.0384 14.7033C12.4109 14.5783 12.7042 14.2867 12.8284 13.9133L13.1575 12.9275C13.199 12.8031 13.2785 12.6949 13.3848 12.6182C13.4911 12.5414 13.6189 12.5001 13.75 12.5Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                </g>
                            </svg>
                            <span class="text-white">All in Pro benefits</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M3.25829 14.3166C3.09996 14.3166 2.94163 14.2583 2.81663 14.1333C1.67496 12.9833 1.04163 11.4666 1.04163 9.85827C1.04163 6.51661 3.74996 3.79994 7.08329 3.79994L12.1416 3.81661L11.2333 2.94994C10.9833 2.70827 10.975 2.31661 11.2166 2.06661C11.4583 1.81661 11.85 1.80827 12.1 2.04994L14.1333 3.99994C14.3166 4.17494 14.375 4.44994 14.2833 4.68327C14.1916 4.91661 13.9583 5.07494 13.7 5.07494L7.08329 5.05827C4.44163 5.05827 2.29163 7.21661 2.29163 9.86661C2.29163 11.1416 2.79163 12.3499 3.69996 13.2583C3.94163 13.4999 3.94163 13.8999 3.69996 14.1416C3.57496 14.2583 3.41663 14.3166 3.25829 14.3166Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M8.33337 18.125C8.17504 18.125 8.02504 18.0667 7.90004 17.95L5.86671 16C5.68337 15.825 5.62504 15.55 5.71671 15.3167C5.80837 15.0834 6.04171 14.925 6.30004 14.925L12.925 14.9417C15.5667 14.9417 17.7167 12.7834 17.7167 10.1334C17.7167 8.85837 17.2167 7.65004 16.3084 6.74171C16.0667 6.50004 16.0667 6.10004 16.3084 5.85837C16.55 5.61671 16.95 5.61671 17.1917 5.85837C18.3334 7.00837 18.9667 8.52504 18.9667 10.1334C18.9667 13.475 16.2584 16.1917 12.925 16.1917L7.86671 16.175L8.77504 17.0417C9.02504 17.2834 9.03337 17.675 8.79171 17.925C8.65837 18.0584 8.50004 18.125 8.33337 18.125Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M7.50004 12.9167H12.5C14.1 12.9167 15.4167 11.6084 15.4167 10C15.4167 8.40004 14.1084 7.08337 12.5 7.08337H7.50004C5.90004 7.08337 4.58337 8.39171 4.58337 10C4.58337 11.6084 5.89171 12.9167 7.50004 12.9167Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Auto sync to your dashboard</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M14.1666 3.33337H5.83329C3.33329 3.33337 1.66663 4.58337 1.66663 7.50004V10.4667C1.66663 10.775 1.98329 10.9667 2.25829 10.8417C3.07496 10.4667 4.01663 10.325 5.00829 10.5C7.19996 10.8917 8.80829 12.925 8.74996 15.15C8.74163 15.5 8.69163 15.8417 8.59996 16.175C8.53329 16.4334 8.74163 16.675 9.00829 16.675H14.1666C16.6666 16.675 18.3333 15.425 18.3333 12.5084V7.50004C18.3333 4.58337 16.6666 3.33337 14.1666 3.33337ZM9.99996 12.0834C8.84996 12.0834 7.91663 11.15 7.91663 10C7.91663 8.85004 8.84996 7.91671 9.99996 7.91671C11.15 7.91671 12.0833 8.85004 12.0833 10C12.0833 11.15 11.15 12.0834 9.99996 12.0834ZM16.0416 11.6667C16.0416 12.0084 15.7583 12.2917 15.4166 12.2917C15.075 12.2917 14.7916 12.0084 14.7916 11.6667V8.33337C14.7916 7.99171 15.075 7.70837 15.4166 7.70837C15.7583 7.70837 16.0416 7.99171 16.0416 8.33337V11.6667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M4.16671 11.6666C2.32504 11.6666 0.833374 13.1583 0.833374 15C0.833374 15.625 1.00837 16.2166 1.31671 16.7166C1.89171 17.6833 2.95004 18.3333 4.16671 18.3333C5.38337 18.3333 6.44171 17.6833 7.01671 16.7166C7.32504 16.2166 7.50004 15.625 7.50004 15C7.50004 13.1583 6.00837 11.6666 4.16671 11.6666ZM5.40837 15.6083H4.79171V16.2583C4.79171 16.6 4.50837 16.8833 4.16671 16.8833C3.82504 16.8833 3.54171 16.6 3.54171 16.2583V15.6083H2.92504C2.58337 15.6083 2.30004 15.325 2.30004 14.9833C2.30004 14.6416 2.58337 14.3583 2.92504 14.3583H3.54171V13.7666C3.54171 13.425 3.82504 13.1416 4.16671 13.1416C4.50837 13.1416 4.79171 13.425 4.79171 13.7666V14.3583H5.40837C5.75004 14.3583 6.03337 14.6416 6.03337 14.9833C6.03337 15.325 5.75837 15.6083 5.40837 15.6083Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Flexible payments</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" opacity="0.5" viewBox="0 0 20 20" fill="none">
                                <path d="M14.1666 3.33337H5.83329C3.33329 3.33337 1.66663 4.58337 1.66663 7.50004V10.4667C1.66663 10.775 1.98329 10.9667 2.25829 10.8417C3.07496 10.4667 4.01663 10.325 5.00829 10.5C7.19996 10.8917 8.80829 12.925 8.74996 15.15C8.74163 15.5 8.69163 15.8417 8.59996 16.175C8.53329 16.4334 8.74163 16.675 9.00829 16.675H14.1666C16.6666 16.675 18.3333 15.425 18.3333 12.5084V7.50004C18.3333 4.58337 16.6666 3.33337 14.1666 3.33337ZM9.99996 12.0834C8.84996 12.0834 7.91663 11.15 7.91663 10C7.91663 8.85004 8.84996 7.91671 9.99996 7.91671C11.15 7.91671 12.0833 8.85004 12.0833 10C12.0833 11.15 11.15 12.0834 9.99996 12.0834ZM16.0416 11.6667C16.0416 12.0084 15.7583 12.2917 15.4166 12.2917C15.075 12.2917 14.7916 12.0084 14.7916 11.6667V8.33337C14.7916 7.99171 15.075 7.70837 15.4166 7.70837C15.7583 7.70837 16.0416 7.99171 16.0416 8.33337V11.6667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                <path d="M4.16671 11.6666C3.12504 11.6666 2.18337 12.1583 1.57504 12.9083C1.10837 13.4833 0.833374 14.2083 0.833374 15C0.833374 16.8416 2.33337 18.3333 4.16671 18.3333C5.61671 18.3333 6.85837 17.4083 7.30837 16.1083C7.43337 15.7666 7.50004 15.3916 7.50004 15C7.50004 13.1666 6.00837 11.6666 4.16671 11.6666ZM6.13337 16.45C6.11671 16.5 6.08337 16.55 6.05004 16.5833L5.45004 17.175C5.37504 17.2583 5.27504 17.2916 5.16671 17.2916C5.05837 17.2916 4.95004 17.2583 4.87504 17.175C4.74171 17.05 4.72504 16.85 4.80837 16.7H3.13337C2.60004 16.7 2.16671 16.2666 2.16671 15.725V15.6416C2.16671 15.4083 2.35004 15.2333 2.57504 15.2333C2.80004 15.2333 2.98337 15.4083 2.98337 15.6416V15.725C2.98337 15.8166 3.05004 15.8916 3.14171 15.8916H4.81671C4.73337 15.7333 4.75004 15.5416 4.88337 15.4083C5.04171 15.25 5.30004 15.25 5.45004 15.4083L6.05004 16.0083C6.08337 16.0416 6.11671 16.0916 6.14171 16.1416C6.17504 16.2333 6.17504 16.35 6.13337 16.45ZM6.16671 14.3583C6.16671 14.5916 5.98337 14.7666 5.75837 14.7666C5.53337 14.7666 5.35004 14.5916 5.35004 14.3583V14.275C5.35004 14.1833 5.28337 14.1083 5.19171 14.1083H3.52504C3.60837 14.2666 3.59171 14.4583 3.45837 14.5916C3.38337 14.6666 3.28337 14.7083 3.16671 14.7083C3.06671 14.7083 2.95837 14.6666 2.88337 14.5916L2.28337 13.9916C2.25004 13.9583 2.21671 13.9083 2.19171 13.8583C2.15837 13.7583 2.15837 13.65 2.19171 13.55C2.21671 13.5083 2.24171 13.45 2.28337 13.4166L2.88337 12.825C3.04171 12.6583 3.30004 12.6583 3.45004 12.825C3.58337 12.95 3.60004 13.15 3.51671 13.3H5.19171C5.72504 13.3 6.15837 13.7333 6.15837 14.275V14.3583H6.16671Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </svg>
                            <span class="text-white">Recurring billing</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 pt-32 pb-96 relative overflow-hidden">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-center text-4xl md:text-5xl font-bold mb-4">Optimize your finances now</h1>
        <p class="text-white text-center text-lg mb-10">Take control of your money. Optimize your finances for a brighter tomorrow!</p>
        <div class="text-center">
            <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 group-hover:from-white group-focus:from-white group-hover:to-transparent group-focus:to-white group-hover:opacity-40 group-focus:opacity-0 rounded-full"></div>
                <div class="relative z-50 flex items-center py-3 px-5 bg-pink-500 group-hover:bg-pink-600 group-focus:bg-pink-600 rounded-full transition duration-200">
                    <p class="mr-3 text-white">Get Started</p>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
            </a>
        </div>
    </div>
    <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 object-cover" style="height:300px" src="vista-assets/images/cta/vista-text.svg" alt="">
</section>

<section class="bg-darkPink-900 py-28">
    <div class="container mx-auto px-4">
        <div class="mb-12 pb-12 border-b border-white border-opacity-20">
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-1/2 p-4">
                    <div class="flex flex-wrap items-center gap-4 mb-10">
                        <span class="px-2 py-1 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-md text-white text-xs font-medium">Accounting</span>
                        <p class="text-white text-sm font-medium">17 Jul 2024</p>
                    </div>
                    <h1 class="font-heading text-white text-4xl md:text-5xl font-bold max-w-xs md:max-w-md">Mastering Cash Basis Accounting: A Step-by-Step Guide</h1>
                </div>
                <div class="w-full lg:w-1/2 p-4">
                    <img class="h-96 object-cover rounded-2xl w-full" src="vista-assets/images/blog-content/placeholder-pink.png" alt="">
                </div>
            </div>
        </div>
        <div class="pb-24 mb-24 border-b border-white border-opacity-20">
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-1/3 p-4">
                    <div class="bg-pinkSecondary-900 p-8 rounded-2xl">
                        <a href="#" class="block text-white text-opacity-50 hover:text-opacity-100 transition duration-200 mb-3">Table of content</a>
                        <a href="#" class="block text-white text-opacity-50 hover:text-opacity-100 transition duration-200 mb-3">What is cash basis accounting?</a>
                        <a href="#" class="block text-white text-opacity-50 hover:text-opacity-100 transition duration-200 mb-3">How does cash accounting work?</a>
                        <a href="#" class="block text-white text-opacity-50 hover:text-opacity-100 transition duration-200 mb-12">The bottom line on cash basis accounting</a>
                        <p class="text-white text-opacity-50 mb-4">Written by</p>
                        <div class="flex items-center flex-wrap gap-4 mb-12">
                            <img class="h-12" src="vista-assets/images/blog-content/avatar.png" alt="">
                            <div>
                                <p class="text-white font-semibold mb-1">Madelyn</p>
                                <p class="text-gray-400 text-sm">Content Marketing</p>
                            </div>
                        </div>
                        <p class="text-white text-opacity-50 mb-4">Share this article</p>
                        <div class="flex flex-wrap gap-6">
                            <a href="#" class="inline-block">
                                <img class="h-6" src="vista-assets/images/logos/twitter-x-logo.svg" alt="">
                            </a>
                            <a href="#" class="inline-block">
                                <img class="h-6" src="vista-assets/images/logos/linkedin-logo.svg" alt="">
                            </a>
                            <a href="#" class="inline-block">
                                <img class="h-6" src="vista-assets/images/logos/instagram-logo.svg" alt="">
                            </a>
                            <a href="#" class="inline-block">
                                <img class="h-6" src="vista-assets/images/logos/facebook-logo.svg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-2/3 p-4">
                    <div class="lg:pl-20">
                        <p class="text-white text-opacity-70 text-xl mb-12 max-w-4xl">Cash basis accounting simplifies tracking by only recording transactions when cash enters or exits your business, regardless of when they're earned or billed. It's commonly used by individuals and small businesses with straightforward cash flows. While it offers simplicity and clarity regarding available cash, it may not provide a complete picture of business health or growth opportunities.</p>
                        <h2 class="text-white text-4xl font-bold mb-6">What is cash basis accounting?</h2>
                        <p class="text-white text-opacity-70 text-xl mb-12 max-w-4xl">Cash basis accounting is when you only record transactions when the money enters or leaves your business, even if they were earned or billed earlier.</p>
                        <h2 class="text-white text-4xl font-bold mb-6">How does cash accounting work?</h2>
                        <p class="text-white text-opacity-70 text-xl mb-6 max-w-4xl">Cash basis accounting is a simple way to track the cash that’s flowing in and out of your business.</p>
                        <p class="text-white text-opacity-70 text-xl mb-6 max-w-4xl">Here are a few examples of what it can look like:</p>
                        <ul class="list-disc pl-6 flex flex-col gap-6 mb-12">
                            <li class="text-white text-opacity-70 text-xl max-w-3xl">With cash basis accounting, you record payments for products as they're received, not beforehand, even with flexible payment options like installment plans for your online shop.</li>
                            <li class="text-white text-opacity-70 text-xl max-w-3xl">If customers pay with credit cards, revenue isn't recorded immediately but when the payment is received from the credit card company.</li>
                            <li class="text-white text-opacity-70 text-xl max-w-3xl">You’re a graphic designer who spends a week in April creating a brochure for a local gallery. You submit an invoice of net 30, which means that the gallery is paying you in May. With cash basis accounting, you’d recognize that income in May when you receive the payment rather than in April, when you did the work.</li>
                            <li class="text-white text-opacity-70 text-xl max-w-3xl">In cash basis accounting for your online clothing shop, sales are only recorded when payment is received via debit or cash, not credit.</li>
                        </ul>
                        <h2 class="text-white text-4xl font-bold mb-6">The bottom line on cash basis accounting</h2>
                        <div class="flex items-center gap-6">
                            <div class="bg-pink-500 w-1 h-16 flex-shrink-0"></div>
                            <p class="text-sweetPink-500 text-xl font-medium max-w-3xl">Cash basis accounting is a good option for small businesses or individuals, especially those who almost exclusively deal with cash.</p>
                        </div>
                    </div>ś
                </div>
            </div>
        </div>
        <div class="flex justify-between items-center flex-wrap gap-4 mb-10">
            <h2 class="font-heading text-white text-3xl font-bold">Continue Reading</h2>
            <a href="#" class="inline-flex items-center gap-2 text-white hover:text-opacity-70 transition duration-200">
                <span class="text-sm font-medium">See all</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M5.5 3.00024L10.5 8.00024L5.5 13.0002" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline max-w-xs">7 Black Friday tips for small businesses</p>
                </a>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline max-w-xs">5 ways to get paid faster with automated invoicing</p>
                </a>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline max-w-xs">How to prepare for a business tax audit</p>
                </a>
            </div>
        </div>
    </div> 
</section>