UI Components – Filytreck Library

<section class="py-24 md:py-36" style="background: url('fily-assets/gradients/gradient-features.jpg'); background-size: cover;" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl text-white text-center font-bold">Features</h2>
        <p class="mb-20 text-xl text-white font-medium text-center">Explore the powerful features that make FilyTreck stand out in the realm of task management.</p>
        <div class="flex flex-wrap -m-2.5">
            <div class="w-full md:w-1/2 lg:w-2/3 p-2.5">
                <div class="py-20 px-10 md:px-16 h-full bg-white bg-opacity-20 border border-white rounded-3xl">
                    <h3 class="font-heading mb-6 text-3xl text-white font-bold">Everything in one app</h3>
                    <p class="mb-10 text-xl font-medium text-white leading-relaxed max-w-lg">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                    <ul>
                        <li class="mb-5 flex items-center">
                            <img class="mr-3" src="../../fily-assets/features/icon.svg" alt="">
                            <span class="text-lg font-medium text-white">Effortless Task Management</span>
                        </li>
                        <li class="mb-5 flex items-center">
                            <img class="mr-3" src="../../fily-assets/features/icon.svg" alt="">
                            <span class="text-lg font-medium text-white">Intuitive Time Management</span>
                        </li>
                        <li class="mb-5 flex items-center">
                            <img class="mr-3" src="../../fily-assets/features/icon.svg" alt="">
                            <span class="text-lg font-medium text-white">Comprehensive Goal Setting</span>
                        </li>
                        <li class="mb-5 flex items-center">
                            <img class="mr-3" src="../../fily-assets/features/icon.svg" alt="">
                            <span class="text-lg font-medium text-white">Single Platform Convenience</span>
                        </li>
                        <li :class="{'hidden': !showContent}" class="mb-5 flex hidden items-center">
                            <img class="mr-3" src="../../fily-assets/features/icon.svg" alt="">
                            <span class="text-lg font-medium text-white">AI Assistant</span>
                        </li>
                        <li :class="{'hidden': !showContent}" class="mb-5 flex hidden items-center">
                            <img class="mr-3" src="../../fily-assets/features/icon.svg" alt="">
                            <span class="text-lg font-medium text-white">Multi-language Support</span>
                        </li>
                        <li :class="{'hidden': !showContent}" class="flex hidden items-center">
                            <img class="mr-3" src="../../fily-assets/features/icon.svg" alt="">
                            <span class="text-lg font-medium text-white">Social Media Integration</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-2.5">
                <div class="flex flex-col h-full">
                    <div class="py-12 px-10 mb-5 flex-1 bg-white bg-opacity-20 border border-white rounded-3xl">
                        <h3 class="mb-7 font-heading text-2xl text-white font-bold">Increase in the productivity</h3>
                        <p class="text-white font-medium leading-relaxed">Experience a substantial boost in productivity with our streamlined approach, optimizing your workflow and time management.</p>
                    </div>
                    <div class="py-12 px-10 flex-1 bg-white bg-opacity-20 border border-white rounded-3xl">
                        <h3 class="mb-7 font-heading text-2xl text-white font-bold">Take charge of your time</h3>
                        <p class="text-white font-medium leading-relaxed">Effortless Time Management for Optimal Productivity. Discover effective strategies and tools to manage your time efficiently.</p>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center mt-20">
            <a href="#" x-on:click.prevent="showContent = true" class="inline-flex justify-center items-center text-center h-18 p-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-pink-500 hover:bg-pink-600 focus:bg-ping-600 rounded-full focus:ring-4 focus:ring-pink-200 transition duration-200">See all features</a>
        </div>
    </div>
</section>

<section class="py-24 md:pt-40 md:pb-56">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold leading-tight max-w-5xl">About</h2>
        <p class="mb-24 text-3xl max-w-5xl font-medium leading-tight">Discover the essence and objectives of FilyTreck, where we share our journey and dedication to enhancing productivity and task management, simplifying your daily work life</p>
    </div>
    <div class="relative">
        <div class="relative overflow-hidden" style="height: 806px;">
            <img class="absolute top-0 left-0 w-full h-full object-cover" src="fily-assets/about/pic2.jpg" alt="">
        </div>
        <div class="absolute right-0 md:right-20 xl:right-40 -bottom-14 md:-bottom-24 px-6">
            <div class="p-8 pt-18 pb-10 px-14 max-w-lg mx-auto bg-gray-50 rounded-3xl">
                <h3 class="mb-6 font-heading text-2xl font-bold">About us</h3>
                <p class="mb-10 text-lg text-gray-500 font-medium max-w-xl mx-auto">Our mission is to provide a seamless and comprehensive platform that transforms how you approach your daily tasks and goals. We are committed to helping you achieve success with efficiency and precision.</p>
                <a href="#" class="inline-flex justify-center items-center text-center h-14 py-6 px-8 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Read more</a>
            </div>
        </div>
    </div>
</section>

