analytics/lib/plausible_web/templates/page/index.html.eex

<div class="relative bg-gray-50 overflow-hidden">
  <div class="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full">
    <div class="relative h-full max-w-screen-xl mx-auto">
      <svg class="absolute right-full transform translate-y-1/4 translate-x-1/4 lg:translate-x-1/2" width="404" height="784" fill="none" viewBox="0 0 404 784">
        <defs>
        <pattern id="f210dbf6-a58d-4871-961e-36d5016a0f49" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
        </pattern>
        </defs>
        <rect width="404" height="784" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)" />
      </svg>
      <svg class="absolute left-full transform -translate-y-3/4 -translate-x-1/4 md:-translate-y-1/2 lg:-translate-x-1/2" width="404" height="784" fill="none" viewBox="0 0 404 784">
        <defs>
        <pattern id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
        </pattern>
        </defs>
        <rect width="404" height="784" fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)" />
      </svg>
    </div>
  </div>

  <div class="relative container pb-12 lg:pb-16 xl:pb-20">
    <div class="mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 xl:mt-28">
      <div class="text-center">
        <h1 class="text-3xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-4xl sm:leading-none md:text-5xl">
          Simple and privacy-friendly
          <br class="xl:hidden" />
          <span class="text-indigo-600">alternative to Google Analytics</span>
        </h1>
        <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
        Plausible is a lightweight and open-source website analytics tool. It doesn’t use cookies and is fully compliant with GDPR, CCPA and PECR.
        </p>
        <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
          <div class="rounded-md shadow">
            <a href="/register" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
              Get started
            </a>
          </div>
          <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
            <a href="/plausible.io" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
              Live demo
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="relative">
  <div class="max-w-5xl mx-auto rounded shadow-2xl" style="margin-bottom: -36rem">
    <%= img_tag(PlausibleWeb.Router.Helpers.static_path(@conn, "/images/screenshot.png")) %>
  </div>
</div>

<div class="py-24 bg-white">
  <div style="padding-top: 36rem;"></div>
  <div class="container mx-auto">
    <div class="lg:text-center">
      <h2 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
        Why use Plausible?
      </h2>
      <p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 lg:mx-auto">
        Plausible is built for privacy-conscious website owners. Here’s what makes it a great Google Analytics alternative
      </p>
    </div>

    <div class="mt-16">
      <ul class="md:grid md:grid-cols-2 md:col-gap-8 md:row-gap-16">
        <li>
          <div class="flex">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path d="M13 7H21M21 7V15M21 7L13 15L9 11L3 17" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <h3 class="text-lg leading-6 font-medium text-gray-900">Check website traffic and site analytics in 1 minute</h3>
              <p class="mt-2 text-base leading-6 text-gray-500">
              Plausible is simple and it cuts through the noise. No layers of menus, no need
              for custom reports. Get all the important insights on one single page. No training necessary.
              </p>
            </div>
          </div>
        </li>

        <li class="mt-10 md:mt-0">
          <div class="flex">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path d="M13 10V3L4 14H11L11 21L20 10L13 10Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <h3 class="text-lg leading-6 font-medium text-gray-900">Lightweight script which keeps your site speed fast</h3>
              <p class="mt-2 text-base leading-6 text-gray-500">
              Plausible script is 14 times smaller than Google Analytics script. You will reduce your page weight and your site will load faster.
              </p>
            </div>
          </div>
        </li>

        <li class="mt-10 md:mt-0">
          <div class="flex">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <h3 class="text-lg leading-6 font-medium text-gray-900">Doesn’t track nor collect any personal data</h3>
              <p class="mt-2 text-base leading-6 text-gray-500">
              Plausible respects the privacy of your visitors. Your traffic data is not used for any other purposes. You fully own and control it. See our data policy for details.
              </p>
            </div>
          </div>
        </li>

        <li class="mt-10 md:mt-0">
          <div class="flex">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path d="M9 12L11 14L15 10M20.6179 5.98434C20.4132 5.99472 20.2072 5.99997 20 5.99997C16.9265 5.99997 14.123 4.84453 11.9999 2.94434C9.87691 4.84446 7.07339 5.99985 4 5.99985C3.79277 5.99985 3.58678 5.9946 3.38213 5.98422C3.1327 6.94783 3 7.95842 3 9.00001C3 14.5915 6.82432 19.2898 12 20.622C17.1757 19.2898 21 14.5915 21 9.00001C21 7.95847 20.8673 6.94791 20.6179 5.98434Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <h3 class="text-lg leading-6 font-medium text-gray-900">No cookie banners or GDPR/CCPA consent needed</h3>
              <p class="mt-2 text-base leading-6 text-gray-500">
              Plausible does not use cookies and is fully compliant with GDPR, CCPA, PECR and other privacy regulations out of the box.
              </p>
            </div>
          </div>
        </li>

        <li class="mt-10 md:mt-0">
          <div class="flex">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path d="M3 21V17M3 17V5C3 3.89543 3.89543 3 5 3H11.5L12.5 4H21L18 10L21 16H12.5L11.5 15H5C3.89543 15 3 15.8954 3 17ZM12 3.5V9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <h3 class="text-lg leading-6 font-medium text-gray-900">Define key goals and track conversions</h3>
              <p class="mt-2 text-base leading-6 text-gray-500">
              Set custom events or page URLs as your goals and see how they convert over time to understand and identify the trends that matter.
              </p>
            </div>
          </div>
        </li>

        <li class="mt-10 md:mt-0">
          <div class="flex">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path d="M3 8L10.8906 13.2604C11.5624 13.7083 12.4376 13.7083 13.1094 13.2604L21 8M5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <h3 class="text-lg leading-6 font-medium text-gray-900">Get weekly or monthly reports directly into your inbox</h3>
              <p class="mt-2 text-base leading-6 text-gray-500">
              Keep an eye on your traffic with automated email reports. Email reports can be scheduled to be sent to multiple recipients.
              </p>
            </div>
          </div>
        </li>

        <li class="mt-10 md:mt-0">
          <div class="flex">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <h3 class="text-lg leading-6 font-medium text-gray-900">Open your web analytics to everyone</h3>
              <p class="mt-2 text-base leading-6 text-gray-500">
              Your stats are private by default but you can choose to be transparent and make them public so anyone with your custom link can view them.
              </p>
            </div>
          </div>
        </li>

        <li class="mt-10 md:mt-0">
          <div class="flex">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path d="M12 15V17M6 21H18C19.1046 21 20 20.1046 20 19V13C20 11.8954 19.1046 11 18 11H6C4.89543 11 4 11.8954 4 13V19C4 20.1046 4.89543 21 6 21ZM16 11V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V11H16Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <h3 class="text-lg leading-6 font-medium text-gray-900">Share the stats privately with your clients</h3>
              <p class="mt-2 text-base leading-6 text-gray-500">
              You can share your stats privately by generating a shared link. This link is impossible to guess but
              you can add password protection for extra security.
              </p>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </div>
