Shuffle Components in Filytreck library

<section class="relative md:pt-56 md:pb-64 overflow-hidden">
    <img class="mb-16 md:mb-0 md:absolute md:top-0 md:left-0 w-full md:w-1/2 h-64 md:h-full object-cover transform hover:scale-105 transition duration-500" src="fily-assets/download/pic.png" alt="">
    <div class="container mx-auto px-4">
        <div class="relative flex flex-wrap justify-end pb-24 mb:pb-0">
            <div class="w-full md:w-1/2">
                <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold">Download our application</h2>
                <p class="mb-14 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 class="flex flex-wrap -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>
    </div>
</section>

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

<section class="py-24 md:py-36 bg-black" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-white">Categories</h2>
        <p class="mb-20 text-xl font-medium leading-relaxed text-white">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt</p>
        <div class="py-16 border-b border-gray-500">
            <div class="flex flex-wrap -m-6">
                <div class="w-full md:w-auto p-6">
                    <div class="flex items-center justify-center w-24 h-24 bg-blue-500 rounded-3xl">
                        <img class="h-10" src="fily-assets/categories/clock-medium-white.svg" alt="">
                    </div>
                </div>
                <div class="w-full md:flex-1 p-6">
                    <h3 class="font-heading text-3xl md:text-4xl font-medium text-white">Time tracker</h3>
                    <p class="text-xl font-medium leading-relaxed text-gray-500">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
            </div>
        </div>
        <div class="py-16 border-b border-gray-500">
            <div class="flex flex-wrap -m-6">
                <div class="w-full md:w-auto p-6">
                    <div class="flex items-center justify-center w-24 h-24 bg-pink-500 rounded-3xl">
                        <img class="h-10" src="fily-assets/categories/notebook-medium.svg" alt="">
                    </div>
                </div>
                <div class="w-full md:flex-1 p-6">
                    <h3 class="font-heading text-3xl md:text-4xl font-medium text-white">Timesheets &amp; reports</h3>
                    <p class="text-xl font-medium leading-relaxed text-gray-500">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
            </div>
        </div>
        <div class="py-16 border-b border-gray-500">
            <div class="flex flex-wrap -m-6">
                <div class="w-full md:w-auto p-6">
                    <div class="flex items-center justify-center w-24 h-24 bg-orange-500 rounded-3xl">
                        <img class="h-10" src="fily-assets/categories/stopwatch-medium.svg" alt="">
                    </div>
                </div>
                <div class="w-full md:flex-1 p-6">
                    <h3 class="font-heading text-3xl md:text-4xl font-medium text-white">Real-time active timers</h3>
                    <p class="text-xl font-medium leading-relaxed text-gray-500">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
            </div>
        </div>
        <div :class="{'hidden': !showContent}" class="hidden py-16 border-b border-gray-500">
            <div class="flex flex-wrap -m-6">
                <div class="w-full md:w-auto p-6">
                    <div class="flex items-center justify-center w-24 h-24 bg-green-500 rounded-3xl">
                        <img class="h-10" src="fily-assets/categories/file-invoice-dollar-medium.svg" alt="">
                    </div>
                </div>
                <div class="w-full md:flex-1 p-6">
                    <h3 class="font-heading text-3xl md:text-4xl font-medium text-white">Communication &amp; Collaboration</h3>
                    <p class="text-xl font-medium leading-relaxed text-gray-500">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
            </div>
        </div>
        <div :class="{'hidden': !showContent}" class="hidden py-16 border-b border-gray-500">
            <div class="flex flex-wrap -m-6">
                <div class="w-full md:w-auto p-6">
                    <div class="flex items-center justify-center w-24 h-24 bg-orange-500 rounded-3xl">
                        <img class="h-10" src="fily-assets/categories/stopwatch-medium.svg" alt="">
                    </div>
                </div>
                <div class="w-full md:flex-1 p-6">
                    <h3 class="font-heading text-3xl md:text-4xl font-medium text-white">Goal Setting &amp; Progress Tracking</h3>
                    <p class="text-xl font-medium leading-relaxed text-gray-500">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
            </div>
        </div>
        <div :class="{'hidden': !showContent}" class="hidden py-16 border-b border-gray-500">
            <div class="flex flex-wrap -m-6">
                <div class="w-full md:w-auto p-6">
                    <div class="flex items-center justify-center w-24 h-24 bg-pink-500 rounded-3xl">
                        <img class="h-10" src="fily-assets/categories/notebook-medium.svg" alt="">
                    </div>
                </div>
                <div class="w-full md:flex-1 p-6">
                    <h3 class="font-heading text-3xl md:text-4xl font-medium text-white">Employee Engagement</h3>
                    <p class="text-xl font-medium leading-relaxed text-gray-500">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
            </div>
        </div>
        <a href="#" x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" class="inline-flex justify-center items-center text-center h-18 mt-24 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>
</section>

<div :class="{'hidden': !open}" class="fixed bottom-0 left-0 z-40 w-full p-6" x-data="{ open: true }">
    <div class="py-8 px-12 bg-gray-900 ml-auto max-w-2xl rounded-3xl">
        <div class="flex flex-wrap items-center -m-2">
            <div class="w-full md:flex-1 p-2">
                <h2 class="font-heading text-xl text-white font-medium">We use third-party cookies to personalize content, ads, and analyze site traffic.</h2>
            </div>
            <div class="w-full md:w-auto p-2">
                <a href="#" x-on:click.prevent="open = false" 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">It’s okay</a>
            </div>
        </div>
    </div>
</div>

