Shuffle Components in Filytreck library

<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="relative bg-white overflow-hidden rounded-3xl">
            <div class="hidden md:block absolute z-10 bottom-0 left-0 w-full bg-gradient-white-bottom" style="height: 480px;"></div>
            <div class="flex flex-wrap divide-x-3 divide-gray-50">
                <div class="w-full md:w-1/2">
                    <div class="pt-24 md:pt-36 pb-12">
                        <div class="relative px-10">
                            <div class="hidden md:block py-8 absolute top-0 h-full bg-red-500" style="right: -3px; width: 3px;">
                                <div class="w-full h-full bg-blue-500 rounded-full"></div>
                            </div>
                            <img class="mx-auto object-cover rounded-3xl" style="height: 460px;" src="fily-assets/how-it-works/pic2.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2">
                    <div class="md:pt-36 pb-12 px-10 max-w-sm mx-auto">
                        <div class="md:pt-8">
                            <h2 class="mb-10 font-heading text-5xl text-gray-100 font-bold">01</h2>
                            <h2 class="mb-6 font-heading text-3xl md:text-4xl font-medium">Streamlined Efficiency</h2>
                            <p class="text-xl font-light leading-relaxed">Experience a platform designed for maximum efficiency, ensuring a smooth and straightforward user journey from start to finish.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap divide-x-2 divide-gray-50">
                <div class="w-full md:w-1/2">
                    <div class="pt-12 px-10">
                        <img class="mx-auto object-cover rounded-3xl" style="height: 460px;" src="fily-assets/how-it-works/pic3.jpg" alt="">
                    </div>
                </div>
                <div class="w-full md:w-1/2">
                    <div class="pt-12 px-10 max-w-sm mx-auto">
                        <div class="md:pt-8">
                            <h2 class="mb-10 font-heading text-5xl text-gray-100 font-bold">02</h2>
                            <h2 class="mb-6 font-heading text-3xl md:text-4xl font-medium">Intuitive Navigation</h2>
                            <p class="text-xl font-light leading-relaxed">Experience a platform designed for maximum efficiency, ensuring a smooth and straightforward user journey from start to finish.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-black">
    <div class="container mx-auto px-4">
        <div class="pt-32 bg-black overflow-hidden rounded-3xl" style="background: url('fily-assets/gradients/gradient-download.png'); background-size: cover;">
            <div class="mb-24 max-w-xl mx-auto text-center">
                <div class="px-4">
                    <h2 class="mb-6 font-heading text-4xl text-white font-medium">Get mobile app</h2>
                    <p class="mb-14 text-lg text-white font-light leading-relaxed">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci a, fermentum finibus tellus.</p>
                    <div class="flex flex-wrap justify-center -m-2">
                        <div class="w-auto p-2">
                            <a href="#">
                                <img class="h-14" src="fily-assets/download/app-store.png" alt="">
                            </a>
                        </div>
                        <div class="w-auto p-2">
                            <a href="#">
                                <img class="h-14" src="fily-assets/download/google-play.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <img class="object-cover mx-auto transform hover:scale-105 transition duration-500" style="height: 388px;" src="fily-assets/download/iphone.png" alt="">
        </div>
    </div>
</section>

<div :class="{'hidden': !open}" class="fixed bottom-0 left-0 z-40 w-full p-6" x-data="{ open: true }">
    <div class="py-14 px-10 bg-white max-w-md overflow-hidden rounded-3xl">
        <div class="max-w-sm mx-auto">
            <h2 class="mb-6 font-heading text-xl font-medium text-center">We use third-party cookies to personalize content, ads, and analyze site traffic.</h2>
            <a href="#" class="mb-12 flex items-center justify-center text-blue-500 hover:text-blue-600">
                <span class="mr-2 font-semibold">Learn more</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none">
                    <path d="M7.01348 1.71443C6.9457 1.78417 6.89189 1.86715 6.85518 1.95857C6.81846 2.04999 6.79956 2.14804 6.79956 2.24708C6.79956 2.34612 6.81846 2.44417 6.85518 2.53559C6.89189 2.62701 6.9457 2.70999 7.01348 2.77973L9.39286 5.24793L2.16071 5.24793C1.96891 5.24793 1.78495 5.32697 1.64932 5.46766C1.5137 5.60835 1.4375 5.79917 1.4375 5.99814C1.4375 6.19711 1.5137 6.38793 1.64932 6.52862C1.78495 6.66931 1.96891 6.74835 2.16071 6.74835L9.39286 6.74835L7.01348 9.21654C6.9457 9.28629 6.89189 9.36926 6.85518 9.46068C6.81846 9.5521 6.79956 9.65016 6.79956 9.74919C6.79956 9.84823 6.81846 9.94629 6.85518 10.0377C6.89189 10.1291 6.9457 10.2121 7.01348 10.2818C7.14899 10.4216 7.33229 10.5 7.52335 10.5C7.71441 10.5 7.89771 10.4216 8.03322 10.2818L11.1358 7.05593C11.4074 6.77584 11.5609 6.39543 11.5625 5.99814C11.559 5.60345 11.4057 5.22609 11.1358 4.94784L8.03322 1.72193C7.89867 1.5812 7.71591 1.50142 7.52484 1.50002C7.33378 1.49861 7.14994 1.5757 7.01348 1.71443Z" fill="currentColor"></path>
                </svg>
            </a>
            <div class="flex flex-wrap gap-3">
                <a href="#" x-on:click.prevent="open = false" 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-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Allow cookies</a>
                <a href="#" x-on:click.prevent="open = false" 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-200 rounded-full focus:ring-4 focus:ring-gray-200 focus:ring-opacity-50 transition duration-200">Decline</a>
            </div>
        </div>
    </div>
</div>

<section class="py-24 md:py-36" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-24 font-heading text-4xl md:text-5xl font-bold text-center">Frequently asked questions</h2>
        <div class="flex flex-wrap -m-2.5">
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold">How can I get started with FilyTreck?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold">Is there a free trial available for new users?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">Yes, we offer a free trial for new users to explore our app's features.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold">Can I use FilyTreck on different devices?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">Yes, FilyTreck is compatible with multiple devices.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold">How can I import or export my tasks and data?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">You can easily import and export your tasks and data using the built-in tools in our app.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold">What types of support and assistance do you provide for users?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">We provide various forms of support, including a comprehensive knowledge base, and email support.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold">Are my data and information secure in FilyTreck?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">Rest assured, your data is secure in [App Name]. We employ strict security measures to protect your information.</p>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold">What are the key features of FilyTreck ?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">This FAQ provides a brief overview of the main functionalities and capabilities offered by FilyTreck, highlighting its core features to help users understand its potential benefits for their workflow.</p>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full border border-gray-100 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold">What support options are available for FilyTreck ?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">Learn about the various support channels and assistance avenues provided to users of FilyTreck, ensuring that they receive timely help and guidance whenever needed to maximize their experience and productivity.</p>
                    </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 py-8 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">Show more</a>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-black">
    <div class="container mx-auto px-4">
        <form action="#" class="py-24 px-16 max-w-6xl mx-auto bg-white bg-opacity-5 w-full rounded-3xl">
            <h2 class="mb-14 font-heading text-4xl font-medium text-white">Contact us</h2>
            <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-02-1" class="mb-2 inline-block text-sm text-gray-500 font-medium">First name</label>
                    <input id="contact-input-02-1" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 bg-white bg-opacity-10 font-semibold text-white placeholder-gray-500 outline-none 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-02-2" class="mb-2 inline-block text-sm text-gray-500 font-medium">Last name</label>
                    <input id="contact-input-02-2" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 bg-white bg-opacity-10 font-semibold text-white placeholder-gray-500 outline-none 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 md:w-1/2 p-3">
                    <label for="contact-input-02-3" class="mb-2 inline-block text-sm text-gray-500 font-medium">Address email</label>
                    <input id="contact-input-02-3" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 bg-white bg-opacity-10 font-semibold text-white placeholder-gray-500 outline-none focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                </div>
                <div class="w-full md:w-1/2 p-3">
                    <label for="contact-input-02-4" class="mb-2 inline-block text-sm text-gray-500 font-medium">Subject</label>
                    <input id="contact-input-02-4" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 bg-white bg-opacity-10 font-semibold text-white placeholder-gray-500 outline-none focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                </div>
                <div class="w-full p-3">
                    <label for="contact-textarea-02-1" class="mb-2 inline-block text-sm text-gray-500 font-medium">Message</label>
                    <textarea id="contact-textarea-02-1" placeholder="Type message here" class="w-full bg-transparent p-6 h-28 bg-white bg-opacity-10 font-semibold text-white placeholder-gray-500 outline-none focus:ring focus:ring-blue-200 rounded-3xl resize-none transition duration-2000"></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>