<section class="pt-20">
    <div class="container mx-auto px-4">
        <img class="mb-16 h-9 mx-auto" src="fily-assets/logos/fily-treck-black-logo.svg" alt="">
        <div class="flex flex-wrap justify-center -m-2 mb-14">
            <div class="w-auto p-2">
                <a href="#" class="inline-block px-4 py-3 font-medium hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full transition duration-200">
                    <span>Our features</span>
                </a>
            </div>
            <div class="w-auto p-2">
                <a href="#" class="inline-block px-4 py-3 font-medium hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full transition duration-200">
                    <span>How to use?</span>
                </a>
            </div>
            <div class="w-auto p-2">
                <a href="#" class="inline-block px-4 py-3 font-medium hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full transition duration-200">
                    <span>Use cases</span>
                </a>
            </div>
            <div class="w-auto p-2">
                <a href="#" class="inline-block px-4 py-3 font-medium hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full transition duration-200">
                    <span>Plans &amp; pricing</span>
                </a>
            </div>
            <div class="w-auto p-2">
                <a href="#" class="inline-block px-4 py-3 font-medium hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full transition duration-200">
                    <span>Help center</span>
                </a>
            </div>
        </div>
        <div class="max-w-xl pb-20 mx-auto text-center">
            <h2 class="mb-10 font-heading text-4xl font-medium">Subscribe to our newsletter</h2>
            <div class="relative p-1.5 bg-gray-50 rounded-2xl focus-within:ring-4 focus-within:ring-blue-200 sm:rounded-full transition duration-200">
                <div class="relative">
                    <input id="footers-input-04-1" type="text" class="py-4 px-6 sm:pr-40 w-full text-black placeholder-black font-semibold text-center sm:text-left bg-transparent outline-none" placeholder="Your email address">
                    <a href="#" class="sm:absolute sm:top-0 sm:right-0 inline-flex justify-center items-center text-center w-full sm:w-auto h-14 sm:h-full py-2 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-2xl sm:rounded-full transition duration-200">Get started</a>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-black">
        <div class="container mx-auto px-4">
            <div class="py-6">
                <div class="flex flex-wrap items-center justify-between -m-2">
                    <div class="w-auto p-2">
                        <p class="text-white font-medium">© Shuffle 2023. All rights reserved.</p>
                    </div>
                    <div class="w-auto p-2">
                        <ul class="flex flex-wrap gap-2">
                            <li>
                                <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 hover:bg-gray-100 rounded-full transition duration-200">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12.3731 1.20056H14.7039L9.61187 7.02038L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71489L0.402344 1.20056H5.21177L8.53245 5.59079L12.3731 1.20056ZM11.5551 13.5448H12.8466L4.51001 2.52235H3.12411L11.5551 13.5448Z" fill="#060918"></path>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 hover:bg-gray-100 rounded-full transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
                                        <g clip-path="url(#clip0_323_395)">
                                            <path d="M0.25 1.89813C0.25 1.35919 0.438632 0.914572 0.815878 0.564277C1.19313 0.213966 1.68356 0.0388184 2.28716 0.0388184C2.87999 0.0388184 3.35963 0.211266 3.72611 0.556193C4.10336 0.911888 4.29199 1.37536 4.29199 1.94664C4.29199 2.46401 4.10876 2.89515 3.74228 3.24007C3.36503 3.59577 2.86921 3.77362 2.25483 3.77362H2.23866C1.64583 3.77362 1.16619 3.59577 0.79971 3.24007C0.433231 2.88438 0.25 2.43706 0.25 1.89813ZM0.460183 16.0451V5.2449H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0144C9.62741 9.63718 9.67053 9.34616 9.75676 9.14138C9.90765 8.7749 10.1367 8.46501 10.4439 8.21172C10.7511 7.95842 11.1364 7.83177 11.5999 7.83177C12.8071 7.83177 13.4107 8.64555 13.4107 10.2731V16.0451H17V9.85277C17 8.25752 16.6228 7.04763 15.8682 6.22306C15.1137 5.3985 14.1167 4.98621 12.8772 4.98621C11.4867 4.98621 10.4035 5.58443 9.62741 6.78086V6.81319H9.61125L9.62741 6.78086V5.2449H6.03813C6.05968 5.58981 6.07046 6.66228 6.07046 8.46232C6.07046 10.2623 6.05968 12.7899 6.03813 16.0451Z" fill="#060918"></path>
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_323_395">
                                                <rect width="16.75" height="16.0063" fill="white" transform="translate(0.25 0.0388184)"></rect>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="fixed top-0 flex justify-center w-full z-40 p-6">
    <div class="px-6 py-5 bg-white rounded-3xl">
        <div class="flex flex-wrap items-center gap-4">
            <div class="w-auto">
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.81189 13.4964C5.30095 13.4966 4.81093 13.2935 4.44994 12.9319L0.332296 8.81579C-0.110765 8.37259 -0.110765 7.65416 0.332296 7.21095C0.775498 6.76789 1.49393 6.76789 1.93713 7.21095L5.81189 11.0857L16.0629 0.834737C16.5061 0.391676 17.2245 0.391676 17.6677 0.834737C18.1108 1.27794 18.1108 1.99637 17.6677 2.43957L7.17385 12.9319C6.81286 13.2935 6.32284 13.4966 5.81189 13.4964Z" fill="#24B428"></path>
                </svg> 
            </div>
            <p class="flex-1 text-lg text-green-500 font-medium">Your settings have been saved.</p>    
        </div>
    </div>
</div>

