From 10bdc7a555e3c04c0ac77ea07a6a368345c86e88 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Sun, 30 Mar 2025 20:51:35 +0200
Subject: [PATCH] Added CoverImg component.

---
 src/lib/components/cover-img.svelte | 32 +++++++++++++++
 src/lib/css/cover-img.css           | 63 +++++++++++++++++++++++++++++
 src/routes/+page.svelte             | 20 ++++-----
 3 files changed, 106 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/cover-img.svelte
 create mode 100644 src/lib/css/cover-img.css

diff --git a/src/lib/components/cover-img.svelte b/src/lib/components/cover-img.svelte
new file mode 100644
index 0000000..6be21b8
--- /dev/null
+++ b/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>
diff --git a/src/lib/css/cover-img.css b/src/lib/css/cover-img.css
new file mode 100644
index 0000000..2ee0f71
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2bb2950..4afa3ae 100644
--- a/src/routes/+page.svelte
+++ b/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>
-	<div class="main-banner-content">
-		<div
-			class="flex-row center"
-			style="padding-top: 15rem;padding-bottom: 15rem;"
-		>
-			<h1>Welcome to Etheryo</h1>
-		</div>
-	</div>
+	<CoverImg
+		cover={hub_cover}
+		darken={true}
+		title="Welcome to Etheryo"
+		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."
+	/>
 </div>