</section>

<section class="py-24 md:py-36" x-data="{ activeSlide: 1, slideCount: 3 }">
    <div class="container mx-auto px-4">
        <h2 class="mb-24 font-heading text-4xl md:text-5xl text-center font-bold">What others say about us</h2>
        <div class="max-w-6xl mx-auto">
            <div class="py-16 px-10 md:px-20 bg-gray-50 rounded-3xl">
                <div class="mb-12 p-2.5 pr-5 max-w-max bg-white rounded-5xl">
                    <div class="flex flex-wrap items-center -m-2.5">
                        <div class="w-auto p-2.5">
                            <img class="h-16" src="fily-assets/testimonials/avatar.png" alt="">
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-lg font-medium">Aleeza Keller</h3>
                            <span class="text-sm text-blue-500 font-medium">CEO, Founder</span>
                        </div>
                    </div>
                </div>
                <div class="overflow-hidden">
                    <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex transition-transform duration-500 ease-in-out -mx-4">
                        <div class="flex-shrink-0 w-full px-4">
                            <p class="mb-12 text-3xl font-light leading-tight">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</p>
                        </div>
                        <div class="flex-shrink-0 w-full px-4">
                            <p class="mb-12 text-3xl font-light leading-tight">In pulvinar ante sit amet metus tincidunt, ac lacinia risus consequat. Sed pretium libero vel tellus vehicula, sed ultricies justo fermentum. Integer dictum, ipsum nec sollicitudin lobortis.</p>
                        </div>
                        <div class="flex-shrink-0 w-full px-4">
                            <p class="mb-12 text-3xl font-light leading-tight"> Sed pharetra mauris ut tortor pretium, a ullamcorper libero tincidunt. Vivamus hendrerit mauris at est ultrices, nec eleifend sapien fermentum. Nunc ut justo.</p>
                        </div>
                    </div>
                </div>
                <div class="flex flex-wrap items-center -m-7">
                    <div class="w-full md:flex-1 p-7">
                        <div class="relative bg-white 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 hover:bg-blue-500 focus:bg-blue-500 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="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>
    </div>
</section>

<section class="py-24 md:py-40 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-2.5">
            <div class="w-full md:w-1/3 p-2.5">
                <div class="relative" style="height: 496px;">
                    <img class="absolute top-0 left-0 w-full h-full object-cover rounded-3xl" src="fily-assets/newsletter/pic.jpg" alt="">
                </div>
            </div>
            <div class="w-full md:w-2/3 p-2.5">
                <div class="p-8 xl:px-24 py-24 h-full max-w-4xl mx-auto bg-white rounded-3xl">
                    <h2 class="mb-6 font-heading text-4xl font-medium">Stay in touch</h2>
                    <p class="mb-20 text-lg text-gray-500 font-medium max-w-xl 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 md:ml-0 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-02-1" type="text" class="py-4 md:pl-8 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-6 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>
        </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 max-w-2xl mx-auto">Recent happenings and updates</h2>
        <div class="flex flex-wrap -m-6">
            <div class="w-full md:w-1/2 p-6">
                <div class="group relative p-10 overflow-hidden rounded-3xl" style="height: 478px;">
                    <div class="flex flex-col justify-between h-full">
                        <div class="w-full">
                            <div class="relative z-10 mb-6 px-2.5 py-1.5 inline-flex items-center bg-white rounded-3xl">
                                <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>
                        <div class="relative z-10 flex flex-wrap items-center -m-2">
                            <div class="w-full lg:w-3/4 p-2">
                                <h3 class="font-heading text-3xl font-medium text-white leading-tight">2023 Remote Work: A Comprehensive Guide</h3>
                            </div>
                            <div class="w-full lg:w-1/4 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>
                    <img class="absolute top-0 left-0 w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/people2.jpg" alt="">
                </div>
            </div>
            <div class="w-full md:w-1/2 p-6">
                <div class="group relative p-10 overflow-hidden rounded-3xl" style="height: 478px;">
                    <div class="flex flex-col justify-between h-full">
                        <div class="w-full">
                            <div class="relative z-10 mb-6 px-2.5 py-1.5 inline-flex items-center bg-white rounded-3xl">
                                <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                                <span class="text-gray-500 font-medium">14 October 2023</span>
                            </div>
                        </div>
                        <div class="relative z-10 flex flex-wrap items-center -m-2">
                            <div class="w-full lg:w-3/4 p-2">
                                <h3 class="font-heading text-3xl font-medium text-white leading-tight">Optimal Work Management Software for Firms</h3>
                            </div>
                            <div class="w-full lg:w-1/4 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>
                    <img class="absolute top-0 left-0 w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/work.jpg" alt="">
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 p-6">
                <div class="group relative p-10 overflow-hidden rounded-3xl" style="height: 478px;">
                    <div class="flex flex-col justify-between h-full">
                        <div class="w-full">
                            <div class="relative z-10 mb-6 px-2.5 py-1.5 inline-flex items-center bg-white rounded-3xl">
                                <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                                <span class="text-gray-500 font-medium">13 Feb 2024</span>
                            </div>
                        </div>
                        <div class="relative z-10 flex flex-wrap items-center -m-2">
                            <div class="w-full lg:w-3/4 p-2">
                                <h3 class="font-heading text-3xl font-medium text-white leading-tight">Optimal Work Management Software for Firms</h3>
                            </div>
                            <div class="w-full lg:w-1/4 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>
                    <img class="absolute top-0 left-0 w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/work.jpg" alt="">
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 p-6">
                <div class="group relative p-10 overflow-hidden rounded-3xl" style="height: 478px;">
                    <div class="flex flex-col justify-between h-full">
                        <div class="w-full">
                            <div class="relative z-10 mb-6 px-2.5 py-1.5 inline-flex items-center bg-white rounded-3xl">
                                <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                                <span class="text-gray-500 font-medium">14 Feb 2024</span>
                            </div>
                        </div>
                        <div class="relative z-10 flex flex-wrap items-center -m-2">
                            <div class="w-full lg:w-3/4 p-2">
                                <h3 class="font-heading text-3xl font-medium text-white leading-tight">Optimal Work Management Software for Firms</h3>
                            </div>
                            <div class="w-full lg:w-1/4 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>
                    <img class="absolute top-0 left-0 w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/people2.jpg" alt="">
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center mt-18">
            <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-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">View all news</a>
        </div>
    </div>
</section>

