---
layout: base

front_page: true

css: page-front
---

{% assign content = site.data.content-front %}

<header class="hero section">

    {% include menu-main.html %}

    <div class="hero__content row">
        <hgroup>
            <h1 class="hero__title">{{ content.hero.title }}</h1>
            <a class="hero__action button button--primary" href="{{ site.signup.link }}">{{ site.signup.button }}</a>
        </hgroup>
    </div>
</header>


<section class="section section--intro">
    <div class="row">
        <header class="section__header">
            <div class="grid grid--full grid-small--half grid-medium--columns grid--center grid--gutters">
                <div class="grid__col grid__col--4">
                    <h1 class="section__title">{{ content.intro.title }}</h1>
                    <p class="section__description">{{ content.intro.description }}</p>
                </div>
                <div class="grid__col grid__col--2">

                </div>
            </div>
        </header>

        <div class="grid grid--full grid-small--columns grid--center grid--gutters">
            <div class="grid__col grid__col--4">
                {{ content.intro.text | markdownify }}
            </div>
            <div class="grid__col grid__col--2">

            </div>
        </div>



        <section class="features">
            {% for feature in content.intro.features %}
            <div class="feature">
                <div class="grid grid--full grid-small--half grid-medium--columns grid--center grid--gutters">
                    <div class="grid__col grid__col--2">
                        <figure class="feature__image">
                            <svg aria-labelledby="title">
                                <title>{{ feature.title }}</title>
                                <use xlink:href="/assets/img/sprite.svg#{{ feature.image }}"></use>
                            </svg>
                        </figure>
                    </div>

                    <div class="grid__col grid__col--4">
                        <h1 class="feature__title">{{ feature.title }}</h1>
                        <p class="feature__text">{{ feature.text }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </section>

        <footer class="actions">
            <a class="hero__action button button--primary" href="{{ site.signup.link }}">{{ site.signup.button }}</a>
            <a href="" class="button button--text">Read IPDB Documentation</a>
        </footer>
    </div>
</section>


<section class="section section--background section--foundation">
    <div class="row">
        <header class="section__header">
            <div class="grid grid--full grid-small--half grid-medium--columns grid--center grid--gutters">
                <div class="grid__col grid__col--4">
                    <h1 class="section__title">{{ content.foundation.title }}</h1>
                    <p class="section__description">{{ content.foundation.description }}</p>
                </div>
                <div class="grid__col grid__col--2">

                </div>
            </div>
        </header>
    </div>
    <div class="row">
        {% include caretakers.html %}
    </div>

    <div class="row">
        <a href="/foundation/" class="button button--text">{{ content.foundation.button }}</a>
    </div>
</section>


<section class="section section--roadmap">
    <div class="row">
        <header class="section__header">
            <h1 class="section__title">{{ content.roadmap.title }}</h1>
            <p class="section__description">{{ content.roadmap.description }}</p>
        </header>

        <div class="roadmap">

        </div>
    </div>
</section>


<section class="section section--background section--getstarted">
    <div class="row">
        <header class="section__header">
            <h1 class="section__title">{{ content.getstarted.title }}</h1>
            <p class="section__description">{{ content.getstarted.description }}</p>
        </header>
    </div>
</section>


<section class="section section--connect">
    <div class="row">
        <header class="section__header">
            <h1 class="section__title">{{ content.connect.title }}</h1>
            <p class="section__description">{{ content.connect.description }}</p>
        </header>

        <div class="grid grid--full grid-small--half grid--gutters">
            <div class="grid__col">
                <div class="connect connect--blog">
                    <h2 class="connect__title">{{ content.connect.blog_title }}</h2>

                    <div class="articles">
                        {% for article in site.articles | limit: 4 %}
                        <a class="article" href="{{ article.link }}">
                            <img src="{{ article.image | escape | strip_html }}" alt="">
                            <h1 class="article__title">{{ article.title }}</h1>
                        </a>
                        {% endfor %}
                    </div>

                    <a href="https://blog.ipdb.io" class="button button--text">IPDB Blog</a>
                </div>
            </div>
            <div class="grid__col">
                <div class="connect connect--newsletter">
                    <h2 class="connect__title">{{ content.connect.newsletter_title }}</h2>
                </div>

                <div class="connect connect--social">
                    <h2 class="connect__title">{{ content.connect.social_title }}</h2>
                </div>
            </div>
        </div>

    </div>
</section>