From afdc48eb820a9185a8786e7c77adda5d54eebc1a Mon Sep 17 00:00:00 2001
From: Bryant Gillespie <bryant@hireclockwork.com>
Date: Mon, 3 Jul 2023 04:28:59 -0400
Subject: [PATCH] fix hero background showing over content (#19046)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
---
 docs/home.css | 5 ++++-
 docs/index.md | 9 +++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/home.css b/docs/home.css
index 93c16b6d7c193..26667a6bb2caf 100644
--- a/docs/home.css
+++ b/docs/home.css
@@ -7,6 +7,10 @@
 	margin-inline: auto;
 }
 
+.sectionContainerHero {
+	position: relative;
+}
+
 .sectionPaddingHero {
 	padding-block: 108px;
 }
@@ -75,7 +79,6 @@
 	box-shadow: 0 0 100px 24px rgba(255, 255, 255, 0.3);
 	backdrop-filter: blur(4px);
 	margin-left: 20px;
-	z-index: 1;
 }
 
 .flex {
diff --git a/docs/index.md b/docs/index.md
index e8914dcab518d..ae5e292d2bd7f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -9,7 +9,10 @@ import Github from './.vitepress/components/home/icons/Github.vue';
 </script>
 
 <section :class="[$style.hero, $style.paddingBox]">
-	<div :class="[$style.sectionContainer, $style.flex]">
+	<div :class="$style.heroPattern">
+		 <Pattern />
+	</div>
+	<div :class="[$style.sectionContainer, $style.sectionContainerHero, $style.flex]">
 		<div :class="[$style.heroContent, $style.sectionPaddingHero]">
 			<div :class="$style.heroBadge">Resource Hub</div>
 			<h1>Directus Documentation</h1>
@@ -67,9 +70,7 @@ await directus.items('articles').readOne(4, {
 </SnippetToggler>
 		</div>
 	</div>
-	<div :class="$style.heroPattern">
-		 <Pattern />
-	</div>
+
 </section>
 
 <section :class="[$style.sectionPaddingLg, $style.paddingBox]">