Shuffle Components in Filytreck library

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

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

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

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

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

<section class="pt-24 md:pt-36 bg-black">
    <div class="container mx-auto px-4">
        <h2 class="mb-18 font-heading text-3xl md:text-4xl font-medium text-white text-center">That page isn’t doesn’t exist or we can’t find it.</h2>
        <div class="mb-24 flex justify-center">
            <a href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Back to homepage</a>
        </div>
    </div>
    <img class="mx-auto object-cover" style="height: 393px" src="fily-assets/categories/404.png" alt="">
</section>

<section class="py-24 md:py-40" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-20 font-heading text-4xl md:text-5xl font-bold text-center">Recent happenings and updates</h2>
        <div class="flex flex-wrap -m-2.5 mb-20">
            <div class="w-full md:w-1/2 p-2.5">
                <div class="group relative h-full overflow-hidden rounded-3xl">
                    <div class="absolute z-10 top-10 left-12 px-2.5 py-1.5 flex items-center bg-white rounded-full">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-gray-500 font-medium">21 Jan 2024</span>
                    </div>
                    <div class="absolute bottom-0 left-0 pb-10 px-12 z-10 ">
                        <div class="flex flex-wrap -m-2">
                            <div class="flex-1 p-2">
                                <h3 class="font-heading text-3xl font-medium text-white leading-tight">2023 Remote Work: A Comprehensive Guide</h3>
                            </div>
                            <div class="w-auto p-2">
                                <a href="#" class="flex items-center justify-center w-16 h-16 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="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <img class="w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/people.jpg" alt="">
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="relative mb-5 py-10 px-12 border border-gray-100 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 Jan 2024</span>
                    </div>
                    <div class="flex flex-wrap -m-2.5">
                        <div class="w-full md:flex-1 p-2.5">
                            <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>
                        </div>
                        <div class="w-full md:w-auto p-2.5">
                            <a href="#" class="flex items-center justify-center w-16 h-16 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="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="relative py-10 px-12 border border-gray-100 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">23 Jan 2024</span>
                    </div>
                    <div class="flex flex-wrap -m-2.5">
                        <div class="w-full md:flex-1 p-2.5">
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Unlocking the Secrets to Project Management Excellence</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>
                        </div>
                        <div class="w-full md:w-auto p-2.5">
                            <a href="#" class="flex items-center justify-center w-16 h-16 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="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': !showContent}" class="flex flex-wrap hidden -m-2.5">
            <div class="w-full md:w-1/2 lg:w-1/3 p-2.5">
                <div class="relative mb-5 py-10 px-12 h-full border border-gray-100 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">03 Feb 2024</span>
                    </div>
                    <div class="flex flex-wrap -m-2.5">
                        <div class="w-full md:flex-1 p-2.5">
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Streamlining Workflow: The Ultimate Software Solution for Businesses</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>
                        </div>
                        <div class="w-full md:w-auto p-2.5">
                            <a href="#" class="flex items-center justify-center w-16 h-16 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="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-2.5">
                <div class="relative mb-5 py-10 px-12 h-full border border-gray-100 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">04 Feb 2024</span>
                    </div>
                    <div class="flex flex-wrap -m-2.5">
                        <div class="w-full md:flex-1 p-2.5">
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Optimal Work Management Software for Firms</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>
                        </div>
                        <div class="w-full md:w-auto p-2.5">
                            <a href="#" class="flex items-center justify-center w-16 h-16 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="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-2.5">
                <div class="relative mb-5 py-10 px-12 h-full border border-gray-100 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">12 Mar 2024</span>
                    </div>
                    <div class="flex flex-wrap -m-2.5">
                        <div class="w-full md:flex-1 p-2.5">
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Management Software for Firms</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>
                        </div>
                        <div class="w-full md:w-auto p-2.5">
                            <a href="#" class="flex items-center justify-center w-16 h-16 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="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center">
            <a href="#" x-on:click.prevent="showContent = true" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-blue-900 focus:bg-blue-900 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">View all news</a>
        </div>
    </div>
</section>

