fix(web): move header background to header to prevent appearence on other routes

Author: Manuel Proß

web/src/app/page.tsx

@@ -10,7 +10,7 @@ export default function Home() {
 	const { data } = useSWR(`/api/${Routes.homepage}`, fetcher);
 
 	return (
-		<main className="relative z-1 pb-12">
+		<main className="pb-12">
 			{data && (
 				<>
 					<Hero headline={data.Hero.headline} list={data.Hero.list} cta={data.Hero.cta} />

web/src/components/Layout/Layout.tsx

@@ -14,9 +14,6 @@ export default function Layout({ children, pages }: PropsWithChildren<LayoutProp
 			</div>
 			<div className="pt-4">
 				<div className="relative rounded-t py-12 px-20 bg-gray-5">
-					<span className="absolute top-[13rem] right-2 left-2 font-fira text-[12rem] md:hero-bg-text-clamp leading-[400px] text-gray-2 font-bold text-center">
-						Vim
-					</span>
 					{children}
 					<Footer />
 				</div>

web/src/components/Strapi/Sections/HeroSection.tsx

@@ -4,17 +4,22 @@ import List from "../Common/List";
 
 export default function Hero({ headline, cta, list }: HeroSection) {
 	return (
-		<div className="flex flex-col justify-end pb-[48rem] h-screen max-w-7xl">
-			{headline && <h1 className="h1-prefix">{headline}</h1>}
-			<div className="flex justify-between">
-				{list && <List list={list} />}
-				{cta && (
-					<div className="flex">
-						<Link className="btn-primary mt-auto mb-0" href={cta.url}>
-							{cta.text}
-						</Link>
-					</div>
-				)}
+		<div className="relative flex flex-col justify-end pb-[48rem] h-screen max-w-7xl">
+			<span className="absolute z-0 top-[13rem] right-2 left-2 font-fira text-[12rem] md:hero-bg-text-clamp leading-[400px] text-gray-2 font-bold text-center">
+				Vim
+			</span>
+			<div className="z-10">
+				{headline && <h1 className="h1-prefix">{headline}</h1>}
+				<div className="flex justify-between">
+					{list && <List list={list} />}
+					{cta && (
+						<div className="flex">
+							<Link className="btn-primary mt-auto mb-0" href={cta.url}>
+								{cta.text}
+							</Link>
+						</div>
+					)}
+				</div>
 			</div>
 		</div>
 	);