Pricing UI Components – Filytreck Library

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

<section class="py-12 py-lg-24 py-xl-32 bg-dark overflow-hidden">
  <div class="container">
    <div class="mw-3xl mb-20 mx-auto text-center"><img class="img-fluid d-block mx-auto mb-6" src="fily-assets/logos/fily-treck-icon.svg" alt="">
      <h2 class="font-heading text-white mb-10">Pricing plans</h2>
      <p class="fs-6 fw-medium text-white mb-10">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="d-flex mb-24 align-items-center justify-content-center"><img class="img-fluid" src="fily-assets/pricing/avatar3.png" alt=""><img class="img-fluid ms-n2" src="fily-assets/pricing/avatar2.png" alt=""><img class="img-fluid ms-n2" src="fily-assets/pricing/avatar.png" alt=""><span class="ms-4 fs-9 fw-medium text-secondary">640k+ happy customers</span></div>
      <div class="d-inline-flex p-1 align-items-center justify-content-center border rounded-pill">
        <button class="btn px-6 py-5 text-secondary">Monthly billing</button>
        <button class="btn btn-primary px-6 py-5">Yearly billing</button>
      </div>
    </div>
  </div>
  <div class="mw-md mw-xl-8xl mx-auto px-5">
    <div class="row mx-xl-n5">
      <div class="col-xl-4 mb-8 mb-xl-0 px-xl-5">
        <div class="overflow-hidden h-100">
          <div class="position-relative h-100 bg-light rounded-3" style="padding: 1px;">
            <div class="position-absolute bottom-0 start-0 w-100 py-40 bg-shadow-bottom"></div>
            <div class="position-relative h-100 bg-dark px-6 px-sm-10 py-14 rounded-3">
              <h4 class="font-heading text-white mb-1">Starter</h4><span class="d-block fs-7 fw-medium text-light-dark mb-4">Best for personal use</span>
              <div class="d-flex align-items-end"><span class="fs-3 lh-1 text-white fw-medium">$0</span><span class="ms-2 lh-lg fw-medium text-secondary">/free forever</span></div>
              <div class="mt-10 pt-10 border-top border-secondary">
                <div class="d-flex mb-8 align-items-center justify-content-between"><span class="fs-6 fw-bold text-white">Features</span><a class="btn btn-outline-secondary border-0 bg-transparent d-flex align-items-center p-0" href="#"><span class="me-2">Show All</span>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                    </svg></a></div>
                <ul class="list-unstyled mb-12">
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Unlimited Time Tracking</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Unlimited Invoices</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Projects</span><span class="ms-1 fs-7 text-secondary">(limited to 3)</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Static Time Reports</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Desktop &amp; Mobile Apps</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Guest Access</span>
                  </li>
                </ul><a class="btn btn-outline-light" href="#">Start for free</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 mb-8 mb-xl-0 px-xl-5">
        <div class="overflow-hidden h-100">
          <div class="position-relative h-100 bg-light rounded-3" style="padding: 1px;">
            <div class="position-absolute bottom-0 start-0 w-100 py-40 bg-shadow-bottom"></div>
            <div class="position-relative h-100 bg-dark px-6 px-sm-10 py-14 rounded-3"><span class="position-absolute top-0 start-0 mt-8 ms-10 text-danger fs-9 fw-medium">Most popular</span>
              <h4 class="font-heading text-white mb-1">Enterprise</h4><span class="d-block fs-7 fw-medium text-light-dark mb-4">For large teams &amp; corporations</span>
              <div class="d-flex align-items-end"><span class="fs-3 lh-1 text-white fw-medium">$32</span><span class="ms-2 lh-lg fw-medium text-secondary">/free forever</span></div>
              <div class="mt-10 pt-10 border-top border-secondary">
                <div class="d-flex mb-8 align-items-center justify-content-between"><span class="fs-6 fw-bold text-white">Features</span><a class="btn btn-outline-secondary border-0 bg-transparent d-flex align-items-center p-0" href="#"><span class="me-2">Show All</span>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                    </svg></a></div>
                <ul class="list-unstyled mb-12">
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Unlimited Time Tracking</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Unlimited Invoices</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Projects</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Static Time Reports</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Desktop &amp; Mobile Apps</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Guest Access</span>
                  </li>
                </ul><a class="btn btn-outline-light" href="#">Choose a plan</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 px-xl-5">
        <div class="overflow-hidden h-100">
          <div class="position-relative h-100 bg-light rounded-3" style="padding: 1px;">
            <div class="position-absolute bottom-0 start-0 w-100 py-40 bg-shadow-bottom"></div>
            <div class="position-relative h-100 bg-dark px-6 px-sm-10 py-14 rounded-3">
              <h5 class="font-heading text-white mb-1">Business</h5><span class="d-block fs-7 fw-medium text-light-dark mb-4">Best for personal use</span>
              <div class="d-flex align-items-end"><span class="fs-3 lh-1 text-white fw-medium">$68</span><span class="ms-2 lh-lg fw-medium text-secondary">/per month</span></div>
              <div class="mt-10 pt-10 border-top border-secondary">
                <div class="d-flex mb-8 align-items-center justify-content-between"><span class="fs-6 fw-bold text-white">Features</span><a class="btn btn-outline-secondary border-0 bg-transparent d-flex align-items-center p-0" href="#"><span class="me-2">Show All</span>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                    </svg></a></div>
                <ul class="list-unstyled mb-12">
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Employee Scheduling &amp; Workload</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Unlimited Invoices</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Projects</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Gantt Charts</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Portfolio Gantt Chart</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="28" height="28" rx="14" fill="#273ACF"></rect>
                      <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Online Remote Assistance</span>
                  </li>
                </ul><a class="btn btn-outline-light" href="#">Choose a plan</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>