<section class="relative py-24 md:py-36 bg-black">
    <img class="absolute top-0 left-0 w-full h-full select-none" src="fily-assets/gradients/gradient-categories.png" alt="">
    <div class="relative z-10 container mx-auto px-4">
        <div class="mb-20 max-w-2xl">
            <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-white">Categories</h2>
            <p class="text-xl font-medium leading-relaxed text-gray-500">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci a, fermentum finibus tellus.</p>
        </div>
        <div class="flex flex-nowrap -m-5">
            <div class="flex-shrink-0 max-w-md w-full p-5">
                <div class="relative py-18 px-14 h-full bg-black rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="mb-4">
                            <div class="mb-6 flex items-center justify-center w-18 h-18 mx-auto bg-blue-500 rounded-full">
                                <img class="h-8" src="fily-assets/categories/clock-white.svg" alt="">
                            </div>
                            <h3 class="font-heading text-3xl font-bold text-white text-center">Time tracker</h3>
                        </div>
                        <p class="mb-11 text-gray-500 leading-relaxed font-medium text-center">Nulla quis justo feugiat, gravida arcu. Integer ullamcorper, lorem nec.</p>
                        <div class="flex justify-center">
                            <a href="#" class="inline-flex justify-center items-center text-center h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 border border-gray-300 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">View more</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-shrink-0 max-w-md w-full p-5">
                <div class="relative py-18 px-14 h-full bg-black rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="mb-4">
                            <div class="mb-6 flex items-center justify-center w-18 h-18 mx-auto bg-green-500 rounded-full">
                                <img class="h-8" src="fily-assets/categories/file-invoice-dollar-white.svg" alt="">
                            </div>
                            <h3 class="font-heading text-3xl font-bold text-white text-center">Online invoicing</h3>
                        </div>
                        <p class="mb-11 text-gray-500 leading-relaxed font-medium text-center">Nulla quis justo feugiat, gravida arcu. Integer ullamcorper, lorem nec tempus.</p>
                        <div class="flex justify-center">
                            <a href="#" class="inline-flex justify-center items-center text-center h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 border border-gray-300 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">View more</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-shrink-0 max-w-md w-full p-5">
                <div class="relative py-18 px-14 h-full bg-black rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="mb-4">
                            <div class="mb-6 flex items-center justify-center w-18 h-18 mx-auto bg-purple-500 rounded-full">
                                <img class="h-8" src="fily-assets/categories/list-check-white.svg" alt="">
                            </div>
                            <h3 class="font-heading text-3xl font-bold text-white text-center">Task comments</h3>
                        </div>
                        <p class="mb-11 text-gray-500 leading-relaxed font-medium text-center">Phasellus iaculis sollicitudin lacus nec rutrum. Vestibulum finibus massa.</p>
                        <div class="flex justify-center">
                            <a href="#" class="inline-flex justify-center items-center text-center h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 border border-gray-300 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">View more</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-shrink-0 max-w-md w-full p-5">
                <div class="relative py-18 px-14 h-full bg-black rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="mb-4">
                            <div class="mb-6 flex items-center justify-center w-18 h-18 mx-auto bg-blue-500 rounded-full">
                                <svg class="h-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M20.494 7.96787L10.954 0.967865C10.2089 0.42225 9.32722 0.0936595 8.40677 0.0185285C7.48631 -0.0566025 6.56302 0.124662 5.7393 0.542223C4.91557 0.959783 4.22358 1.59732 3.74006 2.38415C3.25654 3.17098 3.00039 4.07635 3 4.99987V18.9999C3.00016 19.9238 3.25633 20.8296 3.74007 21.6168C4.22382 22.404 4.91621 23.0417 5.74042 23.4593C6.56463 23.8768 7.48841 24.0578 8.40925 23.9822C9.33008 23.9066 10.212 23.5773 10.957 23.0309L20.497 16.0309C21.1303 15.5665 21.6452 14.9594 22.0002 14.2589C22.3552 13.5584 22.5401 12.7842 22.5401 11.9989C22.5401 11.2136 22.3552 10.4393 22.0002 9.73881C21.6452 9.03831 21.1303 8.43127 20.497 7.96687L20.494 7.96787ZM19.31 14.4179L9.77 21.4179C9.32302 21.7445 8.79437 21.9411 8.24257 21.9858C7.69078 22.0306 7.13736 21.9218 6.64357 21.6715C6.14978 21.4212 5.73488 21.0391 5.4448 20.5676C5.15472 20.0961 5.00078 19.5535 5 18.9999V4.99987C4.99445 4.44521 5.1455 3.90025 5.43578 3.42759C5.72606 2.95493 6.1438 2.57376 6.641 2.32787C7.06389 2.11276 7.53154 2.00038 8.006 1.99987C8.64189 2.00229 9.26022 2.20875 9.77 2.58887L19.31 9.58887C19.6895 9.86756 19.9981 10.2317 20.2107 10.6517C20.4234 11.0718 20.5343 11.536 20.5343 12.0069C20.5343 12.4777 20.4234 12.9419 20.2107 13.362C19.9981 13.7821 19.6895 14.1462 19.31 14.4249V14.4179Z" fill="white"></path>
                                </svg>
                            </div>
                            <h3 class="font-heading text-3xl font-bold text-white text-center">Time tracker</h3>
                        </div>
                        <p class="mb-11 text-gray-500 leading-relaxed font-medium text-center">Nulla quis justo feugiat, gravida arcu. Integer ullamcorper, lorem nec.</p>
                        <div class="flex justify-center">
                            <a href="#" class="inline-flex justify-center items-center text-center h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 border border-gray-300 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">View more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="flex flex-wrap items-center">
        <div class="w-full md:w-1/2">
            <div class="py-24 px-10 md:px-18 bg-white text-center max-w-5xl mx-auto rounded-3xl">
                <h2 class="font-heading text-7xl md:text-8xl xl:text-9xl font-bold text-center">404</h2>
                <p class="mb-18 text-2xl font-bold leading-tight">That page isn’t doesn’t exist or we can’t find it.</p>
                <div class="flex justify-center">
                    <a href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Back to homepage</a>
                </div>
            </div>
        </div>
        <div class="w-full md:w-1/2">
            <img class="w-full ml-auto object-cover" style="height: 945px;" src="fily-assets/http-codes/pic4.jpg" alt="">
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-gray-50">
    <div class="container mx-auto px-4">
        <form action="#" class="max-w-4xl mx-auto">
            <h2 class="mb-24 font-heading text-4xl md:text-5xl font-bold">Say hello, and ask a question</h2>
            <div class="flex flex-wrap -m-5 mb-5">
                <div class="w-full md:w-1/2 p-5">
                    <label for="contact-input-04-1" class="inline-block text-sm font-medium">First name</label>
                    <input id="contact-input-04-1" type="text" placeholder="Type here" class="w-full bg-transparent h-14 font-semibold text-black placeholder-gray-500 outline-none border-b border-gray-200 transition duration-200">
                </div>
                <div class="w-full md:w-1/2 p-5">
                    <label for="contact-input-04-2" class="inline-block text-sm font-medium">Last name</label>
                    <input id="contact-input-04-2" type="text" placeholder="Type here" class="w-full bg-transparent h-14 font-semibold text-black placeholder-gray-500 outline-none border-b border-gray-200 transition duration-200">
                </div>
            </div>
            <div class="flex flex-wrap -m-5 mb-5">
                <div class="w-full md:w-1/2 p-5">
                    <label for="contact-input-04-3" class="inline-block text-sm font-medium">Address email</label>
                    <input id="contact-input-04-3" type="text" placeholder="Type here" class="w-full bg-transparent h-14 font-semibold text-black placeholder-gray-500 outline-none border-b border-gray-200 transition duration-200">
                </div>
                <div class="w-full md:w-1/2 p-5">
                    <label for="contact-input-04-4" class="inline-block text-sm font-medium">Subject</label>
                    <input id="contact-input-04-4" type="text" placeholder="Type here" class="w-full bg-transparent h-14 font-semibold text-black placeholder-gray-500 outline-none border-b border-gray-200 transition duration-200">
                </div>
            </div>
            <label for="contact-textarea-04-1" class="inline-block text-sm font-medium">Message</label>
            <textarea id="contact-textarea-04-1" placeholder="Type message here" class="w-full bg-transparent mb-18 h-14 py-4 font-semibold text-black placeholder-gray-500 outline-none border-b border-gray-200 overflow-hidden resize-none transition duration-200"></textarea>
            <button type="submit" class="inline-flex justify-center items-center text-center h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Send message</button>
        </form>
    </div>
</section>

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

