hushyourmoney/web/pages/compare.vue

<script setup lang="ts">
useHead({
    title: `Compare Privacy Solutions — Hush Your Money`,
    meta: [
        { name: 'description', content: `Hush Your Money makes spending safu.` }
    ],
})

/* Initialize stores. */
import { useSystemStore } from '@/stores/system'
const System = useSystemStore()

// onMounted(() => {
//     console.log('Mounted!')
//     // Now it's safe to perform setup operations.
// })

// onBeforeUnmount(() => {
//     console.log('Before Unmount!')
//     // Now is the time to perform all cleanup operations.
// })
</script>

<template>
    <main class="">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="mx-auto max-w-4xl text-center">
                <p class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
                    Compare Privacy Solutions
                </p>
            </div>

            <p class="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
                We take a detailed look, below the surface of 5 alternative Privacy Solutions, to learn how <span class="font-bold">Hush Network</span> measures up.
            </p>

            <section>
                <ol>
                    <li>Monero</li>

                    <NuxtLink to="https://piratechain.com/" target="_blank" class="text-blue-500 hover:underline">
                        Pirate Chain
                    </NuxtLink>

                    <li>Firo</li>

                    <li>Zano</li>

                    <li>Zcash</li>
                </ol>
            </section>

            <!-- xs to lg -->
            <div class="mx-auto mt-12 max-w-md space-y-8 sm:mt-16 lg:hidden">

                <section class="rounded-xl bg-gray-400/5 p-8 ring-1 ring-inset ring-gray-200">
                    <h3 id="tier-essential" class="text-sm font-semibold leading-6 text-gray-900">
                        Hush Network
                    </h3>

                    <p class="mt-2 flex items-baseline gap-x-1 text-gray-900">
                        <span class="text-4xl font-bold">$29</span>
                        <span class="text-sm font-semibold">/month</span>
                    </p>

                    <a
                        href="#"
                        aria-describedby="tier-essential"
                        class="mt-8 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                    >
                        Buy plan
                    </a>

                    <ul role="list" class="mt-10 space-y-4 text-sm leading-6 text-gray-900">
                        <li>
                            <ul role="list" class="space-y-4">
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Integrations </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Shared links </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Importing and exporting </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span>
                                        Team members
                                        <span class="text-sm leading-6 text-gray-500">(Up to 20 users)</span>
                                    </span>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul role="list" class="space-y-4">
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Advanced analytics </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Basic reports </span>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul role="list" class="space-y-4">
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> 24/7 online support </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Quarterly product workshops </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Priority phone support </span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </section>

                <section class="p-8">
                    <h3 id="tier-basic" class="text-sm font-semibold leading-6 text-gray-900">Zcash</h3>

                    <p class="mt-2 flex items-baseline gap-x-1 text-gray-900">
                        <span class="text-4xl font-bold">$9</span>
                        <span class="text-sm font-semibold">/month</span>
                    </p>

                    <a
                        href="#"
                        aria-describedby="tier-basic"
                        class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                    >
                        Buy plan
                    </a>

                    <ul role="list" class="mt-10 space-y-4 text-sm leading-6 text-gray-900">
                        <li>
                            <ul role="list" class="space-y-4">
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Integrations </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Shared links </span>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul role="list" class="space-y-4">
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Advanced analytics </span>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul role="list" class="space-y-4">
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> 24/7 online support </span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </section>

                <section class="p-8">
                    <h3 id="tier-premium" class="text-sm font-semibold leading-6 text-gray-900">Zano</h3>
                    <p class="mt-2 flex items-baseline gap-x-1 text-gray-900">
                        <span class="text-4xl font-bold">$59</span>
                        <span class="text-sm font-semibold">/month</span>
                    </p>
                    <a
                        href="#"
                        aria-describedby="tier-premium"
                        class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                    >
                        Buy plan
                    </a>
                    <ul role="list" class="mt-10 space-y-4 text-sm leading-6 text-gray-900">
                        <li>
                            <ul role="list" class="space-y-4">
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Integrations </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Shared links </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Importing and exporting </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span>
                                        Team members
                                        <span class="text-sm leading-6 text-gray-500">(Up to 50 users)</span>
                                    </span>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul role="list" class="space-y-4">
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Advanced analytics </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Basic reports </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Professional reports </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Custom report builder </span>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul role="list" class="space-y-4">
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> 24/7 online support </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Quarterly product workshops </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> Priority phone support </span>
                                </li>
                                <li class="flex gap-x-3">
                                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span> 1:1 onboarding tour </span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </section>
            </div>

            <!-- lg+ -->
            <div class="isolate mt-20 hidden lg:block">
                <div class="relative -mx-8">
                    <div class="absolute inset-x-4 inset-y-0 -z-10 flex">
                        <div class="flex w-1/3 px-4" style="margin-left: 50%;" aria-hidden="true">
                            <div class="w-full rounded-t-xl border-x border-t border-gray-900/10 bg-gray-400/5"></div>
                        </div>
                    </div>

                    <table class="w-full table-fixed border-separate border-spacing-x-8 text-left">
                        <caption class="sr-only">
                            Pricing plan comparison
                        </caption>
                        <colgroup>
                            <col class="w-1/3" />
                            <col class="w-1/3" />
                            <col class="w-1/3" />
                        </colgroup>
                        <thead>
                            <tr>
                                <td></td>
                                <th scope="col" class="px-6 pt-6 xl:px-8 xl:pt-8">
                                    <div class="text-sm font-semibold leading-7 text-gray-900">Hush Network</div>
                                </th>
                                <th scope="col" class="px-6 pt-6 xl:px-8 xl:pt-8">
                                    <div class="text-sm font-semibold leading-7 text-gray-900">Zcash</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"><span class="sr-only">Price</span></th>
                                <td class="px-6 pt-2 xl:px-8">
                                    <div class="flex items-baseline gap-x-1 text-gray-900">
                                        <span class="text-4xl font-bold">$9</span>
                                        <span class="text-sm font-semibold leading-6">/month</span>
                                    </div>
                                    <a
                                        href="#"
                                        class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                                    >
                                        Buy plan
                                    </a>
                                </td>
                                <td class="px-6 pt-2 xl:px-8">
                                    <div class="flex items-baseline gap-x-1 text-gray-900">
                                        <span class="text-4xl font-bold">$29</span>
                                        <span class="text-sm font-semibold leading-6">/month</span>
                                    </div>
                                    <a
                                        href="#"
                                        class="mt-8 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                                    >
                                        Buy plan
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <th scope="colgroup" colspan="3" class="pb-4 pt-8 text-sm font-semibold leading-6 text-gray-900">
                                    Features
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                                </th>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    Integrations
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Essential</span>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    Shared links
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Essential</span>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    Importing and exporting
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Essential</span>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    Team members
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <div class="text-center text-sm leading-6 text-gray-500">Up to 20 users</div>
                                </td>
                            </tr>

                            <tr>
                                <th scope="colgroup" colspan="3" class="pb-4 pt-16 text-sm font-semibold leading-6 text-gray-900">
                                    Reporting
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                                </th>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    Advanced analytics
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Essential</span>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    Basic reports
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Essential</span>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    Professional reports
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Essential</span>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    Custom report builder
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Essential</span>
                                </td>
                            </tr>

                            <tr>
                                <th scope="colgroup" colspan="3" class="pb-4 pt-16 text-sm font-semibold leading-6 text-gray-900">
                                    Support
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                                </th>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    24/7 online support
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Essential</span>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    Quarterly product workshops
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Essential</span>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    Priority phone support
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Included in Essential</span>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row" class="py-4 text-sm font-normal leading-6 text-gray-900">
                                    1:1 onboarding tour
                                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                                </th>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Basic</span>
                                </td>
                                <td class="px-6 py-4 xl:px-8">
                                    <svg class="mx-auto h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Not included in Essential</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
</template>