<section class="py-24 md:py-40" style="background: url('fily-assets/gradients/gradient-newsletter.jpg'); background-size: cover;">
    <div class="container mx-auto px-4">
        <div class="mb-24 max-w-2xl mx-auto text-center">
            <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center text-white">Stay in touch</h2>
            <p class="text-lg text-white font-medium">Duis pellentesque urna a erat sollicitudin, et molestie leo semper aliquam ligula.</p>
        </div>
        <div class="px-8 py-24 max-w-4xl mx-auto border border-white rounded-3xl">
            <h2 class="mb-14 max-w-xl mx-auto font-heading text-3xl font-bold text-center text-white">Subscribe to our newsletter and receive the latest news and exclusive insight every week. </h2>
            <div class="relative p-1.5 max-w-lg mx-auto bg-transparent border border-gray-500 rounded-2xl md:rounded-full focus-within:ring-4 focus:ring-blue-200 transition duration-200">
                <div class="relative">
                    <input id="newsletter-input-03-1" type="text" class="py-4 md:px-6 md:pl-6 md:pr-40 w-full text-white placeholder-gray-500 font-semibold text-center md:text-left bg-transparent outline-none" placeholder="Your email address">
                    <a href="#" class="md:absolute md:top-0 md:right-0 inline-flex justify-center items-center w-full md:w-14 h-14 md:h-full text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-2xl md:rounded-full transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 bg-gray-50">
    <div class="container mx-auto px-4">
        <h2 class="mb-16 font-heading text-4xl font-medium text-black text-center">They trusted us</h2>
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-wrap justify-center -m-8">
                <div class="w-auto p-8">
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-auto p-2">
                            <div class="flex justify-center items-center w-12 h-12 bg-white rounded-xl">
                                <img class="h-9" src="fily-assets/brands/spotify.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Spotify</span>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-auto p-2">
                            <div class="flex justify-center items-center w-12 h-12 bg-white rounded-xl">
                                <img style="height: 30px;" src="fily-assets/brands/slack2.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Slack</span>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-auto p-2">
                            <div class="flex justify-center items-center w-12 h-12 bg-white rounded-xl">
                                <img style="height: 32px;" src="fily-assets/brands/figma.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Figma</span>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-auto p-2">
                            <div class="flex justify-center items-center w-12 h-12 bg-white rounded-xl">
                                <img style="height: 32px;" src="fily-assets/brands/apple-dark.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Apple</span>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-auto p-2">
                            <div class="flex justify-center items-center w-12 h-12 bg-white rounded-xl">
                                <img style="height: 22px;" src="fily-assets/brands/mastercard.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Mastercard</span>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-auto p-2">
                            <div class="flex justify-center items-center w-12 h-12 bg-white rounded-xl">
                                <img style="height: 24px;" src="fily-assets/brands/microsoft.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Microsoft</span>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-auto p-2">
                            <div class="flex justify-center items-center w-12 h-12 bg-white rounded-xl">
                                <img style="height: 32px;" src="fily-assets/brands/opera.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Opera</span>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-auto p-2">
                            <div class="flex justify-center items-center w-12 h-12 bg-white rounded-xl">
                                <img style="height: 12px;" src="fily-assets/brands/visa.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Visa</span>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-8">
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-auto p-2">
                            <div class="flex justify-center items-center w-12 h-12 bg-white rounded-xl">
                                <img style="height: 20px;" src="fily-assets/brands/brand.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Wrike</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-40">
    <div class="container mx-auto px-4">
        <h3 class="mb-10 font-heading text-4xl md:text-5xl font-bold leading-tight max-w-5xl">About</h3>
        <p class="mb-24 text-3xl max-w-5xl font-light leading-tight">Discover the convenient route to turbocharge your productivity effortlessly, allowing you to accomplish tasks faster and more efficiently, all while maintaining precision and accuracy in your work.</p>
        <div class="mb-24 relative overflow-hidden rounded-3xl" style="height: 512px;">
            <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 rounded-3xl transition duration-200" src="fily-assets/about/pic2.jpg" alt="">
        </div>
        <div class="max-w-3xl mx-auto">
            <p class="mb-14 text-xl font-light">Our mission is to provide a seamless and comprehensive platform that transforms how you approach your daily tasks and goals. We are committed to helping you achieve success with efficiency and precision. Join us on this journey of productivity optimization, and experience the future of task and time management today."</p>
            <div class="flex">
                <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">Read more</a>
            </div>
        </div>
    </div>
</section>