<section class="py-24 md:py-36 bg-black">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl text-center text-white font-bold">What others say about us</h2>
        <p class="mb-24 text-xl text-white text-center">Nullam dignissim diam sed velit molestie, at auctor lectus finibus phasellus risus nisl.</p>
        <div class="flex flex-wrap -m-2.5">
            <div class="w-full md:w-1/2 p-2.5">
                <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 px-10 lg:px-20 py-10 lg:pt-28 lg:pb-20">
                            <h2 class="mb-10 font-heading text-4xl font-medium text-white">Get mobile app</h2>
                            <p class="mb-9 text-lg text-white font-medium leading-relaxed">Vestibulum sit amet nisi volutpat, sagittis metus et, posuere magna. Sed venenatis metus turpis, eget malesuada nulla posuere facilisis consequat volutpat.</p>
                            <p class="mb-14 text-lg text-white font-medium leading-relaxed">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci fermentum.</p>
                            <div class="flex flex-wrap -m-2">
                                <div class="w-auto p-2">
                                    <a href="#">
                                        <img class="h-14" src="fily-assets/download/app-store-border.png" alt="">
                                    </a>
                                </div>
                                <div class="w-auto p-2">
                                    <a href="#">
                                        <img class="h-14" src="fily-assets/download/google-play-border.png" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="flex items-end justify-center h-full overflow-hidden rounded-3xl" style="background: url('fily-assets/gradients/gradient-download.png'); background-size: cover;">
                    <img class="mx-auto object-cover transform hover:scale-105 transition duration-500" style="height: 554px;" src="fily-assets/download/iphone2.png" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-black">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto">
            <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center text-white">Categories</h2>
            <p class="mb-24 text-xl font-medium leading-relaxed text-center text-gray-500">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum fermentum finibus tellus malesuada fames.</p>
        </div>
        <div class="max-w-7xl mx-auto">
            <div class="flex flex-wrap -m-7">
                <div class="w-full p-7">
                    <div class="bg-white bg-opacity-5 overflow-hidden rounded-3xl">
                        <div class="flex flex-wrap">
                            <div class="w-full md:w-1/2">
                                <div class="px-10 md:px-20 py-16 md:py-24">
                                    <h3 class="mb-6 font-heading text-3xl md:text-4xl font-medium text-white">Time tracker</h3>
                                    <p class="mb-16 text-lg text-white font-light">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nec arcu enim. Suspendisse vitae lectus sit amet dolor hendrerit euismod in vel enim.</p>
                                    <a href="#" class="flex items-center text-blue-500 hover:text-blue-600">
                                        <span class="mr-2 font-semibold">Read more</span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                            <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                            <div class="w-full md:w-1/2">
                                <div class="flex items-center justify-center p-10 h-full bg-blue-500">
                                    <div class="flex items-center justify-center w-24 h-24 bg-white rounded-3xl">
                                        <img class="h-10" src="fily-assets/categories/clock-xl.svg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full p-7">
                    <div class="bg-white bg-opacity-5 overflow-hidden rounded-3xl">
                        <div class="flex flex-wrap">
                            <div class="w-full md:w-1/2">
                                <div class="px-10 md:px-20 py-16 md:py-24">
                                    <h3 class="mb-6 font-heading text-3xl md:text-4xl font-medium text-white">Timesheets &amp; reports</h3>
                                    <p class="mb-16 text-lg text-white font-light">Aenean vitae semper urna. Sed eleifend accumsan turpis, et facilisis justo molestie a. Maecenas tortor odio, commodo consequat sed, ornare viverra ante. Donec ac felis enim.</p>
                                    <a href="#" class="flex items-center text-pink-500 hover:text-pink-600">
                                        <span class="mr-2 font-semibold">Read more</span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                            <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                            <div class="w-full md:w-1/2">
                                <div class="flex items-center justify-center p-10 h-full bg-pink-500">
                                    <div class="flex items-center justify-center w-24 h-24 bg-white rounded-3xl">
                                        <img class="h-10" src="fily-assets/categories/notebook-xl.svg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full p-7">
                    <div class="bg-white bg-opacity-5 overflow-hidden rounded-3xl">
                        <div class="flex flex-wrap">
                            <div class="w-full md:w-1/2">
                                <div class="px-10 md:px-20 py-16 md:py-24">
                                    <h3 class="mb-6 font-heading text-3xl md:text-4xl font-medium text-white">Real-time active timers</h3>
                                    <p class="mb-16 text-lg text-white font-light">Morbi porttitor est tempus urna cursus, gravida consectetur nisi suscipit. Fusce vitae purus in leo dapibus maximus. Proin et nulla a est venenatis mattis eu quis leo.</p>
                                    <a href="#" class="flex items-center text-orange-500 hover:text-orange-600">
                                        <span class="mr-2 font-semibold">Read more</span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                            <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                            <div class="w-full md:w-1/2">
                                <div class="flex items-center justify-center p-10 h-full bg-orange-500">
                                    <div class="flex items-center justify-center w-24 h-24 bg-white rounded-3xl">
                                        <img class="h-10" src="fily-assets/categories/stopwatch-xl.svg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-40 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="mb-20 max-w-2xl mx-auto">
            <h3 class="font-heading text-4xl md:text-5xl font-bold text-center leading-tight">Meet our team</h3>
        </div>
        <div class="flex flex-wrap -m-2.5">
            <div class="w-full md:w-1/3 p-2.5">
                <div class="h-full bg-white overflow-hidden rounded-3xl">
                    <div class="relative overflow-hidden" style="height: 270px;">
                        <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 transition duration-200" style="height: 270px;" src="fily-assets/team/pic-medium6.jpg" alt="">
                    </div>
                    <div class="py-10 px-8">
                        <div class="flex flex-wrap justify-between -m-2 mb-6">
                            <div class="w-full lg:flex-1 p-2">
                                <h3 class="font-heading text-2xl font-bold">John 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 class="w-full md:w-1/3 p-2.5">
                <div class="h-full bg-white overflow-hidden rounded-3xl">
                    <div class="relative overflow-hidden" style="height: 270px;">
                        <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 transition duration-200" style="height: 270px;" src="fily-assets/team/pic-medium2.jpg" alt="">
                    </div>
                    <div class="py-10 px-8">
                        <div class="flex flex-wrap justify-between -m-2 mb-6">
                            <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">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-2.5">
                <div class="h-full bg-white overflow-hidden rounded-3xl">
                    <div class="relative overflow-hidden" style="height: 270px;">
                        <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 transition duration-200" style="height: 270px;" src="fily-assets/team/pic-medium4.jpg" alt="">
                    </div>
                    <div class="py-10 px-8">
                        <div class="flex flex-wrap justify-between -m-2 mb-6">
                            <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 class="w-full md:w-1/3 p-2.5">
                <div class="h-full bg-white overflow-hidden rounded-3xl">
                    <div class="relative overflow-hidden" style="height: 270px;">
                        <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 transition duration-200" style="height: 270px;" src="fily-assets/team/pic-medium.jpg" alt="">
                    </div>
                    <div class="py-10 px-8">
                        <div class="flex flex-wrap justify-between -m-2 mb-6">
                            <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">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-2.5">
                <div class="h-full bg-white overflow-hidden rounded-3xl">
                    <div class="relative overflow-hidden" style="height: 270px;">
                        <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 transition duration-200" style="height: 270px;" src="fily-assets/team/pic-medium3.jpg" alt="">
                    </div>
                    <div class="py-10 px-8">
                        <div class="flex flex-wrap justify-between -m-2 mb-6">
                            <div class="w-full lg:flex-1 p-2">
                                <h3 class="font-heading text-2xl font-bold">Aaron York</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 class="w-full md:w-1/3 p-2.5">
                <div class="h-full bg-white overflow-hidden rounded-3xl">
                    <div class="relative overflow-hidden" style="height: 270px;">
                        <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 transition duration-200" style="height: 270px;" src="fily-assets/team/pic-medium5.jpg" alt="">
                    </div>
                    <div class="py-10 px-8">
                        <div class="flex flex-wrap justify-between -m-2 mb-6">
                            <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">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>
</section>

