Add footer and fix landing page layout

src/Elastic.Markdown/Slices/Layout/_Footer.cshtml

@@ -1,2 +1,36 @@
 @inherits RazorSlice<LayoutViewModel>
+
+
+<footer class="text-grey-20 text-[12px] bg-ink-dark py-12 px-6">
+	<div class="container mx-auto">
+		<a href="https://www.elastic.co/">
+			<img class="block" alt="Elastic logo" src="@Model.Static("logo-elastic-horizontal-white.svg")" width="120"/>
+		</a>
+	</div>
+	<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-2 rounded-tl-4xl rounded-tr-4xl items-center">
+		<div>
+			<ul class="mt-4 flex gap-3">
+				<li>
+					<a class="underline hover:text-white" href="https://www.elastic.co/legal/trademarks">Trademarks</a>
+				</li>
+				<li>
+					<a class="underline hover:text-white" href="https://www.elastic.co/legal/terms-of-use">Terms of Use</a>
+				</li>
+				<li>
+					<a class="underline hover:text-white" href="https://www.elastic.co/legal/privacy-statement">Privacy</a>
+				</li>
+				<li>
+					<a class="underline hover:text-white" href="https://www.elastic.co/sitemap">Sitemap</a>
+				</li>
+			</ul>
+			<p class="mt-4">
+				© @(DateTime.Today.Year) Elasticsearch B.V. All Rights Reserved.
+			</p>
+		</div>
+		<p class="mt-4">
+			Elasticsearch is a trademark of Elasticsearch B.V., registered in the U.S. and in other countries. Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant logo are trademarks of the Apache Software Foundation in the United States and/or other countries.
+		</p>
+	</div>
+</footer>
+
 <script src="@Model.Static("main.js")"></script>

src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml

@@ -1,12 +1,12 @@
 @inherits RazorSlice<LayoutViewModel>
-<div class="font-body text-ink relative">
+<div class="w-full font-body text-ink relative">
 	<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
 		<div class="h-[2px] w-full overflow-hidden">
 			<div class="progress w-full h-full bg-pink-70 left-right"></div>
 		</div>
 		<div class="sr-only">Loading</div>
 	</div>
-	<section class="w-screen px-8 lg:px-6 bg-grey-10">
+	<section class="w-full px-8 lg:px-6 bg-grey-10">
 		<div class="container mx-auto py-16 grid md:grid-cols-2 items-center gap-6">
 			<div class="lg:basis-[50%]">
 				<h1 class="text-4xl font-bold font-sans text-black">Elastic documentation</h1>
@@ -23,7 +23,7 @@
 		</div>
 	</section>
 
-	<section class="w-screen px-8 lg:px-6 bg-grey-10">
+	<section class="w-full px-8 lg:px-6 bg-grey-10">
 		<div class="container mx-auto py-16">
 			<h2 class="font-bold font-sans text-3xl text-ink-dark">Elastic products</h2>
 			<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
@@ -68,7 +68,7 @@
 		</div>
 	</section>
 
-	<section class="w-screen px-8 lg:px-6">
+	<section class="w-full px-8 lg:px-6">
 		<div class="container mx-auto py-16">
 			<h2 class="font-bold font-sans text-3xl text-ink-dark">How-to guides</h2>
 			<div class="grid md:grid-cols-2 xl:grid-cols-4 gap-6 mt-6">
@@ -128,7 +128,7 @@
 		</div>
 	</section>
 
-	<section class="w-screen px-8 lg:px-6">
+	<section class="w-full px-8 lg:px-6">
 		<div class="container mx-auto py-16">
 			<h2 class="font-bold font-sans text-3xl text-ink-dark">References</h2>
 			<div class="mt-6 grid md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -265,7 +265,7 @@
 		</div>
 	</section>
 
-	<section class="w-screen px-8 lg:px-6 bg-grey-10">
+	<section class="w-full px-8 lg:px-6 bg-grey-10">
 		<div class="container mx-auto py-16">
 			<h2 class="font-bold font-sans text-3xl text-ink-dark">Product resources</h2>
 			<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
@@ -321,7 +321,7 @@
 		</div>
 	</section>
 
-	@* <section class="w-screen px-8 lg:px-6 bg-grey-10"> *@
+	@* <section class="w-full px-8 lg:px-6 bg-grey-10"> *@
 	@* 	<div class="container mx-auto py-16"> *@
 	@* 		<h2 class="font-bold text-3xl text-ink-dark">Instant Elasticsearch</h2> *@
 	@* 		<div class="grid lg:grid-cols-2 gap-6 mt-6"> *@
@@ -344,7 +344,7 @@
 	@* 	</div> *@
 	@* </section> *@
 
-	<section class="w-screen px-8 lg:px-6">
+	<section class="w-full px-8 lg:px-6">
 		<div class="container mx-auto py-16">
 			<div class="rounded-xl border-1 border-grey-20 px-12 py-8 grid lg:grid-cols-[auto_1fr_auto] gap-12 items-center justify-center text-center lg:text-left">
 				<img loading="lazy" class="mx-auto" alt="Elastic Community logo" src="@Model.Static("community-logo.png")" />

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -20,14 +20,14 @@
 	<!-- End Google Tag Manager (noscript) -->
 }
 @(await RenderPartialAsync(_Header.Create(Model)))
-<div id="main-container" class="flex flex-col items-center px-6 border-t-1 border-grey-20">
+<div id="main-container" class="flex flex-col items-center border-t-1 border-grey-20">
 	@functions {
 		private async Task DefaultLayout()
 		{
-			<div class="container grid gap-2 grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_auto] lg:grid-cols-[calc(var(--spacing)*65)_auto_calc(var(--spacing)*50)]">
+			<div class="container grid gap-2 grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_auto] lg:grid-cols-[calc(var(--spacing)*65)_auto_calc(var(--spacing)*50)] px-6">
 				@await RenderPartialAsync(_PagesNav.Create(Model))
 				@await RenderPartialAsync(_TableOfContents.Create(Model))
-				<main id="content-container" class="w-full order-2 relative pb-30 overflow-x-hidden">
+				<main id="content-container" class="w-full flex flex-col order-2 relative pb-30 overflow-x-hidden">
 					<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
 						<div class="h-[2px] w-full overflow-hidden">
 							<div class="progress w-full h-full bg-pink-70 left-right"></div>