Shuffle Components in Filytreck library

<ul class="flex flex-wrap gap-3 py-3 px-4">
    <li class="flex flex-wrap items-center text-gray-500">
        <a href="#" class="mr-3 font-medium">Home</a>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
            <path d="M6.51348 2.21443C6.4457 2.28417 6.39189 2.36715 6.35518 2.45857C6.31846 2.54999 6.29956 2.64804 6.29956 2.74708C6.29956 2.84612 6.31846 2.94418 6.35518 3.0356C6.39189 3.12702 6.4457 3.20999 6.51348 3.27973L8.89286 5.74793L1.66071 5.74793C1.46891 5.74793 1.28495 5.82697 1.14932 5.96766C1.0137 6.10835 0.9375 6.29917 0.9375 6.49814C0.9375 6.69711 1.0137 6.88793 1.14932 7.02862C1.28495 7.16931 1.46891 7.24835 1.66071 7.24835L8.89286 7.24835L6.51348 9.71654C6.4457 9.78629 6.39189 9.86926 6.35518 9.96068C6.31846 10.0521 6.29956 10.1502 6.29956 10.2492C6.29956 10.3482 6.31846 10.4463 6.35518 10.5377C6.39189 10.6291 6.4457 10.7121 6.51348 10.7818C6.64899 10.9216 6.83228 11 7.02335 11C7.21441 11 7.39771 10.9216 7.53321 10.7818L10.6358 7.55594C10.9074 7.27584 11.0609 6.89543 11.0625 6.49814C11.059 6.10345 10.9057 5.72609 10.6358 5.44784L7.53321 2.22193C7.39867 2.0812 7.2159 2.00142 7.02484 2.00002C6.83378 1.99861 6.64994 2.0757 6.51348 2.21443Z" fill="currentColor"></path>
        </svg>
    </li>
    <li class="flex flex-wrap items-center text-gray-500">
        <a href="#" class="mr-3 font-medium">Use cases</a>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
            <path d="M6.51348 2.21443C6.4457 2.28417 6.39189 2.36715 6.35518 2.45857C6.31846 2.54999 6.29956 2.64804 6.29956 2.74708C6.29956 2.84612 6.31846 2.94418 6.35518 3.0356C6.39189 3.12702 6.4457 3.20999 6.51348 3.27973L8.89286 5.74793L1.66071 5.74793C1.46891 5.74793 1.28495 5.82697 1.14932 5.96766C1.0137 6.10835 0.9375 6.29917 0.9375 6.49814C0.9375 6.69711 1.0137 6.88793 1.14932 7.02862C1.28495 7.16931 1.46891 7.24835 1.66071 7.24835L8.89286 7.24835L6.51348 9.71654C6.4457 9.78629 6.39189 9.86926 6.35518 9.96068C6.31846 10.0521 6.29956 10.1502 6.29956 10.2492C6.29956 10.3482 6.31846 10.4463 6.35518 10.5377C6.39189 10.6291 6.4457 10.7121 6.51348 10.7818C6.64899 10.9216 6.83228 11 7.02335 11C7.21441 11 7.39771 10.9216 7.53321 10.7818L10.6358 7.55594C10.9074 7.27584 11.0609 6.89543 11.0625 6.49814C11.059 6.10345 10.9057 5.72609 10.6358 5.44784L7.53321 2.22193C7.39867 2.0812 7.2159 2.00142 7.02484 2.00002C6.83378 1.99861 6.64994 2.0757 6.51348 2.21443Z" fill="currentColor"></path>
        </svg>
    </li>
    <li class="flex flex-wrap items-center text-black">
        <a href="#" class="mr-3 font-medium">Consulting businesses</a>
    </li>
</ul>

<section class="py-24 md:py-36 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="mb-20 max-w-2xl mx-auto text-center">
            <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center">Stay in touch</h2>
        </div>
        <div class="p-8 py-24 max-w-4xl mx-auto bg-white rounded-3xl">
            <h2 class="mb-6 font-heading text-3xl md:text-4xl font-medium text-center">Newsletter</h2>
            <p class="mb-20 text-lg text-gray-500 font-medium text-center max-w-xl mx-auto leading-normal">Subscribe to our newsletter and receive the latest news and exclusive insight every week.</p>
            <div class="relative p-1.5 max-w-md mx-auto bg-gray-50 rounded-2xl md:rounded-full focus-within:ring-4 focus:ring-blue-200 transition duration-200">
                <div class="relative">
                    <input id="newsletter-input-01-1" type="text" class="py-4 md:pl-11 md:pr-44 w-full text-black placeholder-black font-semibold text-center md:text-left bg-transparent outline-none" placeholder="Your email address">
                    <a href="#" class="md:absolute md:top-0 md:right-0 inline-flex justify-center items-center text-center w-full md:w-auto h-14 md:h-full py-2 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-2xl md:rounded-full transition duration-200">Get started</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="relative py-16 bg-black" x-data="{ activeSlide: 1, slideCount: 3 }">
    <img class="absolute top-0 left-0 w-full h-full select-none" src="fily-assets/gradients/gradient-httpcodes2.png" alt="">
    <div class="relative container mx-auto px-4">
        <div class="py-24 md:py-36 px-10 md:px-24 bg-black rounded-3xl">
            <div class="flex flex-wrap -m-8">
                <div class="w-full md:w-1/2 p-8">
                    <div class="overflow-hidden">
                        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex transition-transform duration-500 ease-in-out">
                            <div class="flex-shrink-0 w-full px-4">
                                <h2 class="mb-12 font-heading text-6xl text-white text-opacity-10 font-bold">01</h2>
                                <h2 class="mb-12 text-3xl md:text-4xl text-white font-medium">Simplicity Redefined: A Seamless and Intuitive User Experience</h2>
                                <p class="mb-12 text-xl text-white font-light leading-relaxed">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc gravida malesuada.</p>
                            </div>
                            <div class="flex-shrink-0 w-full px-4">
                                <h2 class="mb-12 font-heading text-6xl text-white text-opacity-10 font-bold">02</h2>
                                <h2 class="mb-12 text-3xl md:text-4xl text-white font-medium">Effortless Navigation for Maximum Efficiency</h2>
                                <p class="mb-12 text-xl text-white font-light leading-relaxed">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc gravida malesuada.</p>
                            </div>
                            <div class="flex-shrink-0 w-full px-4">
                                <h2 class="mb-12 font-heading text-6xl text-white text-opacity-10 font-bold">03</h2>
                                <h2 class="mb-12 text-3xl md:text-4xl text-white font-medium">Streamlined Processes for Seamless Productivity</h2>
                                <p class="mb-12 text-xl text-white font-light leading-relaxed">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc gravida malesuada.</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center -m-7 px-4">
                        <div class="w-full md:flex-1 p-7">
                            <div class="relative bg-white bg-opacity-10 overflow-hidden rounded-full" style="height: 3px;" x-data="{ progress: 0 }" x-init="progress = 100 / slideCount">
                                <div class="absolute top-0 left-0 h-full bg-blue-500" :style="`width: ${progress * activeSlide}%`"></div>
                            </div>
                        </div>
                        <div class="w-full md:w-auto p-7">
                            <div class="flex flex-wrap justify-center md:justify-end">
                                <div class="w-auto p-2">
                                    <a href="#" x-on:click.prevent="activeSlide > 1 ? activeSlide -= 1 : activeSlide = 1" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white bg-opacity-10 hover:bg-opacity-20 focus:bg-opacity-20 focus:ring focus:ring-gray-200 rounded-full transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="w-auto p-2">
                                    <a href="#" x-on:click.prevent="activeSlide < slideCount ? activeSlide += 1 : activeSlide = slideCount" class="flex items-center justify-center w-14 h-14 text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-8">
                    <img class="w-full h-full object-cover rounded-3xl" style="height: 680px;" src="fily-assets/how-it-works/pic.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

<div class="fixed top-0 flex justify-center w-full z-40 p-6">
    <div class="px-6 py-5 bg-gray-50 rounded-3xl">
        <div class="flex flex-wrap items-center gap-4">
            <div class="w-auto">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="28" height="28" rx="14" fill="#24B428"></rect>
                    <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                </svg>
            </div>
            <p class="flex-1 text-lg font-medium">Your settings have been saved.</p>    
        </div>
    </div>
</div>