<section class="py-24 md:py-40 bg-gray-50">
    <div class="container mx-auto px-4">
        <h3 class="mb-20 font-heading text-4xl md:text-5xl font-bold text-center leading-tight">Who we are</h3>
        <div class="max-w-7xl mx-auto">
            <div class="flex flex-wrap items-start -m-8">
                <div class="w-full md:w-1/2 p-8">
                    <div class="relative h-full bg-white overflow-hidden rounded-3xl">
                        <div class="group relative overflow-hidden" style="height: 308px">
                            <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/about/pic2.jpg" alt="">
                        </div>
                        <div class="py-16 px-12">
                            <p class="mb-10 text-xl text-black font-light leading-relaxed">Our mission is to provide a seamless and comprehensive platform that transforms how you approach your daily tasks and goals. We are committed to helping you achieve success with efficiency and precision. Join us on this journey of productivity optimization, and experience the future of task and time management today."</p>
                            <a href="#" class="inline-flex justify-center items-center text-center h-14 py-6 px-8 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="w-full md:w-1/2 p-8">
                    <div class="relative lg:relative lg:top-16 h-full bg-white overflow-hidden rounded-3xl">
                        <div class="group relative overflow-hidden" style="height: 308px">
                            <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/about/pic.jpg" alt="">
                        </div>
                        <div class="py-16 px-12">
                            <h3 class="mb-12 font-heading text-3xl md:text-4xl font-medium leading-tight">Simplify your workflow</h3>
                            <ul>
                                <li class="flex items-center -m-2 mb-2">
                                    <div class="w-auto p-2">
                                        <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="w-auto p-2">
                                        <span class="text-lg font-medium">Streamline tasks effortlessly</span>
                                    </div>
                                </li>
                                <li class="flex items-center -m-2 mb-2">
                                    <div class="w-auto p-2">
                                        <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="w-auto p-2">
                                        <span class="text-lg font-medium">Boost productivity with simplicity</span>
                                    </div>
                                </li>
                                <li class="flex items-center -m-2 mb-2">
                                    <div class="w-auto p-2">
                                        <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="w-auto p-2">
                                        <span class="text-lg font-medium">Accelerate your work pace</span>
                                    </div>
                                </li>
                                <li class="flex items-center -m-2 mb-2">
                                    <div class="w-auto p-2">
                                        <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="w-auto p-2">
                                        <span class="text-lg font-medium">Effortless speed and efficiency</span>
                                    </div>
                                </li>
                                <li class="flex items-center -m-2 mb-0">
                                    <div class="w-auto p-2">
                                        <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="w-auto p-2">
                                        <span class="text-lg font-medium">Work smarter, not harder</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pt-24 bg-darkPurple-500">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-10 pb-16">
            <div class="w-full sm:w-1/2 lg:w-1/4 p-10">
                <h3 class="mb-8 font-heading text-2xl text-white font-bold text-center">Product</h3>
                <ul class="text-center">
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Time Tracking</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Task Management</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Kanban Board</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Team Collaboration</a></li>
                    <li><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Team Scheduling</a></li>
                </ul>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-10">
                <h3 class="mb-8 font-heading text-2xl text-white font-bold text-center">Use Cases</h3>
                <ul class="text-center">
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Creative &amp; Marketing</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Software &amp; Engineering</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Architecture firms</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Consulting businesses</a></li>
                    <li><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Educational institutions</a></li>
                </ul>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-10">
                <h3 class="mb-8 font-heading text-2xl text-white font-bold text-center">Resources</h3>
                <ul class="text-center">
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Kanban Software</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Timesheet Software</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Gantt Chart Software</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Time Tracking Apps</a></li>
                    <li><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Project Tracker</a></li>
                </ul>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-10">
                <h3 class="mb-8 font-heading text-2xl text-white font-bold text-center">FilyTreck</h3>
                <ul class="text-center">
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Our features</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">How to use?</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Use cases</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Plans &amp; pricing</a></li>
                    <li><a href="#" class="text-lg text-white hover:text-gray-100 font-medium transition duration-200">Help center</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="bg-darkPurple-600">
        <div class="container mx-auto px-4">
            <div class="py-6">
                <div class="flex flex-wrap items-center justify-between -m-2">
                    <div class="w-auto p-2">
                        <p class="text-white font-medium">© Shuffle 2023. All rights reserved.</p>
                    </div>
                    <div class="w-auto p-2">
                        <div class="flex flex-wrap items-center -m-2">
                            <div class="w-auto p-2">
                                <ul class="flex flex-wrap gap-4">
                                    <li><a href="#" class="text-white hover:text-gray-100 font-medium transition duration-200">Terms</a></li>
                                    <li><a href="#" class="text-white hover:text-gray-100 font-medium transition duration-200">Privacy Policy</a></li>
                                </ul>
                            </div>
                            <div class="w-auto p-2">
                                <ul class="flex flex-wrap gap-2">
                                    <li>
                                        <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 hover:bg-gray-100 rounded-full transition duration-200">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M12.3731 1.20056H14.7039L9.61187 7.02038L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71489L0.402344 1.20056H5.21177L8.53245 5.59079L12.3731 1.20056ZM11.5551 13.5448H12.8466L4.51001 2.52235H3.12411L11.5551 13.5448Z" fill="#060918"></path>
                                            </svg>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 hover:bg-gray-100 rounded-full transition duration-200">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
                                                <g clip-path="url(#clip0_323_395)">
                                                    <path d="M0.25 1.89813C0.25 1.35919 0.438632 0.914572 0.815878 0.564277C1.19313 0.213966 1.68356 0.0388184 2.28716 0.0388184C2.87999 0.0388184 3.35963 0.211266 3.72611 0.556193C4.10336 0.911888 4.29199 1.37536 4.29199 1.94664C4.29199 2.46401 4.10876 2.89515 3.74228 3.24007C3.36503 3.59577 2.86921 3.77362 2.25483 3.77362H2.23866C1.64583 3.77362 1.16619 3.59577 0.79971 3.24007C0.433231 2.88438 0.25 2.43706 0.25 1.89813ZM0.460183 16.0451V5.2449H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0144C9.62741 9.63718 9.67053 9.34616 9.75676 9.14138C9.90765 8.7749 10.1367 8.46501 10.4439 8.21172C10.7511 7.95842 11.1364 7.83177 11.5999 7.83177C12.8071 7.83177 13.4107 8.64555 13.4107 10.2731V16.0451H17V9.85277C17 8.25752 16.6228 7.04763 15.8682 6.22306C15.1137 5.3985 14.1167 4.98621 12.8772 4.98621C11.4867 4.98621 10.4035 5.58443 9.62741 6.78086V6.81319H9.61125L9.62741 6.78086V5.2449H6.03813C6.05968 5.58981 6.07046 6.66228 6.07046 8.46232C6.07046 10.2623 6.05968 12.7899 6.03813 16.0451Z" fill="#060918"></path>
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_323_395">
                                                        <rect width="16.75" height="16.0063" fill="white" transform="translate(0.25 0.0388184)"></rect>
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 xl:pb-48 bg-black" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-white">Work with us</h2>
        <p class="mb-24 text-xl text-gray-500 font-medium leading-relaxed">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt sem justo, porta eget massa vitae.</p>
        <div class="mb-10 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 z-10 p-10 md:p-16">
                    <div class="flex flex-wrap items-center h-full -m-4">
                        <div class="w-full md:w-3/4 p-4">
                            <div class="flex flex-col justify-between h-full">
                                <div class="mb-6 w-full">
                                    <h3 class="mb-4 font-heading text-3xl text-white font-bold">Product Designer</h3>
                                    <p class="text-gray-500 font-medium">Praesent sagittis gravida turpis, sed consequat eros auctor et. Pellentesque nec nisi rutrum, congue libero quis, gravida tortor.</p>
                                </div>
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-auto p-2">
                                        <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/clock-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">100% remote</span>
                                        </a>
                                    </div>
                                    <div class="w-auto p-2">
                                        <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/marker-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">Full-time</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/4 p-4">
                            <div class="flex md:justify-end">
                                <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">Apply now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-10 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 z-10 p-10 md:p-16">
                    <div class="flex flex-wrap items-center h-full -m-4">
                        <div class="w-full md:w-3/4 p-4">
                            <div class="flex flex-col justify-between h-full">
                                <div class="mb-6 w-full">
                                    <h3 class="mb-4 font-heading text-3xl text-white font-bold">Customer Success Manager</h3>
                                    <p class="text-gray-500 font-medium">Nulla quis justo feugiat, gravida arcu sed, sodales magna. Nullam fringilla diam id pretium rutrum.</p>
                                </div>
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-auto p-2">
                                        <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/clock-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">100% remote</span>
                                        </a>
                                    </div>
                                    <div class="w-auto p-2">
                                        <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/marker-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">Full-time</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/4 p-4">
                            <div class="flex md:justify-end">
                                <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">Apply now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-10 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 z-10 p-10 md:p-16">
                    <div class="flex flex-wrap items-center h-full -m-4">
                        <div class="w-full md:w-3/4 p-4">
                            <div class="flex flex-col justify-between h-full">
                                <div class="mb-6 w-full">
                                    <h3 class="mb-4 font-heading text-3xl text-white font-bold">Engineering Manager</h3>
                                    <p class="text-gray-500 font-medium">Cras pretium feugiat urna id vulputate. Praesent ac sollicitudin elit, sed interdum velit. Morbi tristique ut arcu ac pellentesque.</p>
                                </div>
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-auto p-2">
                                        <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/clock-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">100% remote</span>
                                        </a>
                                    </div>
                                    <div class="w-auto p-2">
                                        <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/marker-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">Full-time</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/4 p-4">
                            <div class="flex md:justify-end">
                                <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">Apply now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': !showContent}" class="hidden mb-10 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 z-10 p-10 md:p-16">
                    <div class="flex flex-wrap items-center h-full -m-4">
                        <div class="w-full md:w-3/4 p-4">
                            <div class="flex flex-col justify-between h-full">
                                <div class="mb-6 w-full">
                                    <h3 class="mb-4 font-heading text-3xl text-white font-bold">UX Designer</h3>
                                    <p class="text-gray-500 font-medium">Cras pretium feugiat urna id vulputate. Praesent ac sollicitudin elit, sed interdum velit. Morbi tristique ut arcu ac pellentesque.</p>
                                </div>
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-auto p-2">
                                        <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/clock-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">100% remote</span>
                                        </a>
                                    </div>
                                    <div class="w-auto p-2">
                                        <a href="#" class="flex items-center gap-1.5 px-4 py-2.5 border border-white border-opacity-10 rounded-full transition duration-200">
                                            <img class="h-4" src="fily-assets/careers/marker-white.svg" alt="">
                                            <span class="text-sm text-white font-medium">Full-time</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/4 p-4">
                            <div class="flex md:justify-end">
                                <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">Apply now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center mt-6">
            <a x-on:click.prevent="showContent = true" href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 border border-gray-300 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Show more</a>
        </div>
    </div>