</div>

<div class="py-16 bg-gray-50 overflow-hidden lg:py-24">
  <div class="relative container mx-auto px-4 sm:px-6 lg:px-8">
    <svg class="hidden lg:block absolute left-full transform -translate-x-1/2 -translate-y-1/4" width="404" height="784" fill="none" viewBox="0 0 404 784">
      <defs>
        <pattern id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
          <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
        </pattern>
      </defs>
      <rect width="404" height="784" fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)" />
    </svg>

    <div class="relative lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
      <div class="relative">
        <h2 class="text-3xl leading-9 font-extrabold text-gray-900 tracking-tight sm:text-4xl sm:leading-10">
          Simple analytics at a glance
        </h2>
        <p class="mt-3 text-lg leading-7 text-gray-500">
        Google Analytics is overkill for most site owners. Plausible is easy to use and understand with no training or prior experience.
        </p>

        <ul class="mt-10">
          <li>
            <div class="flex">
              <div class="flex-shrink-0">
                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                  <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                    <path d="M12 6V4M12 6C10.8954 6 10 6.89543 10 8C10 9.10457 10.8954 10 12 10M12 6C13.1046 6 14 6.89543 14 8C14 9.10457 13.1046 10 12 10M6 18C7.10457 18 8 17.1046 8 16C8 14.8954 7.10457 14 6 14M6 18C4.89543 18 4 17.1046 4 16C4 14.8954 4.89543 14 6 14M6 18V20M6 14V4M12 10V20M18 18C19.1046 18 20 17.1046 20 16C20 14.8954 19.1046 14 18 14M18 18C16.8954 18 16 17.1046 16 16C16 14.8954 16.8954 14 18 14M18 18V20M18 14V4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
              <div class="ml-4">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Unique visitors, total page views and the bounce rate</h3>
                <p class="mt-2 text-base leading-6 text-gray-500">
                Choose the time range that you want to analyze. The visitor numbers are automatically presented on an hourly, daily or monthly graph.
                </p>
              </div>
            </div>
          </li>
          <li class="mt-10">
            <div class="flex">
              <div class="flex-shrink-0">
                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                  <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                    <path d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15M9 5C9 6.10457 9.89543 7 11 7H13C14.1046 7 15 6.10457 15 5M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5M12 12H15M12 16H15M9 12H9.01M9 16H9.01" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
              <div class="ml-4">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Top referral sources and most visited pages</h3>
                <p class="mt-2 text-base leading-6 text-gray-500">
                  Answer the most important question about your website – where are your visitors coming from and what are they viewing?
                </p>
              </div>
            </div>
          </li>
          <li class="mt-10">
            <div class="flex">
              <div class="flex-shrink-0">
                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                  <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                    <path d="M17.6569 16.6569C16.7202 17.5935 14.7616 19.5521 13.4138 20.8999C12.6327 21.681 11.3677 21.6814 10.5866 20.9003C9.26234 19.576 7.34159 17.6553 6.34315 16.6569C3.21895 13.5327 3.21895 8.46734 6.34315 5.34315C9.46734 2.21895 14.5327 2.21895 17.6569 5.34315C20.781 8.46734 20.781 13.5327 17.6569 16.6569Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M15 11C15 12.6569 13.6569 14 12 14C10.3431 14 9 12.6569 9 11C9 9.34315 10.3431 8 12 8C13.6569 8 15 9.34315 15 11Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
              <div class="ml-4">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Visitor location and device stats</h3>
                <p class="mt-2 text-base leading-6 text-gray-500">
                See the list of countries your traffic is coming from. See the device, browser and operating system your visitors are using. All the basics in a completely anonymous way.
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="mt-10 -mx-4 relative lg:mt-0 lg:pl-8">
        <svg class="absolute left-1/2 transform -translate-x-1/2 translate-y-16 lg:hidden" width="784" height="404" fill="none" viewBox="0 0 784 404">
          <defs>
            <pattern id="ca9667ae-9f92-4be7-abcb-9e3d727f2941" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
              <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
            </pattern>
          </defs>
          <rect width="784" height="404" fill="url(#ca9667ae-9f92-4be7-abcb-9e3d727f2941)" />
        </svg>
        <%= img_tag(PlausibleWeb.Router.Helpers.static_path(@conn, "/images/screenshot-countries.png"), class: "relative mx-auto shadow-xl", alt: "Screenshot of referrers") %>
      </div>
    </div>
  </div>