<section class="py-24 md:py-40 bg-gray-50" 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">
            <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center">Pricing plans</h2>
            <p class="mb-7 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-white 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 text-white': $refs.pricing1.textContent == pricing, 'text-black': $refs.pricing1.textContent != pricing}" class="flex justify-center text-center w-full py-4 px-6 font-semibold 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 text-white': $refs.pricing2.textContent == pricing, 'text-black': $refs.pricing2.textContent != pricing}" class="flex justify-center text-center w-full py-4 px-6 font-semibold rounded-full transition duration-200">Yearly billing</a>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -m-5">
            <div class="w-full md:w-1/3 p-5">
                <div class="h-full overflow-hidden rounded-3xl">
                    <div class="relative h-full">
                        <div class="absolute top-0 left-0 w-full h-full bg-white rounded-3xl"></div>
                        <div class="relative z-10 pt-14 px-10 pb-10 h-full">
                            <div class="flex flex-col justify-between h-full">
                                <div class="w-full">
                                    <h3 class="mb-1 font-heading text-3xl font-bold">Starter</h3>
                                    <p class="mb-4 text-lg text-gray-500 font-medium">Best for personal use</p>
                                    <div class="mb-10 pb-10 border-b border-gray-50">
                                        <span class="text-4xl font-medium">$0</span>
                                        <span class="text-gray-500 font-medium">/free forever</span>
                                    </div>
                                    <div class="flex flex-wrap items-center justify-between -m-2 mb-6">
                                        <div class="w-auto p-2">
                                            <h3 class="font-heading text-xl font-bold">Features</h3>
                                        </div>
                                        <div class="w-auto p-2">
                                            <a href="#" class="flex items-center text-gray-500 hover:text-gray-600">
                                                <span class="mr-2 font-semibold">Show All</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>
                                    <ul class="mb-14">
                                        <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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">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-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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">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-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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">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-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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">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-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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">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-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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">Guest Access</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="w-full">
                                    <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 focus:ring-4 focus:ring-gray-200 transition duration-200">Start for free</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="h-full overflow-hidden rounded-3xl">
                    <div class="relative h-full">
                        <div class="absolute top-0 left-0 w-full h-full bg-white rounded-3xl"></div>
                        <div class="relative z-10 pt-9 px-10 pb-10 h-full">
                            <div class="flex flex-col justify-between h-full">
                                <div class="w-full">
                                    <span class="mb-2 inline-block font-medium text-pink-500">Most popular</span>
                                    <h3 class="mb-1 font-heading text-3xl font-bold">Enterprise</h3>
                                    <p class="mb-4 text-lg text-gray-500 font-medium">For large teams &amp; corporations</p>
                                    <div class="mb-10 pb-10 border-b border-gray-50">
                                        <span :class="{'hidden': $refs.pricing2.textContent == pricing}" class="text-4xl font-medium">$32</span>
                                        <span :class="{'hidden': $refs.pricing1.textContent == pricing}" class="hidden text-4xl font-medium">$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>
                                    <div class="flex flex-wrap items-center justify-between -m-2 mb-6">
                                        <div class="w-auto p-2">
                                            <h3 class="font-heading text-xl font-bold">Features</h3>
                                        </div>
                                        <div class="w-auto p-2">
                                            <a href="#" class="flex items-center text-gray-500 hover:text-gray-600">
                                                <span class="mr-2 font-semibold">Show All</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>
                                    <ul class="mb-14">
                                        <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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">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-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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">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-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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">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-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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">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-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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">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-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.3311C3.53396 10.3312 3.20728 10.1958 2.96662 9.95477L0.22153 7.21069C-0.0738435 6.91522 -0.0738435 6.43627 0.22153 6.1408C0.516999 5.84542 0.995953 5.84542 1.29142 6.1408L3.87459 8.72397L10.7086 1.88999C11.004 1.59461 11.483 1.59461 11.7785 1.88999C12.0738 2.18546 12.0738 2.66441 11.7785 2.95988L4.78256 9.95477C4.5419 10.1958 4.21523 10.3312 3.87459 10.3311Z" fill="#273ACF"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="w-auto p-2">
                                                <span class="text-lg font-medium">25GB Storage</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="w-full">
                                    <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 focus:ring-4 focus:ring-gray-200 transition duration-200">Choose plan</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="h-full overflow-hidden rounded-3xl">
                    <div class="relative h-full">
                        <img class="absolute w-full h-full object-cover" src="fily-assets/gradients/gradient-pricing.jpg" alt="">
                        <div class="relative z-10 pt-14 px-10 pb-10 h-full">
                            <div class="flex flex-col justify-between h-full">
                                <div class="w-full">
                                    <h3 class="mb-1 font-heading text-3xl font-bold text-white">Business</h3>
                                    <p class="mb-4 text-lg text-darkPurple-500 font-medium">Best for business owners</p>
                                    <div class="mb-10 pb-10 border-b border-gray-500">
                                        <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-darkPurple-500 font-medium">/per month</span>
                                        <span :class="{'hidden': $refs.pricing1.textContent == pricing}" class="hidden text-darkPurple-500 font-medium">/per year</span>
                                    </div>
                                    <div class="flex flex-wrap items-center justify-between -m-2 mb-6">
                                        <div class="w-auto p-2">
                                            <h3 class="font-heading text-xl font-bold text-white">Features</h3>
                                        </div>
                                        <div class="w-auto p-2">
                                            <a href="#" class="flex items-center text-darkPurple-500 hover:text-darkPurple-600">
                                                <span class="mr-2 font-semibold">Show All</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>
                                    <ul class="mb-14">
                                        <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 class="w-full">
                                    <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-pink-500 hover:bg-pink-600 focus:bg-pink-600 rounded-full focus:ring-4 focus:ring-pink-200 transition duration-200">Choose a plan</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36" x-data="{ activeSlide: 1, slideCount: 3 }" style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
    <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-20 text-xl text-white font-medium text-center">Explore the powerful features that make FilyTreck stand out in the realm of task management.</p>
        <div class="lg:hidden flex flex-wrap justify-center mb-8">
            <div class="w-auto p-4">
                <a href="#" x-on:click.prevent="activeSlide > 1 ? activeSlide -= 1 : activeSlide = 1" class="flex items-center justify-center w-14 h-14 bg-white bg-opacity-10 hover:bg-opacity-20 focus:bg-opacity-20 focus:ring focus:ring-opacity-40 focus:ring-white 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="white"></path>
                    </svg>
                </a>
            </div>
            <div class="w-auto p-4">
                <a href="#" x-on:click.prevent="activeSlide < slideCount ? activeSlide += 1 : activeSlide = slideCount" class="flex items-center justify-center w-14 h-14 bg-white bg-opacity-10 hover:bg-opacity-20 focus:bg-opacity-20 focus:ring focus:ring-opacity-40 focus:ring-white 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="white"></path>
                    </svg>
                </a>
            </div>
        </div>
        <div class="flex items-center">
            <div class="hidden lg:block w-auto pr-28">
                <a href="#" x-on:click.prevent="activeSlide > 1 ? activeSlide -= 1 : activeSlide = 1" class="flex items-center justify-center w-14 h-14 bg-white bg-opacity-10 hover:bg-blue-500 focus:ring focus:ring-opacity-40 focus:ring-white 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="white"></path>
                    </svg>
                </a>
            </div>
            <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 max-w-full px-6">
                        <div class="flex flex-wrap -m-6">
                            <div class="w-full lg:w-1/2 p-6">
                                <div class="py-14 px-10 flex flex-col justify-between items-center h-full text-center bg-white bg-opacity-20 border border-white rounded-3xl">
                                    <div class="w-full">
                                        <div class="mb-6 flex items-center justify-center max-w-max mx-auto h-14 py-4 px-7 bg-green-500 rounded-full">
                                            <img class="h-6" src="fily-assets/features/app.svg" alt="">
                                        </div>
                                        <h3 class="font-heading mb-7 text-2xl text-white font-bold leading-snug">Everything in one app</h3>
                                        <p class="mb-10 text-lg font-medium text-white leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                                    </div>
                                    <a href="#" class="inline-flex justify-center items-center text-center h-14 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-900 hover:bg-blue-800 focus:bg-blue-800 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Read more</a>
                                </div>
                            </div>
                            <div class="w-full lg:w-1/2 p-6">
                                <div class="py-14 px-10 flex flex-col justify-between items-center h-full text-center bg-white bg-opacity-20 border border-white rounded-3xl">
                                    <div class="w-full">
                                        <div class="mb-6 flex items-center justify-center max-w-max mx-auto h-14 py-4 px-7 bg-orange-500 rounded-full">
                                            <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                                        </div>
                                        <h3 class="font-heading mb-7 text-2xl text-white font-bold leading-snug">Increase in the productivity</h3>
                                        <p class="mb-10 text-lg font-medium text-white leading-relaxed">Experience a substantial boost in productivity with our streamlined approach, optimizing your workflow and time management.</p>
                                    </div>
                                    <a href="#" class="inline-flex justify-center items-center text-center h-14 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-900 hover:bg-blue-800 focus:bg-blue-800 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-shrink-0 max-w-full px-6">
                        <div class="flex flex-wrap -m-6">
                            <div class="w-full lg:w-1/2 p-6">
                                <div class="py-14 px-10 flex flex-col justify-between items-center h-full text-center bg-white bg-opacity-20 border border-white rounded-3xl">
                                    <div class="w-full">
                                        <div class="mb-6 flex items-center justify-center max-w-max mx-auto h-14 py-4 px-7 bg-green-500 rounded-full">
                                            <img class="h-6" src="fily-assets/features/app.svg" alt="">
                                        </div>
                                        <h3 class="font-heading mb-7 text-2xl text-white font-bold leading-snug">Smart Reminders</h3>
                                        <p class="mb-10 text-lg font-medium text-white leading-relaxed">Receive timely notifications for important tasks and deadlines.</p>
                                    </div>
                                    <a href="#" class="inline-flex justify-center items-center text-center h-14 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-900 hover:bg-blue-800 focus:bg-blue-800 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Read more</a>
                                </div>
                            </div>
                            <div class="w-full lg:w-1/2 p-6">
                                <div class="py-14 px-10 flex flex-col justify-between items-center h-full text-center bg-white bg-opacity-20 border border-white rounded-3xl">
                                    <div class="w-full">
                                        <div class="mb-6 flex items-center justify-center max-w-max mx-auto h-14 py-4 px-7 bg-orange-500 rounded-full">
                                            <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                                        </div>
                                        <h3 class="font-heading mb-7 text-2xl text-white font-bold leading-snug">Interactive Whiteboard</h3>
                                        <p class="mb-10 text-lg font-medium text-white leading-relaxed">Collaborate with clients in real-time with visual brainstorming tools.</p>
                                    </div>
                                    <a href="#" class="inline-flex justify-center items-center text-center h-14 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-900 hover:bg-blue-800 focus:bg-blue-800 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-shrink-0 max-w-full px-6">
                        <div class="flex flex-wrap -m-6">
                            <div class="w-full lg:w-1/2 p-6">
                                <div class="py-14 px-10 flex flex-col justify-between items-center h-full text-center bg-white bg-opacity-20 border border-white rounded-3xl">
                                    <div class="w-full">
                                        <div class="mb-6 flex items-center justify-center max-w-max mx-auto h-14 py-4 px-7 bg-green-500 rounded-full">
                                            <img class="h-6" src="fily-assets/features/app.svg" alt="">
                                        </div>
                                        <h3 class="font-heading mb-7 text-2xl text-white font-bold leading-snug">Social Media Integration</h3>
                                        <p class="mb-10 text-lg font-medium text-white leading-relaxed">Manage client interactions across multiple platforms from one app.</p>
                                    </div>
                                    <a href="#" class="inline-flex justify-center items-center text-center h-14 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-900 hover:bg-blue-800 focus:bg-blue-800 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Read more</a>
                                </div>
                            </div>
                            <div class="w-full lg:w-1/2 p-6">
                                <div class="py-14 px-10 flex flex-col justify-between items-center h-full text-center bg-white bg-opacity-20 border border-white rounded-3xl">
                                    <div class="w-full">
                                        <div class="mb-6 flex items-center justify-center max-w-max mx-auto h-14 py-4 px-7 bg-orange-500 rounded-full">
                                            <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                                        </div>
                                        <h3 class="font-heading mb-7 text-2xl text-white font-bold leading-snug">Budget Tracker</h3>
                                        <p class="mb-10 text-lg font-medium text-white leading-relaxed">Monitor project expenses and budgets in real-time.</p>
                                    </div>
                                    <a href="#" class="inline-flex justify-center items-center text-center h-14 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-900 hover:bg-blue-800 focus:bg-blue-800 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden lg:block w-auto pl-28">
                <a href="#" x-on:click.prevent="activeSlide < slideCount ? activeSlide += 1 : activeSlide = slideCount" class="flex items-center justify-center w-14 h-14 bg-white bg-opacity-10 hover:bg-blue-500 focus:ring focus:ring-opacity-40 focus:ring-white 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="white"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