</section>

<div :class="{'hidden': !open}" class="fixed bottom-0 left-0 z-40 w-full h-full p-6" x-data="{ open: true }">
    <div class="p-14 h-full bg-white max-w-xl ml-auto overflow-y-auto rounded-3xl">
        <h3 class="mb-6 font-heading text-xl font-bold">About you privacy</h3>
        <p class="mb-10 text-lg text-gray-500 font-light">Vestibulum sit amet nisi volutpat, sagittis metus et, posuere magna. Sed venenatis metus turpis, eget malesuada nulla posuere facilisis volutpat.</p>
        <a href="#" x-on:click.prevent="open = false" class="mb-14 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>
        <h3 class="mb-6 font-heading text-xl font-bold">Manage Consent Preferences</h3>
        <div class="mb-2 px-4 py-4 bg-gray-50 rounded-xl">
            <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                    <p class="text-sm font-medium">Stricly Necessary Cookies</p>
                </div>
                <div class="w-auto p-2">
                    <p class="text-sm text-green-500 font-medium">Always active</p>
                </div>
            </div>
        </div>
        <div class="mb-2 px-4 py-3 border border-gray-100 rounded-xl">
            <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                    <p class="text-sm font-medium">Funcional Cookies</p>
                </div>
                <div class="w-auto p-2">
                    <div :class="{'bg-green-50': toggle, 'bg-gray-50': !toggle}" class="w-10 bg-gray-50 border border-gray-100 rounded-full cursor-pointer transition-all duration-200" x-on:click="toggle = !toggle" x-data="{ toggle: false }">
                        <div class="p-0.5">
                            <div :class="{'left-full -translate-x-full bg-green-500': toggle, 'bg-gray-500': !toggle}" class="relative w-4 h-4 left-0 transform bg-gray-500 rounded-full transition-all duration-200"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-2 px-4 py-3 border border-gray-100 rounded-xl">
            <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                    <p class="text-sm font-medium">Performance Cookies</p>
                </div>
                <div class="w-auto p-2">
                    <div :class="{'bg-green-50': toggle, 'bg-gray-50': !toggle}" class="w-10 bg-gray-50 border border-gray-100 rounded-full cursor-pointer transition-all duration-200" x-on:click="toggle = !toggle" x-data="{ toggle: false }">
                        <div class="p-0.5">
                            <div :class="{'left-full -translate-x-full bg-green-500': toggle, 'bg-gray-500': !toggle}" class="relative w-4 h-4 left-0 transform bg-gray-500 rounded-full transition-all duration-200"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-10 px-4 py-3 border border-gray-100 rounded-xl">
            <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                    <p class="text-sm font-medium">Personalised ads and content</p>
                </div>
                <div class="w-auto p-2">
                    <div :class="{'bg-green-50': toggle, 'bg-gray-50': !toggle}" class="w-10 bg-gray-50 border border-gray-100 rounded-full cursor-pointer transition-all duration-200" x-on:click="toggle = !toggle" x-data="{ toggle: false }">
                        <div class="p-0.5">
                            <div :class="{'left-full -translate-x-full bg-green-500': toggle, 'bg-gray-500': !toggle}" class="relative w-4 h-4 left-0 transform bg-gray-500 rounded-full transition-all duration-200"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap gap-3">
            <a href="#" class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Reject all</a>
            <a href="#" 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-200 rounded-full focus:ring-4 focus:ring-gray-200 focus:ring-opacity-50 transition duration-200">Submit my choices</a>
        </div>
    </div>
</div>