<section class="py-24 md:py-36">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap xl:items-center -m-8">
            <div class="w-full md:w-1/2 p-8">
                <img class="w-full h-full object-cover rounded-3xl" style="height: 924px;" src="fily-assets/faq/pic2.jpg" alt="">
            </div>
            <div class="w-full md:w-1/2 p-8">
                <div class="max-w-xl mx-auto">
                    <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold">Frequently asked questions</h2>
                    <p class="pb-10 mb-10 text-xl text-gray-500 font-medium leading-relaxed border-b border-gray-100">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt. Ut sem justo, porta eget massa vitae, vehicula convallis velit.</p>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">How can I get started with FilyTreck?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">Are my data and information secure in FilyTreck?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">Is there a free trial available for new users?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">What types of support and assistance do you provide for users?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">Can I use FilyTreck on different devices?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">How can I import or export my tasks and data?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform text-gray-500 rotate-180 " :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">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-gray-50" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center">Categories</h2>
        <p class="mb-24 text-xl text-gray-500 font-medium leading-relaxed text-center">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt</p>
        <div class="flex flex-wrap -m-5">
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-blue-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/clock.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Time tracker</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-pink-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/notebook.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Timesheets &amp; reports</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-orange-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/stopwatch.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Real-time active timers</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-green-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/file-invoice-dollar.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Online invoicing</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-purple-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/list-check.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Task comments</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full">
                                <img class="h-6" src="fily-assets/categories/user.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Client profitability</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-green-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/file-invoice-dollar.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Online meeting</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-purple-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/list-check.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Jobs</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full">
                                <img class="h-6" src="fily-assets/categories/user.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Support</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center mt-18">
            <a href="#" x-on:click.prevent="showContent = true" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Show more</a>
        </div>
    </div>
</section>

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