<div x-data="{ mobileNavOpen: false, dropdown: false }" class="bg-black">
    <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">
        <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-white-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-white hover:text-gray-300 font-medium transition duration-200">Our features</a>
                </li>
                <li>
                    <a x-on:mousemove="dropdown = false" href="#" class="text-lg text-white hover:text-gray-300 font-medium transition duration-200">How to use?</a>
                </li>
                <li>
                    <a x-on:mousemove="dropdown = true" href="#" :class="{'text-gray-300': dropdown}" class="flex items-center text-lg text-white hover:text-gray-300 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-white hover:text-gray-300 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-white hover:text-black focus:text-black bg-transparent hover:bg-white focus:bg-white border border-gray-300 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 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-white 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>

<section x-data="{ mobileNavOpen: false, dropdown: false }" class="bg-black relative">
    <img class="absolute top-0 left-0 w-full h-full" src="fily-assets/gradients/gradient-signup.png" alt="">
    <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">
        <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-white-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-white hover:text-gray-300 font-medium transition duration-200">Our features</a>
                </li>
                <li>
                    <a href="#" x-on:mousemove="dropdown = false" class="text-lg text-white hover:text-gray-300 font-medium transition duration-200">How to use?</a>
                </li>
                <li>
                    <a href="#" x-on:mousemove="dropdown = true" :class="{'text-gray-300': dropdown}" class="flex items-center text-lg text-white hover:text-gray-300 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-white hover:text-gray-300 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-white hover:text-black focus:text-black bg-transparent hover:bg-white focus:bg-white border border-gray-300 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 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-white 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="relative pt-24 pb-20">
            <h3 class="mb-12 font-heading text-4xl font-medium text-center text-white">Register an account</h3>
            <div class="py-18 px-10 md:px-20 max-w-2xl bg-white bg-opacity-5 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-03-1" class="mb-2 inline-block text-sm text-white font-medium">Email</label>
                            <input id="signup-input-03-1" type="text" placeholder="Enter your email" class="w-full px-6 h-14 bg-transparent font-semibold text-white placeholder-white outline-none border border-white border-opacity-40 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-03-2" class="mb-2 inline-block text-sm text-white font-medium">Password</label>
                                <div class="relative" x-data="{ visible: false }">
                                    <input id="signup-input-03-2" :type="visible ? 'text': 'password'" type="password" placeholder="Your password" class="w-full px-6 pr-12 h-14 bg-transparent font-semibold text-white placeholder-white outline-none border border-white border-opacity-40 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="19" height="18" viewBox="0 0 19 18" fill="none">
                                            <g clip-path="url(#clip0_460_281)">
                                                <path d="M17.9527 7.06421C16.7894 5.16971 14.1434 1.99121 9.49943 1.99121C4.85543 1.99121 2.20943 5.16971 1.04618 7.06421C0.686574 7.64584 0.496094 8.31614 0.496094 8.99996C0.496094 9.68378 0.686574 10.3541 1.04618 10.9357C2.20943 12.8302 4.85543 16.0087 9.49943 16.0087C14.1434 16.0087 16.7894 12.8302 17.9527 10.9357C18.3123 10.3541 18.5028 9.68378 18.5028 8.99996C18.5028 8.31614 18.3123 7.64584 17.9527 7.06421ZM16.6739 10.1505C15.6749 11.775 13.4137 14.5087 9.49943 14.5087C5.58518 14.5087 3.32393 11.775 2.32493 10.1505C2.11128 9.80475 1.99812 9.40637 1.99812 8.99996C1.99812 8.59356 2.11128 8.19518 2.32493 7.84946C3.32393 6.22496 5.58518 3.49121 9.49943 3.49121C13.4137 3.49121 15.6749 6.22196 16.6739 7.84946C16.8876 8.19518 17.0007 8.59356 17.0007 8.99996C17.0007 9.40637 16.8876 9.80475 16.6739 10.1505Z" fill="white"></path>
                                                <path d="M9.5 5.25C8.75832 5.25 8.0333 5.46993 7.41661 5.88199C6.79993 6.29404 6.31928 6.87971 6.03545 7.56494C5.75162 8.25016 5.67736 9.00416 5.82206 9.73159C5.96675 10.459 6.3239 11.1272 6.84835 11.6517C7.3728 12.1761 8.04098 12.5333 8.76841 12.6779C9.49584 12.8226 10.2498 12.7484 10.9351 12.4645C11.6203 12.1807 12.206 11.7001 12.618 11.0834C13.0301 10.4667 13.25 9.74168 13.25 9C13.2488 8.0058 12.8533 7.05267 12.1503 6.34966C11.4473 5.64666 10.4942 5.25119 9.5 5.25ZM9.5 11.25C9.05499 11.25 8.61998 11.118 8.24997 10.8708C7.87996 10.6236 7.59157 10.2722 7.42127 9.86104C7.25098 9.4499 7.20642 8.9975 7.29323 8.56105C7.38005 8.12459 7.59434 7.72368 7.90901 7.40901C8.22368 7.09434 8.62459 6.88005 9.06105 6.79323C9.49751 6.70642 9.94991 6.75097 10.361 6.92127C10.7722 7.09157 11.1236 7.37996 11.3708 7.74997C11.618 8.11998 11.75 8.55499 11.75 9C11.75 9.59674 11.5129 10.169 11.091 10.591C10.669 11.0129 10.0967 11.25 9.5 11.25Z" fill="white"></path>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_460_281">
                                                    <rect width="18" height="18" fill="white" transform="translate(0.5)"></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-pink-500 hover:bg-pink-600 focus:bg-pink-600 rounded-full focus:ring-4 focus:ring-pink-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-white bg-opacity-40"></div>
                        </div>
                        <div class="w-auto">
                            <span class="text-white font-semibold">or</span>
                        </div>
                        <div class="flex-1">
                            <div class="h-px bg-white bg-opacity-40"></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-white hover:text-white focus:text-white bg-transparent hover:bg-transparent focus:bg-bg-transparent border border-white border-opacity-40 rounded-full focus:ring-4 focus:ring-blue-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-12 h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-transparent hover:bg-transparent focus:bg-bg-transparent border border-white border-opacity-40 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">
                        <img class="mr-3" src="fily-assets/sign-up/apple-white.svg" alt="">
                        <span>Continue with Apple</span>
                    </a>
                    <div class="flex justify-center">
                        <span class="font-medium text-center text-white">Already have an account? <a href="#" class="font-semibold text-pink-500 hover:text-pink-600">Log in</a></span>
                    </div>
                </form> 
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-gray-50 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
    <div class="container mx-auto px-4">
        <h2 class="mb-24 font-heading text-4xl md:text-5xl font-bold">What others say about us</h2>
        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5 mb-14">
            <div x-ref="slide1" class="flex-shrink-0 max-w-xl w-full p-5">
                <div class="relative py-18 px-14 bg-white rounded-3xl">
                    <div class="mb-12 max-w-max bg-white rounded-5xl">
                        <div class="flex flex-wrap items-center -m-2.5">
                            <div class="w-auto p-2.5">
                                <img class="h-16" src="fily-assets/testimonials/avatar.png" alt="">
                            </div>
                            <div class="flex-1 p-2.5">
                                <h3 class="font-heading text-2xl font-bold">Aleeza Keller</h3>
                                <span class="text-sm text-blue-500 font-medium">CEO, Founder</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-xl font-light leading-normal">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc.</p>
                </div>
            </div>
            <div x-ref="slide2" class="flex-shrink-0 max-w-xl w-full p-5">
                <div class="relative py-18 px-14 bg-white rounded-3xl">
                    <div class="mb-12 max-w-max bg-white rounded-5xl">
                        <div class="flex flex-wrap items-center -m-2.5">
                            <div class="w-auto p-2.5">
                                <img class="h-16 rounded-full" src="fily-assets/testimonials/pic2.jpg" alt="">
                            </div>
                            <div class="flex-1 p-2.5">
                                <h3 class="font-heading text-2xl font-bold">Stephen Leblanc</h3>
                                <span class="text-sm text-blue-500 font-medium">CEO, Founder</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-xl font-light leading-normal">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc.</p>
                </div>
            </div>
            <div x-ref="slide3" class="flex-shrink-0 max-w-xl w-full p-5">
                <div class="relative py-18 px-14 bg-white rounded-3xl">
                    <div class="mb-12 max-w-max bg-white rounded-5xl">
                        <div class="flex flex-wrap items-center -m-2.5">
                            <div class="w-auto p-2.5">
                                <img class="h-16" src="fily-assets/testimonials/avatar.png" alt="">
                            </div>
                            <div class="flex-1 p-2.5">
                                <h3 class="font-heading text-2xl font-bold">Aleeza Keller</h3>
                                <span class="text-sm text-blue-500 font-medium">CEO, Founder</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-xl font-light leading-normal">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc.</p>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap items-center -m-7">
            <div class="w-full md:flex-1 p-7">
                <div class="relative bg-white 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 + 1)}%`"></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 > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white hover:bg-blue-500 focus:bg-blue-500 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="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 - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" 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>