<section class="pb-24 md:pb-36 bg-gray-50">
    <div class="px-4 md:px-16">
        <img class="w-full object-cover rounded-b-3xl" style="height: 780px;" src="fily-assets/how-it-works/pic4.jpg" alt="">
    </div>
    <div class="-mt-56">
        <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="py-16 px-12 bg-white rounded-3xl">
                        <h2 class="mb-10 font-heading text-5xl text-blue-500 font-bold">01</h2>
                        <h2 class="mb-6 font-heading text-3xl lg:text-4xl font-medium">Streamlined Efficiency</h2>
                        <p class="text-xl text-gray-500 font-light leading-normal">Experience a platform designed for maximum efficiency, ensuring a smooth and straightforward user journey from start to finish.</p>
                    </div>
                </div>
                <div class="w-full md:w-1/3 p-2.5">
                    <div class="relative md:top-12 py-16 px-12 bg-white rounded-3xl">
                        <h2 class="mb-10 font-heading text-5xl text-pink-500 font-bold">02</h2>
                        <h2 class="mb-6 font-heading text-3xl lg:text-4xl font-medium">Intuitive Navigation</h2>
                        <p class="text-xl text-gray-500 font-light leading-normal">Navigate effortlessly through our user-friendly interface, allowing you to easily access and manage all features with just a few clicks.</p>
                    </div>
                </div>
                <div class="w-full md:w-1/3 p-2.5">
                    <div class="py-16 px-12 bg-white rounded-3xl">
                        <h2 class="mb-10 font-heading text-5xl text-orange-500 font-bold">03</h2>
                        <h2 class="mb-6 font-heading text-3xl lg:text-4xl font-medium">Seamless Integration</h2>
                        <p class="text-xl text-gray-500 font-light leading-normal">Enjoy the convenience of seamless integration with other tools, providing a cohesive and comprehensive solution for your workflow needs.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="relative pt-24 pb-28 bg-black">
    <img class="absolute top-0 left-0 w-full h-full select-none" src="fily-assets/gradients/gradient-brands.png" alt="">
    <div class="relative container mx-auto px-4">
        <h2 class="mb-16 font-heading text-4xl font-medium text-white text-center">They trusted us</h2>
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-wrap justify-center -m-4">
                <div class="w-auto p-4">
                    <div class="p-2 pr-6 bg-white bg-opacity-5 rounded-xl">
                        <div class="flex flex-wrap items-center -m-3">
                            <div class="w-auto p-3">
                                <div class="flex justify-center items-center w-12 h-12 bg-white bg-opacity-10 rounded-xl">
                                    <img class="h-9" src="fily-assets/brands/spotify.svg" alt="">
                                </div>
                            </div>
                            <div class="w-auto p-3">
                                <span class="text-lg font-medium text-white">Spotify</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-4">
                    <div class="p-2 pr-6 bg-white bg-opacity-5 rounded-xl">
                        <div class="flex flex-wrap items-center -m-3">
                            <div class="w-auto p-3">
                                <div class="flex justify-center items-center w-12 h-12 bg-white bg-opacity-10 rounded-xl">
                                    <img style="height: 30px;" src="fily-assets/brands/slack2.svg" alt="">
                                </div>
                            </div>
                            <div class="w-auto p-3">
                                <span class="text-lg font-medium text-white">Slack</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-4">
                    <div class="p-2 pr-6 bg-white bg-opacity-5 rounded-xl">
                        <div class="flex flex-wrap items-center -m-3">
                            <div class="w-auto p-3">
                                <div class="flex justify-center items-center w-12 h-12 bg-white bg-opacity-10 rounded-xl">
                                    <img style="height: 32px;" src="fily-assets/brands/figma.svg" alt="">
                                </div>
                            </div>
                            <div class="w-auto p-3">
                                <span class="text-lg font-medium text-white">Figma</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-4">
                    <div class="p-2 pr-6 bg-white bg-opacity-5 rounded-xl">
                        <div class="flex flex-wrap items-center -m-3">
                            <div class="w-auto p-3">
                                <div class="flex justify-center items-center w-12 h-12 bg-white bg-opacity-10 rounded-xl">
                                    <img style="height: 28px;" src="fily-assets/brands/apple.svg" alt="">
                                </div>
                            </div>
                            <div class="w-auto p-3">
                                <span class="text-lg font-medium text-white">Apple</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-4">
                    <div class="p-2 pr-6 bg-white bg-opacity-5 rounded-xl">
                        <div class="flex flex-wrap items-center -m-3">
                            <div class="w-auto p-3">
                                <div class="flex justify-center items-center w-12 h-12 bg-white bg-opacity-10 rounded-xl">
                                    <img style="height: 22px;" src="fily-assets/brands/mastercard.svg" alt="">
                                </div>
                            </div>
                            <div class="w-auto p-3">
                                <span class="text-lg font-medium text-white">Mastercard</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-4">
                    <div class="p-2 pr-6 bg-white bg-opacity-5 rounded-xl">
                        <div class="flex flex-wrap items-center -m-3">
                            <div class="w-auto p-3">
                                <div class="flex justify-center items-center w-12 h-12 bg-white bg-opacity-10 rounded-xl">
                                    <img style="height: 24px;" src="fily-assets/brands/microsoft.svg" alt="">
                                </div>
                            </div>
                            <div class="w-auto p-3">
                                <span class="text-lg font-medium text-white">Microsoft</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-4">
                    <div class="p-2 pr-6 bg-white bg-opacity-5 rounded-xl">
                        <div class="flex flex-wrap items-center -m-3">
                            <div class="w-auto p-3">
                                <div class="flex justify-center items-center w-12 h-12 bg-white bg-opacity-10 rounded-xl">
                                    <img style="height: 32px;" src="fily-assets/brands/opera.svg" alt="">
                                </div>
                            </div>
                            <div class="w-auto p-3">
                                <span class="text-lg font-medium text-white">Opera</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-4">
                    <div class="p-2 pr-6 bg-white bg-opacity-5 rounded-xl">
                        <div class="flex flex-wrap items-center -m-3">
                            <div class="w-auto p-3">
                                <div class="flex justify-center items-center w-12 h-12 bg-white bg-opacity-10 rounded-xl">
                                    <img style="height: 12px;" src="fily-assets/brands/visa.svg" alt="">
                                </div>
                            </div>
                            <div class="w-auto p-3">
                                <span class="text-lg font-medium text-white">Visa</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-auto p-4">
                    <div class="p-2 pr-6 bg-white bg-opacity-5 rounded-xl">
                        <div class="flex flex-wrap items-center -m-3">
                            <div class="w-auto p-3">
                                <div class="flex justify-center items-center w-12 h-12 bg-white bg-opacity-10 rounded-xl">
                                    <img style="height: 20px;" src="fily-assets/brands/brand.svg" alt="">
                                </div>
                            </div>
                            <div class="w-auto p-3">
                                <span class="text-lg font-medium text-white">Wrike</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pt-24 pb-36 bg-black">
    <div class="container mx-auto px-4">
        <h3 class="mb-20 font-heading text-4xl font-medium text-center text-white">Already don't have an account?</h3>
        <div class="flex flex-wrap -m-2.5">
            <div class="w-full md:w-1/2 p-2.5">
                <div class="pt-20 pb-16 px-10 md:px-16 h-full bg-white bg-opacity-5 rounded-3xl">
                    <h3 class="mb-6 font-heading text-3xl font-medium text-white">Sign up</h3>
                    <form action="#" class="max-w-lg mx-auto">
                        <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 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>
                        <div class="flex flex-wrap -m-3 mb-7">
                            <div class="w-full p-3">
                                <label for="signup-input-04-1" class="mb-2 inline-block text-sm text-white font-medium">Email</label>
                                <input id="signup-input-04-1" type="text" placeholder="Enter your email" class="w-full px-6 h-14 bg-transparent font-semibold text-white placeholder-gray-500 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-04-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-04-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-gray-500 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="18" height="18" viewBox="0 0 18 18" fill="none">
                                                <g clip-path="url(#clip0_474_138)">
                                                    <path d="M17.4527 7.06421C16.2894 5.16971 13.6434 1.99121 8.99943 1.99121C4.35543 1.99121 1.70943 5.16971 0.546178 7.06421C0.186574 7.64584 -0.00390625 8.31614 -0.00390625 8.99996C-0.00390625 9.68378 0.186574 10.3541 0.546178 10.9357C1.70943 12.8302 4.35543 16.0087 8.99943 16.0087C13.6434 16.0087 16.2894 12.8302 17.4527 10.9357C17.8123 10.3541 18.0028 9.68378 18.0028 8.99996C18.0028 8.31614 17.8123 7.64584 17.4527 7.06421ZM16.1739 10.1505C15.1749 11.775 12.9137 14.5087 8.99943 14.5087C5.08518 14.5087 2.82393 11.775 1.82493 10.1505C1.61128 9.80475 1.49812 9.40637 1.49812 8.99996C1.49812 8.59356 1.61128 8.19518 1.82493 7.84946C2.82393 6.22496 5.08518 3.49121 8.99943 3.49121C12.9137 3.49121 15.1749 6.22196 16.1739 7.84946C16.3876 8.19518 16.5007 8.59356 16.5007 8.99996C16.5007 9.40637 16.3876 9.80475 16.1739 10.1505Z" fill="#696D81"></path>
                                                    <path d="M9 5.25C8.25832 5.25 7.5333 5.46993 6.91661 5.88199C6.29993 6.29404 5.81928 6.87971 5.53545 7.56494C5.25162 8.25016 5.17736 9.00416 5.32206 9.73159C5.46675 10.459 5.8239 11.1272 6.34835 11.6517C6.8728 12.1761 7.54098 12.5333 8.26841 12.6779C8.99584 12.8226 9.74984 12.7484 10.4351 12.4645C11.1203 12.1807 11.706 11.7001 12.118 11.0834C12.5301 10.4667 12.75 9.74168 12.75 9C12.7488 8.0058 12.3533 7.05267 11.6503 6.34966C10.9473 5.64666 9.9942 5.25119 9 5.25ZM9 11.25C8.55499 11.25 8.11998 11.118 7.74997 10.8708C7.37996 10.6236 7.09157 10.2722 6.92127 9.86104C6.75098 9.4499 6.70642 8.9975 6.79323 8.56105C6.88005 8.12459 7.09434 7.72368 7.40901 7.40901C7.72368 7.09434 8.12459 6.88005 8.56105 6.79323C8.99751 6.70642 9.44991 6.75097 9.86104 6.92127C10.2722 7.09157 10.6236 7.37996 10.8708 7.74997C11.118 8.11998 11.25 8.55499 11.25 9C11.25 9.59674 11.0129 10.169 10.591 10.591C10.169 11.0129 9.59674 11.25 9 11.25Z" fill="#696D81"></path>
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_474_138">
                                                        <rect width="18" height="18" fill="white"></rect>
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="inline-flex justify-center items-center text-center w-full mb-10 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">Create account</button>
                        <span class="font-medium text-center text-gray-500">Already have an account? <a href="#" class="font-semibold text-white hover:text-gray-100">Log in</a></span>
                    </form> 
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="relative h-full overflow-hidden rounded-3xl" style="height: 800px;">
                    <img class="w-full h-full object-cover transform hover:scale-105 transition duration-200" src="fily-assets/sign-up/pic2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-black 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 text-white">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 bg-opacity-5 rounded-3xl">
                    <div class="mb-12 p-2.5 pr-5 max-w-max 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 text-white">Aleeza Keller</h3>
                                <span class="text-sm text-blue-500 font-medium">CEO, Founder</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-xl font-light text-gray-500 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 bg-opacity-5 rounded-3xl">
                    <div class="mb-12 p-2.5 pr-5 max-w-max 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 text-white">Stephen Leblanc</h3>
                                <span class="text-sm text-blue-500 font-medium">CEO, Founder</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-xl text-gray-500 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 bg-opacity-5 rounded-3xl">
                    <div class="mb-12 p-2.5 pr-5 max-w-max 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/pic.jpg" alt="">
                            </div>
                            <div class="flex-1 p-2.5">
                                <h3 class="font-heading text-2xl font-bold text-white">Natasha Adams</h3>
                                <span class="text-sm text-blue-500 font-medium">CEO, Founder</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-xl text-gray-500 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 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 + 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 bg-opacity-10 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-36 xl:pb-48 bg-black">
    <div class="container mx-auto px-4">
        <div class="max-w-5xl mx-auto">
            <h2 class="mb-20 font-heading text-4xl md:text-5xl font-bold text-white text-center">FAQ</h2>
            <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" :class="{'bg-gradient-white': !accordion}" class="mb-6 h-full p-px cursor-pointer 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="block relative z-10 py-10 px-12 rounded-3xl">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 class="font-heading text-3xl font-bold text-white">How can I get started with FilyTreck?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-12 h-12 text-white bg-blue-500 rounded-full">
                                    <svg :class="{'hidden': !accordion }" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M14.25 6.75H9.25V1.75C9.25 1.41848 9.1183 1.10054 8.88388 0.866117C8.64946 0.631696 8.33152 0.5 8 0.5C7.66848 0.5 7.35054 0.631696 7.11612 0.866117C6.8817 1.10054 6.75 1.41848 6.75 1.75V6.75H1.75C1.41848 6.75 1.10054 6.8817 0.866117 7.11612C0.631696 7.35054 0.5 7.66848 0.5 8C0.5 8.33152 0.631696 8.64946 0.866117 8.88388C1.10054 9.1183 1.41848 9.25 1.75 9.25H6.75V14.25C6.75 14.5815 6.8817 14.8995 7.11612 15.1339C7.35054 15.3683 7.66848 15.5 8 15.5C8.33152 15.5 8.64946 15.3683 8.88388 15.1339C9.1183 14.8995 9.25 14.5815 9.25 14.25V9.25H14.25C14.5815 9.25 14.8995 9.1183 15.1339 8.88388C15.3683 8.64946 15.5 8.33152 15.5 8C15.5 7.66848 15.3683 7.35054 15.1339 7.11612C14.8995 6.8817 14.5815 6.75 14.25 6.75Z" fill="white"></path>
                                    </svg>
                                    <svg :class="{'hidden': accordion }" class="hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="4" viewBox="0 0 16 4" fill="none">
                                        <path d="M14.25 0.75H1.75C1.05964 0.75 0.5 1.30964 0.5 2C0.5 2.69036 1.05964 3.25 1.75 3.25H14.25C14.9404 3.25 15.5 2.69036 15.5 2C15.5 1.30964 14.9404 0.75 14.25 0.75Z" fill="white"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-7 text-lg font-medium text-gray-500 leading-normal">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" :class="{'bg-gradient-white': !accordion}" class="mb-6 h-full p-px cursor-pointer 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="block relative z-10 py-10 px-12 rounded-3xl">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 class="font-heading text-3xl font-bold text-white">Is there a free trial available for new users?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-12 h-12 text-white bg-blue-500 rounded-full">
                                    <svg :class="{'hidden': !accordion }" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M14.25 6.75H9.25V1.75C9.25 1.41848 9.1183 1.10054 8.88388 0.866117C8.64946 0.631696 8.33152 0.5 8 0.5C7.66848 0.5 7.35054 0.631696 7.11612 0.866117C6.8817 1.10054 6.75 1.41848 6.75 1.75V6.75H1.75C1.41848 6.75 1.10054 6.8817 0.866117 7.11612C0.631696 7.35054 0.5 7.66848 0.5 8C0.5 8.33152 0.631696 8.64946 0.866117 8.88388C1.10054 9.1183 1.41848 9.25 1.75 9.25H6.75V14.25C6.75 14.5815 6.8817 14.8995 7.11612 15.1339C7.35054 15.3683 7.66848 15.5 8 15.5C8.33152 15.5 8.64946 15.3683 8.88388 15.1339C9.1183 14.8995 9.25 14.5815 9.25 14.25V9.25H14.25C14.5815 9.25 14.8995 9.1183 15.1339 8.88388C15.3683 8.64946 15.5 8.33152 15.5 8C15.5 7.66848 15.3683 7.35054 15.1339 7.11612C14.8995 6.8817 14.5815 6.75 14.25 6.75Z" fill="white"></path>
                                    </svg>
                                    <svg :class="{'hidden': accordion }" class="hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="4" viewBox="0 0 16 4" fill="none">
                                        <path d="M14.25 0.75H1.75C1.05964 0.75 0.5 1.30964 0.5 2C0.5 2.69036 1.05964 3.25 1.75 3.25H14.25C14.9404 3.25 15.5 2.69036 15.5 2C15.5 1.30964 14.9404 0.75 14.25 0.75Z" fill="white"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-7 text-lg font-medium text-gray-500 leading-normal">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" :class="{'bg-gradient-white': !accordion}" class="mb-6 h-full p-px cursor-pointer 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="block relative z-10 py-10 px-12 rounded-3xl">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 class="font-heading text-3xl font-bold text-white">Can I use FilyTreck on different devices?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-12 h-12 text-white bg-blue-500 rounded-full">
                                    <svg :class="{'hidden': !accordion }" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M14.25 6.75H9.25V1.75C9.25 1.41848 9.1183 1.10054 8.88388 0.866117C8.64946 0.631696 8.33152 0.5 8 0.5C7.66848 0.5 7.35054 0.631696 7.11612 0.866117C6.8817 1.10054 6.75 1.41848 6.75 1.75V6.75H1.75C1.41848 6.75 1.10054 6.8817 0.866117 7.11612C0.631696 7.35054 0.5 7.66848 0.5 8C0.5 8.33152 0.631696 8.64946 0.866117 8.88388C1.10054 9.1183 1.41848 9.25 1.75 9.25H6.75V14.25C6.75 14.5815 6.8817 14.8995 7.11612 15.1339C7.35054 15.3683 7.66848 15.5 8 15.5C8.33152 15.5 8.64946 15.3683 8.88388 15.1339C9.1183 14.8995 9.25 14.5815 9.25 14.25V9.25H14.25C14.5815 9.25 14.8995 9.1183 15.1339 8.88388C15.3683 8.64946 15.5 8.33152 15.5 8C15.5 7.66848 15.3683 7.35054 15.1339 7.11612C14.8995 6.8817 14.5815 6.75 14.25 6.75Z" fill="white"></path>
                                    </svg>
                                    <svg :class="{'hidden': accordion }" class="hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="4" viewBox="0 0 16 4" fill="none">
                                        <path d="M14.25 0.75H1.75C1.05964 0.75 0.5 1.30964 0.5 2C0.5 2.69036 1.05964 3.25 1.75 3.25H14.25C14.9404 3.25 15.5 2.69036 15.5 2C15.5 1.30964 14.9404 0.75 14.25 0.75Z" fill="white"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-7 text-lg font-medium text-gray-500 leading-normal">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" :class="{'bg-gradient-white': !accordion}" class="mb-6 h-full p-px cursor-pointer 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="block relative z-10 py-10 px-12 rounded-3xl">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 class="font-heading text-3xl font-bold text-white">How can I import or export my tasks and data?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-12 h-12 text-white bg-blue-500 rounded-full">
                                    <svg :class="{'hidden': !accordion }" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M14.25 6.75H9.25V1.75C9.25 1.41848 9.1183 1.10054 8.88388 0.866117C8.64946 0.631696 8.33152 0.5 8 0.5C7.66848 0.5 7.35054 0.631696 7.11612 0.866117C6.8817 1.10054 6.75 1.41848 6.75 1.75V6.75H1.75C1.41848 6.75 1.10054 6.8817 0.866117 7.11612C0.631696 7.35054 0.5 7.66848 0.5 8C0.5 8.33152 0.631696 8.64946 0.866117 8.88388C1.10054 9.1183 1.41848 9.25 1.75 9.25H6.75V14.25C6.75 14.5815 6.8817 14.8995 7.11612 15.1339C7.35054 15.3683 7.66848 15.5 8 15.5C8.33152 15.5 8.64946 15.3683 8.88388 15.1339C9.1183 14.8995 9.25 14.5815 9.25 14.25V9.25H14.25C14.5815 9.25 14.8995 9.1183 15.1339 8.88388C15.3683 8.64946 15.5 8.33152 15.5 8C15.5 7.66848 15.3683 7.35054 15.1339 7.11612C14.8995 6.8817 14.5815 6.75 14.25 6.75Z" fill="white"></path>
                                    </svg>
                                    <svg :class="{'hidden': accordion }" class="hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="4" viewBox="0 0 16 4" fill="none">
                                        <path d="M14.25 0.75H1.75C1.05964 0.75 0.5 1.30964 0.5 2C0.5 2.69036 1.05964 3.25 1.75 3.25H14.25C14.9404 3.25 15.5 2.69036 15.5 2C15.5 1.30964 14.9404 0.75 14.25 0.75Z" fill="white"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-7 text-lg font-medium text-gray-500 leading-normal">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" :class="{'bg-gradient-white': !accordion}" class="mb-6 h-full p-px cursor-pointer 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="block relative z-10 py-10 px-12 rounded-3xl">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 class="font-heading text-3xl font-bold text-white">What types of support and assistance do you provide for users?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-12 h-12 text-white bg-blue-500 rounded-full">
                                    <svg :class="{'hidden': !accordion }" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M14.25 6.75H9.25V1.75C9.25 1.41848 9.1183 1.10054 8.88388 0.866117C8.64946 0.631696 8.33152 0.5 8 0.5C7.66848 0.5 7.35054 0.631696 7.11612 0.866117C6.8817 1.10054 6.75 1.41848 6.75 1.75V6.75H1.75C1.41848 6.75 1.10054 6.8817 0.866117 7.11612C0.631696 7.35054 0.5 7.66848 0.5 8C0.5 8.33152 0.631696 8.64946 0.866117 8.88388C1.10054 9.1183 1.41848 9.25 1.75 9.25H6.75V14.25C6.75 14.5815 6.8817 14.8995 7.11612 15.1339C7.35054 15.3683 7.66848 15.5 8 15.5C8.33152 15.5 8.64946 15.3683 8.88388 15.1339C9.1183 14.8995 9.25 14.5815 9.25 14.25V9.25H14.25C14.5815 9.25 14.8995 9.1183 15.1339 8.88388C15.3683 8.64946 15.5 8.33152 15.5 8C15.5 7.66848 15.3683 7.35054 15.1339 7.11612C14.8995 6.8817 14.5815 6.75 14.25 6.75Z" fill="white"></path>
                                    </svg>
                                    <svg :class="{'hidden': accordion }" class="hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="4" viewBox="0 0 16 4" fill="none">
                                        <path d="M14.25 0.75H1.75C1.05964 0.75 0.5 1.30964 0.5 2C0.5 2.69036 1.05964 3.25 1.75 3.25H14.25C14.9404 3.25 15.5 2.69036 15.5 2C15.5 1.30964 14.9404 0.75 14.25 0.75Z" fill="white"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-7 text-lg font-medium text-gray-500 leading-normal">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" :class="{'bg-gradient-white': !accordion}" class="h-full p-px cursor-pointer 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="block relative z-10 py-10 px-12 rounded-3xl">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 class="font-heading text-3xl font-bold text-white">Are my data and information secure in FilyTreck?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <div class="flex items-center justify-center w-12 h-12 text-white bg-blue-500 rounded-full">
                                    <svg :class="{'hidden': !accordion }" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M14.25 6.75H9.25V1.75C9.25 1.41848 9.1183 1.10054 8.88388 0.866117C8.64946 0.631696 8.33152 0.5 8 0.5C7.66848 0.5 7.35054 0.631696 7.11612 0.866117C6.8817 1.10054 6.75 1.41848 6.75 1.75V6.75H1.75C1.41848 6.75 1.10054 6.8817 0.866117 7.11612C0.631696 7.35054 0.5 7.66848 0.5 8C0.5 8.33152 0.631696 8.64946 0.866117 8.88388C1.10054 9.1183 1.41848 9.25 1.75 9.25H6.75V14.25C6.75 14.5815 6.8817 14.8995 7.11612 15.1339C7.35054 15.3683 7.66848 15.5 8 15.5C8.33152 15.5 8.64946 15.3683 8.88388 15.1339C9.1183 14.8995 9.25 14.5815 9.25 14.25V9.25H14.25C14.5815 9.25 14.8995 9.1183 15.1339 8.88388C15.3683 8.64946 15.5 8.33152 15.5 8C15.5 7.66848 15.3683 7.35054 15.1339 7.11612C14.8995 6.8817 14.5815 6.75 14.25 6.75Z" fill="white"></path>
                                    </svg>
                                    <svg :class="{'hidden': accordion }" class="hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="4" viewBox="0 0 16 4" fill="none">
                                        <path d="M14.25 0.75H1.75C1.05964 0.75 0.5 1.30964 0.5 2C0.5 2.69036 1.05964 3.25 1.75 3.25H14.25C14.9404 3.25 15.5 2.69036 15.5 2C15.5 1.30964 14.9404 0.75 14.25 0.75Z" fill="white"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-7 text-lg font-medium text-gray-500 leading-normal">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-white" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-28 font-heading text-4xl md:text-5xl font-bold text-center">Join us and let's create together</h2>
        <div class="flex flex-wrap divide-x divide-gray-100 -m-8 lg:-m-16">
            <div class="w-full md:w-1/2 p-8 lg:p-16">
                <div class="flex flex-wrap items-center -m-3 mb-7">
                    <div class="w-auto p-3">
                        <img class="object-cover rounded-3xl transform hover:scale-105 transition duration-200" style="width: 120px; height: 120px;" src="fily-assets/careers/pic.jpg" alt="">
                    </div>  
                    <div class="flex-1 p-3">
                        <h3 class="font-heading text-2xl font-bold">Natasha Adams</h3>
                        <p class="text-sm text-blue-500 font-medium">Contact person</p>
                    </div>
                </div>
                <h3 class="mb-3 font-heading text-xl font-light">Can I help you?</h3>
                <p class="mb-10 text-gray-500 font-medium">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia mauris, at mattis nisl.</p>
                <p class="inline-flex px-6 py-2.5 font-semibold border border-gray-100 rounded-full">Ask a question</p>
            </div>
            <div class="w-full md:w-1/2 p-8 lg:p-16">
                <div class="mb-10 pb-10 border-b border-gray-100">
                    <div class="flex flex-wrap items-center -m-4">
                        <div class="w-full md:w-3/4 p-4">
                            <h3 class="mb-3 font-heading text-2xl font-bold">Product Designer</h3>
                            <p class="mb-6 text-gray-500 font-medium">We’re looking for a mid-level product designer to join our team.</p>
                            <div class="flex flex-wrap -m-2">
                                <div class="w-auto p-2">
                                    <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 border border-gray-100 rounded-full transition duration-200">
                                        <img class="h-4" src="fily-assets/careers/marker.svg" alt="">
                                        <span class="text-sm font-medium">100% remote</span>
                                    </a>
                                </div>
                                <div class="w-auto p-2">
                                    <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 border border-gray-100 rounded-full transition duration-200">
                                        <img class="h-4" src="fily-assets/careers/clock.svg" alt="">
                                        <span class="text-sm font-medium">Full-time</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/4 p-4">
                            <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="mb-10 pb-10 border-b border-gray-100">
                    <div class="flex flex-wrap items-center -m-4">
                        <div class="w-full md:w-3/4 p-4">
                            <h3 class="mb-3 font-heading text-2xl font-bold">Customer Success Manager</h3>
                            <p class="mb-6 text-gray-500 font-medium">We’re looking for a customer manager to join our team.</p>
                            <div class="flex flex-wrap -m-2">
                                <div class="w-auto p-2">
                                    <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 border border-gray-100 rounded-full transition duration-200">
                                        <img class="h-4" src="fily-assets/careers/marker.svg" alt="">
                                        <span class="text-sm font-medium">100% remote</span>
                                    </a>
                                </div>
                                <div class="w-auto p-2">
                                    <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 border border-gray-100 rounded-full transition duration-200">
                                        <img class="h-4" src="fily-assets/careers/clock.svg" alt="">
                                        <span class="text-sm font-medium">Full-time</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/4 p-4">
                            <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="mb-16 pb-10 border-b border-gray-100">
                    <div class="flex flex-wrap items-center -m-4">
                        <div class="w-full md:w-3/4 p-4">
                            <h3 class="mb-3 font-heading text-2xl font-bold">Engineering Manager</h3>
                            <p class="mb-6 text-gray-500 font-medium">We’re looking for an experienced engineering manager to join our team.</p>
                            <div class="flex flex-wrap -m-2">
                                <div class="w-auto p-2">
                                    <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 border border-gray-100 rounded-full transition duration-200">
                                        <img class="h-4" src="fily-assets/careers/marker.svg" alt="">
                                        <span class="text-sm font-medium">100% remote</span>
                                    </a>
                                </div>
                                <div class="w-auto p-2">
                                    <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 border border-gray-100 rounded-full transition duration-200">
                                        <img class="h-4" src="fily-assets/careers/clock.svg" alt="">
                                        <span class="text-sm font-medium">Full-time</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/4 p-4">
                            <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <div :class="{'hidden': !showContent}" class="hidden mb-16 pb-10 border-b border-gray-100">
                    <div class="flex flex-wrap items-center -m-4">
                        <div class="w-full md:w-3/4 p-4">
                            <h3 class="mb-3 font-heading text-2xl font-bold">UX Designer</h3>
                            <p class="mb-6 text-gray-500 font-medium">We’re looking for an experienced UX designer to join our team.</p>
                            <div class="flex flex-wrap -m-2">
                                <div class="w-auto p-2">
                                    <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 border border-gray-100 rounded-full transition duration-200">
                                        <img class="h-4" src="fily-assets/careers/marker.svg" alt="">
                                        <span class="text-sm font-medium">100% remote</span>
                                    </a>
                                </div>
                                <div class="w-auto p-2">
                                    <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 border border-gray-100 rounded-full transition duration-200">
                                        <img class="h-4" src="fily-assets/careers/clock.svg" alt="">
                                        <span class="text-sm font-medium">Full-time</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/4 p-4">
                            <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <a x-on:click.prevent="showContent = true" href="#" :class="{'hidden': showContent}" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Show more</a>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-40">
    <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="text-xl text-gray-500 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>
        <div class="mb-24 w-full overflow-x-auto">
            <table class="w-full min-w-max">
                <thead>
                    <tr class="text-left">
                        <th class="p-0 border-b border-gray-100">
                            <div class="pb-6"></div>
                        </th>
                        <th class="p-0 border-b border-gray-100">
                            <div class="pb-6 px-4 text-center">
                                <span class="text-xl font-bold">Starter</span>
                            </div>
                        </th>
                        <th class="p-0 border-b border-gray-100">
                            <div class="pb-6 px-4 text-center">
                                <span class="text-xl font-bold">Enterprise</span>
                            </div>
                        </th>
                        <th class="p-0 border-b border-gray-100">
                            <div class="pb-6 px-4 text-center">
                                <span class="text-xl font-bold">Business</span>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <span class="text-lg text-gray-500 font-medium">Unlimited Clients</span>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                    </tr>
                    <tr>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <span class="text-lg text-gray-500 font-medium">Unlimited Tasks</span>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                    </tr>
                    <tr>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <span class="text-lg text-gray-500 font-medium">Project Templates</span>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                    </tr>
                    <tr>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <span class="text-lg text-gray-500 font-medium">Unlimited Estimates &amp; Expenses</span>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100"></td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                    </tr>
                    <tr>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <span class="text-lg text-gray-500 font-medium">In-App Tech Support</span>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100"></td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                    </tr>
                    <tr>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <span class="text-lg text-gray-500 font-medium">25GB Storage</span>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100"></td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                    </tr>
                    <tr>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <span class="text-lg text-gray-500 font-medium">Free Onboarding &amp; Training</span>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100"></td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                    </tr>
                    <tr>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <span class="text-lg text-gray-500 font-medium">Employee Leave Management</span>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100"></td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                    </tr>
                    <tr>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <span class="text-lg text-gray-500 font-medium">Gantt Charts</span>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100"></td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                        <td class="py-6 px-10 border-b border-gray-100">
                            <div class="flex items-center justify-center w-7 h-7 mx-auto 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>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <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">Go to pricing</a>
        </div>
    </div>
