<div class="mt-24 bg-gray-800 dark:bg-gray-800">
  <div class="container px-4 py-12 sm:px-6 lg:py-16 lg:px-8">
    <div class="xl:grid xl:grid-cols-3 xl:gap-8">
      <div class="my-8 xl:my-0">
        <h4 class="font-semibold tracking-wider text-gray-300 leading-5">
          <%= img_tag(
            PlausibleWeb.Router.Helpers.static_path(
              @conn,
              logo_path("logo_dark.svg")
            ),
            class: "inline-block w-40 mr-1",
            alt: "Plausible logo",
            loading: "lazy"
          ) %>
        </h4>
        <p class="mt-4 text-base text-gray-400 leading-6">
          <%= if full_build?() do %>
            Made and hosted in the EU <span class="text-lg">🇪🇺</span> <br />
            Solely funded by our subscribers.
          <% end %>

          <%= if small_build?() do %>
            This dashboard is running on self-managed infrastructure, not tested by Plausible Analytics. We cannot vouch for its performance or reliability. For official managed hosting, check out
            <.styled_link href="https://plausible.io">
              plausible.io
            </.styled_link>
          <% end %>
        </p>
      </div>
      <div class="grid grid-cols-2 gap-8 xl:col-span-2">
        <div class="md:grid md:grid-cols-2 md:gap-8 print:hidden">
          <div>
            <h4 class="text-sm font-semibold tracking-wider text-gray-400 uppercase leading-5">
              Getting started
            </h4>
            <ul class="mt-4">
              <li>
                <a
                  rel="noreferrer"
                  href="https://plausible.io/docs/integration-guides"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Integration guides
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noferrer"
                  href="https://plausible.io/wordpress-analytics-plugin"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  WordPress plugin
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/docs/troubleshoot-integration"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Troubleshooting
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/docs/script-extensions"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Script extensions
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/docs/google-analytics-import"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Import stats
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/docs/google-search-console-integration"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Search Console
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/docs/users-roles"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Invite team members
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/docs/excluding"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Exclude traffic
                </a>
              </li>
            </ul>
          </div>
          <div class="mt-32 md:mt-0">
            <h4 class="text-sm font-semibold tracking-wider text-gray-400 uppercase leading-5">
              Help guides
            </h4>
            <ul class="mt-4">
              <li>
                <a
                  rel="noferrer"
                  href="https://plausible.io/docs/compare-stats"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Compare stats
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noferrer"
                  href="https://plausible.io/docs/filters-segments"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Segment audience
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noferrer"
                  href="https://plausible.io/docs/manual-link-tagging"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Track campaigns
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noferrer"
                  href="https://plausible.io/docs/goal-conversions"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Event conversions
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noferrer"
                  href="https://plausible.io/docs/funnel-analysis"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Funnel analysis
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noferrer"
                  href="https://plausible.io/docs/ecommerce-revenue-tracking"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Revenue attribution
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noferrer"
                  href="https://plausible.io/docs/custom-props/introduction"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Custom properties
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noferrer"
                  href="https://plausible.io/docs/proxy/introduction"
                  class="text-base text-gray-300 leading-6 hover:text-white"
                >
                  Bypass adblockers
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="md:grid md:grid-cols-2 md:gap-8 print:hidden">
          <div>
            <h4 class="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
              Community
            </h4>
            <ul class="mt-4">
              <li>
                <a
                  rel="noreferrer"
                  href="https://plausible.io/changelog"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  What's new
                </a>
              </li>
              <li class="mt-4">
                <a
                  ref="noreferrer"
                  target="_blank"
                  href="https://plausible.io/status"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Status
                </a>
              </li>
              <li class="mt-4">
                <a
                  ref="noreferrer"
                  href="https://plausible.io/blog"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Blog
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/docs"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Documentation
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  target="_blank"
                  href="https://github.com/plausible/analytics"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  GitHub
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  target="_blank"
                  href="https://twitter.com/plausiblehq"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Twitter
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  target="_blank"
                  rel="me"
                  href="https://fosstodon.org/@plausible"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Mastodon
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  target="_blank"
                  href="https://www.linkedin.com/company/plausible-analytics/"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  LinkedIn
                </a>
              </li>
            </ul>
          </div>
          <div class="mt-12 md:mt-0">
            <h4 class="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
              Company
            </h4>
            <ul class="mt-4">
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/about"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  About
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/contact"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Contact
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/privacy"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Privacy
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/data-policy"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Data policy
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/terms"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Terms
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/dpa"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  DPA
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/security"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Security
                </a>
              </li>
              <li class="mt-4">
                <a
                  rel="noreferrer"
                  href="https://plausible.io/imprint"
                  class="text-base leading-6 text-gray-300 hover:text-white"
                >
                  Imprint
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