</section>

<section class="py-24 md:py-40 bg-black overflow-hidden">
    <div class="container mx-auto px-4">
        <div class="mb-24 max-w-5xl mx-auto">
            <h3 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center text-white leading-tight">Meet our team</h3>
            <p class="text-xl font-medium text-center text-white 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="p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 py-10 px-8 h-full transparent max-w-2xl">
                    <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 text-white 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 text-white bg-gray-800 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="currentColor"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 text-white bg-gray-800 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="currentColor"></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>
        <div class="p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 py-10 px-8 h-full transparent max-w-2xl">
                    <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 text-white 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 text-white bg-gray-800 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="currentColor"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 text-white bg-gray-800 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="currentColor"></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>
        <div class="p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 py-10 px-8 h-full transparent max-w-2xl">
                    <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 text-white 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 text-white bg-gray-800 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="currentColor"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 text-white bg-gray-800 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="currentColor"></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>
        <div class="p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 py-10 px-8 h-full transparent max-w-2xl">
                    <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 text-white 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 text-white bg-gray-800 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="currentColor"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 text-white bg-gray-800 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="currentColor"></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>
    </div>
    <div class="relative left-1/2 transform -translate-x-1/2 flex flex-nowrap justify-center min-w-max gap-5">
        <div class="p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 py-10 px-8 h-full transparent max-w-2xl">
                    <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 text-white 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 text-white bg-gray-800 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="currentColor"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 text-white bg-gray-800 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="currentColor"></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>
        <div class="p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 py-10 px-8 h-full transparent max-w-2xl">
                    <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 text-white 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 text-white bg-gray-800 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="currentColor"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 text-white bg-gray-800 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="currentColor"></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>
        <div class="p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 py-10 px-8 h-full transparent max-w-2xl">
                    <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 text-white 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 text-white bg-gray-800 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="currentColor"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 text-white bg-gray-800 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="currentColor"></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>
    </div>
</section>

