chore: add texts and descriptions from landing page mockup

src/lib/components/shared/landingpage-banner.svelte

@@ -13,68 +13,68 @@
 <div class="flex justify-evenly w-full p-5 pt-10">
   {#if visible}
     <div
-      class="flex flex-col items-center"
+      class="flex flex-col items-center rounded-lg bg-hf-ahbtabellen p-8 shadow-md w-1/5 aspect-square"
       in:fly={{ x: -500, duration: 1000, delay: 250, easing: cubicOut }}
     >
       <a
         href="https://ahb-tabellen.stage.hochfrequenz.de"
         target="_blank"
         rel="noopener noreferrer"
-        class="flex flex-col items-center text-secondary hover:text-secondary-focus group"
+        class="flex flex-col items-center group"
       >
         <div
           class="transform transition-transform duration-300 ease-in-out group-hover:scale-110 flex flex-col items-center"
         >
-          <p class="text-xl text-current text-center">AHB Tabellen</p>
+          <p class="text-xl text-center">AHB Tabellen</p>
         </div>
       </a>
-      <p class="text-sm text-justify pt-4 px-40">
+      <p class="text-sm text-justify pt-4 overflow-auto">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
         eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
         voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
       </p>
     </div>
 
     <div
-      class="flex flex-col items-center"
+      class="flex flex-col items-center rounded-lg bg-hf-bedingungsbaum p-8 shadow-md w-1/5 aspect-square"
       in:fly={{ x: -500, duration: 1000, delay: 500, easing: cubicOut }}
     >
       <a
         href="https://bedingungsbaum.hochfrequenz.de"
         target="_blank"
         rel="noopener noreferrer"
-        class="flex flex-col items-center text-secondary hover:text-secondary-focus group"
+        class="flex flex-col items-center group"
       >
         <div
           class="transform transition-transform duration-300 ease-in-out group-hover:scale-110 flex flex-col items-center"
         >
           <p class="text-xl text-current text-center">Bedingungsbaum</p>
         </div>
       </a>
-      <p class="text-sm text-justify pt-4 px-40">
+      <p class="text-sm text-justify pt-4 overflow-auto">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
         eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
         voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
       </p>
     </div>
 
     <div
-      class="flex flex-col items-center"
+      class="flex flex-col items-center rounded-lg bg-hf-fristenkalender p-8 shadow-md w-1/5 aspect-square"
       in:fly={{ x: -500, duration: 1250, delay: 750, easing: cubicOut }}
     >
       <a
         href="https://hochfrequenz.de/#fristenkalender"
         target="_blank"
         rel="noopener noreferrer"
-        class="flex flex-col items-center text-secondary hover:text-secondary-focus group"
+        class="flex flex-col items-center group"
       >
         <div
           class="transform transition-transform duration-300 ease-in-out group-hover:scale-110 flex flex-col items-center"
         >
-          <p class="text-xl text-current text-center">Fristenkalender</p>
+          <p class="text-xl text-center">Fristenkalender</p>
         </div>
       </a>
-      <p class="text-sm text-justify pt-4 px-40">
+      <p class="text-sm text-justify pt-4 overflow-auto">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
         eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
         voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

src/routes/+page.svelte

@@ -29,11 +29,9 @@
 <section class="bg-primary flex-grow flex items-center justify-center">
   <div class="rounded-lg bg-tint p-12 shadow-md">
     <h1 class="text-2xl pb-5">Entscheidungsbaumdiagramme</h1>
-    <h2
+    <p
       class="flex justify-center text-sm border-b border-secondary pb-3 mb-5 uppercase"
-    >
-      - aber es sind actually Diagramme.
-    </h2>
+    ></p>
     <div class="mt-10 flex justify-center">
       <button
         on:click={checkAuthentication}
@@ -44,6 +42,6 @@
     </div>
   </div>
 </section>
-<section class="pb-8">
+<section class="pb-8 bg-primary">
   <LandingpageBanner />
 </section>

src/routes/ebd/+page.svelte

@@ -69,12 +69,36 @@
 
 <Header />
 <div
-  class="container mx-auto flex flex-1 max-w-6xl justify-between items-center"
+  class="container mx-auto flex flex-1 max-w-5xl justify-between items-center gap-20"
 >
   <div class="w-3/5">
-    <h2 class="border-b border-secondary inline-block pb-[12px] uppercase">
-      Entscheidungsbaumdiagramme - aber es sind actually Diagramme.
+    <h2
+      class="border-b border-secondary inline-block pb-[10px] text-xl uppercase"
+    >
+      Entscheidungsbaumdiagramme - ???
     </h2>
+    <p class="text-base text-justify pt-[20px]">
+      Wer mit den vom BDEW veröffentlichten Entscheidungsbaum-”Diagrammen“
+      (EBDs) arbeitet weiß: Die tabellarische Form ist sperrig und mindestens
+      unübersichtlich. Unsere automatisch generierten EBDs von Hochfrequenz sind
+      hingegen echte Diagramme - lesbar und nutzungsfreundlich.
+    </p>
+    <p class="text-base text-justify pt-[20px]">
+      Die auf edi@energy veröffentlichten Word-Dateien werden von uns
+      vollautomatisch ausgelesen. Aus den so gewonnenen Rohdaten erstellt unsere
+      Software anschließend ebenso automatisiert Diagramme, welche inhaltlich zu
+      100% den offiziellen BDEW-Dokumenten entsprechen. Die Diagramme helfen
+      Fachbereichen und Menschen mit Prozess-Expertise dabei, ihre Systeme fit
+      für neue oder angepasste Prüflogiken zu machen. Auf Grundlage echter
+      Diagramme lässt sich viel leichter überblicken, an welcher Stelle
+      Implementierungsaufwände anfallen, ohne dabei den Gesamtprozess aus den
+      Augen zu verlieren.
+    </p>
+    <p class="text-base text-justify pt-[20px]">
+      Die Diagramme können entweder als SVG-Dateien heruntergeladen werden, oder
+      auch als puml, um entsprechend eigene Erweiterungen, Notizen usw. darin
+      abzubilden.
+    </p>
   </div>
 
   <div class="w-2/5 flex flex-col">

tailwind.config.js

@@ -7,6 +7,9 @@ export default {
         primary: "#8DE040",
         secondary: "#6EB52C",
         tint: "#FBFFFE",
+        "hf-ahbtabellen": "#EBBEC1",
+        "hf-bedingungsbaum": "#E4C67F",
+        "hf-fristenkalender": "#ABDCD3",
       },
     },
   },