Add basic styles to Handlungsfelder

client/src/components/mediacenter/OverviewCard.vue

@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
       <h3 class="mb-4">{{title}}</h3>
       <p class="mb-4">{{description}}</p>
       <router-link
-        to="/mediacenter/overview"
+        :to="link"
         class="inline-flex items-center font-normal"
       >
         <span class="inline">{{call2Action}}</span>

client/src/router/index.ts

@@ -32,7 +32,11 @@ const router = createRouter({
         {
           path: 'overview',
           component: () => import('@/views/MediaMainView.vue')
-        }
+        },
+        {
+          path: 'handlungsfelder',
+          component: () => import('@/views/HandlungsfelderOverview.vue')
+        },
       ]
     },
     {

client/src/views/HandlungsfelderOverview.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+import OverviewCard from '@/components/mediacenter/OverviewCard.vue';
+
+log.debug('HandlungsfelderOverview created');
+
+const fields = [
+  {
+    name: 'Fahrzeug',
+    icon: 'icon-hf-fahrzeug'
+  },
+  {
+    name: 'Reisen',
+    icon: 'icon-hf-reisen'
+  },
+  {
+    name: 'Einkommenssicherung',
+    icon: 'icon-hf-einkommenssicherung'
+  },
+  {
+    name: 'Gesundheit',
+    icon: 'icon-hf-fahrzeug'
+  },
+  {
+    name: 'Haushalt',
+    icon: 'icon-hf-reisen'
+  },
+  {
+    name: 'Sparen',
+    icon: 'icon-hf-einkommenssicherung'
+  },
+  {
+    name: 'Pensionierung',
+    icon: 'icon-hf-fahrzeug'
+  },
+  {
+    name: 'KMU',
+    icon: 'icon-hf-reisen'
+  },
+  {
+    name: 'Wohneigentum',
+    icon: 'icon-hf-einkommenssicherung'
+  },
+  {
+    name: 'Rechtsstreitigkeiten',
+    icon: 'icon-hf-fahrzeug'
+  },
+  {
+    name: 'Erben / Vererben',
+    icon: 'icon-hf-reisen'
+  },
+  {
+    name: 'Selbstständigkeit',
+    icon: 'icon-hf-einkommenssicherung'
+  },
+]
+
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl">
+    <div class="flex items-center justify-between mb-10">
+      <h1>Handlungsfelder</h1>
+      <div>Dropdown</div>
+    </div>
+    <div>
+      <ul class="grid gap-5 grid-cols-4">
+        <li
+          class="bg-white p-4 w-58"
+          v-for="field in fields"
+          :key="field.name"
+        >
+          <img
+            class="m-auto"
+            :src="`/static/icons/${field.icon}.svg`"/>
+          <h3 class="text-base text-center">{{field.name}}</h3>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+.it-icon-hf {
+  color: blue
+}
+.it-icon-hf > * {
+  @apply m-auto;
+}
+</style>

client/src/views/MediaMainView.vue

@@ -15,7 +15,7 @@ log.debug('MediaMainView created');
     <OverviewCard
       title="Handlungsfelder"
       call2-action="Anschauen"
-      link="/mediacenter/some"
+      link="/mediacenter/handlungsfelder"
       description="Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen."
       icon="handlungsfelder-overview"
       class="mb-6">
@@ -23,7 +23,7 @@ log.debug('MediaMainView created');
     <OverviewCard
       title="Lernmedien"
       call2-action="Anschauen"
-      link="/mediacenter/some"
+      link="/mediacenter/lernmedien"
       description="Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird."
       icon="lernmedien-overview"
       class="mb-6">