home.html

---
layout: default
permalink: /
image: /images/opengraph/home-og.jpg
title: Open source Business Intelligence and Embedded Analytics
---

<div class="bootstrap">
  <div class="home-page">
    {% include home/hero.html %}

    <div class="py4 mt-md-7">
      <div class="container text-centered ">
        <div class="row justify-content-center">
          <div class="col-xs-9 col-md-8 mb-13">
            <h3 class="fw-bold h3-5">Get up and running in no time</h3>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-12 col-lg-10">
            <div class="row justify-content-center">
              <div class="col-12 col-lg-4 mb-7 d-flex feature-card feature-card--light">
                <article class="bg-blue-95 feature-card__wrapper">
                  <header class="p-2 feature-card__header text-center">
                    <div class="block--hosted d-flex justify-content-center align-items-center">
                      <a href="/docs/latest/installation-and-operation/running-metabase-on-docker" class="rounded-circle circle--1 d-flex justify-content-center align-items-center"><img alt="Image 62" src="/images/home/image-62.svg" /></a>
                      <a href="/docs/latest/installation-and-operation/running-the-metabase-jar-file" class="rounded-circle circle--2 d-flex justify-content-center align-items-center"><img alt="Jar" src="/images/home/jar.svg" /></a>
                      <a href="/pricing/" class="rounded-circle circle--3 d-flex justify-content-center align-items-center"><img alt="Cloud" src="/images/home/cloud.svg" /></a>
                    </div>
                  </header>
                  <div class="p-6">
                    <p class="mb-0">Run <code>docker run -d -p 3000:3000 metabase/metabase</code> to spin up your free self-hosted instance right now. Or pick a hosted plan on <a href="/cloud">Metabase Cloud</a> for secure deployment with none of the work.</p>
                  </div>
                </article>
              </div>
              <div class="col-12 col-lg-4 mb-7 d-flex feature-card feature-card--light">
                <article class="bg-blue-95 feature-card__wrapper">
                  {% include data-sources-marquee.html %}
                  <div class="p-6">
                    <p class="mb-0">Connect to your <a href="/data-sources/" >data source</a> and go. Metabase is the querying and visualization layer for your database, made to fit your startup's production DB to massive data warehouses. Query immediately, without extracts.</p>
                  </div>
                </article>
              </div>
              <div class="col-12 col-lg-4 d-flex mb-7 feature-card feature-card--light">
                <article class="bg-blue-95 feature-card__wrapper">
                  <header class="p-2 feature-card__header text-center">
                    <div class="block--github flex justify-content-center relative">
                      <a href="https://github.com/metabase/metabase" target="_blank" class="github-button absolute Button btn btn-primary neutral-white rounded-7 bg-blue-60 px-5 py-3 d-flex align-items-center">
                        {% include svg-icons/github-icon.html width="16" height="16" fill="currentcolor" %}
                        <span class="blue-75 px-2"> | </span>
                        <span class="github-stars"></span>
                        <svg width="12" height="11" viewBox="0 0 12 11" fill="none">
                          <path
                            d="M6 1.07149L7.39167 3.70919L7.50639 3.92663L7.74864 3.96855L10.6873 4.47701L8.60874 6.61565L8.43739 6.79196L8.47239 7.03531L8.89691 9.98725L6.22062 8.67131L6 8.56283L5.77938 8.67131L3.10309 9.98725L3.52761 7.03531L3.56261 6.79196L3.39126 6.61565L1.31271 4.47701L4.25136 3.96855L4.49361 3.92663L4.60833 3.70919L6 1.07149Z"
                            fill="#ffffff" stroke="#ffffff" />
                        </svg>
                      </a>
                    </div>
                  </header>
                  <div class="p-6">
                    <p class="mb-0"><a href="https://github.com/metabase/metabase" target="_blank">Always open source</a>, transparent, and built to scale with you. <a href="/pricing">Startup-friendly pricing</a>, with Pro and Enterprise tiers for advanced features, support, and compliance (SOC1, SOC2, GDPR, CCPA, HIPAA, and more).</p>
                  </div>
                </article>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <section class="container pt-1 pb-17">
      <div class="d-flex flex-column justify-content-center align-items-center carousel col-md-10">
        <div class="carousel__slides mb-lg-8">
          {% assign testimonials = site.data.testimonials %}
          {% for item in testimonials limit:4 %}
            <div class="carousel__slide carousel-preload d-flex justify-content-center">
              <div class="slide-inner d-flex flex-column justify-content-center align-items-center">
                <div class="d-flex flex-row justify-content-center align-items-center">
                  <div class="mb-2">
                    <p class="neutral-40 text-center paragraph-5">{{ item.quote }}</p>
                  </div>
                </div>
                <div class="d-flex flex-column justify-content-center align-items-center">
                  <div class="d-flex relative flex-shrink-0 mb-5">
                    <div class="relative testimonial__headshot-container drop-shadow rounded-circle">
                      <img src="{{ item.headshot }}" class="testimonial__headshot" alt="photo of {{ item.name }}" />
                    </div>
                    <img src="{{ item.logo }}" class="relative testimonial__logo rounded-circle drop-shadow" alt="{{ item.company }} logo" loading="lazy" />
                  </div>
                  <div class="text-center">
                    <p class="neutral-40 mb-0 paragraph-5"><strong class="neutral-15">{{ item.name }}</strong><br />
                      <span class="neutral-60">{{ item.title }} at {{ item.company }}</span></p>
                    {% if item.case_study %}
                      <a href="{{ item.case_study }}" class="fw-bold text-center testimonial__link absolute">Read the full {{ item.company }} story <img alt="Chevron Blue Right" src="/images/chevron_blue_right.svg"></a>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
        <div class="carousel__nav">
          <button class="carousel__nav--button carousel__nav--left rounded-circle d-flex justify-content-center align-items-center">
            {% include svg-icons/arrow-left.html %}
          </button>
          <button class="carousel__nav--button carousel__nav--right rounded-circle d-flex justify-content-center align-items-center">
            {% include svg-icons/arrow-right.html %}
          </button>
        </div>
      </div>
    </section>
  </div> <!-- .home-page -->

  <div>
    <!-- tabs mobile -->
    <section class="my-17 pt-17 pt-md-0 p-0 d-md-none">
      <div class="container text-centered">
        <div class="row justify-content-center">
          <div class="col-xs-12 col-md-10 mb-12">
            <h2 class="mb-6 fw-bold embedding-page__section-title h3-5">Business intelligence your team can use</h2>
            <div class="row justify-content-center">
              <div class="col-xs-12 col-md-10 col-lg-8">
                <p class="paragraph-4 responsive neutral-40 mb-6 text-center" style="max-width: 840px;">If "self-serve analytics" gives you flashbacks of dashboards no one reads, broken queries, and just as many pings for ad hoc reports — <a href="/product/business-intelligence">yeah, this isn't that</a>.</p>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-5 mb-13">
            <p class="neutral-15"><strong>Query data without writing code</strong></p>
            <p class="neutral-40">Anyone can explore data, visualize results, and answer their own questions. Built-in drilldowns let anyone click into the "why" behind a chart, or spin up a no-code query with the <a href="/features/query-builder">visual query builder.</a></p>
            <video id="query-builder-mobile-video" class="rounded-4 pause-observer" width="100%" poster="/images/home/query-builder.png">
              <source src="/images/home/query-builder.mp4" type="video/mp4">
              <source src="/images/home/query-builder.webm" type="video/webm">
            </video>
          </div>
          <div class="col-12 col-md-5 mb-13">
            <p class="neutral-15"><strong>From one-size-fits all reports to custom insights</strong></p>
            <p class="neutral-40">Filter and breakout for deeper context. Share <a href="/features/analytics-dashboards">interactive dashboards</a> with your team or embed them in your product for customer-facing reporting. Or let them create their own.</p>
            <video id="dashboards-mobile-video" class="rounded-4 pause-observer" width="100%" poster="/images/home/dashboards.png">
              <source src="/images/home/dashboards.mp4" type="video/mp4">
              <source src="/images/home/dashboards.webm" type="video/webm">
            </video>
          </div>
          <div class="col-12 col-md-5">
            <p class="neutral-15"><strong>Guide people to the right answers</strong></p>
            <p class="neutral-40">Craft metadata-rich, semantic models which let people query on their own, keeping things consistent and avoiding repetition. With a single tab open and no CLI needed.</p>
            <video id="models-mobile-video" class="rounded-4 pause-observer" width="100%" poster="/images/home/models.png">
              <source src="/images/home/models.mp4" type="video/mp4">
              <source src="/images/home/models.webm" type="video/webm">
            </video>
          </div>
        </div>
    </section>

    <!-- tabs desktop -->
    <section class="my-12 mt-0 pt-17 p-0 d-none d-md-block">
      <div class="container text-centered">
        <div class="row justify-content-center">
          <div class="col-xs-12 col-md-10 mb-12">
            <h2 class="h3 fw-bold mb-6 embedding-page__section-title">Business intelligence your team can use</h2>
            <div class="row justify-content-center">
              <div class="col-xs-12 col-md-10 col-lg-8">
                <p class="paragraph-4 responsive neutral-40 mb-6 text-center" style="max-width: 840px;">If "self-serve analytics" gives you flashbacks of dashboards no one reads, broken queries, and just as many pings for ad hoc reports — <a href="/product/business-intelligence">yeah, this isn't that</a>.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="tabs-with-timer tabs--vertical row col-12 col-lg-10">
            <nav class="tabs-with-timer__nav col-12 col-md-5">
              <ul class="tabs-with-timer__nav__list tabs-with-timer__nav__list--vertical">
                <li class="tabs-with-timer__nav__list__item">
                  <button class="tabs-with-timer__button tabs-with-timer__button--13 neutral-15">Query data without writing code</button>
                  <p><strong>Query data in plain English with AI</strong></p>
                  <p class="paragraph-5 neutral-40">Anyone can explore data, visualize results, and answer their own questions. <a href="/features/metabot-ai">Ask Metabot AI</a> for natural language querying, click on charts to find the "why" behind it, or spin up a no-code query with the <a href="/features/query-builder">visual query builder.</a></p>
                </li>
                <li class="tabs-with-timer__nav__list__item">
                  <button class="tabs-with-timer__button neutral-15">From one-size-fits-all reports to custom insights</button>
                  <p><strong>Share reports and create custom insights</strong></p>
                  <p class="paragraph-5 neutral-40">Filter and breakout <a href="/features/analytics-dashboards">interactive dashboards</a> for deeper context. Share with your team or embed them in your product for customer-facing reporting. Or let people create and share their own.</p>
                </li>
                <li class="tabs-with-timer__nav__list__item">
                  <button class="tabs-with-timer__button neutral-15">Guide people to the right answers</button>
                  <p><strong>Guide people to the right answers</strong></p>
                  <p class="paragraph-5 neutral-40">Create reusable <a href="/features/models">models</a>, define trusted metrics, and mark vetted data sources so everyone builds on consistent, accurate foundations without asking twice.</p>
                </li>
              </ul>
            </nav>
            <div class="pt-0 tabs-with-timer__container col-12 col-md-7">
              <div class="flex-column flex-lg-row p-0 tabs-with-timer__content">
                <div class="col-12 tabs-with-timer__content__image-container">
                  <div class="bg-blue-95 tabs-with-timer__content__image">
                    <video
                      id="tabs-with-timer-video1"
                      class="vjs-player autoplay-video"
                      poster="/images/home/query-builder.png">
                      <source src="/images/home/query-builder.mp4" type="video/mp4" />
                      <source src="/images/home/query-builder.webm" type="video/webm" />
                      <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                      </p>
                    </video>
                  </div>
                </div>
              </div>
              <div class="flex-column flex-lg-row p-0 tabs-with-timer__content">
                <div class="col-12 tabs-with-timer__content__image-container">
                  <div class="bg-blue-95 tabs-with-timer__content__image">
                    <video
                      id="tabs-with-timer-video2"
                      class="vjs-player autoplay-video"
                      poster="/images/home/dashboards.png">
                      <source src="/images/home/dashboards.mp4" type="video/mp4" />
                      <source src="/images/home/dashboards.webm" type="video/webm" />
                      <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                      </p>
                    </video>
                  </div>
                </div>
              </div>
              <div class="flex-column flex-lg-row p-0 tabs-with-timer__content">
                <div class="col-12 tabs-with-timer__content__image-container">
                  <div class="bg-blue-95 tabs-with-timer__content__image">
                    <video
                      id="tabs-with-timer-video3"
                      class="vjs-player autoplay-video"
                      poster="/images/home/models.png">
                      <source src="/images/home/models.mp4" type="video/mp4" />
                      <source src="/images/home/models.webm" type="video/webm" />
                      <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                      </p>
                    </video>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </section>

    <section class="container pt-1 pb-17">
      <div class="d-flex flex-column justify-content-center align-items-center carousel col-md-10">
        <div class="carousel__slides mb-lg-8">
          {% assign testimonials = site.data.testimonials %}
          {% for item in testimonials offset:4 %}
            <div class="carousel__slide carousel-preload d-flex justify-content-center">
              <div class="slide-inner d-flex flex-column justify-content-center align-items-center">
                <div class="d-flex flex-row justify-content-center align-items-center">
                  <div class="mb-2">
                    <p class="neutral-40 text-center paragraph-5">{{ item.quote }}</p>
                  </div>
                </div>
                <div class="d-flex flex-column justify-content-center align-items-center">
                  <div class="d-flex relative flex-shrink-0 mb-5">
                    <div class="relative testimonial__headshot-container drop-shadow rounded-circle">
                      <img src="{{ item.headshot }}" class="testimonial__headshot" alt="photo of {{ item.name }}" loading="lazy" />
                    </div>
                    <img src="{{ item.logo }}" class="relative testimonial__logo rounded-circle drop-shadow" alt="{{ item.company }} logo" loading="lazy" />
                  </div>
                  <div class="text-center">
                    <p class="neutral-40 mb-0 paragraph-5"><strong class="neutral-15">{{ item.name }}</strong><br />
                      <span class="neutral-60">{{ item.title }} at {{ item.company }}</span></p>
                    {% if item.case_study %}
                      <a href="{{ item.case_study }}" class="fw-bold text-center testimonial__link absolute">Read the full {{ item.company }} story <img alt="Chevron Blue Right" src="/images/chevron_blue_right.svg"></a>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
        <div class="carousel__nav">
          <button class="carousel__nav--button carousel__nav--left rounded-circle d-flex justify-content-center align-items-center">
            <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M11.334 5.19544C11.334 5.66052 10.957 6.03754 10.4919 6.03754L3.68762 6.03754L6.37184 8.47774C6.71597 8.79059 6.74134 9.32318 6.42849 9.66731C6.11564 10.0114 5.58305 10.0368 5.23892 9.72396L0.942961 5.81854C0.77256 5.66363 0.673035 5.44569 0.667557 5.21547C0.662078 4.98524 0.751125 4.76282 0.913965 4.59998L5.20992 0.30402C5.53878 -0.0248429 6.07198 -0.0248428 6.40084 0.30402C6.7297 0.632882 6.7297 1.16607 6.40084 1.49494L3.54244 4.35333L10.4919 4.35333C10.957 4.35333 11.334 4.73035 11.334 5.19544Z" fill="#5A6072"/>
            </svg>
          </button>
          <button class="carousel__nav--button carousel__nav--right rounded-circle d-flex justify-content-center align-items-center">
            <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666992 4.80871C0.666992 4.34363 1.04402 3.96661 1.5091 3.96661L8.31336 3.96661L5.62913 1.52641C5.285 1.21356 5.25964 0.680971 5.57249 0.336838C5.88534 -0.00729488 6.41792 -0.032656 6.76206 0.280192L11.058 4.18561C11.2284 4.34052 11.3279 4.55846 11.3334 4.78868C11.3389 5.01891 11.2499 5.24133 11.087 5.40417L6.79105 9.70013C6.46219 10.029 5.929 10.029 5.60014 9.70013C5.27128 9.37127 5.27128 8.83808 5.60014 8.50921L8.45853 5.65082L1.5091 5.65082C1.04402 5.65082 0.666992 5.2738 0.666992 4.80871Z" fill="#5A6072"/>
            </svg>
          </button>
        </div>
      </div>
    </section>
  </div>

  <section class="mb-15 mt-16 p-0">
    <div class="container text-centered">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-10">
          <div class="align-items-stretch d-flex flex-column flex-lg-row flex-wrap justify-content-start p-0 cta-cards">
            <article class="col-12 d-flex cta-card">
              <div class="row">
                <div class="col-12 col-lg-6">
                  <div class="cta-card__link px-0 border-0">
                    {% include svg-icons/embedded-analytics.html %}
                    <h2 class="mb-2 mt-4 h5-5 neutral-15 fw-bold">Put production-grade analytics into your app without drama</h2>
                    <p class="paragraph-5 fw-normal neutral-40">Embed dashboards, visualizations, or self-serve reporting in your SaaS app. Choose iframes for speed or the React SDK for customization and control.</p>
                    <ul class="paragraph-5 mt-1">
                      <li class="mb-4"><span class="neutral-15 fw-normal"><b>Way less engineering overhead than rolling your own in-app reporting</b> – Empower data teams (or any non-dev teammates) to manage permissions, iterate on dashboards, and refine reports—without bugging devs.</span></li>
                      <li class="mb-4"><span class="neutral-15 fw-normal"><b>Scales with you</b> – Start with simple charts, embed full dashboards, or use the SDK for advanced setups as your needs grow.</span></li>
                      <li class="mb-4"><span class="neutral-15 fw-normal"><b>Customizable to fit your product</b> – White-labeling, dynamic styling, and interactive controls from view-only to full data discovery.</span></li>
                    </ul>
                    <a href="/product/embedded-analytics" class="paragraph-5 fw-bold blue-60 embedding-page__cta">Learn more about embedding Metabase in your product<img alt="Chevron Blue Right" src="/images/chevron_blue_right.svg"></a>
                  </div>
                </div>
                <div class="col-12 col-lg-6">
                  <video
                    class="vjs-player pause-observer lazy"
                    id="sincera-video"
                    poster="/images/home/Sincera.gif">
                    <source src="/images/home/Sincera.mp4" type="video/mp4" />
                    <source src="/images/home/Sincera.webm" type="video/webm" />
                    <p class="vjs-no-js">
                      To view this video please enable JavaScript, and consider upgrading to a
                      web browser that
                      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                    </p>
                  </video>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="bg-blue-25 pb-13 pt-10">
    <div class="container text-centered">
      <div class="row justify-content-center">
        <div class="col-xs-12 col-md-8 mb-13 pt-12">
          <h3 class="neutral-white fw-normal h3-5">Keeps up as you grow</h3>
          <p class="blue-85 paragraph-4 mb-0">
            Advanced features for managing lots of users and compliance. From pre-seed to post-IPO.
          </p>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-12 col-lg-10">
          <div class="justify-content-center">
            <div class="justify-content-start row">
              <div class="col-12 col-lg-4 p-3 mb-0 d-flex feature-card feature-card--light">
                <article class="bg-blue-15 feature-card__wrapper">
                  <header class="p-6 pb-0 feature-card__header blue-60">
                    {% include svg-icons/view.html width="42" height="42" %}
                  </header>
                  <div class="p-6">
                    <p class="fw-bold neutral-white">Multi-tenant data segregation</p>
                    <p class="fw-normal blue-85 mb-0">
                      <a href="/features/data-segregation">Granular permissions</a> to make sure people see what they need to, and nothing else.
                    </p>
                  </div>
                </article>
              </div>
              <div class="col-12 col-lg-4 p-3 mb-0 d-flex feature-card feature-card--light">
                <article class="bg-blue-15 feature-card__wrapper">
                  <header class="p-6 pb-0 feature-card__header blue-60">
                    {% include svg-icons/key.html width="42" height="42" %}
                  </header>
                  <div class="p-6">
                    <p class="fw-bold neutral-white">Secure and simple access</p>
                    <p class="fw-normal blue-85 mb-0">
                      Integrate with SSO IdPs (SAML, LDAP, JWT, Google) and map to Metabase groups.
                    </p>
                  </div>
                </article>
              </div>
              <div class="col-12 col-lg-4 p-3 mb-0 d-flex feature-card feature-card--light">
                <article class="bg-blue-15 feature-card__wrapper">
                  <header class="p-6 pb-0 feature-card__header blue-60">
                    {% include svg-icons/medal.html width="42" height="42" %}
                  </header>
                  <div class="p-6">
                    <p class="fw-bold neutral-white">Drop into SQL</p>
                    <p class="fw-normal blue-85 mb-0">
                      The <a href="/features/query-builder">visual query builder</a> gets you pretty far. When you need an
                      <a href="/features/sql-editor">escape hatch into SQL</a> to run raw queries, tweak logic, or join tables, you're covered.
                    </p>
                  </div>
                </article>
              </div>
              <div class="col-12 col-lg-4 p-3 mb-0 d-flex feature-card feature-card--light">
                <article class="bg-blue-15 feature-card__wrapper">
                  <header class="p-6 pb-0 feature-card__header blue-60">
                    {% include svg-icons/check-circle.html width="42" height="42" %}
                  </header>
                  <div class="p-6">
                    <p class="fw-bold neutral-white">Track data and dashboard usage</p>
                    <p class="fw-normal blue-85 mb-0">
                      <a href="/features/usage-analytics">No more unused dashboards</a>. Inspect user behavior across content, data access and downloads.
                    </p>
                  </div>
                </article>
              </div>
              <div class="col-12 col-lg-4 p-3 mb-0 d-flex feature-card feature-card--light">
                <article class="bg-blue-15 feature-card__wrapper">
                  <header class="p-6 pb-0 feature-card__header blue-60">
                    {% include svg-icons/graph.html width="42" height="42" %}
                  </header>
                  <div class="p-6">
                    <p class="fw-bold neutral-white">Keep dashboards snappy</p>
                    <p class="fw-normal blue-85 mb-0">
                      Go faster with <a href="/docs/latest/configuring-metabase/caching">result and model caching</a>. No schedulers or pipelines needed.
                    </p>
                  </div>
                </article>
              </div>
              <div class="col-12 col-lg-4 p-3 mb-0 d-flex feature-card feature-card--light">
                <article class="bg-blue-15 feature-card__wrapper">
                  <header class="p-6 pb-0 feature-card__header blue-60">
                    {% include svg-icons/layers.html width="24" height="24" %}
                  </header>
                  <div class="p-6">
                    <p class="fw-bold neutral-white">Test and deploy safely</p>
                    <p class="fw-normal blue-85 mb-0">
                      Spin up <a href="/docs/latest/installation-and-operation/development-instance">staging environments</a> without touching prod. Export configs, models, and dashboards to test or scale across multiple instances.
                    </p>
                  </div>
                </article>
              </div>
              <!--
              <div class="col-12 col-lg-4 p-3 mb-0 d-flex feature-card feature-card--light">
                <article class="bg-blue-15 feature-card__wrapper">
                  <header class="p-6 pb-0 feature-card__header blue-60">
                    {% include svg-icons/windows.html width="42" height="42" %}
                  </header>
                  <div class="p-6">
                    <p class="fw-bold neutral-white">Snippets</p>
                    <p class="fw-normal blue-85 mb-0">
                      Manage and share complex SQL logic across your team with shared snippets.
                    </p>
                  </div>
                </article>
              </div>
              <div class="col-12 col-lg-4 p-3 mb-0 d-flex feature-card feature-card--light">
                <article class="bg-blue-15 feature-card__wrapper">
                  <header class="p-6 pb-0 feature-card__header blue-60 icon__transparent">
                    {% include svg-icons/secure-shield-outline.html width="42" height="42" %}
                  </header>
                  <div class="p-6">
                    <p class="fw-bold neutral-white">Security and Privacy</p>
                    <p class="fw-normal blue-85 mb-0">
                      Enterprise-scaled compliance <a href="/security">(SOC 2 Type II, GDPR)</a> built right in from day one.
                    </p>
                  </div>
                </article>
              </div>
              -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!--
  <div class="container">
    {% include promote-pro-page.html %}
  </div>
  -->

  {% include home/love.html %}

  <section class="container text-centered">
    <div class="row justify-content-center">
      <div class="col-xs-12 col-md-10">
        <div class="neutral-white d-flex flex-column constant-animation--container">
          <div class="absolute">
            <h3 class="neutral-white fw-bold h3-5">Ready to get started?</h3>
            <p class="paragraph-4-5 blue-85 mb-8 mt-2">Get up and running right now.</p>
            <a class="inline-block px2 Button bg-blue-25 m-auto neutral-white" href="https://store.metabase.com/checkout">Get started</a>
          </div>
          <div class="constant-animation pt-16 pt-md-0 rounded-5 overflow-hidden">
            <lottie-player
              class="lottie-animation cta-lottie"
              src="/images/animations/ready-frame.json"
              background="transparent"
              speed="1"
              loop>
            </lottie-player>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js"></script>
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script type="text/javascript" src="/js/feature-card.js"></script>
<script type="text/javascript" src="/js/tabs-with-timer.js"></script>
<script type="text/javascript" src="/js/carousel.js"></script>
<script type="text/javascript" src="/js/video-autoplay.js"></script>
<script type="text/javascript">
  const loveListContainer = document.getElementById('love-list');
  const loadMoreShadow = document.getElementById('load-more-shadow');
  const loadMoreButtonWrapper = document.getElementById('load-more-button-wrapper');
  const loadMoreButton = document.getElementById('load-more-button');

  function getItemsPerPage() {
    if(window.innerWidth < 576){
      return 9;
    } else if(window.innerWidth < 768){
      return 15;
    } else {
      return 20;
    }
  }

  let masonry;
  let itemsPerPage = getItemsPerPage();
  let page = 1;

  const loveList = new List('love-list', {
    valueNames: ['story']
  });

  function loadMore() {
    let index = 0;
    const items = [];
    loveList.filter(function(item) {
      if (index < itemsPerPage * page) {
        index += 1;
        if (index > itemsPerPage * (page - 1) ) {
          items.push(item.elm);
        }
        return true;
      } else {
        index += 1;
        return false;
      }
    })

    masonry.addItems(items);
    masonry.layout();

    if (loveList.matchingItems.length === loveList.items.length) {
      if (loadMoreShadow) {
        loadMoreShadow.remove();
      }

      if (loadMoreButtonWrapper) {
        loadMoreButtonWrapper.remove();
      }
    }
  }

  imagesLoaded(document.querySelector('.home-love'), function() {
    loveList.filter(function() { return false; });
    loveListContainer.classList.remove('invisible');

    masonry = new Masonry( '.list', {
      itemSelector: '.story',
      transitionDuration: 0
    });

    loadMore();
  })

  if (loadMoreButton) {
    loadMoreButton.addEventListener('click', () => {
      page += 1;
      loadMore();
    });
  }