</div>

<div class="bg-white pt-12">
  <div class="container mx-auto py-12 lg:py-16">
    <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
      <div class="mt-8 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-0 lg:grid-cols-2">
        <div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
          <img class="max-h-12" src="https://upload.wikimedia.org/wikipedia/commons/2/20/WordPress_logo.svg" alt="Wordpress" />
        </div>
        <div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
          <%= img_tag(PlausibleWeb.Router.Helpers.static_path(@conn, "/images/icon/ghost.svg"), class: "max-h-12", alt: "Ghost") %>
        </div>
        <div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
          <img class="max-h-8 mt-2" src="https://static1.squarespace.com/static/ta/579a2a93c534a544b31573c3/30/assets/pages/logomark/images/icons/icon-squarespace.svg?20181219" alt="Wix" />
        </div>
        <div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
          <img class="max-h-8 mt-2" src="https://upload.wikimedia.org/wikipedia/en/7/76/Wix.com_website_logo.svg" alt="Wix" />
        </div>
        <div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
          <img class="max-h-12" src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Weebly_logo.svg" alt="Weebly" />
        </div>
        <div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
          <img class="max-h-12" src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Google_Search_Console.svg" alt="Google Search Console" />
        </div>
      </div>
      <div class="mt-12 lg:mt-0 lg:px-8">
        <h2 class="text-3xl leading-9 font-extrabold text-gray-900 tracking-tight sm:text-4xl sm:leading-10">
          Integrates seamlessly with your favourite tools
        </h2>
        <p class="mt-3 max-w-3xl text-lg leading-7 text-gray-500">
        Plausible is simple to set up and integrate with popular tools such as WordPress, Ghost, Squarespace, Wix, Weebly and Google Search Console.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="py-12 bg-white overflow-hidden md:py-20 lg:py-24">
  <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <svg class="absolute top-full right-full transform translate-x-1/3 -translate-y-1/4 lg:translate-x-1/2 xl:-translate-y-1/2" width="404" height="404" fill="none" viewBox="0 0 404 404">
      <defs>
        <pattern id="ad119f34-7694-4c31-947f-5c9d249b21f3" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
          <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
        </pattern>
      </defs>
      <rect width="404" height="404" fill="url(#ad119f34-7694-4c31-947f-5c9d249b21f3)" />
    </svg>

    <div class="relative">
      <blockquote class="mt-8">
        <div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
          <p>
            &ldquo;Plausible is focused on exactly what I need: clear insights into my site visitors, without getting in my way.
          </p>
        </div>
        <footer class="mt-8">
          <div class="md:flex md:items-center md:justify-center">
            <div class="md:flex-shrink-0">
              <%= img_tag(PlausibleWeb.Router.Helpers.static_path(@conn, "/images/testimonials/felipe.jpg"), class: "mx-auto h-10 w-10 rounded-full", alt: "Image of Felipe Sere") %>
            </div>
            <div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
              <div class="text-base leading-6 font-medium text-gray-900">Felipe Sere</div>

              <svg class="hidden md:block mx-1 h-5 w-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
                <path d="M11 0h3L9 20H6l5-20z" />
              </svg>

              <div class="text-base leading-6 font-medium text-gray-500">Software Engineer, 8th Light</div>
            </div>
          </div>
        </footer>
      </blockquote>
    </div>
  </div>