<section class="py-24 md:py-36" style="background: url('fily-assets/gradients/gradient-contact.jpg'); background-size: cover;">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-8">
            <div class="w-full md:w-1/2 p-8">
                <div class="pt-18">
                    <h2 class="mb-9 font-heading text-4xl md:text-5xl font-bold text-white">Let us know how we can help you</h2>
                    <p class="text-xl text-white font-light leading-normal">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci fermentum</p>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-8">
                <form action="#" class="pt-24 pb-28 px-16 max-w-2xl mx-auto bg-white bg-opacity-5 w-full rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-4">
                        <div class="w-full md:w-1/2 p-2.5">
                            <label for="contact-input-01-1" class="mb-2 inline-block text-sm text-gray-500 font-medium">First name</label>
                            <input id="contact-input-01-1" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        </div>
                        <div class="w-full md:w-1/2 p-2.5">
                            <label for="contact-input-01-2" class="mb-2 inline-block text-sm text-gray-500 font-medium">Last name</label>
                            <input id="contact-input-01-2" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        </div>
                    </div>
                    <div class="flex flex-wrap -m-3 mb-11">
                        <div class="w-full p-3">
                            <label for="contact-input-01-3" class="mb-2 inline-block text-sm text-gray-500 font-medium">Address email</label>
                            <input id="contact-input-01-3" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        </div>
                        <div class="w-full p-3">
                            <label for="contact-input-01-4" class="mb-2 inline-block text-sm text-gray-500 font-medium">Subject</label>
                            <input id="contact-input-01-4" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        </div>
                        <div class="w-full p-3">
                            <label for="contact-textarea-01-1" class="mb-2 inline-block text-sm text-gray-500 font-medium">Message</label>
                            <textarea id="contact-textarea-01-1" placeholder="Type message here" class="w-full bg-transparent p-6 h-28 overflow-hidden font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-500 focus:ring focus:ring-blue-200 rounded-3xl resize-none transition duration-200"></textarea>
                        </div>
                    </div>
                    <button type="submit" class="inline-flex justify-center items-center text-center h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Send message</button>
                </form>  
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36" style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
    <div class="container mx-auto px-4">
        <div class="pt-20 xl:pt-32 bg-black overflow-hidden rounded-3xl">
            <div class="flex flex-wrap">
                <div class="w-full lg:w-1/3 xl:w-1/2 mb-16 md:mb-0">
                    <div class="px-10 md:pb-16 max-w-lg mx-auto">
                        <h2 class="mb-6 font-heading text-3xl md:text-4xl text-white">Get mobile app</h2>
                        <p class="mb-14 text-xl text-gray-500 font-medium leading-relaxed">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci a, fermentum finibus tellus.</p>
                        <a href="#" class="inline-flex justify-center items-center text-center h-18 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Download app</a>
                    </div>
                </div>
                <div class="w-full lg:w-2/3 xl:w-1/2 self-end">
                    <img class="mx-auto xl:ml-0 object-cover transform hover:scale-105 transition duration-500" style="height: 476px;" src="fily-assets/faq/iphone.png" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-black" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center text-white">Categories</h2>
        <p class="mb-24 text-xl font-medium leading-relaxed text-center text-gray-500">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt</p>
        <div class="flex flex-wrap -m-5">
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-blue-500 rounded-full">
                                <img class="h-6" src="fily-assets/categories/clock-white.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl text-white font-bold">Time tracker</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-pink-500 rounded-full">
                                <img class="h-6" src="fily-assets/categories/notebook-white.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl text-white font-bold">Timesheets &amp; reports</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-orange-500 rounded-full">
                                <img class="h-6" src="fily-assets/categories/stopwatch-white.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl text-white font-bold">Real-time active timers</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-green-500 rounded-full">
                                <img class="h-6" src="fily-assets/categories/file-invoice-dollar-white.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl text-white font-bold">Online invoicing</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-purple-500 rounded-full">
                                <img class="h-6" src="fily-assets/categories/list-check-white.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl text-white font-bold">Task comments</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-gray-500 rounded-full">
                                <img class="h-6" src="fily-assets/categories/user-white.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl text-white font-bold">Client profitability</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-green-500 rounded-full">
                                <img class="h-6" src="fily-assets/categories/file-invoice-dollar-white.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl text-white font-bold">Online meeting</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-purple-500 rounded-full">
                                <img class="h-6" src="fily-assets/categories/list-check-white.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl text-white font-bold">Jobs</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-gray-500 rounded-full">
                                <img class="h-6" src="fily-assets/categories/user-white.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl text-white font-bold">Support</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center mt-18">
            <a href="#" x-on:click.prevent="showContent = true" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 border border-gray-300 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Show more</a>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="py-24 px-10 md:px-18 bg-white text-center max-w-5xl mx-auto rounded-3xl">
            <h2 class="mb-6 font-heading text-7xl font-bold text-center">404</h2>
            <p class="mb-16 text-2xl md:text-3xl text-gray-500 font-medium">That page isn’t doesn’t exist or we can’t find it.</p>
            <div class="flex justify-center">
                <a href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Back to homepage</a>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-40 bg-gray-50 overflow-hidden">
    <div class="container mx-auto px-4">
        <div class="mb-12 max-w-2xl mx-auto">
            <h3 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center leading-tight">Meet our team</h3>
            <p class="text-xl font-medium text-center leading-relaxed">Our diverse team of experts brings a wealth of experience in task management, time optimization, and goal achievement to deliver the best solutions to you.</p>
        </div>
    </div>
    <div class="relative left-1/2 transform -translate-x-1/2 flex flex-nowrap justify-center min-w-max mb-5 gap-5">
        <div class="py-10 px-8 h-full bg-white max-w-2xl rounded-3xl">
            <div class="flex flex-wrap -m-5">
                <div class="w-1/3 p-5">
                    <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic.jpg" alt="">
                </div>
                <div class="w-2/3 p-5">
                    <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                        <div class="flex-1 p-2">
                            <h3 class="font-heading text-2xl font-bold">Deacon Galvan</h3>
                            <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                        </div>
                        <div class="w-auto p-2">
                            <div class="flex flex-wrap -m-1">
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-500 font-medium leading-relaxed">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia mauris, at mattis nisl.</p>
                </div>
            </div>
        </div>
        <div class="py-10 px-8 h-full bg-white max-w-2xl rounded-3xl">
            <div class="flex flex-wrap -m-5">
                <div class="w-1/3 p-5">
                    <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic.jpg" alt="">
                </div>
                <div class="w-2/3 p-5">
                    <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                        <div class="flex-1 p-2">
                            <h3 class="font-heading text-2xl font-bold">Deacon Galvan</h3>
                            <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                        </div>
                        <div class="w-auto p-2">
                            <div class="flex flex-wrap -m-1">
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-500 font-medium leading-relaxed">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia mauris, at mattis nisl.</p>
                </div>
            </div>
        </div>
        <div class="py-10 px-8 h-full bg-white max-w-2xl rounded-3xl">
            <div class="flex flex-wrap -m-5">
                <div class="w-1/3 p-5">
                    <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic2.jpg" alt="">
                </div>
                <div class="w-2/3 p-5">
                    <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                        <div class="flex-1 p-2">
                            <h3 class="font-heading text-2xl font-bold">Natasha Adams</h3>
                            <p class="text-sm text-blue-500 font-medium">CEO, Founder</p>
                        </div>
                        <div class="w-auto p-2">
                            <div class="flex flex-wrap -m-1">
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-500 font-medium leading-relaxed">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia mauris, at mattis nisl.</p>
                </div>
            </div>
        </div>
        <div class="py-10 px-8 h-full bg-white max-w-2xl rounded-3xl">
            <div class="flex flex-wrap -m-5">
                <div class="w-1/3 p-5">
                    <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic4.jpg" alt="">
                </div>
                <div class="w-2/3 p-5">
                    <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                        <div class="flex-1 p-2">
                            <h3 class="font-heading text-2xl font-bold">Johnathan Barton</h3>
                            <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                        </div>
                        <div class="w-auto p-2">
                            <div class="flex flex-wrap -m-1">
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-500 font-medium leading-relaxed">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia mauris, at mattis nisl.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="relative left-1/2 transform -translate-x-1/2 flex flex-nowrap justify-center min-w-max gap-5">
        <div class="py-10 px-8 h-full bg-white max-w-2xl rounded-3xl">
            <div class="flex flex-wrap -m-5">
                <div class="w-1/3 p-5">
                    <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic3.jpg" alt="">
                </div>
                <div class="w-2/3 p-5">
                    <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                        <div class="flex-1 p-2">
                            <h3 class="font-heading text-2xl font-bold">Jenna Hines</h3>
                            <p class="text-sm text-blue-500 font-medium">CEO, Founder</p>
                        </div>
                        <div class="w-auto p-2">
                            <div class="flex flex-wrap -m-1">
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-500 font-medium leading-relaxed">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia mauris, at mattis nisl.</p>
                </div>
            </div>
        </div>
        <div class="py-10 px-8 h-full bg-white max-w-2xl rounded-3xl">
            <div class="flex flex-wrap -m-5">
                <div class="w-1/3 p-5">
                    <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic5.jpg" alt="">
                </div>
                <div class="w-2/3 p-5">
                    <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                        <div class="flex-1 p-2">
                            <h3 class="font-heading text-2xl font-bold">Heath Kaufman</h3>
                            <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                        </div>
                        <div class="w-auto p-2">
                            <div class="flex flex-wrap -m-1">
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-500 font-medium leading-relaxed">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia mauris, at mattis nisl.</p>
                </div>
            </div>
        </div>
        <div class="py-10 px-8 h-full bg-white max-w-2xl rounded-3xl">
            <div class="flex flex-wrap -m-5">
                <div class="w-1/3 p-5">
                    <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic6.jpg" alt="">
                </div>
                <div class="w-2/3 p-5">
                    <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                        <div class="flex-1 p-2">
                            <h3 class="font-heading text-2xl font-bold">Aleeza Keller</h3>
                            <p class="text-sm text-blue-500 font-medium">CEO, Founder</p>
                        </div>
                        <div class="w-auto p-2">
                            <div class="flex flex-wrap -m-1">
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="w-auto p-1">
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-500 font-medium leading-relaxed">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia mauris, at mattis nisl.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36">
    <div class="container mx-auto px-4">
        <h2 class="mb-16 font-heading text-4xl font-medium text-black text-center">They trusted us</h2>
        <div class="max-w-5xl mx-auto">
            <div class="flex flex-wrap justify-center -m-8">
                <div class="w-auto p-8">
                    <div class="p-8 flex justify-center items-center bg-gray-50 rounded-2xl" style="width: 120px; height: 120px;">
                        <img style="height: 52px;" src="fily-assets/brands/spotify.svg" alt="">
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="p-8 flex justify-center items-center bg-gray-50 rounded-2xl" style="width: 120px; height: 120px;">
                        <img style="height: 52px;" src="fily-assets/brands/slack.svg" alt="">
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="p-8 flex justify-center items-center bg-gray-50 rounded-2xl" style="width: 120px; height: 120px;">
                        <img style="height: 46px;" src="fily-assets/brands/figma.svg" alt="">
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="p-8 flex justify-center items-center bg-gray-50 rounded-2xl" style="width: 120px; height: 120px;">
                        <img style="height: 52px;" src="fily-assets/brands/apple-dark.svg" alt="">
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="p-8 flex justify-center items-center bg-gray-50 rounded-2xl" style="width: 120px; height: 120px;">
                        <img style="height: 37px;" src="fily-assets/brands/mastercard.svg" alt="">
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="p-8 flex justify-center items-center bg-gray-50 rounded-2xl" style="width: 120px; height: 120px;">
                        <img style="height: 41px;" src="fily-assets/brands/microsoft.svg" alt="">
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="p-8 flex justify-center items-center bg-gray-50 rounded-2xl" style="width: 120px; height: 120px;">
                        <img style="height: 26px;" src="fily-assets/brands/visa.svg" alt="">
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="p-8 flex justify-center items-center bg-gray-50 rounded-2xl" style="width: 120px; height: 120px;">
                        <img style="height: 32px;" src="fily-assets/brands/brand.svg" alt="">
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="p-8 flex justify-center items-center bg-gray-50 rounded-2xl" style="width: 120px; height: 120px;">
                        <img style="height: 52px;" src="fily-assets/brands/opera.svg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-black" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl text-white text-center font-bold">Features</h2>
        <p class="mb-18 text-xl text-gray-500 font-medium text-center">Explore the powerful features that make FilyTreck stand out in the realm of task management.</p>
        <div class="max-w-5xl mx-auto">
            <div class="flex flex-wrap -m-3">
                <div class="w-full md:w-1/2 p-3">
                    <div class="relative p-px bg-gradient-white rounded-3xl overflow-hidden">
                        <div class="relative">
                            <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                            <div class="relative py-14 px-10 h-full">
                                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                                    <div class="w-auto p-2.5">
                                        <div class="flex items-center justify-center w-14 h-14 bg-orange-500 rounded-xl">
                                            <img class="h-6" src="fily-assets/features/app.svg" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-2.5">
                                        <h3 class="font-heading text-xl text-white font-bold leading-snug">Everything in one app</h3>
                                    </div>
                                </div>
                                <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-3">
                    <div class="relative p-px bg-gradient-white rounded-3xl overflow-hidden">
                        <div class="relative">
                            <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                            <div class="relative py-14 px-10 h-full">
                                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                                    <div class="w-auto p-2.5">
                                        <div class="flex items-center justify-center w-14 h-14 bg-blue-500 rounded-xl">
                                            <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-2.5">
                                        <h3 class="font-heading text-xl text-white font-bold leading-snug">Increase in the productivity</h3>
                                    </div>
                                </div>
                                <p class="font-medium text-gray-500 leading-relaxed">Experience a substantial boost in productivity with our streamlined approach, optimizing your workflow and time management.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-3">
                    <div class="relative p-px bg-gradient-white rounded-3xl overflow-hidden">
                        <div class="relative">
                            <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                            <div class="relative py-14 px-10 h-full">
                                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                                    <div class="w-auto p-2.5">
                                        <div class="flex items-center justify-center w-14 h-14 bg-purple-500 rounded-xl">
                                            <img class="h-6" src="fily-assets/features/comments.svg" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-2.5">
                                        <h3 class="font-heading text-xl text-white font-bold leading-snug">Efficient contact with the client</h3>
                                    </div>
                                </div>
                                <p class="font-medium text-gray-500 leading-relaxed">Facilitate seamless communication and effortless engagement with clients through our efficient features.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-3">
                    <div class="relative p-px bg-gradient-white rounded-3xl overflow-hidden">
                        <div class="relative">
                            <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                            <div class="relative py-14 px-10 h-full">
                                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                                    <div class="w-auto p-2.5">
                                        <div class="flex items-center justify-center w-14 h-14 bg-green-500 rounded-xl">
                                            <img class="h-6" src="fily-assets/features/clock.svg" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-2.5">
                                        <h3 class="font-heading text-xl text-white font-bold leading-snug">Everything in one app</h3>
                                    </div>
                                </div>
                                <p class="font-medium text-gray-500 leading-relaxed">Effortless Time Management for Optimal Productivity. Discover effective strategies and tools to manage your time efficiently.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 p-3">
                    <div class="relative p-px bg-gradient-white rounded-3xl overflow-hidden">
                        <div class="relative">
                            <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                            <div class="relative py-14 px-10 h-full">
                                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                                    <div class="w-auto p-2.5">
                                        <div class="flex items-center justify-center w-14 h-14 bg-purple-500 rounded-xl">
                                            <img class="h-6" src="fily-assets/features/comments.svg" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-2.5">
                                        <h3 class="font-heading text-xl text-white font-bold leading-snug">Analytics Snapshot</h3>
                                    </div>
                                </div>
                                <p class="font-medium text-gray-500 leading-relaxed">Facilitate seamless communication and effortless engagement with clients through our efficient features.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 p-3">
                    <div class="relative p-px bg-gradient-white rounded-3xl overflow-hidden">
                        <div class="relative">
                            <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                            <div class="relative py-14 px-10 h-full">
                                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                                    <div class="w-auto p-2.5">
                                        <div class="flex items-center justify-center w-14 h-14 bg-green-500 rounded-xl">
                                            <img class="h-6" src="fily-assets/features/clock.svg" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-2.5">
                                        <h3 class="font-heading text-xl text-white font-bold leading-snug">Time Tracker</h3>
                                    </div>
                                </div>
                                <p class="font-medium text-gray-500 leading-relaxed">Effortless Time Management for Optimal Productivity. Discover effective strategies and tools to manage your time efficiently.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': showContent}" class="flex justify-center mt-16">
                <a href="#" x-on:click.prevent="showContent = true" class="inline-flex justify-center items-center text-center h-18 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full border border-gray-500 focus:ring-4 focus:ring-gray-700 transition duration-200">See all features</a>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-40 bg-black" x-data="{ pricing: ''}" x-init="pricing = $refs.pricing1.textContent">
    <div class="container mx-auto px-4">
        <div class="mb-20 max-w-3xl mx-auto text-center">
            <img class="mb-6 h-9 mx-auto" src="fily-assets/logos/fily-treck-icon.svg" alt="">
            <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center text-white">Pricing plans</h2>
            <p class="mb-7 text-white text-xl font-medium leading-relaxed">Whether you're looking for essential features at no cost or a premium experience with additional benefits, FilyTreck has the perfect plan for you.</p>
            <div class="flex flex-wrap justify-center items-center -m-2 mb-20">
                <div class="flex p-2">
                    <div class="w-auto">
                        <img class="h-9 mx-auto" src="fily-assets/pricing/avatar3.png" alt="">
                    </div>
                    <div class="w-auto -ml-4">
                        <img class="h-9 mx-auto" src="fily-assets/pricing/avatar2.png" alt="">
                    </div>
                    <div class="w-auto -ml-4">
                        <img class="h-9 mx-auto" src="fily-assets/pricing/avatar.png" alt="">
                    </div>
                </div>
                <span class="p-2 text-sm text-gray-500 font-medium">640k+ happy customers</span>
            </div>
            <div class="relative p-1.5 max-w-sm mx-auto border border-gray-500 rounded-full transition duration-200">
                <div class="flex">
                    <a x-ref="pricing1" x-on:click.prevent="pricing = $refs.pricing1.textContent" href="#" :class="{'bg-blue-500': $refs.pricing1.textContent == pricing, 'text-gray-500':  $refs.pricing1.textContent != pricing}" class="flex justify-center text-center w-full py-4 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 rounded-full transition duration-200">Monthly billing</a>
                    <a x-ref="pricing2" x-on:click.prevent="pricing = $refs.pricing2.textContent" href="#" :class="{'bg-blue-500': $refs.pricing2.textContent == pricing, 'text-gray-500':  $refs.pricing2.textContent != pricing}" class="flex justify-center text-center w-full py-4 px-6 font-semibold text-gray-500 hover:text-white focus:text-white rounded-full transition duration-200">Yearly billing</a>
                </div>
            </div>
        </div>
        <div class="max-w-4xl mx-auto">
            <div class="mb-6 p-px bg-gradient-white overflow-hidden rounded-3xl">
                <div class="relative">
                    <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                    <div class="relative z-10 py-18 px-10 pb-10">
                        <div class="flex flex-wrap items-center -m-8">
                            <div class="w-full md:w-1/2 p-8">
                                <div class="md:px-16 md:border-r md:border-gray-500">
                                    <h3 class="mb-1 font-heading text-3xl font-bold text-white">Starter</h3>
                                    <p class="mb-6 text-lg text-gray-500 font-medium">Best for personal use</p>
                                    <div class="mb-16">
                                        <span class="text-4xl font-medium text-white">$0</span>
                                        <span class="text-gray-500 font-medium">/free forever</span>
                                    </div>
                                    <a href="#" class="inline-flex justify-center items-center text-center h-18 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full border border-gray-500 focus:ring-4 focus:ring-gray-700 transition duration-200">Start for free</a>
                                </div>
                            </div>
                            <div class="w-full md:w-1/2 p-8">
                                <h3 class="mb-8 font-heading flex items-center gap-2.5 text-xl font-bold text-white">
                                    <span>Features</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                        <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="white"></path>
                                    </svg>
                                </h3>
                                <ul class="max-w-md mx-auto">
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Unlimited Time Tracking</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Unlimited Invoices</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Projects <span class="text-gray-500 font-normal">(limited to 3)</span></span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Static Time Reports</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Desktop &amp; Mobile Apps</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-0">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Guest Access</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mb-6 p-px bg-gradient-white overflow-hidden rounded-3xl">
                <div class="relative">
                    <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                    <div class="relative z-10 py-18 px-10 pb-10">
                        <div class="flex flex-wrap items-center -m-8">
                            <div class="w-full md:w-1/2 p-8">
                                <div class="md:px-16 md:border-r md:border-gray-500">
                                    <span class="mb-2 inline-block font-medium text-pink-500">Most popular</span>
                                    <h3 class="mb-1 font-heading text-3xl font-bold text-white">Enterprise</h3>
                                    <p class="mb-6 text-lg text-gray-500 font-medium">Teams &amp; corporations</p>
                                    <div class="mb-16">
                                        <span :class="{'hidden': $refs.pricing2.textContent == pricing}" class="text-4xl font-medium text-white">$32</span>
                                        <span :class="{'hidden': $refs.pricing1.textContent == pricing}" class="hidden text-4xl font-medium text-white">$64</span>
                                        <span :class="{'hidden': $refs.pricing2.textContent == pricing}" class="text-gray-500 font-medium">/per month</span>
                                        <span :class="{'hidden': $refs.pricing1.textContent == pricing}" class="hidden text-gray-500 font-medium">/per year</span>
                                    </div>
                                    <a href="#" class="inline-flex justify-center items-center text-center h-18 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full border border-gray-500 focus:ring-4 focus:ring-gray-700 transition duration-200">Choose a plan</a>
                                </div>
                            </div>
                            <div class="w-full md:w-1/2 p-8">
                                <h3 class="mb-8 font-heading flex items-center gap-2.5 text-xl font-bold text-white">
                                    <span>Features</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                        <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="white"></path>
                                    </svg>
                                </h3>
                                <ul class="max-w-md mx-auto">
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Unlimited Clients</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Unlimited Tasks</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Project Templates</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Unlimited Estimates &amp; Expenses</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">In-App Tech Support</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-0">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">25GB Storage</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-px bg-gradient-white overflow-hidden rounded-3xl">
                <div class="relative">
                    <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                    <div class="relative z-10 py-18 px-10 pb-10">
                        <div class="flex flex-wrap items-center -m-8">
                            <div class="w-full md:w-1/2 p-8">
                                <div class="md:px-16 md:border-r md:border-gray-500">
                                    <h3 class="mb-1 font-heading text-3xl font-bold text-white">Business</h3>
                                    <p class="mb-6 text-lg text-gray-500 font-medium">Best for business owners</p>
                                    <div class="mb-16">
                                        <span :class="{'hidden': $refs.pricing2.textContent == pricing}" class="text-4xl font-medium text-white">$68</span>
                                        <span :class="{'hidden': $refs.pricing1.textContent == pricing}" class="hidden text-4xl font-medium text-white">$136</span>
                                        <span :class="{'hidden': $refs.pricing2.textContent == pricing}" class="text-gray-500 font-medium">/per month</span>
                                        <span :class="{'hidden': $refs.pricing1.textContent == pricing}" class="hidden text-gray-500 font-medium">/per year</span>
                                    </div>
                                    <a href="#" class="inline-flex justify-center items-center text-center h-18 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full border border-gray-500 focus:ring-4 focus:ring-gray-700 transition duration-200">Start for free</a>
                                </div>
                            </div>
                            <div class="w-full md:w-1/2 p-8">
                                <h3 class="mb-8 font-heading flex items-center gap-2.5 text-xl font-bold text-white">
                                    <span>Features</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                        <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="white"></path>
                                    </svg>
                                </h3>
                                <ul class="max-w-md mx-auto">
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Employee Scheduling &amp; Workload</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Free Onboarding &amp; Training</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Employee Leave Management</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Gantt Charts</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-2">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Portfolio Gantt Chart</span>
                                        </div>
                                    </li>
                                    <li class="flex items-center -m-2 mb-0">
                                        <div class="w-auto p-2">
                                            <div class="flex items-center justify-center w-7 h-7 bg-blue-500 rounded-full">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="white"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="w-auto p-2">
                                            <span class="text-lg font-medium text-white">Online Remote Assistance</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div x-data="{ mobileNavOpen: false, dropdown: false }">
    <nav class="relative px-12 py-5">
        <div class="flex items-center justify-between">
            <a class="relative z-10 pr-4 lg:pr-0" href="#">
                <img class="h-9" src="fily-assets/logos/fily-treck-black-logo.svg" alt="">
            </a>
            <ul class="hidden xl:absolute xl:top-1/2 xl:left-1/2 xl:transform xl:-translate-y-1/2 xl:-translate-x-1/2 xl:flex lg:justify-center gap-14">
                <li>
                    <a x-on:mousemove="dropdown = false" href="#" class="text-lg text-black hover:text-gray-700 font-medium transition duration-200">Our features</a>
                </li>
                <li>
                    <a x-on:mousemove="dropdown = false" href="#" class="text-lg text-black hover:text-gray-700 font-medium transition duration-200">How to use?</a>
                </li>
                <li>
                    <a x-on:mousemove="dropdown = true" href="#" :class="{'text-gray-700': dropdown}" class="flex items-center text-lg text-black hover:text-gray-700 font-medium transition duration-200">
                        <span class="mr-2.5">Use cases</span>
                        <div :class="{'rotate-180': dropdown}" class="transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
                                <g>
                                    <path d="M11.8098 3.51666C11.7362 3.43826 11.6487 3.37604 11.5523 3.33357C11.4559 3.2911 11.3525 3.26924 11.2481 3.26924C11.1436 3.26924 11.0402 3.2911 10.9438 3.33357C10.8474 3.37604 10.7599 3.43826 10.6864 3.51666L7.06305 7.34761C6.9895 7.42601 6.902 7.48824 6.8056 7.5307C6.70919 7.57317 6.60579 7.59503 6.50135 7.59503C6.39691 7.59503 6.29351 7.57317 6.19711 7.5307C6.1007 7.48824 6.0132 7.42601 5.93966 7.34761L2.31633 3.51666C2.24279 3.43826 2.15529 3.37604 2.05888 3.33357C1.96248 3.2911 1.85907 3.26924 1.75464 3.26924C1.6502 3.26924 1.5468 3.2911 1.45039 3.33357C1.35399 3.37604 1.26649 3.43826 1.19294 3.51666C1.0456 3.67338 0.962891 3.88538 0.962891 4.10636C0.962891 4.32734 1.0456 4.53934 1.19294 4.69606L4.82418 8.53537C5.26918 9.00529 5.87241 9.26924 6.50135 9.26924C7.13029 9.26924 7.73352 9.00529 8.17852 8.53537L11.8098 4.69606C11.9571 4.53934 12.0398 4.32734 12.0398 4.10636C12.0398 3.88538 11.9571 3.67338 11.8098 3.51666Z" fill="currentColor"></path>
                                </g>
                                <defs>
                                    <clipPath>
                                        <rect width="12" height="12" fill="white" transform="translate(0.5 0.5)"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                    </a>
                </li>
                <li>
                    <a x-on:mousemove="dropdown = false" href="#" class="text-lg text-black hover:text-gray-700 font-medium transition duration-200">Plans &amp; pricing</a>
                </li>
            </ul>
            <div class="hidden xl:flex items-center gap-2">
                <a class="hidden 2xl:block mr-8" href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <g clip-path="url(#clip0_231_6677)">
                            <path d="M19.6343 17.871L15.7634 13.9984C18.6598 10.1278 17.87 4.64195 13.9994 1.74551C10.1288 -1.15092 4.64292 -0.361157 1.74649 3.50949C-1.14994 7.38013 -0.36018 12.866 3.51046 15.7624C6.61969 18.0891 10.8901 18.0891 13.9994 15.7624L17.872 19.635C18.3587 20.1216 19.1477 20.1216 19.6343 19.635C20.121 19.1483 20.121 18.3593 19.6343 17.8727L19.6343 17.871ZM8.7872 15.015C5.34716 15.015 2.55848 12.2263 2.55848 8.78623C2.55848 5.34618 5.34716 2.55751 8.7872 2.55751C12.2273 2.55751 15.0159 5.34618 15.0159 8.78623C15.0123 12.2247 12.2257 15.0113 8.7872 15.015Z" fill="#19191B"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_231_6677">
                                <rect width="20" height="20" fill="white"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </a>
                <a class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-black hover:text-black focus:text-black bg-transparent hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 focus:ring-opacity-50 transition duration-200" href="#">Login</a>
                <a class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200" href="#">Get started</a>
            </div>
            <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" class="flex items-center justify-center h-12 p-5 text-black border border-gray-300 xl:hidden rounded-full" href="#">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.75 6.75003H1.25C0.559648 6.75003 0 7.30968 0 8.00003C0 8.69038 0.559648 9.25003 1.25 9.25003H18.75C19.4404 9.25003 20 8.69038 20 8.00003C20 7.30968 19.4404 6.75003 18.75 6.75003Z" fill="currentColor"></path>
                    <path d="M1.25 3.41669H18.75C19.4404 3.41669 20 2.85704 20 2.16669C20 1.47634 19.4404 0.916687 18.75 0.916687H1.25C0.559648 0.916687 0 1.47634 0 2.16669C0 2.85704 0.559648 3.41669 1.25 3.41669Z" fill="currentColor"></path>
                    <path d="M18.75 12.5834H1.25C0.559648 12.5834 0 13.143 0 13.8334C0 14.5237 0.559648 15.0834 1.25 15.0834H18.75C19.4404 15.0834 20 14.5237 20 13.8334C20 13.143 19.4404 12.5834 18.75 12.5834Z" fill="currentColor"></path>
                </svg>
            </a>
        </div>
    </nav>
    <div :class="{'hidden': !dropdown}" class="hidden absolute w-full z-40 px-8 lg:px-20 2xl:px-40">
        <div x-on:mouseleave="dropdown = false">
            <div class="bg-white rounded-3xl">
                <div class="flex flex-wrap divide-x divide-gray-100">
                    <div class="w-7/12 py-20">
                        <div class="flex px-16 -m-8">
                            <div class="w-1-2 p-8">
                                <h3 class="mb-10 font-heading text-2xl font-bold">By industry</h3>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Creative &amp; Marketing agencies</a>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Software &amp; Engineering firms</a>
                                <a href="#" class="mb-6 block max- w-max text-lg hover:text-gray-700 font-medium">Architecture firms</a>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Consulting businesses</a>
                                <a href="#" class="block max-w-max text-lg hover:text-gray-700 font-medium">Educational institutions </a>
                            </div>
                            <div class="w-1/2 p-8">
                                <h3 class="mb-10 font-heading text-2xl font-bold">By role</h3>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For business owners</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Nullam bibendum mollis enim, sed tempus lacus tempus nec. Etiam cursus nec neque at tempor.</p>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For project managers</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Nam ut neque nisi. Vestibulum volutpat feugiat libero, tempus ligula. Nullam ut diam sit amet turpis pretium.</p>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For employees</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Vivamus sapien enim, consequat ac volutpat a, ultrices quis enim. Cras scelerisque vel eros in consequat.</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 py-20">
                        <div class="px-16">
                            <h3 class="mb-10 font-heading text-2xl font-bold">Recommended articles</h3>
                            <div class="mb-6">
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">2023 Remote Work: A Comprehensive Guide</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">Read more</span>
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                            </svg> 
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-6">
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article2.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">Mastering the Art of Project Management Success</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">Read more</span>
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                            </svg> 
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article3.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">Optimal Work Management Software for Firms</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">Read more</span>
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                            </svg> 
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div :class="{'hidden': !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 flex-col justify-between h-full">
                <div class="flex items-center justify-between mb-8">
                    <a class="pr-4" href="#">
                        <img class="h-8" src="fily-assets/logos/fily-treck-black-logo.svg" alt="">
                    </a>
                    <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#">
                        <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="#252E4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <ul class="flex flex-col gap-8 py-16">
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">Our features</a>
                    </li>
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">How to use?</a>
                    </li>
                    <li>
                        <a href="#" class="inline-flex items-center text-lg text-black hover:text-gray-800 font-medium transition duration-200">
                            <span class="mr-2.5">Use cases</span>
                            <div :class="{'rotate-180': dropdown}" class="transform">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
                                    <g>
                                        <path d="M11.8098 3.51666C11.7362 3.43826 11.6487 3.37604 11.5523 3.33357C11.4559 3.2911 11.3525 3.26924 11.2481 3.26924C11.1436 3.26924 11.0402 3.2911 10.9438 3.33357C10.8474 3.37604 10.7599 3.43826 10.6864 3.51666L7.06305 7.34761C6.9895 7.42601 6.902 7.48824 6.8056 7.5307C6.70919 7.57317 6.60579 7.59503 6.50135 7.59503C6.39691 7.59503 6.29351 7.57317 6.19711 7.5307C6.1007 7.48824 6.0132 7.42601 5.93966 7.34761L2.31633 3.51666C2.24279 3.43826 2.15529 3.37604 2.05888 3.33357C1.96248 3.2911 1.85907 3.26924 1.75464 3.26924C1.6502 3.26924 1.5468 3.2911 1.45039 3.33357C1.35399 3.37604 1.26649 3.43826 1.19294 3.51666C1.0456 3.67338 0.962891 3.88538 0.962891 4.10636C0.962891 4.32734 1.0456 4.53934 1.19294 4.69606L4.82418 8.53537C5.26918 9.00529 5.87241 9.26924 6.50135 9.26924C7.13029 9.26924 7.73352 9.00529 8.17852 8.53537L11.8098 4.69606C11.9571 4.53934 12.0398 4.32734 12.0398 4.10636C12.0398 3.88538 11.9571 3.67338 11.8098 3.51666Z" fill="currentColor"></path>
                                    </g>
                                    <defs>
                                        <clipPath>
                                            <rect width="12" height="12" fill="white" transform="translate(0.5 0.5)"></rect>
                                        </clipPath>
                                    </defs>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">Plans &amp; pricing</a>
                    </li>
                </ul>
                <div class="flex flex-col items-center gap-2">
                    <a class="inline-flex justify-center items-center text-center w-full h-12 p-5 px-6 font-semibold text-black hover:text-black focus:text-black bg-transparent hover:bg-white focus:bg-white border border-gray-100 rounded-full focus:ring-4 focus:ring-white focus:ring-opacity-50 transition duration-200" href="#">Login</a>
                    <a class="inline-flex justify-center items-center text-center w-full h-12 p-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200" href="#">Get started</a>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="fixed top-0 flex justify-center w-full z-40 p-6">
    <div class="px-6 py-5 bg-gray-50 rounded-3xl">
        <div class="flex flex-wrap gap-4">
            <div class="w-auto">
                <img src="fily-assets/toast/close.svg" alt="">
            </div>
            <p class="flex-1 text-lg font-medium">Oops! Something went wrong. Please double-check your form and try submitting again.</p>    
        </div>
    </div>
