{# ========================================================================== #}
{# :: Hero  #}
{# ========================================================================== #}
{#
	The hero is located on the top level section of the home page containing a
	small introduction.
#}

{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/hero.njk" as hero %}
{% import "components/article.njk" as article %}

{# ========================================================================== #}
{# :: Variables #}
{# ========================================================================== #}
{% set content %}

		<div class="bp-l-grid bp-l-grid--with-spacing bp-l-grid--stretch">
			{{article.default("bp-l-grid__col bp-l-grid__col--6@small bp-l-grid__col--4@base", {
				title: "Brand",
				text:
					"The philosophy behind our approach towards design and the
					reflection of our culture, values and promise to our customers.",
				link: {
					iconBefore: { name: "chevron-right" },
					text: "Explore the brand",
					url: "/brand"
				}
			})}}

			{{article.default("bp-l-grid__col bp-l-grid__col--6@small bp-l-grid__col--4@base", {
				title: "Resources",
				text:
					"Get access to all kinds of assets that are used to visually
					communicate our brand.",
				link: {
					iconBefore: { name: "chevron-right" },
					text: "Explore our resources",
					url: "/resources"
				}
			})}}

			{{article.default("bp-l-grid__col bp-l-grid__col--6@small bp-l-grid__col--4@base", {
				title: "Styleguide",
				text: "Dive into our components and see how they are used in projects.",
				link: {
					iconBefore: { name: "chevron-right" },
					text: "Explore our styleguide",
					url: "/library"
				}
			})}}
		</div>

{% endset %}

{# ========================================================================== #}
{# :: Partial #}
{# ========================================================================== #}
{{hero.default("", {
	title: CONFIG.app.name + "<br /> Brandplatform",
	text:
		"This is the brandplatform made for "
		+ CONFIG.app.name +
		" which contains components, branding and guidelines that represents the
		branding of the company.",
	image: {
		src: "/assets/images/home/hero.svg",
		meta: CONFIG.app.name
	},
	extraContent: content
})}}