From ce745c06e5679f74827bc78116ef86ce1dc42c38 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Fri, 14 Feb 2025 13:57:55 +0100
Subject: [PATCH] component formatting and types

---
 app.vue                                       | 23 ++---
 assets/app.css                                |  8 ++
 components/CollectionDetail.vue               | 11 ++-
 components/ContentBuilder.vue                 | 12 ++-
 components/Footer.vue                         | 24 ++---
 components/Header.vue                         | 17 ++--
 components/base/ListImageItem.vue             | 96 +++++++++++++------
 components/base/ListItem.vue                  | 85 +++++++++-------
 components/dynamicZone/ColumnImageText.vue    |  2 +-
 components/dynamicZone/DualColumnText.vue     |  2 +-
 components/dynamicZone/Embedding.vue          |  5 +-
 components/dynamicZone/EmphasiseArticle.vue   | 21 ----
 components/dynamicZone/FileDownload.vue       | 17 ++--
 components/dynamicZone/FullImage.vue          |  2 +-
 components/dynamicZone/FullText.vue           |  2 +-
 components/dynamicZone/Gallery.vue            |  2 +-
 components/dynamicZone/Section.vue            | 13 +++
 components/dynamicZone/Spacer.vue             | 12 +++
 components/field/Content.vue                  |  8 +-
 components/{shared => items}/Hero.vue         | 11 ++-
 components/shared/EmphasiseArticle.vue        | 40 ++++++++
 components/shared/List.vue                    | 29 +++---
 composables/calculateTitle.ts                 | 11 +++
 composables/provideGlobal.ts                  |  9 ++
 layouts/landing.vue                           | 19 ++--
 pages/[...slug].vue                           | 79 +++++++++------
 types/collection/article.ts                   |  1 -
 types/collection/baseCollection.ts            |  2 +-
 types/collection/event.ts                     |  5 +-
 types/collection/lookup.ts                    | 14 +--
 types/collection/operation.ts                 |  4 +-
 types/collection/page.ts                      |  4 +-
 types/collection/vehicle.ts                   |  5 +-
 types/component/baseComponent.ts              | 28 +++---
 .../columnImageText.ts}                       |  6 +-
 .../dualColumnText.ts}                        |  4 +-
 .../embedding.ts}                             |  3 +-
 .../fileDownload.ts}                          |  5 +-
 .../fullImage.ts}                             |  4 +-
 .../fullText.ts}                              |  4 +-
 .../gallery.ts}                               |  4 +-
 types/component/dynamic-zone/section.ts       |  7 ++
 types/component/dynamic-zone/spacer.ts        |  5 +
 .../component/dynamicZoneEmphasiseArticle.ts  | 10 --
 types/component/global/footer.ts              |  8 ++
 types/component/global/navbar.ts              |  6 ++
 .../{seoComponent.ts => global/seo.ts}        |  2 +-
 types/component/globalFooter.ts               |  8 --
 types/component/globalNavbar.ts               |  8 --
 .../footerLink.ts}                            |  0
 types/component/items/hero.ts                 |  7 ++
 .../{sharedLink.ts => items/link.ts}          |  0
 .../navbarItem.ts}                            |  2 +-
 .../navbarSubItem.ts}                         |  2 +-
 types/component/shared/emphasiseArticle.ts    |  8 ++
 types/component/shared/list.ts                |  7 ++
 types/component/sharedHero.ts                 |  7 --
 types/component/sharedList.ts                 |  8 --
 types/single/global.ts                        | 14 +--
 types/single/homepage.ts                      |  3 +-
 60 files changed, 464 insertions(+), 301 deletions(-)
 delete mode 100644 components/dynamicZone/EmphasiseArticle.vue
 create mode 100644 components/dynamicZone/Section.vue
 create mode 100644 components/dynamicZone/Spacer.vue
 rename components/{shared => items}/Hero.vue (56%)
 create mode 100644 components/shared/EmphasiseArticle.vue
 create mode 100644 composables/calculateTitle.ts
 create mode 100644 composables/provideGlobal.ts
 rename types/component/{dynamicZoneColumnImageText.ts => dynamic-zone/columnImageText.ts} (56%)
 rename types/component/{dynamicZoneDualColumnText.ts => dynamic-zone/dualColumnText.ts} (63%)
 rename types/component/{dynamicZoneEmbedding.ts => dynamic-zone/embedding.ts} (65%)
 rename types/component/{dynamicZoneFileDownload.ts => dynamic-zone/fileDownload.ts} (60%)
 rename types/component/{dynamicZoneFullImage.ts => dynamic-zone/fullImage.ts} (59%)
 rename types/component/{dynamicZoneFullText.ts => dynamic-zone/fullText.ts} (56%)
 rename types/component/{dynamicZoneGallery.ts => dynamic-zone/gallery.ts} (59%)
 create mode 100644 types/component/dynamic-zone/section.ts
 create mode 100644 types/component/dynamic-zone/spacer.ts
 delete mode 100644 types/component/dynamicZoneEmphasiseArticle.ts
 create mode 100644 types/component/global/footer.ts
 create mode 100644 types/component/global/navbar.ts
 rename types/component/{seoComponent.ts => global/seo.ts} (63%)
 delete mode 100644 types/component/globalFooter.ts
 delete mode 100644 types/component/globalNavbar.ts
 rename types/component/{itemsFooterLink.ts => items/footerLink.ts} (100%)
 create mode 100644 types/component/items/hero.ts
 rename types/component/{sharedLink.ts => items/link.ts} (100%)
 rename types/component/{itemsNavbarItem.ts => items/navbarItem.ts} (75%)
 rename types/component/{itemsNavbarSubItem.ts => items/navbarSubItem.ts} (70%)
 create mode 100644 types/component/shared/emphasiseArticle.ts
 create mode 100644 types/component/shared/list.ts
 delete mode 100644 types/component/sharedHero.ts
 delete mode 100644 types/component/sharedList.ts

diff --git a/app.vue b/app.vue
index ef6da57..f4b9fe0 100644
--- a/app.vue
+++ b/app.vue
@@ -3,24 +3,19 @@
 </template>
 
 <script setup lang="ts">
-import type SEOComponent from "./types/component/seoComponent";
-import type Global from "./types/single/global";
+import calculateTitle from "./composables/calculateTitle";
+import provideGlobal from "./composables/provideGlobal";
 
-const runtimeConfig = useRuntimeConfig();
-const appTitle = runtimeConfig.public.app.title;
+const { SEO } = await provideGlobal();
+const title = await calculateTitle();
 
-const { findOne, find } = useStrapi();
-const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
-
-const {
-  metaTitle, metaDescription, keywords,
-} = global.value?.data?.SEO ?? ({} as SEOComponent);
+const { metaDescription, keywords } = SEO ?? {};
 
 useHead({
-  title: metaTitle ?? appTitle,
+  title: title,
   meta: [
-    {name: "description", content: metaDescription},
-    {name: "keywords", content: keywords},
-  ]
+    { name: "description", content: metaDescription },
+    { name: "keywords", content: keywords },
+  ],
 });
 </script>
diff --git a/assets/app.css b/assets/app.css
index ee5c876..bd36a30 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -44,5 +44,13 @@ a[primary-sublink].active {
 }
 
 h1 {
+  @apply text-2xl;
+}
+
+h2 {
   @apply text-xl;
 }
+
+h3 {
+  @apply text-lg;
+}
diff --git a/components/CollectionDetail.vue b/components/CollectionDetail.vue
index 8f57f1b..0183316 100644
--- a/components/CollectionDetail.vue
+++ b/components/CollectionDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="min-h-[calc(100vh-9rem)] h-fit container mx-auto py-12 px-2">
     <h1>{{ data?.title }}</h1>
-    <p v-if="data?.date">
+    <p v-if="data?.date && data.date.includes('T')">
       {{
         new Date(data?.date ?? "").toLocaleString("de-DE", {
           day: "2-digit",
@@ -12,6 +12,15 @@
         })
       }}
     </p>
+    <p v-else-if="data?.date">
+      {{
+        new Date(data?.date ?? "").toLocaleString("de-DE", {
+          day: "2-digit",
+          month: "long",
+          year: "numeric",
+        })
+      }}
+    </p>
     <br />
     <p>{{ data?.description }}</p>
     <br />