</section>

<section class="py-24 md:py-40 bg-gray-50">
    <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 leading-tight">Meet our team</h3>
            <p class="text-xl font-medium text-center leading-relaxed">Our diverse team of experts brings a wealth of experience in task management, time optimization, and goal achievement to deliver the best solutions to you.</p>
        </div>
        <div class="flex flex-wrap -m-8">
            <div class="w-full sm:w-1/2 lg:w-1/4 p-8">
                <img class="mb-6 object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic.jpg" alt="">
                <h3 class="font-heading text-2xl font-bold">Deacon Galvan</h3>
                <p class="mb-6 text-sm text-gray-500 font-medium">Owner, Director</p>
                <a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-600">
                    <span class="mr-2 font-semibold">Read bio</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 class="w-full sm:w-1/2 lg:w-1/4 p-8">
                <img class="mb-6 object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic2.jpg" alt="">
                <h3 class="font-heading text-2xl font-bold">Natasha Adams</h3>
                <p class="mb-6 text-sm text-gray-500 font-medium">CEO, Founder</p>
                <a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-600">
                    <span class="mr-2 font-semibold">Read bio</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 class="w-full sm:w-1/2 lg:w-1/4 p-8">
                <img class="mb-6 object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic3.jpg" alt="">
                <h3 class="font-heading text-2xl font-bold">Jenna Hines</h3>
                <p class="mb-6 text-sm text-gray-500 font-medium">Owner, Director</p>
                <a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-600">
                    <span class="mr-2 font-semibold">Read bio</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 class="w-full sm:w-1/2 lg:w-1/4 p-8">
                <img class="mb-6 object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic4.jpg" alt="">
                <h3 class="font-heading text-2xl font-bold">John Barton</h3>
                <p class="mb-6 text-sm text-gray-500 font-medium">Owner, Director</p>
                <a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-600">
                    <span class="mr-2 font-semibold">Read bio</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 class="w-full sm:w-1/2 lg:w-1/4 p-8">
                <img class="mb-6 object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic5.jpg" alt="">
                <h3 class="font-heading text-2xl font-bold">John Barton</h3>
                <p class="mb-6 text-sm text-gray-500 font-medium">Owner, Director</p>
                <a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-600">
                    <span class="mr-2 font-semibold">Read bio</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 class="w-full sm:w-1/2 lg:w-1/4 p-8">
                <img class="mb-6 object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic6.jpg" alt="">
                <h3 class="font-heading text-2xl font-bold">Natasha Adams</h3>
                <p class="mb-6 text-sm text-gray-500 font-medium">CEO, Founder</p>
                <a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-600">
                    <span class="mr-2 font-semibold">Read bio</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 class="w-full sm:w-1/2 lg:w-1/4 p-8">
                <img class="mb-6 object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic7.jpg" alt="">
                <h3 class="font-heading text-2xl font-bold">John Barton</h3>
                <p class="mb-6 text-sm text-gray-500 font-medium">Owner, Director</p>
                <a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-600">
                    <span class="mr-2 font-semibold">Read bio</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 class="w-full sm:w-1/2 lg:w-1/4 p-8">
                <img class="mb-6 object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic8.jpg" alt="">
                <h3 class="font-heading text-2xl font-bold">Edward Estes</h3>
                <p class="mb-6 text-sm text-gray-500 font-medium">Owner, Director</p>
                <a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-600">
                    <span class="mr-2 font-semibold">Read bio</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>