</div>

<section class="py-24 md:py-40">
    <div class="container mx-auto px-4">
        <h3 class="mb-16 font-heading text-4xl md:text-5xl font-bold text-center leading-tight">Who we are</h3>
        <div class="max-w-6xl mx-auto">
            <div class="mb-20 relative overflow-hidden rounded-3xl" style="height: 512px;">
                <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 rounded-3xl transition duration-200" src="fily-assets/about/pic2.jpg" alt="">
            </div>
            <p class="mb-24 text-3xl max-w-5xl mx-auto text-center font-light leading-tight">Discover the convenient route to turbocharge your productivity effortlessly, allowing you to accomplish tasks faster and more efficiently, all while maintaining precision and accuracy in your work.</p>
            <div class="flex flex-wrap items-center -m-10">
                <div class="w-full md:w-1/2 p-10">
                    <div class="relative overflow-hidden rounded-3xl" style="height: 496px;">
                        <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 rounded-3xl transition duration-200" src="fily-assets/about/pic.jpg" alt="">
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-10">
                    <h3 class="mb-16 font-heading text-4xl md:text-5xl font-bold leading-tight">Simplify your workflow</h3>
                    <ul>
                        <li class="flex items-center -m-2 mb-2">
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                        <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="w-auto p-2">
                                <span class="text-lg font-medium">Streamline tasks effortlessly</span>
                            </div>
                        </li>
                        <li class="flex items-center -m-2 mb-2">
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                        <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="w-auto p-2">
                                <span class="text-lg font-medium">Boost productivity with simplicity</span>
                            </div>
                        </li>
                        <li class="flex items-center -m-2 mb-2">
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                        <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="w-auto p-2">
                                <span class="text-lg font-medium">Accelerate your work pace</span>
                            </div>
                        </li>
                        <li class="flex items-center -m-2 mb-2">
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                        <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="w-auto p-2">
                                <span class="text-lg font-medium">Effortless speed and efficiency</span>
                            </div>
                        </li>
                        <li class="flex items-center -m-2 mb-0">
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                        <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="w-auto p-2">
                                <span class="text-lg font-medium">Work smarter, not harder</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-40" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-20 font-heading text-4xl md:text-5xl font-bold text-center">Recent happenings and updates</h2>
        <div class="group mb-8 flex flex-col relative h-full overflow-hidden rounded-3xl" style="height: 662px;">
            <div class="absolute z-10 bottom-0">
                <div class="flex flex-wrap items-end py-10 px-12">
                    <div class="w-full">
                        <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white rounded-full">
                            <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                            <span class="text-gray-500 font-medium">21 October 2023</span>
                        </div>
                        <div class="flex flex-wrap items-center -m-2">
                            <div class="w-full md:w-1/2 p-2">
                                <h3 class="font-heading text-3xl md:text-4xl font-medium text-white leading-tight">2023 Remote Work: A Comprehensive Guide</h3>
                            </div>
                            <div class="w-full md:w-1/2 p-2">
                                <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 bg-black hover:bg-gray-900 focus:bg-gray-900 focus:ring focus:ring-gray-200 rounded-full transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img class="w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/people2.jpg" alt="">
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <div class="relative p-10 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="w-full">
                            <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                                <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                                <span class="text-sm font-medium text-gray-500">14 October 2023</span>
                            </div>
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Mastering the Art of Project Management Success</h3>
                            <p class="mb-10 text-gray-500 font-medium leading-relaxed">Picture yourself at the helm, steering a team to a triumphant product launch - on time, within budget, and delighting clients. Project management is the conduit from vision to achievement.</p>
                        </div>
                        <a href="#" class="flex items-center max-w-max text-blue-500 hover:text-blue-600">
                            <span class="mr-2 font-semibold">Read more</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <div class="relative p-10 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="w-full">
                            <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                                <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                                <span class="text-sm font-medium text-gray-500">11 October 2023</span>
                            </div>
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Optimal Work Management Software for Firms</h3>
                            <p class="mb-10 text-gray-500 font-medium leading-relaxed">If you handle a mix of project-related and other tasks, including client billing, and haven't discovered the perfect software yet, your search may need a new direction.</p>
                        </div>
                        <a href="#" class="flex items-center max-w-max text-blue-500 hover:text-blue-600">
                            <span class="mr-2 font-semibold">Read more</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative p-10 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="w-full">
                            <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                                <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                                <span class="text-sm font-medium text-gray-500">6 October 2023</span>
                            </div>
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">2023 Remote Work: A Comprehensive Guide</h3>
                            <p class="mb-10 text-gray-500 font-medium leading-relaxed">I've championed remote work for well over six years, possibly even longer before the global pandemic compelled professionals to transition from office to home setups.</p>
                        </div>
                        <a href="#" class="flex items-center max-w-max text-blue-500 hover:text-blue-600">
                            <span class="mr-2 font-semibold">Read more</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full lg:w-1/3 p-4">
                <div class="relative p-10 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="w-full">
                            <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                                <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                                <span class="text-sm font-medium text-gray-500">01 Jan 2024</span>
                            </div>
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Project Management Pro: Tips for Success</h3>
                            <p class="mb-10 text-gray-500 font-medium leading-relaxed">I've championed remote work for well over six years, possibly even longer before the global pandemic compelled professionals to transition from office to home setups.</p>
                        </div>
                        <a href="#" class="flex items-center max-w-max text-blue-500 hover:text-blue-600">
                            <span class="mr-2 font-semibold">Read more</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full lg:w-1/3 p-4">
                <div class="relative p-10 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="w-full">
                            <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                                <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                                <span class="text-sm font-medium text-gray-500">02 Jan 2024</span>
                            </div>
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Top Work Software Picks for Companies</h3>
                            <p class="mb-10 text-gray-500 font-medium leading-relaxed">I've championed remote work for well over six years, possibly even longer before the global pandemic compelled professionals to transition from office to home setups.</p>
                        </div>
                        <a href="#" class="flex items-center max-w-max text-blue-500 hover:text-blue-600">
                            <span class="mr-2 font-semibold">Read more</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full lg:w-1/3 p-4">
                <div class="relative p-10 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="w-full">
                            <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                                <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                                <span class="text-sm font-medium text-gray-500">03 Jan 2024</span>
                            </div>
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Top Software Solutions for Seamless Workflows</h3>
                            <p class="mb-10 text-gray-500 font-medium leading-relaxed">I've championed remote work for well over six years, possibly even longer before the global pandemic compelled professionals to transition from office to home setups.</p>
                        </div>
                        <a href="#" class="flex items-center max-w-max text-blue-500 hover:text-blue-600">
                            <span class="mr-2 font-semibold">Read more</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center mt-20">
            <a x-on:click.prevent="showContent = true" href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-blue-900 focus:bg-blue-900 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">View all news</a>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-gray-50" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold">Work with us</h2>
        <p class="mb-20 text-xl text-gray-500 font-medium leading-relaxed">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt. Ut sem justo, porta eget massa vitae, vehicula convallis velit. Maecenas vitae velit ut mi vestibulum luctus ut ut</p>
        <div class="mb-5 p-12 bg-white rounded-3xl">
            <div class="flex flex-wrap items-center -m-4">
                <div class="w-full md:w-1/2 p-4">
                    <h3 class="mb-3 font-heading text-3xl font-bold">Product Designer</h3>
                    <p class="mb-6 text-gray-500 font-medium">We’re looking for a mid-level product designer to join our team.</p>
                    <div class="flex flex-wrap -m-2">
                        <div class="w-auto p-2">
                            <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-50 rounded-full transition duration-200">
                                <img class="h-4" src="fily-assets/careers/marker.svg" alt="">
                                <span class="text-sm font-medium">100% remote</span>
                            </a>
                        </div>
                        <div class="w-auto p-2">
                            <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-50 rounded-full transition duration-200">
                                <img class="h-4" src="fily-assets/careers/clock.svg" alt="">
                                <span class="text-sm font-medium">Full-time</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-4">
                    <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
        <div class="mb-5 p-12 bg-white rounded-3xl">
            <div class="flex flex-wrap items-center -m-4">
                <div class="w-full md:w-1/2 p-4">
                    <h3 class="mb-3 font-heading text-3xl font-bold">Customer Success Manager</h3>
                    <p class="mb-6 text-gray-500 font-medium">We’re looking for a customer manager to join our team.</p>
                    <div class="flex flex-wrap -m-2">
                        <div class="w-auto p-2">
                            <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-50 rounded-full transition duration-200">
                                <img class="h-4" src="fily-assets/careers/marker.svg" alt="">
                                <span class="text-sm font-medium">100% remote</span>
                            </a>
                        </div>
                        <div class="w-auto p-2">
                            <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-50 rounded-full transition duration-200">
                                <img class="h-4" src="fily-assets/careers/clock.svg" alt="">
                                <span class="text-sm font-medium">Full-time</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-4">
                    <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
        <div class="mb-5 p-12 bg-white rounded-3xl">
            <div class="flex flex-wrap items-center -m-4">
                <div class="w-full md:w-1/2 p-4">
                    <h3 class="mb-3 font-heading text-3xl font-bold">Engineering Manager</h3>
                    <p class="mb-6 text-gray-500 font-medium">We’re looking for an experienced engineering manager to join our team.</p>
                    <div class="flex flex-wrap -m-2">
                        <div class="w-auto p-2">
                            <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-50 rounded-full transition duration-200">
                                <img class="h-4" src="fily-assets/careers/marker.svg" alt="">
                                <span class="text-sm font-medium">100% remote</span>
                            </a>
                        </div>
                        <div class="w-auto p-2">
                            <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-50 rounded-full transition duration-200">
                                <img class="h-4" src="fily-assets/careers/clock.svg" alt="">
                                <span class="text-sm font-medium">Full-time</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-4">
                    <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
        <div :class="{'hidden': !showContent}" class="hidden mb-5 p-12 bg-white rounded-3xl">
            <div class="flex flex-wrap items-center -m-4">
                <div class="w-full md:w-1/2 p-4">
                    <h3 class="mb-3 font-heading text-3xl font-bold">Product Manager</h3>
                    <p class="mb-6 text-gray-500 font-medium">We’re looking for an experienced engineering manager to join our team.</p>
                    <div class="flex flex-wrap -m-2">
                        <div class="w-auto p-2">
                            <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-50 rounded-full transition duration-200">
                                <img class="h-4" src="fily-assets/careers/marker.svg" alt="">
                                <span class="text-sm font-medium">100% remote</span>
                            </a>
                        </div>
                        <div class="w-auto p-2">
                            <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-50 rounded-full transition duration-200">
                                <img class="h-4" src="fily-assets/careers/clock.svg" alt="">
                                <span class="text-sm font-medium">Full-time</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-4">
                    <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
        <a x-on:click.prevent="showContent = true" href="#" :class="{'hidden': showContent}" class="inline-flex justify-center items-center text-center h-18 mt-16 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Show more</a>
    </div>