<section class="relative">
    <img class="absolute top-0 left-0 w-full h-36 md:w-1/2 md:h-full object-cover" src="fily-assets/sign-up/pic.jpg" alt="">
    <div class="relative container mx-auto px-4">
        <div class="flex flex-wrap">
            <div class="w-full md:w-1/2">
                <div class="pt-16 pb-14 h-full">
                    <div class="flex flex-col items-start justify-between h-full">
                        <img class="mb-16 h-9" src="fily-assets/logos/fily-treck-white-logo.svg" alt="">
                        <h3 class="font-heading text-3xl text-black md:text-white font-bold">Imagination is more important than knowledge because knowledge is limited.</h3>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2">
                <div class="pt-16 md:pt-32 pb-36 md:px-10 h-full">
                    <form action="#" class="max-w-lg mx-auto">
                        <h2 class="mb-12 font-heading text-4xl font-medium">Register an account</h2>
                        <div class="flex flex-wrap -m-3 mb-7">
                            <div class="w-full p-3">
                                <label for="signup-input-01-1" class="mb-2 inline-block text-sm font-medium">Email</label>
                                <input id="signup-input-01-1" type="text" placeholder="Enter your email" class="w-full px-6 h-14 bg-transparent font-semibold text-black placeholder-gray-500 outline-none border border-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full transition duration-200">
                            </div>
                            <div class="w-full p-3">
                                <div class="relative">
                                    <label for="signup-input-01-2" class="mb-2 inline-block text-sm font-medium">Password</label>
                                    <div class="relative" x-data="{ visible: false }">
                                        <input id="signup-input-01-2" :type="visible ? 'text': 'password'" type="password" placeholder="Your password" class="w-full px-6 pr-12 h-14 bg-transparent font-semibold text-black placeholder-gray-500 outline-none border border-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full transition duration-200">
                                        <div x-on:click="visible = !visible" class="absolute right-6 top-1/2 transform -translate-y-1/2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                                <g clip-path="url(#clip0_447_91)">
                                                    <path d="M17.4527 7.06424C16.2894 5.16974 13.6434 1.99124 8.99943 1.99124C4.35543 1.99124 1.70943 5.16974 0.546178 7.06424C0.186574 7.64587 -0.00390625 8.31617 -0.00390625 8.99999C-0.00390625 9.68381 0.186574 10.3541 0.546178 10.9357C1.70943 12.8302 4.35543 16.0087 8.99943 16.0087C13.6434 16.0087 16.2894 12.8302 17.4527 10.9357C17.8123 10.3541 18.0028 9.68381 18.0028 8.99999C18.0028 8.31617 17.8123 7.64587 17.4527 7.06424ZM16.1739 10.1505C15.1749 11.775 12.9137 14.5087 8.99943 14.5087C5.08518 14.5087 2.82393 11.775 1.82493 10.1505C1.61128 9.80478 1.49812 9.4064 1.49812 8.99999C1.49812 8.59359 1.61128 8.19521 1.82493 7.84949C2.82393 6.22499 5.08518 3.49124 8.99943 3.49124C12.9137 3.49124 15.1749 6.22199 16.1739 7.84949C16.3876 8.19521 16.5007 8.59359 16.5007 8.99999C16.5007 9.4064 16.3876 9.80478 16.1739 10.1505Z" fill="#696D81"></path>
                                                    <path d="M9 5.25C8.25832 5.25 7.5333 5.46993 6.91661 5.88199C6.29993 6.29404 5.81928 6.87971 5.53545 7.56494C5.25162 8.25016 5.17736 9.00416 5.32206 9.73159C5.46675 10.459 5.8239 11.1272 6.34835 11.6517C6.8728 12.1761 7.54098 12.5333 8.26841 12.6779C8.99584 12.8226 9.74984 12.7484 10.4351 12.4645C11.1203 12.1807 11.706 11.7001 12.118 11.0834C12.5301 10.4667 12.75 9.74168 12.75 9C12.7488 8.0058 12.3533 7.05267 11.6503 6.34966C10.9473 5.64666 9.9942 5.25119 9 5.25ZM9 11.25C8.55499 11.25 8.11998 11.118 7.74997 10.8708C7.37996 10.6236 7.09157 10.2722 6.92127 9.86104C6.75098 9.4499 6.70642 8.9975 6.79323 8.56105C6.88005 8.12459 7.09434 7.72368 7.40901 7.40901C7.72368 7.09434 8.12459 6.88005 8.56105 6.79323C8.99751 6.70642 9.44991 6.75097 9.86104 6.92127C10.2722 7.09157 10.6236 7.37996 10.8708 7.74997C11.118 8.11998 11.25 8.55499 11.25 9C11.25 9.59674 11.0129 10.169 10.591 10.591C10.169 11.0129 9.59674 11.25 9 11.25Z" fill="#696D81"></path>
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_447_91">
                                                        <rect width="18" height="18" fill="white"></rect>
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="inline-flex justify-center items-center text-center w-full mb-12 h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Send message</button>
                        <div class="flex flex-wrap items-center gap-4 mb-12">
                            <div class="flex-1">
                                <div class="h-px bg-gray-100"></div>
                            </div>
                            <div class="w-auto">
                                <span class="text-gray-500 font-semibold">or</span>
                            </div>
                            <div class="flex-1">
                                <div class="h-px bg-gray-100"></div>
                            </div>
                        </div>
                        <a href="#" class="inline-flex justify-center items-center text-center w-full mb-4 h-14 py-6 px-10 font-semibold text-black hover:text-black focus:text-black bg-white hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">
                            <img class="mr-3" src="fily-assets/sign-up/google-play.svg" alt="">
                            <span>Continue with Google</span>
                        </a>
                        <a href="#" class="inline-flex justify-center items-center text-center w-full mb-11 h-14 py-6 px-10 font-semibold text-black hover:text-black focus:text-black bg-white hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">
                            <img class="mr-3" src="fily-assets/sign-up/apple.svg" alt="">
                            <span>Continue with Apple</span>
                        </a>
                        <div class="flex justify-center">
                            <span class="font-medium">Already have an account? <a href="#" class="font-semibold text-blue-500 hover:text-blue-600">Log in</a></span>
                        </div>
                    </form> 
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-gray-50" x-data="{ activeSlide: 1, slideCount: 2 }">
    <div class="container mx-auto px-4">
        <h2 class="mb-12 md:mb-20 font-heading text-4xl md:text-5xl text-center font-bold">What others say about us</h2>
        <div class="md:hidden flex flex-wrap justify-center mb-16">
            <div class="w-auto p-4">
                <a href="#" x-on:click.prevent="activeSlide > 1 ? activeSlide -= 1 : activeSlide = 1" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="currentColor"></path>
                    </svg>
                </a>
            </div>
            <div class="w-auto p-4">
                <a href="#" x-on:click.prevent="activeSlide < slideCount ? activeSlide += 1 : activeSlide = slideCount" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="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 class="flex items-center px-4 -m-10">
            <div class="hidden md:block w-auto p-10">
                <a href="#" x-on:click.prevent="activeSlide > 1 ? activeSlide -= 1 : activeSlide = 1" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="currentColor"></path>
                    </svg>
                </a>
            </div>
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex transition-transform duration-500 ease-in-out">
                    <div class="flex-shrink-0 w-full px-6">
                        <div class="flex flex-wrap -m-5">
                            <div class="w-full lg:w-1/2 p-5">
                                <div class="bg-white overflow-hidden rounded-3xl">
                                    <div style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
                                        <div class="py-6 px-10">
                                            <div class="flex flex-wrap -m-2">
                                                <div class="w-full md:flex-1 p-2">
                                                    <div class="flex flex-wrap items-center -m-3">
                                                        <div class="w-auto p-3">
                                                            <img class="h-18 obejct-cover rounded-2xl" src="fily-assets/testimonials/pic.jpg" alt="">
                                                        </div>
                                                        <div class="w-auto p-3">
                                                            <h3 class="font-heading text-xl text-white font-bold">Natasha Adams</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="w-full md:w-auto p-2">
                                                    <div class="inline-flex items-center px-2.5 h-8 bg-white rounded-xl gap-1">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5 mr-1.5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <span class="font-medium">4.9</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="py-14 px-10">
                                        <p class="mb-12 text-xl font-medium leading-relaxed">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.</p>
                                        <div class="mb-3 p-8 bg-green-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Advantages</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="p-8 bg-gray-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Defects</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Class aptent taciti sociosqu ad litora torquent</p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Proin condimentum orci tortor, faucibus auctor</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full lg:w-1/2 p-5">
                                <div class="bg-white overflow-hidden rounded-3xl">
                                    <div style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
                                        <div class="py-6 px-10">
                                            <div class="flex flex-wrap -m-2">
                                                <div class="w-full md:flex-1 p-2">
                                                    <div class="flex flex-wrap items-center -m-3">
                                                        <div class="w-auto p-3">
                                                            <img class="h-18 obejct-cover rounded-2xl" src="fily-assets/testimonials/pic2.jpg" alt="">
                                                        </div>
                                                        <div class="w-auto p-3">
                                                            <h3 class="font-heading text-xl text-white font-bold">Stephen Leblanc</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="w-full md:w-auto p-2">
                                                    <div class="inline-flex items-center px-2.5 h-8 bg-white rounded-xl gap-1">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5 mr-1.5" src="fily-assets/testimonials/star-half.svg" alt="">
                                                        <span class="font-medium">4.3</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="py-14 px-10">
                                        <p class="mb-12 text-xl font-medium leading-relaxed">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.</p>
                                        <div class="mb-3 p-8 bg-green-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Advantages</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="p-8 bg-gray-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Defects</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Class aptent taciti sociosqu ad litora torquent</p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Proin condimentum orci tortor, faucibus auctor</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-shrink-0 w-full px-6">
                        <div class="flex flex-wrap -m-5">
                            <div class="w-full lg:w-1/2 p-5">
                                <div class="bg-white overflow-hidden rounded-3xl">
                                    <div style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
                                        <div class="py-6 px-10">
                                            <div class="flex flex-wrap -m-2">
                                                <div class="w-full md:flex-1 p-2">
                                                    <div class="flex flex-wrap items-center -m-3">
                                                        <div class="w-auto p-3">
                                                            <img class="h-18 obejct-cover rounded-2xl" src="fily-assets/testimonials/pic.jpg" alt="">
                                                        </div>
                                                        <div class="w-auto p-3">
                                                            <h3 class="font-heading text-xl text-white font-bold">Lily Johnson</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="w-full md:w-auto p-2">
                                                    <div class="inline-flex items-center px-2.5 h-8 bg-white rounded-xl gap-1">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5 mr-1.5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <span class="font-medium">4.9</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="py-14 px-10">
                                        <p class="mb-12 text-xl font-medium leading-relaxed">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.</p>
                                        <div class="mb-3 p-8 bg-green-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Advantages</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="p-8 bg-gray-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Defects</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Class aptent taciti sociosqu ad litora torquent</p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Proin condimentum orci tortor, faucibus auctor</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full lg:w-1/2 p-5">
                                <div class="bg-white overflow-hidden rounded-3xl">
                                    <div style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
                                        <div class="py-6 px-10">
                                            <div class="flex flex-wrap -m-2">
                                                <div class="w-full md:flex-1 p-2">
                                                    <div class="flex flex-wrap items-center -m-3">
                                                        <div class="w-auto p-3">
                                                            <img class="h-18 obejct-cover rounded-2xl" src="fily-assets/testimonials/pic2.jpg" alt="">
                                                        </div>
                                                        <div class="w-auto p-3">
                                                            <h3 class="font-heading text-xl text-white font-bold">Gareth Leblanc</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="w-full md:w-auto p-2">
                                                    <div class="inline-flex items-center px-2.5 h-8 bg-white rounded-xl gap-1">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5 mr-1.5" src="fily-assets/testimonials/star-half.svg" alt="">
                                                        <span class="font-medium">4.3</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="py-14 px-10">
                                        <p class="mb-12 text-xl font-medium leading-relaxed">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.</p>
                                        <div class="mb-3 p-8 bg-green-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Advantages</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="p-8 bg-gray-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Defects</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Class aptent taciti sociosqu ad litora torquent</p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Proin condimentum orci tortor, faucibus auctor</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden md:block w-auto p-10">
                <a href="#" x-on:click.prevent="activeSlide < slideCount ? activeSlide += 1 : activeSlide = slideCount" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="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>
</section>

<div :class="{'hidden': !open}" class="fixed bottom-0 left-0 z-40 w-full p-6" x-data="{ open: true }">
    <div class="max-w-5xl mx-auto bg-white border border-gray-100 overflow-hidden rounded-3xl">
        <div class="py-14 px-8 md:px-14">
            <h2 class="mb-6 font-heading text-2xl font-bold">We use third-party cookies to personalize content, ads, and analyze site traffic.</h2>
            <p class="text-lg font-light text-gray-500">Vestibulum sit amet nisi volutpat, sagittis metus et, posuere magna. Sed venenatis metus turpis, eget malesuada nulla posuere facilisis consequat ac volutpat a, ultrices.</p>
        </div>
        <div class="py-6 px-8 md:px-14 bg-gray-50">
            <div class="flex flex-wrap gap-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">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>

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

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

<section class="py-24 md:py-40 bg-black" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-6 font-heading text-4xl md:text-5xl text-white font-bold">Features</h2>
        <p class="mb-16 text-xl text-gray-500 font-medium">Explore the powerful features that make FilyTreck stand out in the realm of task management.</p>
        <div class="flex flex-wrap -m-3">
            <div class="w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-orange-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/app.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Everything in one app</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div class="w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-blue-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Increase in the productivity</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div class="w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-purple-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/comments.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Efficient contact with the client</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div class="w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-green-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/clock.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Everything in one app</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-orange-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/app.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Analytics Snapshot</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-blue-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Secure Payments</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-purple-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/comments.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Integrated Calendar</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-green-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/clock.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Task Manager</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
        </div>
        <a href="#" x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" class="inline-flex justify-center items-center text-center h-18 mt-16 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full border border-gray-500 focus:ring-4 focus:ring-gray-700 transition duration-200">See all features</a>
    </div>
</section>

<section class="py-24 md:py-40">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-8 xl:-m-16 xl:mb-14">
            <div class="w-full md:w-5/12 p-8 xl:p-16">
                <div class="relative overflow-hidden rounded-3xl" style="height: 496px;">
                    <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 rounded-3xl transition duration-200" src="fily-assets/about/pic.jpg" alt="">
                </div>
            </div>
            <div class="w-full md:w-7/12 p-8 xl:p-16">
                <h3 class="mb-10 font-heading text-3xl font-medium 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.</h3>
                <p class="mb-14 text-xl text-gray-500 font-medium leading-relaxed">The easy way to work faster: Effortless Time Tracking for Enhanced Productivity. Streamline your tasks and optimize your work process, all while gaining valuable insights into your time management.</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>
        <div class="flex flex-wrap -m-8 xl:-m-16">
            <div class="w-full md:w-5/12 p-8 xl:p-16">
                <h3 class="mb-16 font-heading text-4xl md:text-5xl font-bold leading-tight">The easy way to work faster</h3>
                <ul>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Streamline tasks effortlessly</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Boost productivity with simplicity</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Accelerate your work pace</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Effortless speed and efficiency</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-0">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Work smarter, not harder</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="w-full md:w-7/12 p-8 xl:p-16">
                <div class="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>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-gray-50" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold">Work with us</h2>
        <p class="mb-10 text-xl text-gray-500 font-medium leading-relaxed">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt. Ut sem justo, porta eget massa vitae, vehicula convallis velit. Maecenas vitae velit ut mi vestibulum luctus ut ut</p>
        <div class="py-10 border-b border-gray-100">
            <div class="flex flex-wrap items-center -m-2 mb-4">
                <div class="w-full md:w-1/2 p-2">
                    <h3 class="mb-3 font-heading text-3xl font-bold">Product Designer</h3>
                    <p class="text-gray-500 font-medium">We’re looking for a mid-level product designer to join our team.</p>
                </div>
                <div class="w-full md:w-1/2 p-2">
                    <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 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 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 hover:bg-gray-50 focus:bg-gray-50 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 hover:bg-gray-50 focus:bg-gray-50 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="py-10 border-b border-gray-100">
            <div class="flex flex-wrap items-center -m-2 mb-4">
                <div class="w-full md:w-1/2 p-2">
                    <h3 class="mb-3 font-heading text-3xl font-bold">Customer Success Manager</h3>
                    <p class="text-gray-500 font-medium">We’re looking for a customer manager to join our team.</p>
                </div>
                <div class="w-full md:w-1/2 p-2">
                    <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 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 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 hover:bg-gray-50 focus:bg-gray-50 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 hover:bg-gray-50 focus:bg-gray-50 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="py-10 border-b border-gray-100">
            <div class="flex flex-wrap items-center -m-2 mb-4">
                <div class="w-full md:w-1/2 p-2">
                    <h3 class="mb-3 font-heading text-3xl font-bold">Engineering Manager</h3>
                    <p class="text-gray-500 font-medium">We’re looking for an experienced engineering manager to join our team.</p>
                </div>
                <div class="w-full md:w-1/2 p-2">
                    <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 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 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 hover:bg-gray-50 focus:bg-gray-50 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">Our features</span>
                    </a>
                </div>
                <div class="w-auto p-2">
                    <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 hover:bg-gray-50 focus:bg-gray-50 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="{'hidden': !showContent}" class="hidden py-10 border-b border-gray-100">
            <div class="flex flex-wrap items-center -m-2 mb-4">
                <div class="w-full md:w-1/2 p-2">
                    <h3 class="mb-3 font-heading text-3xl font-bold">Product Manager</h3>
                    <p class="text-gray-500 font-medium">We’re looking for an experienced engineering manager to join our team.</p>
                </div>
                <div class="w-full md:w-1/2 p-2">
                    <a href="#" class="flex items-center justify-center md:ml-auto w-16 h-16 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 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 hover:bg-gray-50 focus:bg-gray-50 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">Our features</span>
                    </a>
                </div>
                <div class="w-auto p-2">
                    <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 hover:bg-gray-50 focus:bg-gray-50 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>
        <a href="#" x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" class="inline-flex justify-center items-center text-center h-18 mt-20 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Show more</a>
    </div>
</section>

<section class="pt-24 bg-black">
    <div class="container mx-auto px-4">
        <img class="mb-16 h-9" src="fily-assets/logos/fily-treck-white-logo.svg" alt="">
        <div class="flex flex-wrap items-center -m-10 pb-20">
            <div class="w-full md:w-1/2 xl:w-1/3 p-10">
                <div class="h-full p-px bg-gradient-white overflow-hidden rounded-3xl">
                    <div class="relative h-full">
                        <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                        <div class="relative h-full py-12 px-10">
                            <h2 class="mb-4 font-heading text-3xl font-bold text-white">Subscribe to our newsletter</h2>
                            <p class="mb-10 text-lg text-gray-500 font-medium leading-relaxed">Duis pellentesque urna a erat sollicitudin, et molestie leo semper</p>
                            <div class="relative p-1.5 bg-transparent border border-gray-500 focus-within:ring focus-within:ring-blue-200 rounded-2xl md:rounded-full transiiton duration-200">
                                <div class="relative">
                                    <input id="footers-input-01-1" type="text" class="py-3 px-6 sm:pr-14 w-full text-gray-500 placeholder-gray-500 font-semibold text-center md:text-left bg-transparent outline-none" placeholder="Your email address">
                                    <a href="#" class="md:absolute md:top-0 md:right-0 inline-flex justify-center items-center w-full md:w-12 h-12 md:h-full text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-2xl md:rounded-full transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full sm:w-1/2 xl:flex-1 p-10">
                <h3 class="mb-8 font-heading text-2xl text-white font-bold">Product</h3>
                <ul>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Time Tracking</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Task Management</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Kanban Board</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Team Collaboration</a></li>
                    <li><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Team Scheduling</a></li>
                </ul>
            </div>
            <div class="w-full sm:w-1/2 xl:flex-1 p-10">
                <h3 class="mb-8 font-heading text-2xl text-white font-bold">Use Cases</h3>
                <ul>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Creative &amp; Marketing</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Software &amp; Engineering</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Architecture firms</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Consulting businesses</a></li>
                    <li><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Educational institutions</a></li>
                </ul>
            </div>
            <div class="w-full sm:w-1/2 xl:flex-1 p-10">
                <h3 class="mb-8 font-heading text-2xl text-white font-bold">Resources</h3>
                <ul>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Kanban Software</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Timesheet Software</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Gantt Chart Software</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Time Tracking Apps</a></li>
                    <li><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Project Tracker</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="bg-white bg-opacity-5">
        <div class="container mx-auto px-4">
            <div class="py-6">
                <div class="flex flex-wrap justify-between -m-2">
                    <div class="w-auto p-2">
                        <p class="text-gray-500 font-medium">© Shuffle 2023. All rights reserved.</p>
                    </div>
                    <div class="w-auto p-2">
                        <ul class="flex flex-wrap gap-4">
                            <li><a href="#" class="text-gray-500 hover:text-gray-600 font-medium transition duration-200">Terms</a></li>
                            <li><a href="#" class="text-gray-500 hover:text-gray-600 font-medium transition duration-200">Privacy Policy</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-40 bg-black">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap xl:items-center -m-8">
            <div class="w-full md:w-1/2 p-8">
                <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-white">They trusted us</h2>
                <p class="mb-14 text-xl text-gray-500 font-medium leading-normal">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci a, fermentum finibus tellus.</p>
                <a href="#" class="inline-flex justify-center items-center text-center h-18 py-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">Get started</a>
            </div>
            <div class="w-full md:w-1/2 p-8">
                <div class="max-w-xl mx-auto">
                    <div class="flex flex-wrap justify-center -m-8">
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 52px;" src="fily-assets/brands/spotify.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 52px;" src="fily-assets/brands/slack.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 46px;" src="fily-assets/brands/figma.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 52px;" src="fily-assets/brands/apple.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 37px;" src="fily-assets/brands/mastercard.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 41px;" src="fily-assets/brands/microsoft.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 26px;" src="fily-assets/brands/visa.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 32px;" src="fily-assets/brands/brand.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img class="height: 52px;" src="fily-assets/brands/opera.svg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>