</section>

<section class="py-24 md:py-40 bg-gray-50 overflow-hidden" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-24 font-heading text-4xl md:text-5xl font-bold">Recent happenings and updates</h2>
        <div class="flex flex-nowrap -m-9">
            <div class="flex-shrink-0 max-w-2xl w-full p-9">
                <div class="relative h-full py-10 px-12 bg-white rounded-3xl">
                    <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-sm font-medium text-gray-500">21 October 2023</span>
                    </div>
                    <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">2023 Remote Work: 
                        A Comprehensive Guide</h3>
                    <p class="text-gray-500 font-medium leading-relaxed">I've championed remote work for well over six years, possibly even longer before the global pandemic compelled professionals to transition from office to home setups.</p>
                    <a href="#" class="absolute -right-5 top-1/2 transform -translate-y-1/2 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 class="flex-shrink-0 max-w-2xl w-full p-9">
                <div class="relative h-full py-10 px-12 bg-white rounded-3xl">
                    <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-sm font-medium text-gray-500">14 October 2023</span>
                    </div>
                    <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Mastering the Art of Project Management Success</h3>
                    <p class="text-gray-500 font-medium leading-relaxed">Picture yourself at the helm, steering a team to a triumphant product launch - on time, within budget, and delighting clients. Project management is the conduit from vision to achievement.</p>
                    <a href="#" class="absolute -right-5 top-1/2 transform -translate-y-1/2 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 class="flex-shrink-0 max-w-2xl w-full p-9">
                <div class="relative h-full py-10 px-12 bg-white rounded-3xl">
                    <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-sm font-medium text-gray-500">13 October 2023</span>
                    </div>
                    <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Mastering the Art of Project Management Success</h3>
                    <p class="text-gray-500 font-medium leading-relaxed">I've championed remote work for well over six years, possibly even longer before the global pandemic compelled professionals to transition from office to home setups.</p>
                    <a href="#" class="absolute -right-5 top-1/2 transform -translate-y-1/2 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 :class="{'hidden': !showContent}" class="hidden flex-shrink-0 max-w-2xl w-full p-9">
                <div class="relative h-full py-10 px-12 bg-white rounded-3xl">
                    <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-sm font-medium text-gray-500">11 Jan 2024</span>
                    </div>
                    <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Project Management Pro: Tips for Success</h3>
                    <p class="text-gray-500 font-medium leading-relaxed">I've championed remote work for well over six years, possibly even longer before the global pandemic compelled professionals to transition from office to home setups.</p>
                    <a href="#" class="absolute -right-5 top-1/2 transform -translate-y-1/2 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>
        <a x-on:click.prevent="showContent = true" href="#" :class="{'hidden': showContent }" class="inline-flex justify-center items-center text-center h-18 mt-14 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>