<section class="py-24 md:py-36" style="background: url('fily-assets/contact/bg.jpg'); background-size: cover;">
    <div class="container mx-auto px-4">
        <form action="#" class="py-24 px-10 md:px-20 max-w-2xl bg-white w-full rounded-3xl">
            <h2 class="mb-14 font-heading text-4xl font-medium">Contact us</h2>
            <div class="flex flex-wrap -m-2.5 mb-4">
                <div class="w-full p-2.5">
                    <label for="contact-input-03-1" class="mb-2 inline-block text-sm text-gray-500 font-medium">First name</label>
                    <input id="contact-input-03-1" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 bg-gray-200 bg-opacity-10 font-semibold text-black placeholder-gray-500 outline-none focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                </div>
                <div class="w-full p-2.5">
                    <label for="contact-input-03-2" class="mb-2 inline-block text-sm text-gray-500 font-medium">Last name</label>
                    <input id="contact-input-03-2" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 bg-gray-200 bg-opacity-10 font-semibold text-black placeholder-gray-500 outline-none 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-03-3" class="mb-2 inline-block text-sm text-gray-500 font-medium">Address email</label>
                    <input id="contact-input-03-3" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 bg-gray-200 bg-opacity-10 font-semibold text-black placeholder-gray-500 outline-none focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                </div>
                <div class="w-full p-3">
                    <label for="contact-input-03-4" class="mb-2 inline-block text-sm text-gray-500 font-medium">Subject</label>
                    <input id="contact-input-034" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 bg-gray-200 bg-opacity-10 font-semibold text-black placeholder-gray-500 outline-none focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                </div>
                <div class="w-full p-3">
                    <label for="contact-textarea-03-1" class="mb-2 inline-block text-sm text-gray-500 font-medium">Message</label>
                    <textarea id="contact-textarea-03-1" placeholder="Type message here" class="w-full bg-transparent p-6 h-28 bg-gray-200 bg-opacity-10 font-semibold text-black placeholder-gray-500 outline-none 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>
</section>

<div class="fixed top-0 flex justify-center w-full z-40 p-6">
    <div class="px-6 py-5 bg-gray-900 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 x="0.35" y="0.35" width="27.3" height="27.3" rx="13.65" stroke="#24B428" stroke-width="0.7"></rect>
                    <path d="M11.8746 18.3311C11.534 18.3312 11.2073 18.1958 10.9666 17.9548L8.22153 15.2107C7.92616 14.9152 7.92616 14.4363 8.22153 14.1408C8.517 13.8454 8.99595 13.8454 9.29142 14.1408L11.8746 16.724L18.7086 9.88999C19.004 9.59461 19.483 9.59461 19.7785 9.88999C20.0738 10.1855 20.0738 10.6644 19.7785 10.9599L12.7826 17.9548C12.5419 18.1958 12.2152 18.3312 11.8746 18.3311Z" fill="#24B428"></path>
                </svg>
            </div>
            <p class="flex-1 text-lg text-white font-medium">Your settings have been saved.</p>    
        </div>
    </div>
</div>

