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

<div class="md:pt-12 bg-grey-lightest w-screen overflow-hidden">
  <div class="container max-w-2xl flex flex-col md:flex-row-reverse">
    <section class="hidden lg:block lg:w-2/5 relative">
      <svg height="600" width="600" style="position: absolute; right: -380px; top: 100px; filter: drop-shadow(0 15px 30px rgba(0, 0, 0, .11));">
        <circle cx="300" cy="300" r="300" fill="#6574cd" />
      </svg>

      <svg height="400" width="400" style="position: absolute; right: -60px; top: -30px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .11));">
        <circle cx="200" cy="200" r="200" fill="#b2b7ff" />
      </svg>

      <div class="w-3/4 bg-white shadow-lg rounded m-4 p-4 text-center absolute z-10" style="left: 75px;">
        <h2>Top Referrers</h2>
        <div class="text-grey-darker mt-1">by visitors</div>

        <div class="mt-8">
          <%= for {referrer, count} <- @demo_referrers do %>
            <div class="flex items-center justify-between my-2">
              <span><%= referrer %></span>
              <span><%= count %></span>
            </div>
            <%= PlausibleWeb.StatsView.bar(count, @demo_referrers) %>
          <% end %>
        </div>
      </div>

      <div class="w-3/4 bg-white shadow-lg rounded m-4 p-4 text-center absolute" style="left: calc(75%); top: 50px;">
        <h2>Top Countries</h2>
        <div class="text-grey-darker mt-1">by visitors</div>
        <div class="mt-8">
          <%= for {country, count} <- @demo_countries do %>
            <div class="flex items-center justify-between my-2">
              <span><%= Plausible.Stats.CountryName.from_iso3166(country) %></span>
              <span><%= count %></span>
            </div>
            <%= PlausibleWeb.StatsView.bar(count, @demo_countries, :orange) %>
          <% end %>
        </div>
      </div>
    </section>
    <section class="w-full text-center lg:text-left lg:w-3/5">
      <div class="pt-12 lg:pt-24"></div>
      <h1 class="text-3xl lg:text-4xl font-black">
        Simple analytics for your website
      </h1>
      <p class="font-normal text-grey-darker text-lg lg:text-2xl mt-3 leading-tight font-medium">
        Plausible is a lightweight, fully open-source alternative to Google Analytics
      </p>
      <%= link("Start free trial", to: "/register", class: "button w-full sm:w-auto mt-6 mr-2") %>
      <%= link("View live demo", to: "/plausible.io", class: "button button-outline w-full sm:w-auto mt-4 md:mt-0") %>
    </section>
  </div>
  <div class="pt-12 lg:pt-16"></div>
  <div class="lg:pt-24"></div>
  <div class="container relative mt-32">
    <h2 class="font-black">Why Plausible?</h2>
    <p class="text-lg mt-2 leading-normal">
    Plausible is built by and for privacy-conscious minimalists<br />
    Here’s what makes it different from other solutions
    </p>
  </div>
  <div class="container mt-12">
    <div class="flex flex-col md:flex-row items-center justify-between mx-auto leading-normal">
      <div class="w-full md:w-1/3 py-6 md:px-6 md:pl-0">
        <svg class="w-6 h-6 mr-1 text-indigo" style="transform: translateY(0.3rem);">
          <use xlink:href="#feather-check-circle" />
        </svg>
        <h3 class="inline">Clutter-free</h3>
        <p class="text-lg mt-2">
          Stop digging through complex reports to find what you’re looking for. Plausible presents the most important information to you on a single page.
        </p>
      </div>

      <div class="w-full md:w-1/3 py-6 md:px-6">
        <svg class="w-6 h-6 mr-1 text-indigo" style="transform: translateY(0.3rem);">
          <use xlink:href="#feather-check-circle" />
        </svg>
        <h3 class="inline">Lightweight</h3>
        <p class="text-lg mt-2">
          Plausible works by loading a script on your website, like Google Analytics. Our script is 14x smaller, making your website quicker to load.
        </p>
      </div>

      <div class="w-full md:w-1/3 py-6 md:px-6 md:pr-0">
        <svg class="w-6 h-6 mr-1 text-indigo" style="transform: translateY(0.3rem);">
          <use xlink:href="#feather-check-circle" />
        </svg>
        <h3 class="inline">Open source</h3>
        <p class="text-lg mt-2">
        Plausible is fully open source and <%= link("available on Github", to: "https://github.com/plausible-insights/plausible", class: "text-indigo") %>. Feel free to check out the code and <%= link("read in depth about our data policy", to: "/data-policy", class: "text-indigo") %>
        </p>
      </div>

    </div>
  </div>
  <div class="container mt-6">
    <div class="flex flex-col md:flex-row items-center justify-between mx-auto leading-normal">
      <div class="w-full md:w-1/3 py-6 md:px-6 md:pl-0">
        <svg class="w-6 h-6 mr-1 text-indigo" style="transform: translateY(0.3rem);">
          <use xlink:href="#feather-check-circle" />
        </svg>
        <h3 class="inline">Goals & Conversions</h3>
        <p class="text-lg mt-2">
          Find out which referrers are driving the most conversions to your site. Works with custom events or page URLs you want your visitors to reach.
        </p>
      </div>

      <div class="w-full md:w-1/3 py-6 md:px-6">
        <svg class="w-6 h-6 mr-1 text-indigo" style="transform: translateY(0.3rem);">
          <use xlink:href="#feather-check-circle" />
        </svg>
        <h3 class="inline">Search keywords</h3>
        <p class="text-lg mt-2">
          Integrate your dashboard with Google Search Console to get the most accurate reporting on your search keywords.
        </p>
      </div>

      <div class="w-full md:w-1/3 py-6 md:px-6 md:pr-0">
        <svg class="w-6 h-6 mr-1 text-indigo" style="transform: translateY(0.3rem);">
          <use xlink:href="#feather-check-circle" />
        </svg>
        <h3 class="inline">Email reports</h3>
        <p class="text-lg mt-2">
          Keep an eye on your traffic with a weekly email report including pageviews, visitor numbers, top pages and top referrers for the week.
        </p>
      </div>

    </div>
  </div>
  <div class="container my-12 md:my-24 text-center relative">
    <h2>Check out our analytics</h2>
    <%= link("View live demo →", to: "/plausible.io", class: "button mt-6") %>
  </div>
  <div class="bg-indigo-darker">
    <div class="container relative pt-16 mb-32">
      <h2 class="font-black text-white text-center text-3xl">Simple, traffic based pricing</h2>
      <h2 class="text-white text-center text-2xl text-indigo-lightest mb-12">Try Plausible free for 30 days</h2>
      <div class="pt-32"></div>
      <div class="pt-32"></div>

    </div>
  </div>
  <div class="relative w-full pricing-table">
    <div class="absolute w-full" style="top: -330px;">
      <div class="container px-0 flex flex-col md:flex-row justify-between items-center">

        <div class="flex-1 w-full my-4 md:w-auto px-4">
          <div class="bg-white rounded-lg shadow-lg z-50">
            <header class="bg-grey-lightest p-6 rounded-t-lg">
              <div class="uppercase font-bold text-indigo-dark">Hobby</div>
            </header>
            <div class="rounded-b-lg p-6 text-indigo-darkest">
              <div class="pb-2">
                <b class="text-3xl font-black">$6</b>
                <div class="text-grey-dark text-lg font-bold">per month</div>
              </div>
              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>Up to 10k pageviews/mo</span>
              </div>

              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>Unlimited websites</span>
              </div>

              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>100% data ownership</span>
              </div>

              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>Email support</span>
              </div>

              <div class="w-full text-center">
                <%= link("Start free trial →", to: "/register", class: "button mt-6 inline-block") %>
                <div class="my-2 text-sm text-grey-darker">No credit card required</div>
              </div>
            </div>
          </div>
        </div>

        <div class="flex-1 w-full my-4 md:w-auto px-4">
          <div class="bg-white rounded-lg shadow-lg z-50">
            <header class="bg-grey-lightest p-6 rounded-t-lg">
              <div class="uppercase font-bold text-indigo-dark">Startup</div>
            </header>
            <div class="rounded-b-lg p-6 text-indigo-darkest">
              <div class="pb-2">
                <b class="text-3xl font-black">$12</b>
                <div class="text-grey-dark text-lg font-bold">per month</div>
              </div>
              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>Up to 100k pageviews/mo</span>
              </div>

              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>Unlimited websites</span>
              </div>

              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>100% data ownership</span>
              </div>

              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>Priority support</span>
              </div>

              <div class="w-full text-center">
                <%= link("Start free trial →", to: "/register", class: "button mt-6 inline-block") %>
                <div class="my-2 text-sm text-grey-darker">No credit card required</div>
              </div>
            </div>
          </div>
        </div>

        <div class="flex-1 w-full my-4 md:w-auto px-4">
          <div class="bg-white rounded-lg shadow-lg z-50">
            <header class="bg-grey-lightest p-6 rounded-t-lg">
              <div class="uppercase font-bold text-indigo-dark">Business</div>
            </header>
            <div class="rounded-b-lg p-6 text-indigo-darkest">
              <div class="pb-2">
                <b class="text-3xl font-black">$36</b>
                <div class="text-grey-dark text-lg font-bold">per month</div>
              </div>
              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>Up to 1m pageviews/mo</span>
              </div>

              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>Unlimited websites</span>
              </div>

              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>100% data ownership</span>
              </div>

              <div class="my-4 font-medium">
                <svg class="feather mr-1 text-indigo"><use xlink:href="#feather-check-circle" /></svg>
                <span>Priority support</span>
              </div>

              <div class="w-full text-center">
                <%= link("Start free trial →", to: "/register", class: "button mt-6 inline-block") %>
                <div class="my-2 text-sm text-grey-darker">No credit card required</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="pt-16"></div>
  <div class="container my-32">
    <h3 class="font-black text-center text-2xl my-12">What people are saying</h3>
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="w-full md:w-31percent bg-white shadow rounded p-6">
        <svg class="w-8 h-8 text-grey-darkest">
          <use xlink:href="#testimonial-quotemark" />
        </svg>
        <p class="text-lg">Plausible is focused on exactly what I need: clear insights into my site visitors, without getting in my way</p>
        <div class="mt-2 md:mt-4 flex items-center justify-start">
          <a href="https://www.felipesere.com/">
            <%= img_tag(PlausibleWeb.Router.Helpers.static_path(@conn, "/images/testimonials/felipe.jpg"), class: "inline w-12 h-12 object-cover rounded-full mr-3") %>
          </a>
          <div>
            <a href="https://www.felipesere.com/">
              <h4>Felipe Sere</h4>
            </a>
            <%= link("@felipesere", to: "https://twitter.com/felipesere", class: "text-sm text-grey-dark") %>
          </div>
        </div>
      </div>

      <div class="w-full md:w-31percent bg-white shadow rounded p-6 mt-16 md:mt-0">
        <svg class="w-8 h-8 text-grey-darkest">
          <use xlink:href="#testimonial-quotemark" />
        </svg>
        <p class="text-lg">All the stats you need in a single page. Plausible's user experience and user interface are the stark opposite of Google Analytics.</p>
        <div class="mt-2 md:mt-4 flex items-center justify-start">
          <a href="https://makisotman.com/">
            <%= img_tag(PlausibleWeb.Router.Helpers.static_path(@conn, "/images/testimonials/makis.jpg"), class: "inline w-12 h-12 rounded-full mr-3") %>
          </a>
          <div>
            <a href="https://makisotman.com/">
              <h4>Makis Otman</h4>
            </a>
            <%= link("@makisotman", to: "https://twitter.com/makisotman", class: "text-sm text-grey-dark") %>
          </div>
        </div>
      </div>

      <div class="w-full md:w-31percent bg-white shadow rounded p-6 mt-16 md:mt-0">
        <svg class="w-8 h-8 text-grey-darkest">
          <use xlink:href="#testimonial-quotemark" />
        </svg>
        <p class="text-lg">I love Plausible because it is lightweight and looks beautiful. It shows me all the statistics that I need in a simple and unique style.</p>
        <div class="mt-2 md:mt-4 flex items-center justify-start">
          <a href="https://www.schranz.io/">
            <%= img_tag(PlausibleWeb.Router.Helpers.static_path(@conn, "/images/testimonials/markus.jpg"), class: "inline w-12 h-12 rounded-full mr-3") %>
          </a>
          <div>
            <a href="https://www.schranz.io/"><h4>Markus Schranz</h4></a>
            <%= link("@ma_schranz", to: "https://twitter.com/ma_schranz", class: "text-sm text-grey-dark") %>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container my-32">
    <h3 class="font-black text-center text-2xl my-12">Frequently asked questions</h3>

    <div class="max-w-xl mx-auto bg-white border rounded p-6">
      <h4>1. Can I use Plausible on more than one website?</h4>
      <div class="mt-4 leading-normal">
        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.
      </div>
    </div>

    <div class="max-w-xl mx-auto bg-white border rounded p-6 my-6">
      <h4>2. What happens if I go over my plan limit?</h4>
      <div class="mt-4 leading-normal">
        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.
      </div>
    </div>

    <div class="max-w-xl mx-auto bg-white border rounded p-6 my-6">
      <h4>3. How do you make sure my visitors' privacy is protected?</h4>
      <div class="mt-4 leading-normal">
        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") %>.
      </div>
    </div>

    <div class="text-center">
      <%= link("Ask a question from the founder", to: "mailto:uku@plausible.io", class: "text-indigo") %>
    </div>
  </div>
</div>