</section>

<section class="py-24 md:py-36 bg-black">
    <div class="container mx-auto px-4">
        <div class="mb-24 max-w-2xl mx-auto text-center">
            <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center text-white">Stay in touch</h2>
            <p class="text-lg text-white font-medium">Duis pellentesque urna a erat sollicitudin, et molestie leo semper aliquam ligula.</p>
        </div>
        <div class="p-8 py-24 rounded-3xl" style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
            <h2 class="mb-14 font-heading text-3xl md:text-4xl font-medium text-center text-white">Subscribe to our newsletter</h2>
            <div class="relative p-1.5 max-w-lg mx-auto bg-transparent border border-white rounded-2xl md:rounded-full focus-within:ring-4 focus:ring-blue-200 transition duration-200">
                <div class="relative">
                    <input id="newsletter-input-04-1" type="text" class="py-4 md:px-6 md:pl-6 md:pr-40 w-full text-white placeholder-white font-semibold text-center md:text-left bg-transparent outline-none" placeholder="Your email address">
                    <a href="#" class="md:absolute md:top-0 md:right-0 inline-flex justify-center items-center w-full md:w-14 h-14 md:h-full text-white hover:text-white focus:text-white bg-pink-500 hover:bg-pink-600 focus:bg-pink-600 rounded-2xl md:rounded-full transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap">
            <div class="w-full md:w-5/12">
                <div class="h-full overflow-hidden rounded-3xl">
                    <img class="w-full h-full object-cover transform hover:scale-105 transition duration-500" src="fily-assets/download/pic2.jpg" alt="">
                </div>
            </div>
            <div class="w-full md:w-7/12">
                <div class="p-10 flex items-center h-full bg-white rounded-3xl">
                    <div class="max-w-lg mx-auto">
                        <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold">Get mobile app</h2>
                        <p class="mb-14 text-xl text-gray-500 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 -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>
            </div>
        </div>
    </div>
