From 8d7d6f48a2a8c53072d2b32dad33e841812b51cd Mon Sep 17 00:00:00 2001
From: olli <144932831+OLILHR@users.noreply.github.com>
Date: Tue, 21 Jan 2025 13:02:33 +0100
Subject: [PATCH] chore: apply corporate design (#183)

Apply corporate design
---
 src/lib/components/features/ebd-input.svelte  |  2 +-
 .../components/features/export-button.svelte  |  2 +-
 .../features/filter-chapter-select.svelte     |  2 +-
 .../features/filter-role-select.svelte        |  2 +-
 .../features/filter-section-input.svelte      |  2 +-
 .../features/format-version-select.svelte     |  2 +-
 src/lib/components/index.ts                   |  1 -
 src/lib/components/shared/footer.svelte       |  4 +-
 .../shared/landingpage-banner.svelte          | 86 -------------------
 src/routes/+page.svelte                       | 48 ++++-------
 tailwind.config.js                            |  8 +-
 11 files changed, 29 insertions(+), 130 deletions(-)
 delete mode 100644 src/lib/components/shared/landingpage-banner.svelte

diff --git a/src/lib/components/features/ebd-input.svelte b/src/lib/components/features/ebd-input.svelte
index 5e28bbc..4155470 100644
--- a/src/lib/components/features/ebd-input.svelte
+++ b/src/lib/components/features/ebd-input.svelte
@@ -97,7 +97,7 @@
     on:focus={handleFocus}
     on:blur={handleBlur}
     placeholder={isFocused ? "" : "Bitte auswählen"}
-    class="inline-block border-2 border-white rounded-lg bg-primary py-3 px-2 ps-3 pe-4 focus:outline-none w-full placeholder-black disabled:placeholder-opacity-25 text-base leading-relaxed cursor-pointer"
+    class="inline-block border-2 border-white rounded-lg bg-secondary py-3 px-2 ps-3 pe-4 focus:outline-none w-full placeholder-black disabled:placeholder-opacity-25 text-base leading-relaxed cursor-pointer"
   />
 
   <label
diff --git a/src/lib/components/features/export-button.svelte b/src/lib/components/features/export-button.svelte
index 0c68312..764458a 100644
--- a/src/lib/components/features/export-button.svelte
+++ b/src/lib/components/features/export-button.svelte
@@ -52,7 +52,7 @@
 
 <button
   on:click={handleExport}
-  class="flex flex-row items-center gap-2 rounded-full bg-tint text-[16px] py-4 px-5 text-secondary transition-opacity duration-200 whitespace-nowrap"
+  class="flex flex-row items-center gap-2 rounded-full bg-secondary text-[16px] py-4 px-5 text-black transition-opacity duration-200 whitespace-nowrap"
   class:opacity-30={isDisabled}
   disabled={isDisabled}
 >
diff --git a/src/lib/components/features/filter-chapter-select.svelte b/src/lib/components/features/filter-chapter-select.svelte
index 3fb2e6f..c02869b 100644
--- a/src/lib/components/features/filter-chapter-select.svelte
+++ b/src/lib/components/features/filter-chapter-select.svelte
@@ -79,7 +79,7 @@
     </label>
 
     <div
-      class="border-2 border-white rounded-lg bg-primary p-3 flex flex-wrap items-center gap-2"
+      class="border-2 border-white rounded-lg bg-secondary p-3 flex flex-wrap items-center gap-2"
     >
       {#if selectedChapters.size === 0 && !isSelectFocused}
         <button
diff --git a/src/lib/components/features/filter-role-select.svelte b/src/lib/components/features/filter-role-select.svelte
index 56877ad..d59f8e6 100644
--- a/src/lib/components/features/filter-role-select.svelte
+++ b/src/lib/components/features/filter-role-select.svelte
@@ -77,7 +77,7 @@
     </label>
 
     <div
-      class="border-2 border-white rounded-lg bg-primary p-3 flex flex-wrap items-center gap-2"
+      class="border-2 border-white rounded-lg bg-secondary p-3 flex flex-wrap items-center gap-2"
     >
       {#if selectedRoles.size === 0 && !isSelectFocused}
         <button
diff --git a/src/lib/components/features/filter-section-input.svelte b/src/lib/components/features/filter-section-input.svelte
index 0dc5a13..fc6b901 100644
--- a/src/lib/components/features/filter-section-input.svelte
+++ b/src/lib/components/features/filter-section-input.svelte
@@ -87,7 +87,7 @@
     on:focus={handleFocus}
     on:blur={handleBlur}
     placeholder={isFocused ? "" : 'z.B. "Lieferbeginn"'}
-    class="inline-block border-2 border-white rounded-lg bg-primary py-3 px-2 ps-3 pe-4 focus:outline-none w-full placeholder-black disabled:placeholder-opacity-25 text-base leading-relaxed cursor-pointer"
+    class="inline-block border-2 border-white rounded-lg bg-secondary py-3 px-2 ps-3 pe-4 focus:outline-none w-full placeholder-black disabled:placeholder-opacity-25 text-base leading-relaxed cursor-pointer"
   />
 
   <label
diff --git a/src/lib/components/features/format-version-select.svelte b/src/lib/components/features/format-version-select.svelte
index 067d63b..75f73f3 100644
--- a/src/lib/components/features/format-version-select.svelte
+++ b/src/lib/components/features/format-version-select.svelte
@@ -18,7 +18,7 @@
     id="format-version-select"
     bind:value={selectedVersion}
     on:change={handleSelect}
-    class="inline-block border-2 border-white rounded-lg bg-primary py-3 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer text-base leading-relaxed"
+    class="inline-block border-2 border-white rounded-lg bg-secondary py-3 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer text-base leading-relaxed"
   >
     <option value="">Bitte auswählen</option>
     {#each formatVersions as version}
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 56b3e0a..b58962d 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -11,7 +11,6 @@ export { default as IconLogo } from "$lib/components/shared/icon-logo.svelte";
 export { default as IconLogout } from "$lib/components/shared/icon-logout.svelte";
 export { default as IconPlant } from "$lib/components/shared/icon-plant.svelte";
 export { default as IconSquareArrow } from "$lib/components/shared/icon-square-arrow.svelte";
-export { default as LandingpageBanner } from "$lib/components/shared/landingpage-banner.svelte";
 export { default as LandingpageButton } from "$lib/components/shared/landingpage-button.svelte";
 
 // features
diff --git a/src/lib/components/shared/footer.svelte b/src/lib/components/shared/footer.svelte
index fa2a8ec..adb6cb3 100644
--- a/src/lib/components/shared/footer.svelte
+++ b/src/lib/components/shared/footer.svelte
@@ -2,7 +2,7 @@
   import { base } from "$app/paths";
   import { IconHeart, IconLogo } from "$lib/components";
 
-  export let background = "bg-primary";
+  export let background = "bg-secondary";
 
   let currentYear = new Date().getFullYear();
 </script>
@@ -11,7 +11,7 @@
   <a href="{base}/" title="landingpage" class="flex-none items-center">
     <IconLogo size={24} />
   </a>
-  <div class="flex items-center text-sm text-white space-x-1">
+  <div class="flex items-center text-sm text-black space-x-1">
     <p class="flex items-center flex-wrap">
       © {currentYear} - made with
       <IconHeart />
diff --git a/src/lib/components/shared/landingpage-banner.svelte b/src/lib/components/shared/landingpage-banner.svelte
deleted file mode 100644
index 17957fa..0000000
--- a/src/lib/components/shared/landingpage-banner.svelte
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  // import { cubicOut } from "svelte/easing";
-  // import { fly } from "svelte/transition";
-
-  let visible = false;
-
-  onMount(() => {
-    visible = true;
-  });
-</script>
-
-<div class="flex justify-evenly w-full p-5 pt-10">
-  {#if visible}
-    <!--
-    <div
-      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 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-center">AHB Tabellen</p>
-        </div>
-      </a>
-      <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 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 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 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 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 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-center">Fristenkalender</p>
-        </div>
-      </a>
-      <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>
-  -->
-  {/if}
-</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c369df8..b235c25 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,11 +3,7 @@
 
   import { goto } from "$app/navigation";
   import { base } from "$app/paths";
-  import {
-    AuthButton,
-    IconSquareArrow,
-    LandingpageBanner,
-  } from "$lib/components";
+  import { IconSquareArrow } from "$lib/components";
   import auth from "$src/auth/authService";
   import { isAuthenticated } from "$src/store";
 
@@ -20,37 +16,34 @@
   }
 </script>
 
-<div class="relative">
-  <div class="absolute top-4 right-4 z-10">
-    <AuthButton />
-  </div>
-</div>
-
-<section class="bg-primary flex-grow flex items-center justify-center pt-40">
-  <div class="rounded-lg bg-tint p-12 shadow-md w-1/2">
+<section class="bg-primary flex-grow flex items-center justify-center">
+  <div class="rounded-lg bg-secondary p-12 shadow-md w-1/2">
     <h2
-      class="border-b border-secondary inline-block pb-[10px] text-2xl uppercase text-center w-full"
+      class="border-b border-secondary inline-block pb-[10px] text-2xl uppercase w-full"
     >
       Entscheidungsbaumdiagramme - als Diagramme
     </h2>
-    <p class="text-base text-justify pt-[20px]">
+    <p class="text-base pt-[20px]">
       Wer mit den vom BDEW veröffentlichten Entscheidungsbaumdiagrammen (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 bdew-mako.de 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. Diese Diagramme sollen
-      Fachbereichen und Menschen mit Prozess-Expertise dabei unterstützen, 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 class="text-base pt-[20px]">
+      Die auf
+      <a href="https://bdew-mako.de" class="text-base pt-[20px] text-primary">
+        bdew-mako.de
+      </a>
+      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.
+      Diese Diagramme sollen Fachbereichen und Menschen mit Prozess-Expertise dabei
+      unterstützen, 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]">
+    <p class="text-base pt-[20px]">
       Die Diagramme können entweder als SVG-Dateien heruntergeladen werden, oder
       auch als puml, um entsprechend eigene Erweiterungen, Notizen usw. darin
       abzubilden.
@@ -68,6 +61,3 @@
     </div>
   </div>
 </section>
-<section class="pb-8 bg-primary">
-  <LandingpageBanner />
-</section>
diff --git a/tailwind.config.js b/tailwind.config.js
index e7143c3..f7022c4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,12 +4,8 @@ export default {
   theme: {
     extend: {
       colors: {
-        primary: "#8DE040",
-        secondary: "#6EB52C",
-        tint: "#FBFFFE",
-        "hf-ahbtabellen": "#EBBEC1",
-        "hf-bedingungsbaum": "#E4C67F",
-        "hf-fristenkalender": "#ABDCD3",
+        primary: "#8ba2d7",
+        secondary: "#c2cee9",
       },
     },
   },