Added CoverImg component.

src/lib/components/cover-img.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import "$lib/css/base.css";
+    import "$lib/css/cover-img.css";
+
+    export let cover =
+        "https://share.etheryo.fr/rando/2023.11.01/Groupe%20Ombre%20Lac%20Montagne%20Vert%20Bleu.jpg";
+    export let gradient = false;
+    export let darken = false;
+    export let title = "Title";
+    export let subtitle = "This is an exemple subtext";
+</script>
+
+<div class="cover-img">
+    {#if gradient}
+        <div class="cover-img-gradient"></div>
+    {/if}
+    {#if darken}
+        <div class="cover-img-darken"></div>
+    {/if}
+    <div class="cover-img-image">
+        <img alt="banner" src={cover} />
+    </div>
+    <div class="cover-img-text flex-col justify-center">
+        <div class="title">
+            <h1>{title}</h1>
+        </div>
+        <div class="text-justify">
+            <h2>{subtitle}</h2>
+        </div>
+    </div>
+    <div class="cover-img-shadow"></div>
+</div>

src/lib/css/cover-img.css

@@ -0,0 +1,63 @@
+.cover-img {
+    display: grid;
+    grid-template-areas:
+        "cover-img-gradient"
+        "cover-img-title"
+        "cover-img-subtitle"
+        "cover-img-block-shadow"
+        "cover-img-darken"
+        "cover-img-image";
+    width: 100%;
+}
+
+.cover-img-gradient {
+    grid-area: overlay;
+    background: linear-gradient(0deg, #00000000, #261C2C40 50%, #261c2c80 100%);
+    height: calc(var(--navbar-height)*2);
+    width: 100%;
+    z-index: 0;
+}
+
+.cover-img-shadow {
+    grid-area: overlay;
+    width: 100%;
+    height: calc(var(--navbar-height)*2);
+    background-color: rgba(0, 0, 0, 0);
+    align-self: end;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px -120px 60px -20px inset, rgba(0, 0, 0, 0.4) 0px -100px 60px -18px inset;
+}
+
+.cover-img-text {
+    grid-area: overlay;
+    padding: 4rem;
+    z-index: 1;
+    max-width: 50rem;
+}
+
+.cover-img-text h1 {
+    font-size: 3rem;
+}
+
+.cover-img-text h2 {
+    font-size: 1.1rem;
+    font-family: 'JetBrains Mono';
+    color: var(--color-background);
+}
+
+.cover-img-image {
+    grid-area: overlay;
+    width: 100dvw;
+    height: 100dvh;
+}
+
+.cover-img-darken {
+    grid-area: overlay;
+    background-color: rgb(0, 0, 0, 0.25);
+    z-index: 0;
+}
+
+.cover-img-image img {
+    width: 100dvw;
+    height: 100dvh;
+    object-fit: cover;
+}

src/routes/+page.svelte

@@ -1,16 +1,18 @@
 <script>
 	import "$lib/css/base.css";
 	import "$lib/css/main.css";
+
+	import CoverImg from "$lib/components/cover-img.svelte";
+
+	let hub_cover =
+		"https://share.etheryo.fr/rando/2024.07.28/IMG20240728141949_min.jpg";
 </script>
 
 <div class="main-banner">
-	<div class="main-banner-gradient"></div>
+	<CoverImg
-	<div class="main-banner-content">
+		cover={hub_cover}
-		<div
+		darken={true}
-			class="flex-row center"
+		title="Welcome to Etheryo"
-			style="padding-top: 15rem;padding-bottom: 15rem;"
+		subtitle="'Etheryo' comes from the word 'ethernal' and my own name. The goal of this website is to showcase my creations. It consists of programming, art, philosophy and scientific pieces that reflects what I want to bring to this world."
-		>
+	/>
-			<h1>Welcome to Etheryo</h1>
-		</div>
-	</div>
 </div>