</section>

<section class="relative py-24 md:py-36 bg-black">
    <img class="absolute top-0 left-0 w-full h-full object-cover select-none" src="fily-assets/gradients/gradient-how-it-work.png" alt="">
    <div class="relative container mx-auto px-4">
        <h3 class="mb-20 font-heading text-4xl xl:text-5xl text-white text-center font-bold">How it works</h3>
        <div class="max-w-5xl mx-auto">
            <div class="p-12 lg:p-24 bg-white bg-opacity-5 rounded-3xl">
                <div class="flex flex-wrap -m-6 mb-14">
                    <div class="w-full md:w-auto p-6">
                        <div class="relative flex items-center justify-center w-18 h-18 bg-blue-500 rounded-full">
                            <div class="hidden md:block absolute -bottom-28 -mb-3 left-1/2 transform -translate-x-1/2 bg-white bg-opacity-10 h-24 rounded-xl" style="width: 3px;"></div>
                            <span class="text-3xl text-white font-medium">1</span>
                        </div>
                    </div>
                    <div class="w-full md:flex-1 p-6">
                        <h3 class="mb-8 font-heading text-3xl md:text-4xl text-white font-medium">Streamlined Efficiency</h3>
                        <p class="text-xl text-white font-light leading-normal">Experience a platform designed for maximum efficiency, ensuring a smooth and straightforward user journey from start to finish.</p>
                    </div>
                </div>
                <div class="flex flex-wrap -m-6 mb-14">
                    <div class="w-full md:w-auto p-6">
                        <div class="relative flex items-center justify-center w-18 h-18 bg-pink-500 rounded-full">
                            <div class="hidden md:block absolute -bottom-28 -mb-3 left-1/2 transform -translate-x-1/2 bg-white bg-opacity-10 h-24 rounded-xl" style="width: 3px;"></div>
                            <span class="text-3xl text-white font-medium">2</span>
                        </div>
                    </div>
                    <div class="w-full md:flex-1 p-6">
                        <h3 class="mb-8 font-heading text-3xl md:text-4xl text-white font-medium">Intuitive Navigation</h3>
                        <p class="text-xl text-white font-light leading-normal">Navigate effortlessly through our user-friendly interface, allowing you to easily access and manage all features with just a few clicks.</p>
                    </div>
                </div>
                <div class="flex flex-wrap -m-6">
                    <div class="w-full md:w-auto p-6">
                        <div class="flex items-center justify-center w-18 h-18 bg-orange-500 rounded-full">
                            <span class="text-3xl text-white font-medium">3</span>
                        </div>
                    </div>
                    <div class="w-full md:flex-1 p-6">
                        <h3 class="mb-8 font-heading text-3xl md:text-4xl text-white font-medium">Seamless Integration</h3>
                        <p class="text-xl text-white font-light leading-normal">Enjoy the convenience of seamless integration with other tools, providing a cohesive and comprehensive solution for your workflow needs.</p>
                    </div>
                </div>
            </div>
        </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-8 px-12 bg-white ml-auto max-w-8xl rounded-3xl">
        <div class="flex flex-wrap items-center -m-4">
            <div class="w-full md:flex-1 p-4">
                <h2 class="font-heading text-xl font-medium">We use third-party cookies to personalize content, ads, and analyze site traffic.</h2>
            </div>
            <div class="w-full md:w-auto p-2">
                <div class="flex flex-wrap gap-4">
                    <a href="#" x-on:click.prevent="open = false" 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-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 h-12 p-5 px-6 font-semibold text-black hover:text-black focus:text-black bg-transparent hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 focus:ring-opacity-50 transition duration-200">Decline</a>
                </div>
            </div>
        </div>
    </div>
</div>