diff --git a/components/ContentBuilder.vue b/components/ContentBuilder.vue
index b165712..dee6ae8 100644
--- a/components/ContentBuilder.vue
+++ b/components/ContentBuilder.vue
@@ -1,17 +1,19 @@
 <template>
   <div class="min-h-[calc(100vh-9rem)] w-full">
-    <SharedHero v-if="hero" :data="hero" />
+    <ItemsHero v-if="hero" :data="hero" />
     <div class="container mx-auto py-12 px-2 min-h-[50vh] flex flex-col gap-2">
       <div v-for="item in content" class="contents">
-        <DynamicZoneColumnImageText v-if="item.__component == 'dynamic-zone.column-image-text'" :data="item" />
+        <DynamicZoneSection v-if="item.__component == 'dynamic-zone.section'" :data="item" />
+        <DynamicZoneSpacer v-else-if="item.__component == 'dynamic-zone.spacer'" :data="item" />
+        <DynamicZoneColumnImageText v-else-if="item.__component == 'dynamic-zone.column-image-text'" :data="item" />
         <DynamicZoneDualColumnText v-else-if="item.__component == 'dynamic-zone.dual-column-text'" :data="item" />
-        <DynamicZoneEmphasiseArticle v-else-if="item.__component == 'dynamic-zone.emphasise-article'" :data="item" />
         <DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
         <DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
         <DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
         <DynamicZoneFileDownload v-else-if="item.__component == 'dynamic-zone.file-download'" :data="item" />
         <DynamicZoneEmbedding v-else-if="item.__component == 'dynamic-zone.embedding'" :data="item" />
         <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
+        <SharedEmphasiseArticle v-else-if="item.__component == 'shared.emphasise-article'" :data="item" />
         <br />
       </div>
     </div>
@@ -20,11 +22,11 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type SharedHero from "../types/component/sharedHero";
+import type ItemsHero from "../types/component/items/hero";
 import type { ComponentTypes } from "../types/component/baseComponent";
 
 defineProps({
-  hero: { type: Object as PropType<SharedHero>, required: false, default: null },
+  hero: { type: Object as PropType<ItemsHero>, required: false, default: null },
   content: Array<ComponentTypes>,
 });
 </script>
diff --git a/components/Footer.vue b/components/Footer.vue
index a4158de..b92195f 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,7 +1,10 @@
 <template>
-  <footer darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex gap-2">
-    <div class="self-stretch py-5 justify-center items-center gap-4 md:gap-10 inline-flex flex-wrap">
-      <div v-for="link in footer.links" :key="link.id" class="contents">
+  <footer darkgray class="h-48 min-h-fit w-full p-5 pt-10 flex-col justify-center items-center flex gap-2">
+    <div
+      v-if="links && links.length != 0"
+      class="self-stretch py-5 justify-center items-center gap-4 md:gap-10 inline-flex flex-wrap"
+    >
+      <div v-for="link in links" :key="link.id" class="contents">
         <a v-if="link.URL.startsWith('http')" :href="link.URL" :target="link.target" class="text-base">{{
           link.text
         }}</a>
@@ -15,9 +18,9 @@
         </NuxtLink>
       </div>
     </div>
-    <p class="text-base text-center">@Copyright {{ new Date().getFullYear() }} {{ footer.copyright }}</p>
-    <p class="text-base text-center">Inhalte verwaltet von {{ footer?.maintained ?? footer.copyright }}</p>
-    <p>
+    <p class="text-base text-center">@Copyright {{ new Date().getFullYear() }} {{ copyright ?? title }}</p>
+    <p class="text-base text-center">Inhalte verwaltet von {{ maintained_by ?? copyright ?? title }}</p>
+    <p class="text-sm text-gray-400 pt-2">
       <a href="https://ff-admin.de/webpage" target="_blank">FF Webpage</a>
       entwickelt von
       <a href="https://jk-effects.com" target="_blank">JK Effects</a>
@@ -26,10 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import type Global from "../types/single/global";
-
-const { findOne } = useStrapi();
-
-const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
-const { footer } = global.value?.data ?? ({} as Global);
+const title = await calculateTitle();
+const { footer } = await provideGlobal();
+const { links, maintained_by, copyright } = footer ?? {};
 </script>
diff --git a/components/Header.vue b/components/Header.vue
index 50347bd..9deea5d 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -5,9 +5,11 @@
       class="h-24 min-h-fit w-full px-4 md:px-12 py-2.5 justify-between items-center gap-5 flex overflow-hidden"
     >
       <NuxtLink to="/">
-        <img class="h-16" :src="baseUrl + navbar.logo.url" />
+        <img v-if="logo" class="h-16" :src="baseUrl + logo.url" />
+        <img v-else class="h-16" src="/favicon.png" />
       </NuxtLink>
-      <div class="md:hidden">
+
+      <div v-if="navbar" class="md:hidden">
         <svg
           v-if="!open"
           viewBox="0 0 24 24"
@@ -27,6 +29,7 @@
       </div>
 
       <div
+        v-if="navbar"
         class="w-fit max-w-full p-2.5 justify-center items-center gap-7 flex flex-col md:flex-row md:flex-wrap"
         :class="open ? 'max-md:absolute top-24 left-0 max-md:w-full bg-primary' : 'max-md:hidden'"
       >
@@ -34,7 +37,7 @@
           primary-link
           v-for="link in navbar.navbar_items"
           :key="link.id"
-          :to="`/${link.URL}/${link.default_active_child ?? ''}`"
+          :to="`/${link.URL}${link.default_active_child ? '/' + link.default_active_child : ''}`"
           :class="link.URL == params?.[0] ? 'active' : ''"
         >
           {{ link.name }}
@@ -61,21 +64,21 @@
 </template>
 
 <script setup lang="ts">
-import type Global from "../types/single/global";
+import provideGlobal from "../composables/provideGlobal";
 
 const {
   params: { slug: params },
 } = useRoute();
+
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
-const { findOne } = useStrapi();
 
-const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
-const { navbar } = global.value?.data ?? ({} as Global);
+const { logo, navbar } = await provideGlobal();
 
 const open = ref(false);
 
 const navbar_sub_items = computed(() => {
+  if (!navbar) return [];
   return navbar.navbar_items.find((ni) => ni.URL == params?.[0])?.navbar_sub_items;
 });
 </script>
diff --git a/components/base/ListImageItem.vue b/components/base/ListImageItem.vue
index 69c21f2..323035b 100644
--- a/components/base/ListImageItem.vue
+++ b/components/base/ListImageItem.vue
@@ -4,41 +4,30 @@
     :class="allowNavigation ? '' : 'pointer-events-none'"
     :to="`${urlOverwrite ?? $route.path}/${data?.slug}`"
   >
-    <NuxtPicture
-      loading="lazy"
-      class="w-full h-56 object-cover object-center"
-      :src="baseUrl + data?.image?.url"
-      :imgAttrs="{ class: 'w-full h-56 object-cover object-center' }"
-    />
+    <div class="w-full h-56 relative">
+      <NuxtPicture
+        loading="lazy"
+        class="w-full h-full object-cover object-center"
+        :src="data?.image?.url || logo?.url ? baseUrl + (data?.image?.url ?? logo?.url) : '/favicon.png'"
+        :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+      />
+      <h1
+        v-if="itemIndex"
+        class="text-center text-black text-4xl my-auto absolute bottom-2 left-2"
+        style="text-shadow: 2px 2px 4px white"
+      >
+        {{ itemIndex }}.
+      </h1>
+    </div>
+
     <div class="w-full h-44 relative bg-white px-2 py-5 flex flex-col justify-start items-start gap-2 overflow-y-auto">
       <h1>
-        <span v-if="numberOverwrite != undefined" class="w-24 text-center text-black text-4xl my-auto">
-          {{ numberOverwrite }}.
-        </span>
         {{ data?.title }}
       </h1>
