{# ========================================================================= #}
{# :: Intro #}
{# ========================================================================= #}
{#
  This section is used on the home page to represent a small
  summary of the styleguide and what it offers.
#}

{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "brandplatform/components/card.njk" as card %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
<section class="bp-intro">
  <div class="bp-container">

    <div class="bp-container bp-container--tiny bp-container--align-left">
      <header class="bp-intro__header">
        <h1 class="bp-intro__title">
          Welcome to the
          <a class="bp-intro__title-link" target="_blank" href="https://www.nibcdirect.be/nl/">{{CONFIG.appName}}</a>
          Brandplatform
        </h1>
      </header>

      <p class="bp-intro__text">
        The brandplatform for {{CONFIG.appName}}, based on certain guidelines,
        represents the branding of the company, visualised throughout components unified in pages.
      </p>
    </div>

    <div class="bp-intro__cards-container bp-container bp-container--medium bp-container--align-left">
      <div class="bp-intro__cards">
        {{card.default("bp-intro__card", {
          title: "Components",
          text: "Seperated by the Atomic Design principle in atoms, molecules and organisms.",
          url: "/styleguide/general",
          action: "View styleguide"
        })}}

        {{card.default("bp-intro__card", {
          title: "Pages",
          text: "Build up by the different components and layout.",
          url: "/pages/general",
          action: "View pages"
        })}}

        {{card.default("bp-intro__card", {
          title: "User Manual",
          text: "Learn how we work and how to add implement the design system into your application.",
          url: "/manual",
          action: "View manual"
        })}}
      </div>
    </div>

  </div>
</section>