</div>

<div class="bg-gray-900">
  <div class="pt-12 sm:pt-16 lg:pt-24">
    <div class="max-w-screen-xl mx-auto text-center px-4 sm:px-6 lg:px-8">
      <div class="max-w-3xl mx-auto lg:max-w-none">
        <p class="text-lg leading-6 font-semibold text-gray-300 uppercase tracking-wider">
          Pricing
        </p>
        <h2 class="mt-2 text-3xl leading-9 font-extrabold text-white sm:text-4xl sm:leading-10 lg:text-5xl lg:leading-none">
          Simple, traffic-based pricing
        </h2>
        <p class="mt-2 text-xl leading-7 text-gray-300">
          Sign up for 30-day unlimited trial. No credit card required.
        </p>
      </div>
    </div>
  </div>
  <div class="mt-8 pb-12 bg-gray-50 sm:mt-12 sm:pb-16 lg:mt-16 lg:pb-24">
    <div class="relative">
      <div class="absolute inset-0 h-3/4 bg-gray-900"></div>
      <div class="relative z-10 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-md mx-auto lg:max-w-5xl xl:max-w-6xl lg:grid lg:grid-cols-3 lg:gap-5">
          <div class="rounded-lg shadow-lg overflow-hidden">
            <div class="px-6 py-8 bg-white sm:p-10 sm:pb-6">
              <div>
                <span class="inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-indigo-100 text-indigo-600">
                  Personal
                </span>
              </div>
              <div class="mt-4 flex items-baseline text-6xl leading-none font-extrabold">
                $6
                <span class="ml-1 text-2xl leading-8 font-medium text-gray-500">
                  /mo
                </span>
              </div>
            </div>
            <div class="px-6 pt-6 pb-8 bg-gray-50 sm:p-10 sm:pt-6">
              <ul>
                <li class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                  Up to <b>10k pageviews per month</b>
                  </p>
                </li>
                <li class="mt-4 flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                    Unlimited websites
                  </p>
                </li>
                <li class="mt-4 flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                    100% Data ownership
                  </p>
                </li>
                <li class="mt-4 flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                    Email support
                  </p>
                </li>
              </ul>
              <div class="mt-6 rounded-md shadow">
                <a href="/register" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                  Get started
                </a>
              </div>
            </div>
          </div>
          <div class="mt-4 rounded-lg shadow-lg overflow-hidden lg:mt-0">
            <div class="px-6 py-8 bg-white sm:p-10 sm:pb-6">
              <div>
                <span class="inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-indigo-100 text-indigo-600">
                  Startup
                </span>
              </div>
              <div class="mt-4 flex items-baseline text-6xl leading-none font-extrabold">
                $12
                <span class="ml-1 text-2xl leading-8 font-medium text-gray-500">
                  /mo
                </span>
              </div>
            </div>
            <div class="px-6 pt-6 pb-8 bg-gray-50 sm:p-10 sm:pt-6">
              <ul>
                <li class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                  Up to <b>100k pageviews per month</b>
                  </p>
                </li>
                <li class="mt-4 flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                    Unlimited websites
                  </p>
                </li>
                <li class="mt-4 flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                    100% data ownership
                  </p>
                </li>
                <li class="mt-4 flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                    Priority support
                  </p>
                </li>
              </ul>
              <div class="mt-6 rounded-md shadow">
                <a href="/register" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                  Get started
                </a>
              </div>
            </div>
          </div>
          <div class="mt-4 rounded-lg shadow-lg overflow-hidden lg:mt-0">
            <div class="px-6 py-8 bg-white sm:p-10 sm:pb-6">
              <div>
                <span class="inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-indigo-100 text-indigo-600">
                  Business
                </span>
              </div>
              <div class="mt-4 flex items-baseline text-6xl leading-none font-extrabold">
                $36
                <span class="ml-1 text-2xl leading-8 font-medium text-gray-500">
                  /mo
                </span>
              </div>
            </div>
            <div class="px-6 pt-6 pb-8 bg-gray-50 sm:p-10 sm:pt-6">
              <ul>
                <li class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                  Up to <b>1m pageviews per month</b>
                  </p>
                </li>
                <li class="mt-4 flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                    Unlimited websites
                  </p>
                </li>
                <li class="mt-4 flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                    100% data ownership
                  </p>
                </li>
                <li class="mt-4 flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  <p class="ml-3 text-base leading-6 text-gray-700">
                    Priority support
                  </p>
                </li>
              </ul>
              <div class="mt-6 rounded-md shadow">
                <a href="/register" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                  Get started
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="bg-gray-50">
  <div class="container mx-auto pt-12 pb-16 sm:pt-16 sm:pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8">
    <h2 class="text-3xl leading-9 font-extrabold text-gray-900">
      Frequently asked questions
    </h2>
    <div class="mt-6 border-t-2 border-gray-100 pt-10">
      <dl class="md:grid md:grid-cols-2 md:gap-8">
        <div>
          <div>
            <h3 class="text-lg leading-6 font-medium text-gray-900">
            1. Can I use Plausible on more than one website?
            </h3>
            <div class="mt-2">
              <p class="text-base leading-6 text-gray-500">
              Yes. You can add as many websites as you want under a single account. You will be charged for the total pageviews on all of your websites combined. For example, on the 10k plan you can either have 10 websites that each get 1000 pageviews per month, or one website that gets 10,000 pageviews per month.
              </p>
            </div>
          </div>
          <div class="mt-12">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
            2. What happens if I go over my plan limit?
            </h3>
            <div class="mt-2">
              <p class="text-base leading-6 text-gray-500">
              You don't have to pay for a one-time spike in traffic, but if you go over your plan limit for 2 months in a row, we will contact you to discuss upgrade options.
              </p>
            </div>
          </div>
          <div class="mt-12">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
            3. Is Plausible open-source?
            </h3>
            <div class="mt-2">
              <p class="text-base leading-6 text-gray-500">
              Plausible is fully open-source and available <%= link("on Github", to: "https://github.com/plausible-insights/plausible", class: "text-indigo-600") %> so you can check out the code. We welcome feedback, have a public roadmap and are available to you via email.
              </p>
            </div>
          </div>
        </div>
        <div class="mt-12 md:mt-0">
          <div class="">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
            4. Why is Plausible not free like Google Analytics?
            </h3>
            <div class="mt-2">
              <p class="text-base leading-6 text-gray-500">
              Google Analytics is free because Google has built their company and their wealth by collecting and analyzing huge amounts of personal information from web users and using these personal and behavioral insights to sell advertisements.<br /><br />

              With Plausible, you 100% own and control all of your website data. This data is not being shared with or sold to any third-parties. Since we don't make money from targeted advertisement, we must ask for a small fee to keep the servers running.
              </p>
            </div>
          </div>
          <div class="mt-12">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
            5. How do you make sure my visitors' privacy is protected?
            </h3>
            <div class="mt-2">
              <p class="text-base leading-6 text-gray-500">
              We take painstaking care to not collect or store any personal information that could be tied back to the visitor. You own your data and we will never sell it or use it in nefarious ways. <%= link("Read more about our data policy", to: "/data-policy", class: "text-indigo-600") %>.
              </p>
            </div>
          </div>
        </div>
      </dl>
    </div>
  </div>
</div>

<div class="bg-gray-50 pb-12">
  <div class="container mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
    <h3 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
      Ready to dive in?
      <br />
      <span class="text-indigo-600">Start your free trial today.</span>
    </h3>
    <div class="mt-8 flex lg:flex-shrink-0 lg:mt-0">
      <div class="inline-flex rounded-md shadow">
        <a href="/register" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
          Get started
        </a>
      </div>
      <div class="ml-3 inline-flex rounded-md shadow">
        <a href="/plausible.io" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
          Live demo
        </a>
      </div>
    </div>
  </div>
</div>