<section class="py-24 md:py-40 bg-gray-50 overflow-hidden" x-data="{ showContent: false, slideWidth: 0, activeSlide: 0, slideCount: 2 }">
    <div class="container mx-auto px-4">
        <h2 class="mb-24 font-heading text-4xl md:text-5xl font-bold">Recent happenings and updates</h2>
        <div class="relative">
            <a href="#" x-on:click.prevent="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1, activeSlide < slideCount ? slideWidth += $refs['slide' + activeSlide].offsetWidth : slideCount, activeSlide == slideCount ? (slideWidth = 0, activeSlide = 0) : null" class="absolute top-6 right-6 md:top-1/2 md:right-0 xl:right-36 md:-transform-y-1/2 z-10 inline-flex justify-center items-center text-center h-12 px-6 font-semibold text-white hover:text-white focus:text-white bg-white hover:bg-gray-100 focus:bg-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 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.52252 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.52252 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.52252 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.52252 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36446 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.86658 2.10093 8.68464 2.28591Z" fill="#060918"></path>
                </svg>
            </a>
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-36">
                <div x-ref="slide1" class="flex-shrink-0 max-w-full p-36">
                    <div class="flex flex-wrap justify-center -m-6 lg:-m-12">
                        <div class="max-w-lg w-full md:w-1/2 p-6 lg:p-12">
                            <div class="relative bg-white overflow-hidden rounded-3xl">
                                <div class="group relative overflow-hidden" style="height: 308px">
                                    <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/people2.jpg" alt="">
                                </div>
                                <div class="pt-10 px-10 pb-12">
                                    <a href="#" class="hover:underline">
                                        <h3 class="mb-4 font-heading text-2xl font-bold leading-tight">2023 Remote Work: A Comprehensive Guide</h3>
                                    </a>
                                    <p class="text-gray-500 font-medium">I have embraced remote work for well over six years, and possibly much longer by the time you come across this—well before the global pandemic pushed professionals to transition their offices to their homes.</p>
                                </div>
                            </div>
                        </div>
                        <div class="max-w-lg w-full md:w-1/2 p-6 lg:p-12">
                            <div class="flex flex-col h-full relative bg-white overflow-hidden rounded-3xl">
                                <div class="group relative overflow-hidden" style="height: 308px">
                                    <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/woman.jpg" alt="">
                                </div>
                                <div class="pt-10 px-10 pb-12">
                                    <a href="#" class="hover:underline">
                                        <h3 class="mb-4 font-heading text-2xl font-bold leading-tight">Mastering the Art of Project Management Success</h3>
                                    </a>
                                    <p class="text-gray-500 font-medium">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>
                        </div>
                    </div>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 max-w-full p-36">
                    <div class="flex flex-wrap justify-center -m-6 lg:-m-12">
                        <div class="max-w-lg w-full md:w-1/2 p-6 lg:p-12">
                            <div class="relative bg-white overflow-hidden rounded-3xl">
                                <div class="group relative overflow-hidden" style="height: 308px">
                                    <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/people2.jpg" alt="">
                                </div>
                                <div class="pt-10 px-10 pb-12">
                                    <a href="#" class="hover:underline">
                                        <h3 class="mb-4 font-heading text-2xl font-bold leading-tight">Efficient Work Management Tools for Businesses</h3>
                                    </a>
                                    <p class="text-gray-500 font-medium">I have embraced remote work for well over six years, and possibly much longer by the time you come across this—well before the global pandemic pushed professionals to transition their offices to their homes.</p>
                                </div>
                            </div>
                        </div>
                        <div class="max-w-lg w-full md:w-1/2 p-6 lg:p-12">
                            <div class="flex flex-col h-full relative bg-white overflow-hidden rounded-3xl">
                                <div class="group relative overflow-hidden" style="height: 308px">
                                    <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/woman.jpg" alt="">
                                </div>
                                <div class="pt-10 px-10 pb-12">
                                    <a href="#" class="hover:underline">
                                        <h3 class="mb-4 font-heading text-2xl font-bold leading-tight">Tools for Businesses</h3>
                                    </a>
                                    <p class="text-gray-500 font-medium">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>
                        </div>
                    </div>
                </div>
                <div x-ref="slide3" :class="{'hidden': !showContent}" class="hidden flex-shrink-0 max-w-full p-36">
                    <div class="flex flex-wrap justify-center -m-6 lg:-m-12">
                        <div class="max-w-lg w-full md:w-1/2 p-6 lg:p-12">
                            <div class="relative bg-white overflow-hidden rounded-3xl">
                                <div class="group relative overflow-hidden" style="height: 308px">
                                    <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/people2.jpg" alt="">
                                </div>
                                <div class="pt-10 px-10 pb-12">
                                    <a href="#" class="hover:underline">
                                        <h3 class="mb-4 font-heading text-2xl font-bold leading-tight">Keys to Success</h3>
                                    </a>
                                    <p class="text-gray-500 font-medium">I have embraced remote work for well over six years, and possibly much longer by the time you come across this—well before the global pandemic pushed professionals to transition their offices to their homes.</p>
                                </div>
                            </div>
                        </div>
                        <div class="max-w-lg w-full md:w-1/2 p-6 lg:p-12">
                            <div class="flex flex-col h-full relative bg-white overflow-hidden rounded-3xl">
                                <div class="group relative overflow-hidden" style="height: 308px">
                                    <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/woman.jpg" alt="">
                                </div>
                                <div class="pt-10 px-10 pb-12">
                                    <a href="#" class="hover:underline">
                                        <h3 class="mb-4 font-heading text-2xl font-bold leading-tight">The Ultimate Software Solution for Businesses</h3>
                                    </a>
                                    <p class="text-gray-500 font-medium">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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" x-on:click.prevent="showContent = true, slideCount = 3" :class="{'hidden': showContent}" class="relative inline-flex justify-center items-center text-center h-18 mt-24 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">View all news</a>
    </div>
</section>

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