<section class="pt-20">
    <div class="container mx-auto px-4">
        <div class="mb-16 pb-6 border-b border-gray-100">
            <div class="flex flex-wrap items-center -m-4">
                <div class="w-full lg:w-auto p-4">
                    <img class="h-9" src="fily-assets/logos/fily-treck-black-logo.svg" alt="">
                </div>
                <div class="w-full lg:flex-1 p-4">
                    <ul class="flex flex-wrap justify-end h-24 lg:h-auto overflow-y-auto gap-4 lg:gap-14">
                        <li class="w-full lg:w-auto">
                            <a href="#" class="text-lg hover:text-gray-700 font-medium transition durtion-200">Our features</a>
                        </li>
                        <li class="w-full lg:w-auto">
                            <a href="#" class="text-lg hover:text-gray-700 font-medium transition durtion-200">How to use?</a>
                        </li>
                        <li class="w-full lg:w-auto">
                            <a href="#" class="text-lg hover:text-gray-700 font-medium transition durtion-200">Use cases</a>
                        </li>
                        <li class="w-full lg:w-auto">
                            <a href="#" class="text-lg hover:text-gray-700 font-medium transition durtion-200">Plans &amp; pricing</a>
                        </li>
                        <li class="w-full lg:w-auto">
                            <a href="#" class="text-lg hover:text-gray-700 font-medium transition durtion-200">Help center</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap items-center -m-12 divide-x divide-gray-100 pb-20">
            <div class="w-full sm:w-1/2 lg:w-1/3 p-12">
                <h2 class="mb-10 font-heading text-2xl font-bold">Subscribe to our newsletter and receive the latest news and exclusive insight every week. </h2>
                <div class="relative p-1.5 max-w-md mx-auto md:ml-0 bg-gray-50 rounded-2xl focus-within:ring-4 focus-within:ring-blue-200 md:rounded-full transition duration-200">
                    <div class="relative">
                        <input id="footers-input-03-1" type="text" class="py-4 md:px-6 md:pl-6 md:pr-40 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-6 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 class="w-full sm:w-1/2 lg:w-1/3 p-12">
                <h3 class="mb-8 font-heading text-2xl font-bold">Contact</h3>
                <ul>
                    <li class="mb-4 flex items-center gap-4">
                        <div class="flex items-center justify-center w-10 h-10 text-lg text-gray-500 hover:text-gray-600 font-medium bg-orange-500 rounded-full transition duration-200">
                            <svg class="h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <g clip-path="url(#clip0_333_552)">
                                    <path d="M15.3335 7.33329C15.1567 7.33329 14.9872 7.26305 14.8621 7.13802C14.7371 7.013 14.6669 6.84343 14.6669 6.66662C14.6655 5.25256 14.1031 3.89683 13.1032 2.89694C12.1033 1.89705 10.7476 1.3347 9.33353 1.33329C9.15672 1.33329 8.98715 1.26305 8.86213 1.13802C8.7371 1.013 8.66686 0.84343 8.66686 0.666619C8.66686 0.489808 8.7371 0.320239 8.86213 0.195215C8.98715 0.0701903 9.15672 -4.75928e-05 9.33353 -4.75928e-05C11.101 0.00189347 12.7956 0.704896 14.0454 1.95472C15.2953 3.20454 15.9983 4.89911 16.0002 6.66662C16.0002 6.84343 15.93 7.013 15.8049 7.13802C15.6799 7.26305 15.5103 7.33329 15.3335 7.33329ZM13.3335 6.66662C13.3335 5.60575 12.9121 4.58834 12.162 3.83819C11.4118 3.08805 10.3944 2.66662 9.33353 2.66662C9.15672 2.66662 8.98715 2.73686 8.86213 2.86188C8.7371 2.98691 8.66686 3.15647 8.66686 3.33329C8.66686 3.5101 8.7371 3.67967 8.86213 3.80469C8.98715 3.92971 9.15672 3.99995 9.33353 3.99995C10.0408 3.99995 10.7191 4.2809 11.2191 4.781C11.7192 5.2811 12.0002 5.95938 12.0002 6.66662C12.0002 6.84343 12.0704 7.013 12.1955 7.13802C12.3205 7.26305 12.4901 7.33329 12.6669 7.33329C12.8437 7.33329 13.0132 7.26305 13.1383 7.13802C13.2633 7.013 13.3335 6.84343 13.3335 6.66662ZM14.7889 14.776L15.3955 14.0766C15.7817 13.6892 15.9985 13.1646 15.9985 12.6176C15.9985 12.0707 15.7817 11.546 15.3955 11.1586C15.3749 11.138 13.7709 9.90395 13.7709 9.90395C13.3859 9.53751 12.8746 9.33346 12.3431 9.3342C11.8116 9.33495 11.3008 9.54043 10.9169 9.90795L9.6462 10.9786C8.60898 10.5493 7.66679 9.9194 6.87372 9.12496C6.08065 8.33053 5.45234 7.38724 5.02486 6.34929L6.09153 5.08262C6.45934 4.69873 6.66506 4.18787 6.66593 3.65622C6.6668 3.12457 6.46275 2.61304 6.0962 2.22795C6.0962 2.22795 4.86086 0.625952 4.8402 0.605286C4.45983 0.222451 3.94412 0.00463375 3.40448 -0.0011044C2.86485 -0.00684256 2.34462 0.199959 1.9562 0.574619L1.18953 1.24129C-3.3398 6.49595 6.41353 16.174 11.8415 16C12.3897 16.0031 12.9329 15.8965 13.4391 15.6862C13.9453 15.476 14.4042 15.1665 14.7889 14.776Z" fill="white"></path>
                                </g>
                                <defs>
                                    <clipPath id="clip0_333_552">
                                        <rect width="16" height="16" fill="white"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                        <span class="text-xl font-medium">+44 7911 552 774</span>
                    </li>
                    <li class="mb-6 flex items-center gap-4">
                        <div class="flex items-center justify-center w-10 h-10 text-lg text-gray-500 hover:text-gray-600 font-medium bg-green-500 rounded-full transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <g clip-path="url(#clip0_333_563)">
                                    <path d="M15.9693 3.6947L10.3573 9.3067C9.73158 9.93087 8.88383 10.2814 8 10.2814C7.11617 10.2814 6.26842 9.93087 5.64267 9.3067L0.0306667 3.6947C0.0213333 3.80004 0 3.89537 0 4.00004V12C0.00105857 12.8838 0.352588 13.731 0.97748 14.3559C1.60237 14.9808 2.4496 15.3323 3.33333 15.3334H12.6667C13.5504 15.3323 14.3976 14.9808 15.0225 14.3559C15.6474 13.731 15.9989 12.8838 16 12V4.00004C16 3.89537 15.9787 3.80004 15.9693 3.6947Z" fill="white"></path>
                                    <path d="M9.41476 8.36396L15.5041 2.27396C15.2091 1.78484 14.7931 1.37998 14.2961 1.09845C13.7991 0.816908 13.2379 0.668186 12.6668 0.666626H3.33343C2.76224 0.668186 2.20109 0.816908 1.70411 1.09845C1.20713 1.37998 0.791079 1.78484 0.496094 2.27396L6.58543 8.36396C6.96114 8.73817 7.46982 8.94827 8.00009 8.94827C8.53037 8.94827 9.03905 8.73817 9.41476 8.36396Z" fill="white"></path>
                                </g>
                                <defs>
                                    <clipPath id="clip0_333_563">
                                        <rect width="16" height="16" fill="white"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                        <span class="text-xl font-medium">hello@filytreck.uk</span>
                    </li>
                </ul>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/3 p-12">
                <h3 class="mb-8 font-heading text-2xl font-bold">Social media</h3>
                <ul>
                    <li class="mb-4 flex items-center gap-4">
                        <a href="#" class="group flex items-center gap-4">
                            <div 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.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>
                            </div>
                            <span class="text-xl group-hover:text-gray-700 font-medium transition duration-200">X-Crop</span>
                        </a>
                    </li>
                    <li class="mb-6 flex items-center gap-4">
                        <a href="#" class="group flex items-center gap-4">
                            <div class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                <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>
                            </div>
                            <span class="text-xl group-hover:text-gray-700 font-medium transition duration-200">Linkedin</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="border-t border-gray-100 bg-white bg-opacity-5">
        <div class="container mx-auto px-4">
            <div class="py-6">
                <div class="flex flex-wrap justify-between -m-2">
                    <div class="w-auto p-2">
                        <p class="text-gray-500 font-medium">© Shuffle 2023. All rights reserved.</p>
                    </div>
                    <div class="w-auto p-2">
                        <a href="#" class="flex flex-wrap items-center gap-2.5 hover:text-gray-700 font-medium transition duration-200">
                            <span class="text-lg font-medium">Go to the top</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
                                <g clip-path="url(#clip0_360_171)">
                                    <path d="M0.688287 9.48329C0.761831 9.56169 0.84933 9.62392 0.945735 9.66639C1.04214 9.70885 1.14554 9.73071 1.24998 9.73071C1.35442 9.73071 1.45782 9.70885 1.55423 9.66639C1.65063 9.62392 1.73813 9.56169 1.81168 9.48329L5.435 5.65234C5.50855 5.57394 5.59604 5.51172 5.69245 5.46925C5.78885 5.42679 5.89226 5.40492 5.9967 5.40492C6.10113 5.40492 6.20454 5.42679 6.30094 5.46925C6.39735 5.51172 6.48484 5.57394 6.55839 5.65234L10.1817 9.48329C10.2553 9.56169 10.3428 9.62392 10.4392 9.66638C10.5356 9.70885 10.639 9.73071 10.7434 9.73071C10.8478 9.73071 10.9513 9.70885 11.0477 9.66638C11.1441 9.62392 11.2316 9.56169 11.3051 9.48329C11.4525 9.32657 11.5352 9.11457 11.5352 8.89359C11.5352 8.67262 11.4525 8.46061 11.3051 8.3039L7.67387 4.46458C7.22886 3.99466 6.62564 3.73071 5.99669 3.73071C5.36775 3.73071 4.76453 3.99466 4.31952 4.46458L0.688287 8.3039C0.54094 8.46062 0.458234 8.67262 0.458234 8.89359C0.458234 9.11457 0.54094 9.32657 0.688287 9.48329Z" fill="currentColor"></path>
                                </g>
                                <defs>
                                    <clipPath id="clip0_360_171">
                                        <rect width="12" height="12" fill="white" transform="translate(12 12.5) rotate(180)"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </a>
                    </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">
        <div class="mb-24 max-w-3xl mx-auto text-center">
            <h2 class="mb-10 font-heading text-4xl md:text-5xl text-white font-bold">Work with us</h2>
            <p class="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.</p>
        </div>
        <div class="flex flex-wrap">
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap h-full gap-8">
                        <div class="w-full md:flex-1">
                            <div class="flex flex-col justify-between h-full">
                                <div class="mb-6 w-full">
                                    <h3 class="mb-3 font-heading text-3xl text-white font-bold">Product Designer</h3>
                                    <p class="mb-6 text-gray-500 font-medium">Praesent sagittis gravida turpis, sed consequat eros auctor et. Pellentesque nec nisi rutrum, congue libero.</p>
                                </div>
                                <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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/clock-white.svg" alt="">
                                            <span class="text-sm text-white 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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/marker-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">Full-time</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-auto self-center">
                            <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>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap h-full gap-8">
                        <div class="w-full md:flex-1">
                            <div class="flex flex-col justify-between h-full">
                                <div class="mb-6 w-full">
                                    <h3 class="mb-3 font-heading text-3xl text-white font-bold">Customer Success Manager</h3>
                                    <p class="mb-6 text-gray-500 font-medium">Praesent sagittis gravida turpis, sed consequat eros auctor et. Pellentesque nec nisi rutrum, congue libero.</p>
                                </div>
                                <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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/clock-white.svg" alt="">
                                            <span class="text-sm text-white 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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/marker-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">Full-time</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-auto self-center">
                            <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>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap h-full gap-8">
                        <div class="w-full md:flex-1">
                            <div class="flex flex-col justify-between h-full">
                                <div class="mb-6 w-full">
                                    <h3 class="mb-3 font-heading text-3xl text-white font-bold">Engineering Manager</h3>
                                    <p class="mb-6 text-gray-500 font-medium">Praesent sagittis gravida turpis, sed consequat eros auctor et. Pellentesque nec nisi rutrum, congue libero.</p>
                                </div>
                                <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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/clock-white.svg" alt="">
                                            <span class="text-sm text-white 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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/marker-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">Full-time</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-auto self-center">
                            <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>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap h-full gap-8">
                        <div class="w-full md:flex-1">
                            <div class="flex flex-col justify-between h-full">
                                <div class="mb-6 w-full">
                                    <h3 class="mb-3 font-heading text-3xl text-white font-bold">UX/UI Designer</h3>
                                    <p class="mb-6 text-gray-500 font-medium">Praesent sagittis gravida turpis, sed consequat eros auctor et. Pellentesque nec nisi rutrum, congue libero.</p>
                                </div>
                                <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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/clock-white.svg" alt="">
                                            <span class="text-sm text-white 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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/marker-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">Full-time</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-auto self-center">
                            <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>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap h-full gap-8">
                        <div class="w-full md:flex-1">
                            <div class="flex flex-col justify-between h-full">
                                <div class="mb-6 w-full">
                                    <h3 class="mb-3 font-heading text-3xl text-white font-bold">Backend Developer</h3>
                                    <p class="mb-6 text-gray-500 font-medium">Praesent sagittis gravida turpis, sed consequat eros auctor et. Pellentesque nec nisi rutrum, congue libero.</p>
                                </div>
                                <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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/clock-white.svg" alt="">
                                            <span class="text-sm text-white 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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/marker-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">Full-time</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-auto self-center">
                            <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>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap h-full gap-8">
                        <div class="w-full md:flex-1">
                            <div class="flex flex-col justify-between h-full">
                                <div class="mb-6 w-full">
                                    <h3 class="mb-3 font-heading text-3xl text-white font-bold">Account Manager</h3>
                                    <p class="mb-6 text-gray-500 font-medium">Praesent sagittis gravida turpis, sed consequat eros auctor et. Pellentesque nec nisi rutrum, congue libero.</p>
                                </div>
                                <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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/clock-white.svg" alt="">
                                            <span class="text-sm text-white 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 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/marker-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">Full-time</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-auto self-center">
                            <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>
        </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-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="bg-black" x-data="{ activeSlide: 1, slideCount: 2 }">
    <div class="relative py-24 md:pt-40 md:pb-32" style="background: url('fily-assets/gradients/gradient-httpcodes.png'); background-size: cover;">
        <div class="relative">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-xl mx-auto">
                    <h2 class="font-heading text-7xl md:text-8xl font-bold text-center text-white">404</h2>
                    <p class="mb-14 text-xl text-white font-medium leading-relaxed">Something went wrong. 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-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Back to homepage</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pt-18 pb-16">
        <div class="container mx-auto px-4">
            <ul class="pb-18 flex flex-wrap gap-10 md:gap-20">
                <li>
                    <a href="#" class="text-3xl text-white hover:text-white font-bold transition duration-200">Latest news</a>
                </li>
                <li>
                    <a href="#" class="text-3xl text-gray-500 hover:text-white font-bold transition duration-200">Features</a>
                </li>
                <li>
                    <a href="#" class="text-3xl text-gray-500 hover:text-white font-bold transition duration-200">Contact</a>
                </li>
            </ul>
            <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">
                        <div class="flex flex-wrap -m-7">
                            <div class="w-full md:w-1/3 p-7">
                                <div class="flex flex-wrap -m-4">
                                    <div class="w-auto p-4">
                                        <img class="object-cover rounded-3xl" style="width: 130px; height: 130px;" src="fily-assets/http-codes/pic.jpg" alt="">
                                    </div>
                                    <div class="flex-1 p-4">
                                        <div class="pt-2">
                                            <a href="#">
                                                <h3 class="mb-6 font-heading text-xl text-white font-medium hover:underline">Handle transactions securely within the app</h3>
                                            </a>
                                            <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="w-full md:w-1/3 p-7">
                                <div class="flex flex-wrap -m-4">
                                    <div class="w-auto p-4">
                                        <img class="object-cover rounded-3xl" style="width: 130px; height: 130px;" src="fily-assets/http-codes/pic2.jpg" alt="">
                                    </div>
                                    <div class="flex-1 p-4">
                                        <div class="pt-2">
                                            <a href="#">
                                                <h3 class="mb-6 font-heading text-xl text-white font-medium hover:underline">Create and reuse templates for common tasks</h3>
                                            </a>
                                            <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="w-full md:w-1/3 p-7">
                                <div class="flex flex-wrap -m-4">
                                    <div class="w-auto p-4">
                                        <img class="object-cover rounded-3xl" style="width: 130px; height: 130px;" src="fily-assets/http-codes/pic3.jpg" alt="">
                                    </div>
                                    <div class="flex-1 p-4">
                                        <div class="pt-2">
                                            <a href="#">
                                                <h3 class="mb-6 font-heading text-xl text-white font-medium hover:underline">Communicate with clients and team members in real-time</h3>
                                            </a>
                                            <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>
                    </div>
                    <div class="flex-shrink-0 w-full px-4">
                        <div class="flex flex-wrap -m-7 mb-11">
                            <div class="w-full md:w-1/3 p-7">
                                <div class="flex flex-wrap -m-4">
                                    <div class="w-auto p-4">
                                        <img class="object-cover rounded-3xl" style="width: 130px; height: 130px;" src="fily-assets/http-codes/pic.jpg" alt="">
                                    </div>
                                    <div class="flex-1 p-4">
                                        <div class="pt-2">
                                            <a href="#">
                                                <h3 class="mb-6 font-heading text-xl text-white font-medium hover:underline">2023 Remote Work: A Comprehensive Guide</h3>
                                            </a>
                                            <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="w-full md:w-1/3 p-7">
                                <div class="flex flex-wrap -m-4">
                                    <div class="w-auto p-4">
                                        <img class="object-cover rounded-3xl" style="width: 130px; height: 130px;" src="fily-assets/http-codes/pic2.jpg" alt="">
                                    </div>
                                    <div class="flex-1 p-4">
                                        <div class="pt-2">
                                            <a href="#">
                                                <h3 class="mb-6 font-heading text-xl text-white font-medium hover:underline">Mastering the Art of Project Management Success</h3>
                                            </a>
                                            <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="w-full md:w-1/3 p-7">
                                <div class="flex flex-wrap -m-4">
                                    <div class="w-auto p-4">
                                        <img class="object-cover rounded-3xl" style="width: 130px; height: 130px;" src="fily-assets/http-codes/pic3.jpg" alt="">
                                    </div>
                                    <div class="flex-1 p-4">
                                        <div class="pt-2">
                                            <a href="#">
                                                <h3 class="mb-6 font-heading text-xl text-white font-medium hover:underline">Optimal Work Management Software for Firms</h3>
                                            </a>
                                            <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>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap items-center -m-7">
                <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>
</section>

<section class="py-24 md:py-36 bg-black" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-24 font-heading text-4xl md:text-5xl font-bold text-center text-white">Frequently asked questions</h2>
        <div class="flex flex-wrap -m-2.5">
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold text-white">How can I get started with FilyTreck?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold text-white">Is there a free trial available for new users?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">Yes, we offer a free trial for new users to explore our app's features.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold text-white">Can I use FilyTreck on different devices?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">Yes, FilyTreck is compatible with multiple devices.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold text-white">How can I import or export my tasks and data?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">You can easily import and export your tasks and data using the built-in tools in our app.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold text-white">What types of support and assistance do you provide for users?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">We provide various forms of support, including a comprehensive knowledge base, and email support.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold text-white">Are my data and information secure in FilyTreck?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">Rest assured, your data is secure in [App Name]. We employ strict security measures to protect your information.</p>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold text-white">What are the key features of FilyTreck ?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">This FAQ provides a brief overview of the main functionalities and capabilities offered by FilyTreck, highlighting its core features to help users understand its potential benefits for their workflow.</p>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 p-2.5">
                <div class="p-12 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <h3 class="mb-16 font-heading text-2xl font-bold text-white">What support options are available for FilyTreck ?</h3>
                        <p class="text-gray-500 font-medium leading-relaxed">Learn about the various support channels and assistance avenues provided to users of FilyTreck, ensuring that they receive timely help and guidance whenever needed to maximize their experience and productivity.</p>
                    </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 py-8 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">Show more</a>
        </div>
    </div>
</section>