</section>

<section x-data="{ mobileNavOpen: false, dropdown: false }" class="bg-gray-50">
    <div class="py-1 text-center bg-pink-500">
        <div class="text-sm font-light text-light text-white">
            <span>Get the Premium plan at a 15% discount using code</span>
            <a href="#" class="inline-flex items-center">
                <span class="mr-2 font-bold">WINTERisCOMING</span>
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
                        <path d="M6.51348 2.21443C6.4457 2.28417 6.39189 2.36715 6.35518 2.45857C6.31846 2.54999 6.29956 2.64804 6.29956 2.74708C6.29956 2.84612 6.31846 2.94418 6.35518 3.0356C6.39189 3.12702 6.4457 3.20999 6.51348 3.27973L8.89286 5.74793L1.66071 5.74793C1.46891 5.74793 1.28495 5.82697 1.14932 5.96766C1.0137 6.10835 0.9375 6.29917 0.9375 6.49814C0.9375 6.69711 1.0137 6.88793 1.14932 7.02862C1.28495 7.16931 1.46891 7.24835 1.66071 7.24835L8.89286 7.24835L6.51348 9.71654C6.4457 9.78629 6.39189 9.86926 6.35518 9.96068C6.31846 10.0521 6.29956 10.1502 6.29956 10.2492C6.29956 10.3482 6.31846 10.4463 6.35518 10.5377C6.39189 10.6291 6.4457 10.7121 6.51348 10.7818C6.64899 10.9216 6.83228 11 7.02335 11C7.21441 11 7.39771 10.9216 7.53321 10.7818L10.6358 7.55594C10.9074 7.27584 11.0609 6.89543 11.0625 6.49814C11.059 6.10345 10.9057 5.72609 10.6358 5.44784L7.53321 2.22193C7.39867 2.0812 7.2159 2.00142 7.02484 2.00002C6.83378 1.99861 6.64994 2.0757 6.51348 2.21443Z" fill="white"></path>
                    </svg>
                </span>
            </a>
        </div>
    </div>
    <nav class="relative px-12 py-5 bg-white">
        <div class="flex items-center justify-between">
            <a class="relative z-10 pr-4 lg:pr-0" href="#">
                <img class="h-9" src="fily-assets/logos/fily-treck-black-logo.svg" alt="">
            </a>
            <ul class="hidden xl:absolute xl:top-1/2 xl:left-1/2 xl:transform xl:-translate-y-1/2 xl:-translate-x-1/2 xl:flex lg:justify-center gap-14">
                <li>
                    <a href="#" x-on:mousemove="dropdown = false" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">Our features</a>
                </li>
                <li>
                    <a href="#" x-on:mousemove="dropdown = false" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">How to use?</a>
                </li>
                <li>
                    <a href="#" x-on:mousemove="dropdown = true" :class="{'text-gray-800': dropdown}" class="flex items-center text-lg text-black hover:text-gray-800 font-medium transition duration-200">
                        <span class="mr-2.5">Use cases</span>
                        <div :class="{'rotate-180': dropdown}" class="transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
                                <g>
                                    <path d="M11.8098 3.51666C11.7362 3.43826 11.6487 3.37604 11.5523 3.33357C11.4559 3.2911 11.3525 3.26924 11.2481 3.26924C11.1436 3.26924 11.0402 3.2911 10.9438 3.33357C10.8474 3.37604 10.7599 3.43826 10.6864 3.51666L7.06305 7.34761C6.9895 7.42601 6.902 7.48824 6.8056 7.5307C6.70919 7.57317 6.60579 7.59503 6.50135 7.59503C6.39691 7.59503 6.29351 7.57317 6.19711 7.5307C6.1007 7.48824 6.0132 7.42601 5.93966 7.34761L2.31633 3.51666C2.24279 3.43826 2.15529 3.37604 2.05888 3.33357C1.96248 3.2911 1.85907 3.26924 1.75464 3.26924C1.6502 3.26924 1.5468 3.2911 1.45039 3.33357C1.35399 3.37604 1.26649 3.43826 1.19294 3.51666C1.0456 3.67338 0.962891 3.88538 0.962891 4.10636C0.962891 4.32734 1.0456 4.53934 1.19294 4.69606L4.82418 8.53537C5.26918 9.00529 5.87241 9.26924 6.50135 9.26924C7.13029 9.26924 7.73352 9.00529 8.17852 8.53537L11.8098 4.69606C11.9571 4.53934 12.0398 4.32734 12.0398 4.10636C12.0398 3.88538 11.9571 3.67338 11.8098 3.51666Z" fill="currentColor"></path>
                                </g>
                                <defs>
                                    <clipPath>
                                        <rect width="12" height="12" fill="white" transform="translate(0.5 0.5)"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" x-on:mousemove="dropdown = false" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">Plans &amp; pricing</a>
                </li>
            </ul>
            <div class="hidden xl:flex items-center gap-2">
                <a class="hidden 2xl:block mr-8" href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <g clip-path="url(#clip0_231_6677)">
                            <path d="M19.6343 17.871L15.7634 13.9984C18.6598 10.1278 17.87 4.64195 13.9994 1.74551C10.1288 -1.15092 4.64292 -0.361157 1.74649 3.50949C-1.14994 7.38013 -0.36018 12.866 3.51046 15.7624C6.61969 18.0891 10.8901 18.0891 13.9994 15.7624L17.872 19.635C18.3587 20.1216 19.1477 20.1216 19.6343 19.635C20.121 19.1483 20.121 18.3593 19.6343 17.8727L19.6343 17.871ZM8.7872 15.015C5.34716 15.015 2.55848 12.2263 2.55848 8.78623C2.55848 5.34618 5.34716 2.55751 8.7872 2.55751C12.2273 2.55751 15.0159 5.34618 15.0159 8.78623C15.0123 12.2247 12.2257 15.0113 8.7872 15.015Z" fill="#19191B"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_231_6677">
                                <rect width="20" height="20" fill="white"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </a>
                <a class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-black hover:text-black focus:text-black bg-transparent hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 focus:ring-opacity-50 transition duration-200" href="#">Login</a>
                <a class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200" href="#">Get started</a>
            </div>
            <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" class="flex items-center justify-center h-12 p-5 text-black border border-gray-300 xl:hidden rounded-full" href="#">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.75 6.75003H1.25C0.559648 6.75003 0 7.30968 0 8.00003C0 8.69038 0.559648 9.25003 1.25 9.25003H18.75C19.4404 9.25003 20 8.69038 20 8.00003C20 7.30968 19.4404 6.75003 18.75 6.75003Z" fill="currentColor"></path>
                    <path d="M1.25 3.41669H18.75C19.4404 3.41669 20 2.85704 20 2.16669C20 1.47634 19.4404 0.916687 18.75 0.916687H1.25C0.559648 0.916687 0 1.47634 0 2.16669C0 2.85704 0.559648 3.41669 1.25 3.41669Z" fill="currentColor"></path>
                    <path d="M18.75 12.5834H1.25C0.559648 12.5834 0 13.143 0 13.8334C0 14.5237 0.559648 15.0834 1.25 15.0834H18.75C19.4404 15.0834 20 14.5237 20 13.8334C20 13.143 19.4404 12.5834 18.75 12.5834Z" fill="currentColor"></path>
                </svg>
            </a>
        </div>
    </nav>
    <div :class="{'hidden': !dropdown}" class="hidden absolute w-full z-40 px-8 lg:px-20 2xl:px-40">
        <div x-on:mouseleave="dropdown = false">
            <div class="bg-white rounded-3xl">
                <div class="flex flex-wrap divide-x divide-gray-100">
                    <div class="w-7/12 py-20">
                        <div class="flex px-16 -m-8">
                            <div class="w-1-2 p-8">
                                <h3 class="mb-10 font-heading text-2xl font-bold">By industry</h3>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Creative &amp; Marketing agencies</a>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Software &amp; Engineering firms</a>
                                <a href="#" class="mb-6 block max- w-max text-lg hover:text-gray-700 font-medium">Architecture firms</a>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Consulting businesses</a>
                                <a href="#" class="block max-w-max text-lg hover:text-gray-700 font-medium">Educational institutions </a>
                            </div>
                            <div class="w-1/2 p-8">
                                <h3 class="mb-10 font-heading text-2xl font-bold">By role</h3>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For business owners</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Nullam bibendum mollis enim, sed tempus lacus tempus nec. Etiam cursus nec neque at tempor.</p>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For project managers</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Nam ut neque nisi. Vestibulum volutpat feugiat libero, tempus ligula. Nullam ut diam sit amet turpis pretium.</p>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For employees</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Vivamus sapien enim, consequat ac volutpat a, ultrices quis enim. Cras scelerisque vel eros in consequat.</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 py-20">
                        <div class="px-16">
                            <h3 class="mb-10 font-heading text-2xl font-bold">Recommended articles</h3>
                            <div class="mb-6">
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">2023 Remote Work: A Comprehensive Guide</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">Read more</span>
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                            </svg> 
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-6">
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article2.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">Mastering the Art of Project Management Success</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">Read more</span>
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                            </svg> 
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article3.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">Optimal Work Management Software for Firms</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">Read more</span>
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                            </svg> 
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div :class="{'hidden': !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 flex-col justify-between h-full">
                <div class="flex items-center justify-between mb-8">
                    <a class="pr-4" href="#">
                        <img class="h-8" src="fily-assets/logos/fily-treck-black-logo.svg" alt="">
                    </a>
                    <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#">
                        <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="#252E4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <ul class="flex flex-col gap-8 py-16">
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">Our features</a>
                    </li>
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">How to use?</a>
                    </li>
                    <li>
                        <a href="#" class="inline-flex items-center text-lg text-black hover:text-gray-800 font-medium transition duration-200">
                            <span class="mr-2.5">Use cases</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
                                <g>
                                    <path d="M11.8098 3.51666C11.7362 3.43826 11.6487 3.37604 11.5523 3.33357C11.4559 3.2911 11.3525 3.26924 11.2481 3.26924C11.1436 3.26924 11.0402 3.2911 10.9438 3.33357C10.8474 3.37604 10.7599 3.43826 10.6864 3.51666L7.06305 7.34761C6.9895 7.42601 6.902 7.48824 6.8056 7.5307C6.70919 7.57317 6.60579 7.59503 6.50135 7.59503C6.39691 7.59503 6.29351 7.57317 6.19711 7.5307C6.1007 7.48824 6.0132 7.42601 5.93966 7.34761L2.31633 3.51666C2.24279 3.43826 2.15529 3.37604 2.05888 3.33357C1.96248 3.2911 1.85907 3.26924 1.75464 3.26924C1.6502 3.26924 1.5468 3.2911 1.45039 3.33357C1.35399 3.37604 1.26649 3.43826 1.19294 3.51666C1.0456 3.67338 0.962891 3.88538 0.962891 4.10636C0.962891 4.32734 1.0456 4.53934 1.19294 4.69606L4.82418 8.53537C5.26918 9.00529 5.87241 9.26924 6.50135 9.26924C7.13029 9.26924 7.73352 9.00529 8.17852 8.53537L11.8098 4.69606C11.9571 4.53934 12.0398 4.32734 12.0398 4.10636C12.0398 3.88538 11.9571 3.67338 11.8098 3.51666Z" fill="currentColor"></path>
                                </g>
                                <defs>
                                    <clipPath>
                                        <rect width="12" height="12" fill="white" transform="translate(0.5 0.5)"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">Plans &amp; pricing</a>
                    </li>
                </ul>
                <div class="flex flex-col items-center gap-2">
                    <a class="inline-flex justify-center items-center text-center w-full h-12 p-5 px-6 font-semibold text-black hover:text-black focus:text-black bg-transparent hover:bg-white focus:bg-white border border-gray-100 rounded-full focus:ring-4 focus:ring-white focus:ring-opacity-50 transition duration-200" href="#">Login</a>
                    <a class="inline-flex justify-center items-center text-center w-full h-12 p-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200" href="#">Get started</a>
                </div>
            </div>
        </nav>
    </div>
    <div class="container mx-auto px-4">
        <div class="pt-24 pb-20">
            <h3 class="mb-12 font-heading text-4xl font-medium text-center">Register an account</h3>
            <div class="py-18 px-10 md:px-20 max-w-2xl bg-white mx-auto rounded-3xl">
                <form action="#">
                    <div class="flex flex-wrap -m-3 mb-7">
                        <div class="w-full p-3">
                            <label for="signup-input-02-1" class="mb-2 inline-block text-sm font-medium">Email</label>
                            <input id="signup-input-02-1" type="text" placeholder="Enter your email" class="w-full px-6 h-14 bg-transparent font-semibold text-black placeholder-gray-500 outline-none border border-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full transition duration-200">
                        </div>
                        <div class="w-full p-3">
                            <div class="relative">
                                <label for="signup-input-02-2" class="mb-2 inline-block text-sm font-medium">Password</label>
                                <div class="relative" x-data="{ visible: false }">
                                    <input id="signup-input-02-2" :type="visible ? 'text': 'password'" type="password" placeholder="Your password" class="w-full px-6 pr-12 h-14 bg-transparent font-semibold text-black placeholder-gray-500 outline-none border border-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full transition duration-200">
                                    <div x-on:click="visible = !visible" class="absolute right-6 top-1/2 transform -translate-y-1/2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                            <g clip-path="url(#clip0_447_91)">
                                                <path d="M17.4527 7.06424C16.2894 5.16974 13.6434 1.99124 8.99943 1.99124C4.35543 1.99124 1.70943 5.16974 0.546178 7.06424C0.186574 7.64587 -0.00390625 8.31617 -0.00390625 8.99999C-0.00390625 9.68381 0.186574 10.3541 0.546178 10.9357C1.70943 12.8302 4.35543 16.0087 8.99943 16.0087C13.6434 16.0087 16.2894 12.8302 17.4527 10.9357C17.8123 10.3541 18.0028 9.68381 18.0028 8.99999C18.0028 8.31617 17.8123 7.64587 17.4527 7.06424ZM16.1739 10.1505C15.1749 11.775 12.9137 14.5087 8.99943 14.5087C5.08518 14.5087 2.82393 11.775 1.82493 10.1505C1.61128 9.80478 1.49812 9.4064 1.49812 8.99999C1.49812 8.59359 1.61128 8.19521 1.82493 7.84949C2.82393 6.22499 5.08518 3.49124 8.99943 3.49124C12.9137 3.49124 15.1749 6.22199 16.1739 7.84949C16.3876 8.19521 16.5007 8.59359 16.5007 8.99999C16.5007 9.4064 16.3876 9.80478 16.1739 10.1505Z" fill="#696D81"></path>
                                                <path d="M9 5.25C8.25832 5.25 7.5333 5.46993 6.91661 5.88199C6.29993 6.29404 5.81928 6.87971 5.53545 7.56494C5.25162 8.25016 5.17736 9.00416 5.32206 9.73159C5.46675 10.459 5.8239 11.1272 6.34835 11.6517C6.8728 12.1761 7.54098 12.5333 8.26841 12.6779C8.99584 12.8226 9.74984 12.7484 10.4351 12.4645C11.1203 12.1807 11.706 11.7001 12.118 11.0834C12.5301 10.4667 12.75 9.74168 12.75 9C12.7488 8.0058 12.3533 7.05267 11.6503 6.34966C10.9473 5.64666 9.9942 5.25119 9 5.25ZM9 11.25C8.55499 11.25 8.11998 11.118 7.74997 10.8708C7.37996 10.6236 7.09157 10.2722 6.92127 9.86104C6.75098 9.4499 6.70642 8.9975 6.79323 8.56105C6.88005 8.12459 7.09434 7.72368 7.40901 7.40901C7.72368 7.09434 8.12459 6.88005 8.56105 6.79323C8.99751 6.70642 9.44991 6.75097 9.86104 6.92127C10.2722 7.09157 10.6236 7.37996 10.8708 7.74997C11.118 8.11998 11.25 8.55499 11.25 9C11.25 9.59674 11.0129 10.169 10.591 10.591C10.169 11.0129 9.59674 11.25 9 11.25Z" fill="#696D81"></path>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_447_91">
                                                    <rect width="18" height="18" fill="white"></rect>
                                                </clipPath>
                                            </defs>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="inline-flex justify-center items-center text-center w-full mb-12 h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Create account</button>
                    <div class="flex flex-wrap items-center gap-4 mb-12">
                        <div class="flex-1">
                            <div class="h-px bg-gray-100"></div>
                        </div>
                        <div class="w-auto">
                            <span class="text-gray-500 font-semibold">or</span>
                        </div>
                        <div class="flex-1">
                            <div class="h-px bg-gray-100"></div>
                        </div>
                    </div>
                    <a href="#" class="inline-flex justify-center items-center text-center w-full mb-4 h-14 py-6 px-10 font-semibold text-black hover:text-black focus:text-black bg-white hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <img class="mr-3" src="fily-assets/sign-up/google-play.svg" alt="">
                        <span>Continue with Google</span>
                    </a>
                    <a href="#" class="inline-flex justify-center items-center text-center w-full mb-11 h-14 py-6 px-10 font-semibold text-black hover:text-black focus:text-black bg-white hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <img class="mr-3" src="fily-assets/sign-up/apple.svg" alt="">
                        <span>Continue with Apple</span>
                    </a>
                    <div class="flex justify-center">
                        <span class="font-medium text-center">Already have an account? <a href="#" class="font-semibold text-blue-500 hover:text-blue-600">Log in</a></span>
                    </div>
                </form> 
            </div>
        </div>
    </div>
</section>

<section class="relative pt-20 bg-black">
    <img class="absolute top-0 left-0 w-full h-full object-cover" src="fily-assets/gradients/gradient-footer.png" alt="">
    <div class="relative">
        <div class="container mx-auto px-4">
            <img class="mb-16 h-9" src="fily-assets/logos/fily-treck-white-logo.svg" alt="">
            <div class="flex flex-wrap items-center -m-10 pb-20">
                <div class="w-full sm:w-1/2 xl:flex-1 p-10">
                    <h3 class="mb-8 font-heading text-2xl text-white font-bold">Product</h3>
                    <ul>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Time Tracking</a></li>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Task Management</a></li>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Kanban Board</a></li>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Team Collaboration</a></li>
                        <li><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Team Scheduling</a></li>
                    </ul>
                </div>
                <div class="w-full sm:w-1/2 xl:flex-1 p-10">
                    <h3 class="mb-8 font-heading text-2xl text-white font-bold">Use Cases</h3>
                    <ul>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Creative &amp; Marketing</a></li>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Software &amp; Engineering</a></li>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Architecture firms</a></li>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Consulting businesses</a></li>
                        <li><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Educational institutions</a></li>
                    </ul>
                </div>
                <div class="w-full sm:w-1/2 xl:flex-1 p-10">
                    <h3 class="mb-8 font-heading text-2xl text-white font-bold">Resources</h3>
                    <ul>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Kanban Software</a></li>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Timesheet Software</a></li>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Gantt Chart Software</a></li>
                        <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Time Tracking Apps</a></li>
                        <li><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Project Tracker</a></li>
                    </ul>
                </div>
                <div class="w-full md:w-1/2 xl:w-1/3 p-10">
                    <div class="bg-black h-full py-12 px-10 rounded-3xl">
                        <h2 class="mb-4 font-heading text-3xl font-bold text-white">Subscribe to our newsletter</h2>
                        <p class="mb-10 text-lg text-gray-500 font-medium leading-relaxed">Duis pellentesque urna a erat sollicitudin, et molestie leo semper</p>
                        <div class="relative p-1.5 bg-transparent border border-gray-500 focus-within:ring-4 focus-within:ring-blue-200 rounded-2xl md:rounded-full transiiton duration-200">
                            <div class="relative">
                                <input id="footers-input-02-1" type="text" class="py-3 px-6 sm:pr-14 w-full text-gray-500 placeholder-gray-500 font-semibold text-center md:text-left bg-transparent outline-none" placeholder="Your email address">
                                <a href="#" class="md:absolute md:top-0 md:right-0 inline-flex justify-center items-center w-full md:w-12 h-12 md:h-full text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-2xl md:rounded-full transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                        <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="">
            <div class="container mx-auto px-4">
                <div class="py-6">
                    <div class="flex flex-wrap items-center justify-between -m-2">
                        <div class="w-auto p-2">
                            <p class="text-white font-medium">© Shuffle 2023. All rights reserved.</p>
                        </div>
                        <div class="w-auto p-2">
                            <ul class="flex flex-wrap gap-2">
                                <li>
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 hover:bg-gray-100 rounded-full transition duration-200">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.3731 1.20056H14.7039L9.61187 7.02038L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71489L0.402344 1.20056H5.21177L8.53245 5.59079L12.3731 1.20056ZM11.5551 13.5448H12.8466L4.51001 2.52235H3.12411L11.5551 13.5448Z" fill="#060918"></path>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 hover:bg-gray-100 rounded-full transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
                                            <g clip-path="url(#clip0_323_395)">
                                                <path d="M0.25 1.89813C0.25 1.35919 0.438632 0.914572 0.815878 0.564277C1.19313 0.213966 1.68356 0.0388184 2.28716 0.0388184C2.87999 0.0388184 3.35963 0.211266 3.72611 0.556193C4.10336 0.911888 4.29199 1.37536 4.29199 1.94664C4.29199 2.46401 4.10876 2.89515 3.74228 3.24007C3.36503 3.59577 2.86921 3.77362 2.25483 3.77362H2.23866C1.64583 3.77362 1.16619 3.59577 0.79971 3.24007C0.433231 2.88438 0.25 2.43706 0.25 1.89813ZM0.460183 16.0451V5.2449H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0144C9.62741 9.63718 9.67053 9.34616 9.75676 9.14138C9.90765 8.7749 10.1367 8.46501 10.4439 8.21172C10.7511 7.95842 11.1364 7.83177 11.5999 7.83177C12.8071 7.83177 13.4107 8.64555 13.4107 10.2731V16.0451H17V9.85277C17 8.25752 16.6228 7.04763 15.8682 6.22306C15.1137 5.3985 14.1167 4.98621 12.8772 4.98621C11.4867 4.98621 10.4035 5.58443 9.62741 6.78086V6.81319H9.61125L9.62741 6.78086V5.2449H6.03813C6.05968 5.58981 6.07046 6.66228 6.07046 8.46232C6.07046 10.2623 6.05968 12.7899 6.03813 16.0451Z" fill="#060918"></path>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_323_395">
                                                    <rect width="16.75" height="16.0063" fill="white" transform="translate(0.25 0.0388184)"></rect>
                                                </clipPath>
                                            </defs>
                                        </svg>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<ul class="flex flex-wrap gap-3 py-3 px-4">
    <li class="flex flex-wrap items-center text-gray-500">
        <a href="#" class="mr-3 font-medium">Home</a>
        <span>/</span>
    </li>
    <li class="flex flex-wrap items-center text-gray-500">
        <a href="#" class="mr-3 font-medium">Use cases</a>
        <span>/</span>
    </li>
    <li class="flex flex-wrap items-center text-black">
        <a href="#" class="mr-3 font-medium">Consulting businesses</a>
    </li>
</ul>