<section class="py-24 md:py-40" x-data="{ pricing: ''}" x-init="pricing = $refs.pricing1.textContent" style="background: url('fily-assets/pricing/bg.jpg'); background-size: cover;">
    <div class="container mx-auto px-4">
        <div class="mb-20 max-w-3xl mx-auto text-center">
            <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center text-white">Pricing plans</h2>
            <p class="mb-24 text-white text-xl font-medium">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="relative p-1.5 max-w-sm mx-auto border border-white rounded-full transition duration-200">
                <div class="flex">
                    <a x-ref="pricing1" x-on:click.prevent="pricing = $refs.pricing1.textContent" href="#" :class="{'bg-blue-500 text-white': $refs.pricing1.textContent == pricing, 'text-white': $refs.pricing1.textContent != pricing}" class="flex justify-center text-center w-full py-4 px-6 font-semibold text-white bg-blue-500 rounded-full transition duration-200">Monthly billing</a>
                    <a x-ref="pricing2" x-on:click.prevent="pricing = $refs.pricing2.textContent" href="#" :class="{'bg-blue-500 text-white': $refs.pricing2.textContent == pricing, 'text-white': $refs.pricing2.textContent != pricing}" class="flex justify-center text-center w-full py-4 px-6 font-semibold 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="h-full overflow-hidden border border-white rounded-3xl">
                    <div class="relative h-full">
                        <div class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-10 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-2xl font-bold text-white">Starter</h3>
                                    <p class="mb-5 text-lg text-white text-opacity-70 font-medium">Best for personal use</p>
                                    <div class="mb-10 pb-10 border-b border-white border-opacity-70">
                                        <span class="text-5xl font-bold text-white">$0</span>
                                        <span class="text-white 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-white text-opacity-70 hover:text-opacity-50">
                                                <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-black 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-black 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-0">
                                            <div class="w-auto p-2">
                                                <div class="flex items-center justify-center w-7 h-7 bg-black 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="font-light">(limited to 3)</span></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-black focus:text-black bg-transparent hover:bg-white focus:bg-white rounded-full border border-white border-opacity-70 focus:ring-4 focus:ring-gray-50 focus:ring-opacity-50 transition duration-200">Start for free</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="h-full overflow-hidden border border-white rounded-3xl">
                    <div class="relative h-full">
                        <div class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-10 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-2xl font-bold text-white">Enterprise</h3>
                                    <p class="mb-5 text-lg text-white text-opacity-70 font-medium">For large teams &amp; corporations</p>
                                    <div class="mb-10 pb-10 border-b border-white border-opacity-70">
                                        <span :class="{'hidden': $refs.pricing2.textContent == pricing}" class="text-5xl font-bold text-white">$32</span>
                                        <span :class="{'hidden': $refs.pricing1.textContent == pricing}" class="hidden text-5xl font-bold text-white">$64</span>
                                        <span :class="{'hidden': $refs.pricing2.textContent == pricing}" class="text-white font-medium">/per month</span>
                                        <span :class="{'hidden': $refs.pricing1.textContent == pricing}" class="hidden text-white 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-white text-opacity-70 hover:text-opacity-50">
                                                <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-black 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-black 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-0">
                                            <div class="w-auto p-2">
                                                <div class="flex items-center justify-center w-7 h-7 bg-black 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>
                                    </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-black focus:text-black bg-transparent hover:bg-white focus:bg-white rounded-full border border-white border-opacity-70 focus:ring-4 focus:ring-gray-50 focus:ring-opacity-50 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="h-full overflow-hidden border border-white rounded-3xl">
                    <div class="relative h-full">
                        <div class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-10 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-2xl font-bold text-white">Business</h3>
                                    <p class="mb-5 text-lg text-white text-opacity-70 font-medium">Best for business owners</p>
                                    <div class="mb-10 pb-10 border-b border-white border-opacity-70">
                                        <span :class="{'hidden': $refs.pricing2.textContent == pricing}" class="text-5xl font-bold text-white">$68</span>
                                        <span :class="{'hidden': $refs.pricing1.textContent == pricing}" class="hidden text-5xl font-bold text-white">$136</span>
                                        <span :class="{'hidden': $refs.pricing2.textContent == pricing}" class="text-white font-medium">/per month</span>
                                        <span :class="{'hidden': $refs.pricing1.textContent == pricing}" class="hidden text-white 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-white text-opacity-70 hover:text-opacity-50">
                                                <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-black 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-black 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-0">
                                            <div class="w-auto p-2">
                                                <div class="flex items-center justify-center w-7 h-7 bg-black 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>
                                    </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-black focus:text-black bg-transparent hover:bg-white focus:bg-white rounded-full border border-white border-opacity-70 focus:ring-4 focus:ring-gray-50 focus:ring-opacity-50 transition duration-200">Choose a plan</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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

<section class="py-24 md:py-36" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl text-center font-bold">Features</h2>
        <p class="mb-20 text-xl text-gray-500 font-medium text-center">Explore the powerful features that make FilyTreck stand out in the realm of task management.</p>
        <div class="flex flex-wrap divide-y md:divide-y-0 md:divide-x divide-gray-100 -m-10">
            <div class="w-full md:w-1/3 p-10">
                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                    <div class="w-auto p-2.5">
                        <div class="flex items-center justify-center w-14 h-14 bg-orange-500 rounded-xl">
                            <img class="h-6" src="fily-assets/features/app.svg" alt="">
                        </div>
                    </div>
                    <div class="flex-1 p-2.5">
                        <h3 class="font-heading text-xl font-bold leading-snug">Everything in one app</h3>
                    </div>
                </div>
                <p class="text-gray-500 font-medium leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
            </div>
            <div class="w-full md:w-1/3 p-10">
                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                    <div class="w-auto p-2.5">
                        <div class="flex items-center justify-center w-14 h-14 bg-blue-500 rounded-xl">
                            <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                        </div>
                    </div>
                    <div class="flex-1 p-2.5">
                        <h3 class="font-heading text-xl font-bold">Increase in the productivity</h3>
                    </div>
                </div>
                <p class="text-gray-500 font-medium leading-relaxed">Experience a substantial boost in productivity with our streamlined approach, optimizing your workflow and time management.</p>
            </div>
            <div class="w-full md:w-1/3 p-10">
                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                    <div class="w-auto p-2.5">
                        <div class="flex items-center justify-center w-14 h-14 bg-purple-500 rounded-xl">
                            <img class="h-6" src="fily-assets/features/comments.svg" alt="">
                        </div>
                    </div>
                    <div class="flex-1 p-2.5">
                        <h3 class="font-heading text-xl font-bold leading-snug">Efficient contact with the client</h3>
                    </div>
                </div>
                <p class="text-gray-500 font-medium leading-relaxed">Facilitate seamless communication and effortless engagement with clients through our efficient features.</p>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-10">
                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                    <div class="w-auto p-2.5">
                        <div class="flex items-center justify-center w-14 h-14 bg-orange-500 rounded-xl">
                            <img class="h-6" src="fily-assets/features/app.svg" alt="">
                        </div>
                    </div>
                    <div class="flex-1 p-2.5">
                        <h3 class="font-heading text-xl font-bold leading-snug">Task Manager</h3>
                    </div>
                </div>
                <p class="text-gray-500 font-medium leading-relaxed">Organize and prioritize tasks for maximum productivity.</p>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-10">
                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                    <div class="w-auto p-2.5">
                        <div class="flex items-center justify-center w-14 h-14 bg-blue-500 rounded-xl">
                            <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                        </div>
                    </div>
                    <div class="flex-1 p-2.5">
                        <h3 class="font-heading text-xl font-bold">Secure Payments</h3>
                    </div>
                </div>
                <p class="text-gray-500 font-medium leading-relaxed">Handle transactions securely within the app.</p>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-10">
                <div class="flex flex-wrap items-center -m-2.5 mb-8">
                    <div class="w-auto p-2.5">
                        <div class="flex items-center justify-center w-14 h-14 bg-purple-500 rounded-xl">
                            <img class="h-6" src="fily-assets/features/comments.svg" alt="">
                        </div>
                    </div>
                    <div class="flex-1 p-2.5">
                        <h3 class="font-heading text-xl font-bold leading-snug">Analytics Snapshot</h3>
                    </div>
                </div>
                <p class="text-gray-500 font-medium leading-relaxed">View project insights and performance metrics at a glance.</p>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center mt-14">
            <a href="#" x-on:click.prevent="showContent = true" class="inline-flex justify-center items-center text-center h-18 p-8 px-10 font-semibold bg-white hover:bg-gray-50 focus:bg-ping-600 rounded-full border border-gray-100 focus:ring-4 focus:ring-gray-100 transition duration-200">See all features</a>
        </div>
    </div>
</section>