-      <p v-if="numberOverwrite != undefined && data?.date && data.date.includes('T')" class="w-full text-[#5c5c5c]">
-        {{
-          new Date(data?.date ?? "").toLocaleString("de-DE", {
-            day: "2-digit",
-            month: "long",
-            year: "numeric",
-            minute: "2-digit",
-            hour: "2-digit",
-          })
-        }}
-        Uhr
+      <p v-if="itemDate" class="w-full text-[#5c5c5c]">
+        {{ itemDate }}
       </p>
-      <p v-else-if="data?.date && data.date.includes('T')" class="w-full text-[#5c5c5c]">
-        {{
-          new Date(data?.date ?? "").toLocaleString("de-DE", {
-            minute: "2-digit",
-            hour: "2-digit",
-          })
-        }}
-        Uhr
-      </p>
-      <p class="w-full text-[#5c5c5c]">
+      <p class="w-full text-[#5c5c5c] line-clamp-2 overflow-hidden">
         {{ data?.description }}
       </p>
     </div>
@@ -48,14 +37,59 @@
 <script setup lang="ts">
 import type { PropType } from "vue";
 import type BaseCollection from "~/types/collection/baseCollection";
+import type Lookup from "../../types/collection/lookup";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
 
-defineProps({
+const { logo } = await provideGlobal();
+
+const props = defineProps({
   data: Object as PropType<BaseCollection>,
+  lookup: Object as PropType<Lookup>,
   numberOverwrite: { type: Number, default: undefined },
   allowNavigation: { type: Boolean, default: false },
   urlOverwrite: { type: String, default: undefined },
 });
+
+const itemIndex = computed(() => {
+  if (props.lookup?.items_with_number != "none") {
+    return props.numberOverwrite;
+  } else if (props.lookup?.list_with_date != "none") {
+    return new Date(props.data?.date ?? "").toLocaleString("de-DE", {
+      day: "2-digit",
+    });
+  } else {
+    return undefined;
+  }
+});
+
+const itemDate = computed(() => {
+  let config = {
+    year:
+      props.lookup?.list_with_date == "none" || props.lookup?.items_with_number != "none"
+        ? ("numeric" as const)
+        : undefined,
+    month:
+      props.lookup?.list_with_date != "by-month" || props.lookup?.items_with_number != "none"
+        ? ("long" as const)
+        : undefined,
+    day:
+      props.lookup?.list_with_date == "none" || props.lookup?.items_with_number != "none"
+        ? ("2-digit" as const)
+        : undefined,
+    minute:
+      props.data?.date.includes("T") && props.lookup?.items_with_number != "none" ? ("2-digit" as const) : undefined,
+    hour:
+      props.data?.date.includes("T") && props.lookup?.items_with_number != "none" ? ("2-digit" as const) : undefined,
+  };
+  if (Object.values(config).filter((c) => c).length != 0) {
+    //(props.lookup?.list_with_date != "none" || props.lookup?.show_date)
+    return (
+      new Date(props.data?.date ?? "").toLocaleString("de-DE", config) + (props.data?.date.includes("T") ? "Uhr" : "")
+    );
+  } else {
+    return undefined;
+  }
+});
 </script>
diff --git a/components/base/ListItem.vue b/components/base/ListItem.vue
index 94f09bb..bcd6c89 100644
--- a/components/base/ListItem.vue
+++ b/components/base/ListItem.vue
@@ -1,43 +1,19 @@
 <template>
   <NuxtLink
-    class="w-full h-fit py-2 bg-white shadow-md border border-gray-200 rounded-md justify-start items-start flex"
+    class="w-full h-fit p-2 bg-white shadow-md border border-gray-200 rounded-md justify-start items-start flex"
     :class="allowNavigation ? '' : 'pointer-events-none'"
     :to="`${urlOverwrite ?? $route.path}/${data?.slug}`"
   >
-    <h1 v-if="numberOverwrite != undefined" class="w-24 text-center text-black text-4xl my-auto">
-      {{ numberOverwrite }}.
+    <h1 v-if="itemIndex" class="min-w-20 w-20 sm:min-w-24 sm:w-24 text-center text-black text-4xl my-auto">
+      {{ itemIndex }}.
     </h1>
-    <h1 v-else class="w-24 text-center text-black text-4xl my-auto">
-      {{
-        new Date(data?.date ?? "").toLocaleString("de-DE", {
-          day: "2-digit",
-        })
-      }}.
-    </h1>
-    <div class="grow shrink basis-0 flex-col justify-center items-center flex">
+
+    <div class="grow shrink basis-0 flex-col justify-center items-center flex overflow-hidden">
       <h1 class="w-full">{{ data?.title }}</h1>
-      <p v-if="numberOverwrite != undefined && data?.date && data.date.includes('T')" class="w-full text-[#5c5c5c]">
-        {{
-          new Date(data?.date ?? "").toLocaleString("de-DE", {
-            day: "2-digit",
-            month: "long",
-            year: "numeric",
-            minute: "2-digit",
-            hour: "2-digit",
-          })
-        }}
-        Uhr
+      <p v-if="itemDate" class="w-full text-[#5c5c5c]">
+        {{ itemDate }}
       </p>
-      <p v-else-if="data?.date && data.date.includes('T')" class="w-full text-[#5c5c5c]">
-        {{
-          new Date(data?.date ?? "").toLocaleString("de-DE", {
-            minute: "2-digit",
-            hour: "2-digit",
-          })
-        }}
-        Uhr
-      </p>
-      <p class="w-full text-[#5c5c5c]">
+      <p class="w-full text-[#5c5c5c] line-clamp-2 overflow-hidden">
         {{ data?.description }}
       </p>
     </div>
@@ -47,11 +23,54 @@
 <script setup lang="ts">
 import type { PropType } from "vue";
 import type BaseCollection from "../../types/collection/baseCollection";
+import type Lookup from "../../types/collection/lookup";
 
-defineProps({
+const props = defineProps({
   data: Object as PropType<BaseCollection>,
+  lookup: Object as PropType<Lookup>,
   numberOverwrite: { type: Number, default: undefined },
   allowNavigation: { type: Boolean, default: false },
   urlOverwrite: { type: String, default: undefined },
 });
+
+const itemIndex = computed(() => {
+  if (props.lookup?.items_with_number != "none") {
+    return props.numberOverwrite;
+  } else if (props.lookup?.list_with_date != "none") {
+    return new Date(props.data?.date ?? "").toLocaleString("de-DE", {
+      day: "2-digit",
+    });
+  } else {
+    return undefined;
+  }
+});
+
+const itemDate = computed(() => {
+  let config = {
+    year:
+      props.lookup?.list_with_date == "none" || props.lookup?.items_with_number != "none"
+        ? ("numeric" as const)
+        : undefined,
+    month:
+      props.lookup?.list_with_date != "by-month" || props.lookup?.items_with_number != "none"
+        ? ("long" as const)
+        : undefined,
+    day:
+      props.lookup?.list_with_date == "none" || props.lookup?.items_with_number != "none"
+        ? ("2-digit" as const)
+        : undefined,
+    minute:
+      props.data?.date.includes("T") && props.lookup?.items_with_number != "none" ? ("2-digit" as const) : undefined,
+    hour:
+      props.data?.date.includes("T") && props.lookup?.items_with_number != "none" ? ("2-digit" as const) : undefined,
+  };
+  if (Object.values(config).filter((c) => c).length != 0) {
+    //(props.lookup?.list_with_date != "none" || props.lookup?.show_date)
+    return (
+      new Date(props.data?.date ?? "").toLocaleString("de-DE", config) + (props.data?.date.includes("T") ? "Uhr" : "")
+    );
+  } else {
+    return undefined;
+  }
+});
 </script>
diff --git a/components/dynamicZone/ColumnImageText.vue b/components/dynamicZone/ColumnImageText.vue
index f2ff2ea..b7998b0 100644
--- a/components/dynamicZone/ColumnImageText.vue
+++ b/components/dynamicZone/ColumnImageText.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneColumnImageText from "../../types/component/dynamicZoneColumnImageText";
+import type DynamicZoneColumnImageText from "../../types/component/dynamic-zone/columnImageText";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
diff --git a/components/dynamicZone/DualColumnText.vue b/components/dynamicZone/DualColumnText.vue
index b4222ab..1f6e0ef 100644
--- a/components/dynamicZone/DualColumnText.vue
+++ b/components/dynamicZone/DualColumnText.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneDualColumnText from "../../types/component/dynamicZoneDualColumnText";
+import type DynamicZoneDualColumnText from "../../types/component/dynamic-zone/dualColumnText";
 
 defineProps({
   data: Object as PropType<DynamicZoneDualColumnText>,
diff --git a/components/dynamicZone/Embedding.vue b/components/dynamicZone/Embedding.vue
index 6ba036a..f70811e 100644
--- a/components/dynamicZone/Embedding.vue
+++ b/components/dynamicZone/Embedding.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
-    <h1 class="text-center">{{ data.title }}</h1>
-    <iframe :src="data.link" class="w-full h-[90vh]"></iframe>
+    <iframe :src="data?.link" class="w-full h-[90vh]"></iframe>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneEmbedding from "../../types/component/dynamicZoneEmbedding";
+import type DynamicZoneEmbedding from "../../types/component/dynamic-zone/embedding";
 
 const props = defineProps({
   data: Object as PropType<DynamicZoneEmbedding>,
diff --git a/components/dynamicZone/EmphasiseArticle.vue b/components/dynamicZone/EmphasiseArticle.vue
deleted file mode 100644
index 044b536..0000000
--- a/components/dynamicZone/EmphasiseArticle.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div class="w-full flex flex-col justify-center">
-    <h1 class="text-center">{{ data?.titel }}</h1>
-    <p class="text-center text-[#5c5c5c]">{{ data?.description }}</p>
-    <br />
-    <div class="flex gap-2 w-full max-w-4xl mx-auto flex-row flex-wrap justify-center">
-      <div v-for="item in data?.articles" :key="item.slug" class="contents">
-        <BaseListImageItem :data="item" :allow-navigation="true" :url-overwrite="data?.base_url" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { PropType } from "vue";
-import type DynamicZoneEmphasiseArticle from "../../types/component/dynamicZoneEmphasiseArticle";
-
-defineProps({
-  data: Object as PropType<DynamicZoneEmphasiseArticle>,
-});
-</script>
diff --git a/components/dynamicZone/FileDownload.vue b/components/dynamicZone/FileDownload.vue
index 5013dd3..a2b35a2 100644
--- a/components/dynamicZone/FileDownload.vue
+++ b/components/dynamicZone/FileDownload.vue
@@ -1,18 +1,17 @@
 <template>
   <div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
-    <h1 class="text-center">{{ data.title }}</h1>
-    <iframe v-if="data.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
+    <iframe v-if="data?.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
     <NuxtPicture
-      v-if="data.file.mime.includes('image')"
+      v-if="data?.file.mime.includes('image')"
       loading="lazy"
       class="w-full object-cover object-center mx-auto"
       :src="baseUrl + data?.file.url"
       :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
     <a
-      v-if="data.enable_download"
-      :href="baseUrl + data.file.url"
-      :download="data.file.name"
+      v-if="data?.enable_download"
+      :href="baseUrl + data?.file.url"
+      :download="data?.file.name"
       target="_blank"
       class="w-fit text-primary underline"
     >
@@ -23,7 +22,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFileDownload from "../../types/component/dynamicZoneFileDownload";
+import type DynamicZoneFileDownload from "../../types/component/dynamic-zone/fileDownload";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
@@ -33,10 +32,10 @@ const props = defineProps({
 });
 
 const showComponent = computed(() => {
-  if (props.data.file.mime == "application/pdf" || props.data.file.mime.includes("image")) {
+  if (props.data?.file.mime == "application/pdf" || props.data?.file.mime.includes("image")) {
     return true;
   } else {
-    return props.data.enable_download;
+    return props.data?.enable_download;
   }
 });
 </script>
diff --git a/components/dynamicZone/FullImage.vue b/components/dynamicZone/FullImage.vue
index bf8e9af..ff3be0c 100644
--- a/components/dynamicZone/FullImage.vue
+++ b/components/dynamicZone/FullImage.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFullImage from "../../types/component/dynamicZoneFullImage";
+import type DynamicZoneFullImage from "../../types/component/dynamic-zone/fullImage";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
diff --git a/components/dynamicZone/FullText.vue b/components/dynamicZone/FullText.vue
index 29c05b9..9f8c148 100644
--- a/components/dynamicZone/FullText.vue
+++ b/components/dynamicZone/FullText.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFullText from "../../types/component/dynamicZoneFullText";
+import type DynamicZoneFullText from "../../types/component/dynamic-zone/fullText";
 
 defineProps({
   data: Object as PropType<DynamicZoneFullText>,
diff --git a/components/dynamicZone/Gallery.vue b/components/dynamicZone/Gallery.vue
index 9115681..82cd052 100644
--- a/components/dynamicZone/Gallery.vue
+++ b/components/dynamicZone/Gallery.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneGallery from "../../types/component/dynamicZoneGallery";
+import type DynamicZoneGallery from "../../types/component/dynamic-zone/gallery";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
diff --git a/components/dynamicZone/Section.vue b/components/dynamicZone/Section.vue
new file mode 100644
index 0000000..b128bc7
--- /dev/null
+++ b/components/dynamicZone/Section.vue
@@ -0,0 +1,13 @@
+<template>
+  <h1 class="text-center">{{ data?.title }}</h1>
+  <p v-if="data?.description" class="text-center text-[#5c5c5c]">{{ data?.description }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneSection from "../../types/component/dynamic-zone/section";
+
+defineProps({
+  data: Object as PropType<DynamicZoneSection>,
+});
+</script>
diff --git a/components/dynamicZone/Spacer.vue b/components/dynamicZone/Spacer.vue
new file mode 100644
index 0000000..af93520
--- /dev/null
+++ b/components/dynamicZone/Spacer.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="bg-primary h-2 rounded-full w-48 mx-auto"></div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneSpacer from "../../types/component/dynamic-zone/spacer";
+
+defineProps({
+  data: Object as PropType<DynamicZoneSpacer>,
+});
+</script>
diff --git a/components/field/Content.vue b/components/field/Content.vue
index 4f4c556..42f7e07 100644
--- a/components/field/Content.vue
+++ b/components/field/Content.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="w-full h-fit flex flex-col gap-2">
     <div v-for="item in data" :key="item.type" class="contents">
-      <h1 v-if="item.type == 'heading'" class="w-full">
+      <h1 v-if="item.type == 'heading' && item?.level == 1" class="w-full">
         <FieldType v-for="child in item.children" :data="child" />
       </h1>
+      <h2 v-else-if="item.type == 'heading' && item?.level == 2" class="w-full">
+        <FieldType v-for="child in item.children" :data="child" />
+      </h2>
+      <h3 v-else-if="item.type == 'heading'" class="w-full">
+        <FieldType v-for="child in item.children" :data="child" />
+      </h3>
       <p v-else-if="item.type == 'paragraph'" class="w-full">
         <FieldType v-for="child in item.children" :data="child" />
       </p>
diff --git a/components/shared/Hero.vue b/components/items/Hero.vue
similarity index 56%
rename from components/shared/Hero.vue
rename to components/items/Hero.vue
index fba797b..26afc72 100644
--- a/components/shared/Hero.vue
+++ b/components/items/Hero.vue
@@ -1,23 +1,24 @@
 <template>
-  <div class="flex flex-col w-full max-h-72 h-72 overflow-hidden">
+  <div class="flex flex-col w-full max-h-72 h-fit overflow-hidden">
     <NuxtPicture
+      v-if="data?.banner"
       loading="lazy"
       class="w-full h-60 object-cover object-center"
       :src="baseUrl + data?.banner.url"
       :imgAttrs="{ class: 'w-full h-60 object-cover object-center' }"
     />
-    <div primary class="h-12 min-h-12 w-full px-12 justify-center items-center gap-5 flex">
-      <p>{{ data?.title }}</p>
+    <div v-if="data?.title" primary class="h-12 min-h-12 w-full px-12 justify-center items-center gap-5 flex">
+      <p>{{ data.title }}</p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type SharedHero from "../../types/component/sharedHero";
+import type ItemsHero from "../../types/component/items/hero";
 
 defineProps({
-  data: Object as PropType<SharedHero>,
+  data: Object as PropType<ItemsHero>,
 });
 
 const runtimeConfig = useRuntimeConfig();
diff --git a/components/shared/EmphasiseArticle.vue b/components/shared/EmphasiseArticle.vue
new file mode 100644
index 0000000..ade964f
--- /dev/null
+++ b/components/shared/EmphasiseArticle.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="w-full flex flex-col justify-center">
+    <div class="flex gap-2 w-full max-w-4xl mx-auto flex-row flex-wrap justify-center">
+      <div v-for="item in data?.articles" :key="item.slug" class="contents">
+        <BaseListImageItem
+          v-if="articleLookup?.show_image"
+          :data="item"
+          :allow-navigation="articleLookup.enable_detail"
+          :url-overwrite="data?.link_to_articles"
+        />
+        <BaseListItem
+          v-else-if="articleLookup"
+          :data="item"
+          :allow-navigation="articleLookup.enable_detail"
+          :url-overwrite="data?.link_to_articles"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type SharedEmphasiseArticle from "../../types/component/shared/emphasiseArticle";
+import type Lookup from "../../types/collection/lookup";
+
+const { find } = useStrapi();
+const { data: lookup } = await useAsyncData("lookup", () =>
+  find<Lookup>("collection-lookups", {
+    filters: {
+      collection: "articles",
+    },
+  })
+);
+const articleLookup = ref(lookup.value?.data[0]);
+
+defineProps({
+  data: Object as PropType<SharedEmphasiseArticle>,
+});
+</script>
diff --git a/components/shared/List.vue b/components/shared/List.vue
index 2114894..8bb5fca 100644
--- a/components/shared/List.vue
+++ b/components/shared/List.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="data?.lookup.date_list" class="flex flex-row justify-between w-full max-w-4xl mx-auto">
+  <div v-if="data?.lookup.list_with_date != 'none'" class="flex flex-row justify-between w-full max-w-4xl mx-auto">
     <svg
       viewBox="0 0 24 24"
       class="h-5 w-5 cursor-pointer fill-none stroke-2 stroke-black"
@@ -20,26 +20,25 @@
   </div>
   <div
     class="flex gap-2 w-full max-w-4xl mx-auto"
-    :class="data?.lookup.image_item ? 'flex-row flex-wrap justify-center' : ' flex-col'"
+    :class="data?.lookup.show_image ? 'flex-row flex-wrap justify-center' : ' flex-col'"
   >
     <div v-for="(item, index) in collection" :key="item.slug" class="contents">
-      <p
-        v-if="data?.lookup.date_list && data?.lookup.numbered_item == false && getDate(index) != ''"
-        class="w-full text-center"
-      >
+      <p v-if="data?.lookup.list_with_date == 'by-month' && getDate(index) != ''" class="w-full text-center">
         {{ getDate(index) }}
       </p>
       <BaseListImageItem
-        v-if="data?.lookup.image_item"
+        v-if="data?.lookup.show_image"
         :data="item"
-        :number-overwrite="data.lookup.numbered_item ? getNumber(index) : undefined"
-        :allow-navigation="data.enable_detail"
+        :lookup="data?.lookup"
+        :number-overwrite="getNumber(index)"
+        :allow-navigation="data.lookup.enable_detail"
       />
       <BaseListItem
         v-else-if="data?.lookup"
         :data="item"
-        :number-overwrite="data.lookup.numbered_item ? getNumber(index) : undefined"
-        :allow-navigation="data.enable_detail"
+        :lookup="data?.lookup"
+        :number-overwrite="getNumber(index)"
+        :allow-navigation="data.lookup.enable_detail"
       />
     </div>
   </div>
@@ -91,7 +90,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type SharedList from "../../types/component/sharedList";
+import type SharedList from "../../types/component/shared/list";
 import type BaseCollection from "~/types/collection/baseCollection";
 
 interface Meta {
@@ -113,7 +112,7 @@ const years = ref<Array<number>>([]);
 const pagination = ref<Meta>({ page: 0, pageSize: 0, pageCount: 0, total: 0 });
 const activeYear = ref<number>(0);
 
-if (props.data?.lookup.date_list) {
+if (props.data?.lookup.list_with_date) {
   const { data: year } = await useAsyncData<Array<number>>("distinct-years", () =>
     $fetch(`${baseUrl}/api/custom/${props.data?.lookup.collection}/distinct-years`)
   );
@@ -122,7 +121,7 @@ if (props.data?.lookup.date_list) {
 }
 const { data: collections } = await useAsyncData("collection", () =>
   find<BaseCollection>(props.data?.lookup.collection ?? "", {
-    ...(props.data?.lookup?.date_list
+    ...(props.data?.lookup?.list_with_date
       ? {
           sort: "date:desc",
           filters: {
@@ -200,7 +199,7 @@ const displayedPagesNumbers = computed(() => {
 });
 
 function getNumber(index: number): number {
-  if (props.data?.lookup.inverse_count) {
+  if (props.data?.lookup.items_with_number == "inverted") {
     return pagination.value.total - numberOffset.value - index;
   } else {
     return numberOffset.value + index + 1;
diff --git a/composables/calculateTitle.ts b/composables/calculateTitle.ts
new file mode 100644
index 0000000..2b9ab75
--- /dev/null
+++ b/composables/calculateTitle.ts
@@ -0,0 +1,11 @@
+import provideGlobal from "./provideGlobal";
+
+export default async function () {
+  const runtimeConfig = useRuntimeConfig();
+  const appTitle = runtimeConfig.public.app.title;
+
+  const { SEO } = await provideGlobal();
+  const { metaTitle } = SEO ?? {};
+
+  return metaTitle ?? appTitle;
+}
diff --git a/composables/provideGlobal.ts b/composables/provideGlobal.ts
new file mode 100644
index 0000000..61beaf8
--- /dev/null
+++ b/composables/provideGlobal.ts
@@ -0,0 +1,9 @@
+import type Global from "../types/single/global";
+
+export default async function () {
+  const { findOne } = useStrapi();
+  const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
+  const { logo, navbar, footer, SEO } = global.value?.data ?? {};
+
+  return { logo, navbar, footer, SEO };
+}
diff --git a/layouts/landing.vue b/layouts/landing.vue
index 2b544f9..9b6bb80 100644
--- a/layouts/landing.vue
+++ b/layouts/landing.vue
@@ -1,14 +1,17 @@
 <template>
-  <div v-if="!hide_backdrop" class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
+  <div v-if="backdrop" class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
     <NuxtPicture
       loading="lazy"
       class="w-full h-full object-cover object-center"
       :src="baseUrl + backdrop.url"
       :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
-    <img class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + navbar.logo.url" />
+
+    <img v-if="logo" class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + logo.url" />
+    <img v-else class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" src="/favicon.png" />
+
     <img
-      class="absolute h-5 w-5 left-1/2 -translate-y-1/2 bottom-5 text-gray-400 cursor-pointer"
+      class="absolute h-5 w-5 left-1/2 -translate-y-1/2 bottom-5 text-gray-400 p-2 box-content rounded-full bg-white cursor-pointer"
       src="/chevrons-down.svg"
       @click="scroll()"
     />
@@ -19,21 +22,17 @@
 </template>
 
 <script setup lang="ts">
-import type Global from "../types/single/global";
+import provideGlobal from "../composables/provideGlobal";
 import type Homepage from "../types/single/homepage";
 
-const {
-  params: { slug: params },
-} = useRoute();
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
 const { findOne } = useStrapi();
 
-const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
-const { navbar } = global.value?.data as unknown as Global;
+const { logo } = await provideGlobal();
 
 const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage"));
-const { backdrop, hide_backdrop } = homepage.value?.data as unknown as Homepage;
+const { backdrop } = homepage.value?.data ?? {};
 
 function scroll() {
   window.scrollTo({ top: window.innerHeight - 96, behavior: "smooth" });
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 71ab37b..68a631b 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -9,27 +9,32 @@
 <script setup lang="ts">
 import type Article from "../types/collection/article";
 import type Event from "../types/collection/event";
-import type Lookup from "../types/collection/lookup";
 import type Operation from "../types/collection/operation";
 import type Vehicle from "../types/collection/vehicle";
 import type Page from "../types/collection/page";
-import type NavbarSubItem from "../types/component/itemsNavbarSubItem";
-import type Global from "../types/single/global";
+import provideGlobal from "../composables/provideGlobal";
 
 const {
   params: { slug: params },
 } = useRoute();
 const { findOne, find } = useStrapi();
 
-const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
-const {
-  navbar: { navbar_items },
-} = global.value?.data ?? ({} as Global);
-
-const navbar_sub_items = ref<NavbarSubItem[]>(navbar_items.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? []);
-const active_item = ref<Page | null | undefined>(navbar_items.find((ni) => ni.URL == params[0])?.page);
-const active_sub_item = ref<Page | null | undefined>(navbar_sub_items.value.find((si) => si.URL == params[1])?.page);
-const active_page_id = ref<string>(active_sub_item.value?.documentId ?? active_item.value?.documentId ?? "");
+const { navbar } = await provideGlobal();
+const navbar_items = computed(() => {
+  return navbar?.navbar_items ?? [];
+});
+const navbar_sub_items = computed(() => {
+  return navbar_items.value.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? [];
+});
+const active_item = computed(() => {
+  return navbar_items.value.find((ni) => ni.URL == params[0])?.page;
+});
+const active_sub_item = computed(() => {
+  return navbar_sub_items.value.find((si) => si.URL == params[1])?.page;
+});
+const active_page_id = computed(() => {
+  return active_sub_item.value?.documentId ?? active_item.value?.documentId ?? "";
+});
 
 const { data: pages } = await useAsyncData("pages", () =>
   findOne<Page | Array<Page>>("pages", active_page_id.value, {
@@ -47,32 +52,48 @@ const { data: pages } = await useAsyncData("pages", () =>
     },
   })
 );
-const page = ref<Page | undefined>(Array.isArray(pages.value?.data) ? pages.value.data[0] : pages.value?.data);
+const page = computed(() => {
+  return Array.isArray(pages.value?.data) ? pages.value.data[0] : pages.value?.data;
+});
 
 let detail = ref<Article | Operation | Event | Vehicle | undefined>(undefined);
-const searchDetail = params[2] || (params[1] && navbar_sub_items.value.length == 0);
-if (searchDetail) {
-  const paramsFind = params[2] ? [params[0], params[1]] : [params[0]];
-  const { data: lookup } = await useAsyncData("lookup", () => find<Lookup>("collection-lookups"));
-  const activeLookup: Lookup | undefined = lookup.value?.data.find((l) => paramsFind.includes(l.reference));
-  const { data: details } = await useAsyncData("detail", () =>
-    find<Article | Operation | Event | Vehicle>(activeLookup?.collection ?? "", {
-      populate: "*",
-      filters: {
-        slug: params[2] ?? params[1],
-      },
-    })
-  );
-  detail.value = details.value?.data[0];
+const searchDetail = computed(() => {
+  if (!active_sub_item.value) return params[1];
+  return params[2];
+});
+if (searchDetail.value) {
+  let collectionOfDetail = [
+    ...new Set(
+      page.value?.content
+        .filter((c) => c.__component == "shared.list")
+        .filter((c) => c.lookup.enable_detail)
+        .map((c) => c.lookup.collection)
+    ),
+  ];
+
+  for (const element of collectionOfDetail) {
+    const { data: details } = await useAsyncData("detail", () =>
+      find<Article | Operation | Event | Vehicle>(element ?? "", {
+        populate: "*",
+        filters: {
+          slug: params[2] ?? params[1],
+        },
+      })
+    );
+    if (details.value?.data[0]) {
+      detail.value = details.value?.data[0];
+      break;
+    }
+  }
 }
 
 const notFound = computed(() => {
-  if (searchDetail) return !detail.value;
+  if (searchDetail.value) return !detail.value;
   else return active_page_id.value == "" && !page.value?.content && !page.value?.hero;
 });
 
 const showContentBuilder = computed(() => {
-  if (searchDetail) return !detail.value;
+  if (searchDetail.value) return !detail.value;
   else return !!page.value?.content || !!page.value?.hero;
 });
 </script>
diff --git a/types/collection/article.ts b/types/collection/article.ts
index d151db8..9f1bbab 100644
--- a/types/collection/article.ts
+++ b/types/collection/article.ts
@@ -1,4 +1,3 @@
-import type BaseFile from "../component/baseFile";
 import type BaseCollection from "./baseCollection";
 
 export default interface Article extends BaseCollection {}
diff --git a/types/collection/baseCollection.ts b/types/collection/baseCollection.ts
index aea31f1..1dca5f4 100644
--- a/types/collection/baseCollection.ts
+++ b/types/collection/baseCollection.ts
@@ -12,7 +12,7 @@ export default interface BaseCollection {
 
   title: string;
   description: string;
-  date: string | undefined;
+  date: string;
   content: ContentField | undefined;
   image: BaseFile | undefined;
   attachment: Array<BaseFile>;
diff --git a/types/collection/event.ts b/types/collection/event.ts
index 5c22645..100ffdd 100644
--- a/types/collection/event.ts
+++ b/types/collection/event.ts
@@ -1,6 +1,3 @@
 import type BaseCollection from "./baseCollection";
 
-export default interface Event extends BaseCollection {
-  image: undefined;
-  content: undefined;
-}
+export default interface Event extends BaseCollection {}
diff --git a/types/collection/lookup.ts b/types/collection/lookup.ts
index e13cf7f..5d9d084 100644
--- a/types/collection/lookup.ts
+++ b/types/collection/lookup.ts
@@ -1,13 +1,15 @@
 export default interface Lookup {
   id: number;
   documentId: string;
-  collection: string;
-  image_item: boolean;
-  date_list: boolean;
-  numbered_item: boolean;
-  inverse_count: boolean;
-  reference: string;
   createdAt: string;
   updatedAt: string;
   publishedAt: string;
+
+  reference: string;
+  collection: "events" | "vehicles" | "articles" | "operations";
+  show_image: boolean;
+  show_date: boolean;
+  list_with_date: "none" | "by-year" | "by-month";
+  items_with_number: "none" | "numbered" | "inverted";
+  enable_detail: boolean;
 }
diff --git a/types/collection/operation.ts b/types/collection/operation.ts
index 5750de3..430fa5f 100644
--- a/types/collection/operation.ts
+++ b/types/collection/operation.ts
@@ -1,5 +1,3 @@
 import type BaseCollection from "./baseCollection";
 
-export default interface Operation extends BaseCollection {
-  image: undefined;
-}
+export default interface Operation extends BaseCollection {}
diff --git a/types/collection/page.ts b/types/collection/page.ts
index 17d70ba..807babb 100644
--- a/types/collection/page.ts
+++ b/types/collection/page.ts
@@ -1,5 +1,5 @@
 import type { ComponentTypes } from "../component/baseComponent";
-import type SharedHero from "../component/sharedHero";
+import type ItemsHero from "../component/items/hero";
 
 export default interface Page {
   id: number;
@@ -10,7 +10,7 @@ export default interface Page {
   publishedAt: string;
   locale: string;
   slug: string;
-  hero: SharedHero;
+  hero: ItemsHero;
   content: Array<ComponentTypes>;
   localizations: any[];
 }
diff --git a/types/collection/vehicle.ts b/types/collection/vehicle.ts
index 8e8d21f..bc37df2 100644
--- a/types/collection/vehicle.ts
+++ b/types/collection/vehicle.ts
@@ -1,6 +1,3 @@
-import type BaseFile from "../component/baseFile";
 import type BaseCollection from "./baseCollection";
 
-export default interface Vehicle extends BaseCollection {
-  date: undefined;
-}
+export default interface Vehicle extends BaseCollection {}
diff --git a/types/component/baseComponent.ts b/types/component/baseComponent.ts
index 84ff7c2..f0d1395 100644
--- a/types/component/baseComponent.ts
+++ b/types/component/baseComponent.ts
@@ -1,12 +1,14 @@
-import type DynamicZoneColumnImageText from "./dynamicZoneColumnImageText";
-import type DynamicZoneDualColumnText from "./dynamicZoneDualColumnText";
-import type DynamicZoneEmphasiseArticle from "./dynamicZoneEmphasiseArticle";
-import type DynamicZoneFullImage from "./dynamicZoneFullImage";
-import type DynamicZoneFullText from "./dynamicZoneFullText";
-import type DynamicZoneGallery from "./dynamicZoneGallery";
-import type DynamicZoneFileDownload from "./dynamicZoneFileDownload";
-import type SharedList from "./sharedList";
-import type DynamicZoneEmbedding from "./dynamicZoneEmbedding";
+import type SharedEmphasiseArticle from "./shared/emphasiseArticle";
+import type SharedList from "./shared/list";
+import type DynamicZoneColumnImageText from "./dynamic-zone/columnImageText";
+import type DynamicZoneDualColumnText from "./dynamic-zone/dualColumnText";
+import type DynamicZoneFullImage from "./dynamic-zone/fullImage";
+import type DynamicZoneFullText from "./dynamic-zone/fullText";
+import type DynamicZoneGallery from "./dynamic-zone/gallery";
+import type DynamicZoneFileDownload from "./dynamic-zone/fileDownload";
+import type DynamicZoneEmbedding from "./dynamic-zone/embedding";
+import type DynamicZoneSection from "./dynamic-zone/section";
+import type DynamicZoneSpacer from "./dynamic-zone/spacer";
 
 export default interface BaseComponent {
   __component: ComponentNames;
@@ -15,10 +17,12 @@ export default interface BaseComponent {
 
 export type ComponentNames =
   | "shared.list"
+  | "shared.emphasise-article"
+  | "dynamic-zone.section"
+  | "dynamic-zone.spacer"
   | "dynamic-zone.gallery"
   | "dynamic-zone.full-text"
   | "dynamic-zone.full-image"
-  | "dynamic-zone.emphasise-article"
   | "dynamic-zone.dual-column-text"
   | "dynamic-zone.column-image-text"
   | "dynamic-zone.file-download"
@@ -26,10 +30,12 @@ export type ComponentNames =
 
 export type ComponentTypes =
   | SharedList
+  | SharedEmphasiseArticle
+  | DynamicZoneSection
+  | DynamicZoneSpacer
   | DynamicZoneGallery
   | DynamicZoneFullText
   | DynamicZoneFullImage
-  | DynamicZoneEmphasiseArticle
   | DynamicZoneDualColumnText
   | DynamicZoneColumnImageText
   | DynamicZoneFileDownload
diff --git a/types/component/dynamicZoneColumnImageText.ts b/types/component/dynamic-zone/columnImageText.ts
similarity index 56%
rename from types/component/dynamicZoneColumnImageText.ts
rename to types/component/dynamic-zone/columnImageText.ts
index ea285ab..45d87db 100644
--- a/types/component/dynamicZoneColumnImageText.ts
+++ b/types/component/dynamic-zone/columnImageText.ts
@@ -1,6 +1,6 @@
-import type ContentField from "../field/content";
-import type BaseComponent from "./baseComponent";
-import type BaseFile from "./baseFile";
+import type ContentField from "../../field/content";
+import type BaseComponent from "../baseComponent";
+import type BaseFile from "../baseFile";
 
 export default interface DynamicZoneColumnImageText extends BaseComponent {
   __component: "dynamic-zone.column-image-text";
diff --git a/types/component/dynamicZoneDualColumnText.ts b/types/component/dynamic-zone/dualColumnText.ts
similarity index 63%
rename from types/component/dynamicZoneDualColumnText.ts
rename to types/component/dynamic-zone/dualColumnText.ts
index 383f196..6fbc969 100644
--- a/types/component/dynamicZoneDualColumnText.ts
+++ b/types/component/dynamic-zone/dualColumnText.ts
@@ -1,5 +1,5 @@
-import type ContentField from "../field/content";
-import type BaseComponent from "./baseComponent";
+import type ContentField from "../../field/content";
+import type BaseComponent from "../baseComponent";
 
 export default interface DynamicZoneDualColumnText extends BaseComponent {
   __component: "dynamic-zone.dual-column-text";
diff --git a/types/component/dynamicZoneEmbedding.ts b/types/component/dynamic-zone/embedding.ts
similarity index 65%
rename from types/component/dynamicZoneEmbedding.ts
rename to types/component/dynamic-zone/embedding.ts
index 79bac7b..da8c81a 100644
--- a/types/component/dynamicZoneEmbedding.ts
+++ b/types/component/dynamic-zone/embedding.ts
@@ -1,7 +1,6 @@
-import type BaseComponent from "./baseComponent";
+import type BaseComponent from "../baseComponent";
 
 export default interface DynamicZoneEmbedding extends BaseComponent {
   __component: "dynamic-zone.embedding";
-  title: string;
   link: string;
 }
diff --git a/types/component/dynamicZoneFileDownload.ts b/types/component/dynamic-zone/fileDownload.ts
similarity index 60%
rename from types/component/dynamicZoneFileDownload.ts
rename to types/component/dynamic-zone/fileDownload.ts
index 7d51745..9a24e46 100644
--- a/types/component/dynamicZoneFileDownload.ts
+++ b/types/component/dynamic-zone/fileDownload.ts
@@ -1,9 +1,8 @@
-import type BaseComponent from "./baseComponent";
-import type BaseFile from "./baseFile";
+import type BaseComponent from "../baseComponent";
+import type BaseFile from "../baseFile";
 
 export default interface DynamicZoneFileDownload extends BaseComponent {
   __component: "dynamic-zone.file-download";
   enable_download: boolean;
-  title: string;
   file: BaseFile;
 }
diff --git a/types/component/dynamicZoneFullImage.ts b/types/component/dynamic-zone/fullImage.ts
similarity index 59%
rename from types/component/dynamicZoneFullImage.ts
rename to types/component/dynamic-zone/fullImage.ts
index 6e334f2..8fd2b12 100644
--- a/types/component/dynamicZoneFullImage.ts
+++ b/types/component/dynamic-zone/fullImage.ts
@@ -1,5 +1,5 @@
-import type BaseComponent from "./baseComponent";
-import type BaseFile from "./baseFile";
+import type BaseComponent from "../baseComponent";
+import type BaseFile from "../baseFile";
 
 export default interface DynamicZoneFullImage extends BaseComponent {
   __component: "dynamic-zone.full-image";
diff --git a/types/component/dynamicZoneFullText.ts b/types/component/dynamic-zone/fullText.ts
similarity index 56%
rename from types/component/dynamicZoneFullText.ts
rename to types/component/dynamic-zone/fullText.ts
index f516610..4a2f998 100644
--- a/types/component/dynamicZoneFullText.ts
+++ b/types/component/dynamic-zone/fullText.ts
@@ -1,5 +1,5 @@
-import type ContentField from "../field/content";
-import type BaseComponent from "./baseComponent";
+import type ContentField from "../../field/content";
+import type BaseComponent from "../baseComponent";
 
 export default interface DynamicZoneFullText extends BaseComponent {
   __component: "dynamic-zone.full-text";
diff --git a/types/component/dynamicZoneGallery.ts b/types/component/dynamic-zone/gallery.ts
similarity index 59%
rename from types/component/dynamicZoneGallery.ts
rename to types/component/dynamic-zone/gallery.ts
index 1e30ab5..e45dbc4 100644
--- a/types/component/dynamicZoneGallery.ts
+++ b/types/component/dynamic-zone/gallery.ts
@@ -1,5 +1,5 @@
-import type BaseComponent from "./baseComponent";
-import type BaseFile from "./baseFile";
+import type BaseComponent from "../baseComponent";
+import type BaseFile from "../baseFile";
 
 export default interface DynamicZoneGallery extends BaseComponent {
   __component: "dynamic-zone.gallery";
diff --git a/types/component/dynamic-zone/section.ts b/types/component/dynamic-zone/section.ts
new file mode 100644
index 0000000..67b517b
--- /dev/null
+++ b/types/component/dynamic-zone/section.ts
@@ -0,0 +1,7 @@
+import type BaseComponent from "../baseComponent";
+
+export default interface DynamicZoneSection extends BaseComponent {
+  __component: "dynamic-zone.section";
+  title: string;
+  description: string;
+}
diff --git a/types/component/dynamic-zone/spacer.ts b/types/component/dynamic-zone/spacer.ts
new file mode 100644
index 0000000..f391689
--- /dev/null
+++ b/types/component/dynamic-zone/spacer.ts
@@ -0,0 +1,5 @@
+import type BaseComponent from "../baseComponent";
+
+export default interface DynamicZoneSpacer extends BaseComponent {
+  __component: "dynamic-zone.spacer";
+}
diff --git a/types/component/dynamicZoneEmphasiseArticle.ts b/types/component/dynamicZoneEmphasiseArticle.ts
deleted file mode 100644
index 190aad7..0000000
--- a/types/component/dynamicZoneEmphasiseArticle.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type Article from "../collection/article";
-import type BaseComponent from "./baseComponent";
-
-export default interface DynamicZoneEmphasiseArticle extends BaseComponent {
-  __component: "dynamic-zone.emphasise-article";
-  titel: string;
-  description: string;
-  articles: Array<Article>;
-  base_url: string;
-}
diff --git a/types/component/global/footer.ts b/types/component/global/footer.ts
new file mode 100644
index 0000000..8b9ec31
--- /dev/null
+++ b/types/component/global/footer.ts
@@ -0,0 +1,8 @@
+import type FooterLink from "../items/footerLink";
+
+export default interface Footer {
+  id: number;
+  copyright: undefined | string;
+  maintained_by: undefined | string;
+  links: FooterLink[];
+}
diff --git a/types/component/global/navbar.ts b/types/component/global/navbar.ts
new file mode 100644
index 0000000..18e833d
--- /dev/null
+++ b/types/component/global/navbar.ts
@@ -0,0 +1,6 @@
+import type NavbarItem from "../items/navbarItem";
+
+export default interface Navbar {
+  id: number;
+  navbar_items: NavbarItem[];
+}
diff --git a/types/component/seoComponent.ts b/types/component/global/seo.ts
similarity index 63%
rename from types/component/seoComponent.ts
rename to types/component/global/seo.ts
index 0a9c12e..290d093 100644
--- a/types/component/seoComponent.ts
+++ b/types/component/global/seo.ts
@@ -1,4 +1,4 @@
-export default interface SEOComponent {
+export default interface SEO {
   metaTitle: string;
   metaDescription: string;
   keywords: string;
diff --git a/types/component/globalFooter.ts b/types/component/globalFooter.ts
deleted file mode 100644
index 7786428..0000000
--- a/types/component/globalFooter.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type FooterLink from "./itemsFooterLink";
-
-export default interface Footer {
-  id: number;
-  copyright: string;
-  maintained?: string;
-  links: FooterLink[];
-}
diff --git a/types/component/globalNavbar.ts b/types/component/globalNavbar.ts
deleted file mode 100644
index dd65ba1..0000000
--- a/types/component/globalNavbar.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type BaseFile from "./baseFile";
-import type NavbarItem from "./itemsNavbarItem";
-
-export default interface Navbar {
-  id: number;
-  logo: BaseFile;
-  navbar_items: NavbarItem[];
-}
diff --git a/types/component/itemsFooterLink.ts b/types/component/items/footerLink.ts
similarity index 100%
rename from types/component/itemsFooterLink.ts
rename to types/component/items/footerLink.ts
diff --git a/types/component/items/hero.ts b/types/component/items/hero.ts
new file mode 100644
index 0000000..73db112
--- /dev/null
+++ b/types/component/items/hero.ts
@@ -0,0 +1,7 @@
+import type BaseFile from "../baseFile";
+
+export default interface ItemsHero {
+  id: number;
+  title: string | undefined;
+  banner: BaseFile | undefined;
+}
diff --git a/types/component/sharedLink.ts b/types/component/items/link.ts
similarity index 100%
rename from types/component/sharedLink.ts
rename to types/component/items/link.ts
diff --git a/types/component/itemsNavbarItem.ts b/types/component/items/navbarItem.ts
similarity index 75%
rename from types/component/itemsNavbarItem.ts
rename to types/component/items/navbarItem.ts
index 0139b87..53219cb 100644
--- a/types/component/itemsNavbarItem.ts
+++ b/types/component/items/navbarItem.ts
@@ -1,4 +1,4 @@
-import type NavbarSubItem from "./itemsNavbarSubItem";
+import type NavbarSubItem from "./navbarSubItem";
 
 export default interface NavbarItem {
   id: number;
diff --git a/types/component/itemsNavbarSubItem.ts b/types/component/items/navbarSubItem.ts
similarity index 70%
rename from types/component/itemsNavbarSubItem.ts
rename to types/component/items/navbarSubItem.ts
index 4916c71..e3e4966 100644
--- a/types/component/itemsNavbarSubItem.ts
+++ b/types/component/items/navbarSubItem.ts
@@ -1,4 +1,4 @@
-import type Page from "../collection/page";
+import type Page from "../../collection/page";
 
 export default interface NavbarSubItem {
   id: number;
diff --git a/types/component/shared/emphasiseArticle.ts b/types/component/shared/emphasiseArticle.ts
new file mode 100644
index 0000000..f9e3d2e
--- /dev/null
+++ b/types/component/shared/emphasiseArticle.ts
@@ -0,0 +1,8 @@
+import type Article from "../../collection/article";
+import type BaseComponent from "../baseComponent";
+
+export default interface SharedEmphasiseArticle extends BaseComponent {
+  __component: "shared.emphasise-article";
+  articles: Array<Article>;
+  link_to_articles: string;
+}
diff --git a/types/component/shared/list.ts b/types/component/shared/list.ts
new file mode 100644
index 0000000..d304b4e
--- /dev/null
+++ b/types/component/shared/list.ts
@@ -0,0 +1,7 @@
+import type Lookup from "../../collection/lookup";
+import type BaseComponent from "../baseComponent";
+
+export default interface SharedList extends BaseComponent {
+  __component: "shared.list";
+  lookup: Lookup;
+}
diff --git a/types/component/sharedHero.ts b/types/component/sharedHero.ts
deleted file mode 100644
index b726315..0000000
--- a/types/component/sharedHero.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type BaseFile from "./baseFile";
-
-export default interface SharedHero {
-  id: number;
-  title: string;
-  banner: BaseFile;
-}
diff --git a/types/component/sharedList.ts b/types/component/sharedList.ts
deleted file mode 100644
index cf537bf..0000000
--- a/types/component/sharedList.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type Lookup from "../collection/lookup";
-import type BaseComponent from "./baseComponent";
-
-export default interface SharedList extends BaseComponent {
-  __component: "shared.list";
-  enable_detail: boolean;
-  lookup: Lookup;
-}
diff --git a/types/single/global.ts b/types/single/global.ts
index 9318ddd..1fabc0c 100644
--- a/types/single/global.ts
+++ b/types/single/global.ts
@@ -1,6 +1,7 @@
-import type Footer from "../component/globalFooter";
-import type Navbar from "../component/globalNavbar";
-import type SEOComponent from "../component/seoComponent";
+import type BaseFile from "../component/baseFile";
+import type Footer from "../component/global/footer";
+import type Navbar from "../component/global/navbar";
+import type SEO from "../component/global/seo";
 
 export default interface Global {
   id: number;
@@ -9,7 +10,8 @@ export default interface Global {
   updatedAt: string;
   publishedAt: string;
   locale: string;
-  navbar: Navbar;
-  footer: Footer;
-  SEO: SEOComponent;
+  logo: BaseFile;
+  navbar: Navbar | undefined;
+  footer: Footer | undefined;
+  SEO: SEO | undefined;
 }
diff --git a/types/single/homepage.ts b/types/single/homepage.ts
index aa33112..677d3a3 100644
--- a/types/single/homepage.ts
+++ b/types/single/homepage.ts
@@ -8,7 +8,6 @@ export default interface Homepage {
   updatedAt: string;
   publishedAt: string;
   locale: string;
-  backdrop: BaseFile;
-  hide_backdrop: boolean;
+  backdrop: undefined | BaseFile;
   content: Array<ComponentTypes>;
 }