add: general structure for landingpage design

app/assets/styles/general.css

@@ -58,6 +58,7 @@
   --padding-xxs: calc(var(--padding-xs) / var(--scaling-factor));
   --padding-l: calc(var(--padding-default) * var(--scaling-factor));
   --padding-xl: calc(var(--padding-l) * var(--scaling-factor));
+  --padding-xxl: calc(var(--padding-xl) * var(--scaling-factor));
 
   --radius-default: calc(var(--font-size-normal) / 3);
   --radius-border: var(--font-size-normal);
@@ -130,6 +131,10 @@ h3 {
   background-color: var(--color-main-dark);
 }
 
+.bg-main-darkest {
+  background-color: var(--color-main-darkest);
+}
+
 .bg-main-dark-hover:hover {
   background-color: var(--color-main-dark);
 }

app/assets/styles/landingpage.css

@@ -0,0 +1,30 @@
+.home-hero {
+    background-image: url("/img/hero-image.webp");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    color: var(--color-text-invert);
+    text-align: center;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    button {
+        margin: var(--padding-xxl) auto 0;
+    }
+
+    .text {
+        padding: var(--padding-default);
+    }
+
+    h1 {
+        font-size: var(--font-size-xxl);
+    }
+}
+
+.home-text {
+    padding: var(--padding-xxl) var(--padding-default);
+    text-align: center;
+}
+