{% extends 'layouts/base' %}


{% block content %}
	{# ---------- Top Banner ---------- #}
	<section class="outer-container">
		<div class="inner-container grid gap-16 justify-items-center items-center py-16 lg:grid-cols-2 xl:gap-28">
			<div class="bg-large-logo bg-contain bg-no-repeat bg-center flex items-center h-[666px]">
				<h1 class="heading-0 max-w-md text-center md:max-w-2xl">Nature's Creation,
					<em class="font-medium">Designed</em>
					for Living
				</h1>
			</div>
			{# Top Banner Image #}
			{% set topBannerImage = entry.featureImage.one()%}
			<img class="lg:justify-self-start" src="{{ topBannerImage.getUrl() }}" alt="{{ topBannerImage.altText }}"/>
		</div>
	</section>

	{# ---------- Article ---------- #}
	<section class="bg-cultured">
		<div class="outer-container bg-cultured">
			<div class="inner-container grid gap-x-16 py-20 md:py-32 lg:py-44 lg:grid-cols-2 xl:gap-x-28">
				<h1 class="heading-0 mb-5">{{ entry.articleTitle }}</h1>
				<div class="font-acumin font-light space-y-4 text-xl">
					{{ entry.articleBody }}
				</div>
			</div>
		</div>
	</section>

	{# ---------- Our Process ---------- #}
	{% include "partials/pageSections/_ourProcess" %}

	{# ---------- The Builds ---------- #}

	{% set theBuildFeaturedImages = entry.theBuildFeaturedImages.all() %}
	{% set featuredBuild01 = theBuildFeaturedImages[0] %}
	{% set featuredBuild02 = theBuildFeaturedImages[1] %}

	<section class="bg-cultured">
		<div class="outer-container">
			<div class="inner-container bg-cultured grid gap-x-20 justify-items-center py-20 lg:gap-x-14 lg:justify-items-start lg:py-36 lg:grid-cols-2">
				<img class="hidden lg:block" src="{{ featuredBuild01.getUrl() }}" alt="{{ featuredBuild01.altText }}">
				<div>
					<div class="mb-28 md:max-w-2xl">
						<h1 class="font-poppins text-base mb-7 uppercase">{{ entry.sectionTitle }}</h1>
						<h2 class="font-poppins text-4xl leading-14 mb-8 lg:w-96">{{ entry.buildsArticleTitle }}</h2>
						<p class="font-acumin font-light text-xl my-14 lg:w-120">{{ entry.buildsArticleText }}</p>
						<a class="bg-spicy-mix font-acumin hover:bg-[#855c3e] px-6 py-2 text-white text-lg transition-all" href="{{ url('the-builds') }}">
							See More
						</a>
					</div>
					<img class="mb-10 lg:hidden" src="{{ featuredBuild01.getUrl() }}" alt="{{ featuredBuild01.altText }}">
					<img src="{{ featuredBuild02.getUrl() }}" alt="{{ featuredBuild02.altText }}">
				</div>
			</div>
		</div>
	</section>

	{# ---------- Why Mopanui ---------- #}
	{% include "partials/pageSections/_whyMopanui" %}

	{# ---------- Case Studies ---------- #}
	{% include "partials/pageSections/_caseStudies" %}

	{% include "partials/pageSections/_contactUsBanner" %}

{% endblock %}