</script>

<script>
  document.addEventListener("DOMContentLoaded", function(){
    var openVideoModal = function(e) {
      e.preventDefault();
      e.stopImmediatePropagation();

      var url = e.currentTarget.href.replace(/\/watch\?v=/, "/embed/");
      url += "?autoplay=1&controls=1";

      var snowplowProperty = e.currentTarget.dataset.spProperty;
      var trackWatchTimeout;
      var trackWatchedSeconds = 30;

      var modal = document.createElement("div");
      var content = document.createElement("div");
      var close = document.createElement("a");
      var start = document.createElement("a");

      var width = Math.round(window.innerWidth * .6);
      if(window.innerWidth < window.innerHeight) width = window.innerWidth; // Mobile-like

      var ratio = 1.77;
      var height = Math.round(width / ratio);

      var closeModal = function() {
        modal.parentNode.removeChild(modal);
        document.body.classList.remove("with-modal");
        clearTimeout(trackWatchTimeout);
      }

      modal.className = "Modal-Wrapper";

      content.className = "Modal-Content";
      content.innerHTML = '<iframe width="' + width + '" height="' + height + '" src="' + url + '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

      close.className = "Modal-Close";
      close.href = "#close";
      close.innerHTML = "&times;";

      start.className = "Button Button--primary modal-video-get-started";
      start.href = "https://store.metabase.com/checkout";
      start.innerHTML = "Get started";
      start.addEventListener("click", function(e) {
        snowplow('trackStructEvent', 'video','clicked-get-started','explainer-video-v1');
      });

      setTimeout(function(){
        start.classList.add("shown");
      }, 5 * 1000);

      modal.addEventListener("click", function(e) {
        if(e.currentTarget == e.target) {
          closeModal();
        }
      });

      close.addEventListener("click", function(e) {
        closeModal();
      });

      modal.append(content);
      modal.append(close);
      content.append(start);

      document.body.classList.add("with-modal");
      document.body.append(modal);

      if (snowplow) {
        snowplow('trackStructEvent', 'video','video-played','explainer-video-v1', snowplowProperty);

        trackWatchTimeout = setTimeout(function() {
          snowplow('trackStructEvent', 'video','video-watched','explainer-video-v1','length', trackWatchedSeconds);
        }, trackWatchedSeconds * 1000);
      }

    }
  });
</script>