From f7e02347fc0ebbda88b41eb72413449a31b36774 Mon Sep 17 00:00:00 2001
From: Arthur Lorenz <arthur.lorenz@drunomics.com>
Date: Thu, 10 Jul 2025 16:42:15 +0200
Subject: [PATCH 1/3] feat: Support new lupus decoupled recipes.

---
 .../blog/components/global/node-blog-card.vue | 26 +++++
 .../components/global/node-event-card.vue     | 26 +++++
 .../components/global/node-event-full.vue     | 99 +++++++++++++++++++
 layers/events/nuxt.config.ts                  |  4 +
 nuxt.config.ts                                |  4 +
 package.json                                  |  6 +-
 6 files changed, 163 insertions(+), 2 deletions(-)
 create mode 100644 layers/blog/components/global/node-blog-card.vue
 create mode 100644 layers/events/components/global/node-event-card.vue
 create mode 100644 layers/events/components/global/node-event-full.vue
 create mode 100644 layers/events/nuxt.config.ts

diff --git a/layers/blog/components/global/node-blog-card.vue b/layers/blog/components/global/node-blog-card.vue
new file mode 100644
index 0000000..9e695d2
--- /dev/null
+++ b/layers/blog/components/global/node-blog-card.vue
@@ -0,0 +1,26 @@
+<template>
+  <nuxt-link :to="path.pathAlias" class="block">
+    <article class="rounded-lg border border-gray-200 hover:border-gray-300 transition-all duration-200 bg-white shadow-sm overflow-hidden">
+      <div class="overflow-hidden">
+        <component
+          :is="renderCustomElements(featuredImage)"
+          class="w-full h-full object-cover"
+        />
+      </div>
+      <div class="p-4">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900">
+          {{ title }}
+        </h2>
+      </div>
+    </article>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+const { renderCustomElements } = useDrupalCe()
+defineProps<{
+  title?: String;
+  path?: object;
+  featuredImage?: CustomElementContent;
+}>()
+</script>
diff --git a/layers/events/components/global/node-event-card.vue b/layers/events/components/global/node-event-card.vue
new file mode 100644
index 0000000..9e695d2
--- /dev/null
+++ b/layers/events/components/global/node-event-card.vue
@@ -0,0 +1,26 @@
+<template>
+  <nuxt-link :to="path.pathAlias" class="block">
+    <article class="rounded-lg border border-gray-200 hover:border-gray-300 transition-all duration-200 bg-white shadow-sm overflow-hidden">
+      <div class="overflow-hidden">
+        <component
+          :is="renderCustomElements(featuredImage)"
+          class="w-full h-full object-cover"
+        />
+      </div>
+      <div class="p-4">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900">
+          {{ title }}
+        </h2>
+      </div>
+    </article>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+const { renderCustomElements } = useDrupalCe()
+defineProps<{
+  title?: String;
+  path?: object;
+  featuredImage?: CustomElementContent;
+}>()
+</script>
diff --git a/layers/events/components/global/node-event-full.vue b/layers/events/components/global/node-event-full.vue
new file mode 100644
index 0000000..092fa62
--- /dev/null
+++ b/layers/events/components/global/node-event-full.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold text-gray-900 mb-4">{{ title }}</h1>
+    </div>
+    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
+      <div v-if="date" class="mb-4">
+        <h3 class="text-lg font-semibold text-gray-700 mb-2">Date:</h3>
+        <p class="text-gray-600">{{ formatDate(date.value) }} - {{ formatDate(date.endValue) }}</p>
+      </div>
+      <div v-if="locationName" class="mb-4">
+        <h3 class="text-lg font-semibold text-gray-700 mb-2">Venue:</h3>
+        <p class="text-gray-600">{{ locationName }}</p>
+      </div>
+      <div v-if="locationAddress" class="mb-4">
+        <p class="text-gray-600">{{ locationAddress.addressLine1 }}</p>
+        <p class="text-gray-600">{{ locationAddress.locality }},
+          {{ locationAddress.administrativeArea }} {{ locationAddress.postalCode }}</p>
+      </div>
+      <div v-if="link" class="mb-4">
+        <a :href="link.uri" target="_blank">{{ link.title }}</a>
+      </div>
+    </div>
+    <div class="prose max-w-none mb-8" v-html="content"></div>
+    <div v-if="geofield" class="rounded-lg overflow-hidden shadow-lg">
+      <div class="h-[400px]">
+        <LMap
+          ref="map"
+          :zoom="zoom"
+          :center="latlng"
+          :use-global-leaflet="false"
+          class="h-full w-full"
+        >
+          <LTileLayer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            attribution="&copy; <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors"
+            layer-type="base"
+            name="OpenStreetMap"
+          />
+          <LMarker :lat-lng="latlng" />
+        </LMap>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LatLngExpression } from 'leaflet';
+
+const props = defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  content?: string;
+  geofield?: {
+    lat: number;
+    lon: number;
+  };
+  date?: {
+    value: string;
+    endValue: string;
+    duration: string;
+    rrule: string;
+    rruleIndex: string;
+    timezone: string;
+  };
+  locationName?: string;
+  locationAddress?: {
+    addressLine1: string;
+    locality: string;
+    administrativeArea: string;
+    postalCode: string;
+  };
+  link?: {
+    uri: string;
+    title: string;
+  };
+}>();
+
+const zoom = ref(13);
+const latlng = computed<LatLngExpression>(() => {
+  if (props.geofield) {
+    return [props.geofield.lat, props.geofield.lon];
+  }
+  return [0, 0];
+});
+
+const formatDate = (timestamp: string) => {
+  if (!timestamp) return '';
+  const date = new Date(Number(timestamp) * 1000);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+};
+</script>
diff --git a/layers/events/nuxt.config.ts b/layers/events/nuxt.config.ts
new file mode 100644
index 0000000..3c731a6
--- /dev/null
+++ b/layers/events/nuxt.config.ts
@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/leaflet']
+})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4219461..2b514c5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,5 +3,9 @@ export default defineNuxtConfig({
   extends: [
     './layers/blog',
     './layers/news',
+    './layers/events'
+  ],
+  modules: [
+    '@nuxtjs/tailwindcss'
   ]
 })
diff --git a/package.json b/package.json
index 7f632d2..f7c2ee5 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "drupal-cms-layouer",
+  "name": "drupal-cms-layer",
   "type": "module",
   "version": "0.0.1",
   "main": "./nuxt.config.ts",
@@ -12,13 +12,15 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "nuxtjs-drupal-ce": "^2.2.6",
     "@nuxt/eslint": "latest",
     "eslint": "^9.25.1",
     "nuxt": "^3.17.2",
+    "nuxtjs-drupal-ce": "^2.2.6",
     "typescript": "^5.8.3",
     "vue": "latest"
   },
   "dependencies": {
+    "@nuxtjs/leaflet": "^1.2.6",
+    "@nuxtjs/tailwindcss": "^6.14.0"
   }
 }

From 4dff862db1ba3b4be67bdceb5b1f81180144b9ad Mon Sep 17 00:00:00 2001
From: Arthur Lorenz <arthur.lorenz@drunomics.com>
Date: Tue, 15 Jul 2025 11:46:24 +0200
Subject: [PATCH 2/3] Add page layer.

---
 .../blog/components/global/node-blog-full.vue | 40 ++++++++-----------
 .../page/components/global/node-page-full.vue | 19 +++++++++
 layers/page/nuxt.config.ts                    |  5 +++
 nuxt.config.ts                                |  3 +-
 4 files changed, 43 insertions(+), 24 deletions(-)
 create mode 100644 layers/page/components/global/node-page-full.vue
 create mode 100644 layers/page/nuxt.config.ts

diff --git a/layers/blog/components/global/node-blog-full.vue b/layers/blog/components/global/node-blog-full.vue
index 71188d9..8b9d49b 100644
--- a/layers/blog/components/global/node-blog-full.vue
+++ b/layers/blog/components/global/node-blog-full.vue
@@ -1,25 +1,19 @@
 <template>
-    <div class="node">
-      <h2 v-if="title">Blog: {{ title }}</h2>
-      <slot name="image">
-        <component :is="useDrupalCe().renderCustomElements($attrs.image)" />
-      </slot>
-      <slot name="body">
-        <component :is="useDrupalCe().renderCustomElements($attrs.body)" />
-      </slot>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold text-gray-900 mb-4">{{ title }}</h1>
     </div>
-  </template>
-  
-  <script setup lang="ts">
-  defineSlots<{
-    body();
-    image();
-  }>()
-  defineProps<{
-    title?: string;
-    type?: string;
-    created?: number | string;
-    // Layout-builder support.
-    sections?: object;
-  }>()
-  </script>
\ No newline at end of file
+    <div class="prose max-w-none mb-8" v-html="content"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  content?: string;
+}>();
+</script>
diff --git a/layers/page/components/global/node-page-full.vue b/layers/page/components/global/node-page-full.vue
new file mode 100644
index 0000000..8b9d49b
--- /dev/null
+++ b/layers/page/components/global/node-page-full.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold text-gray-900 mb-4">{{ title }}</h1>
+    </div>
+    <div class="prose max-w-none mb-8" v-html="content"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  content?: string;
+}>();
+</script>
diff --git a/layers/page/nuxt.config.ts b/layers/page/nuxt.config.ts
new file mode 100644
index 0000000..4bbd5ff
--- /dev/null
+++ b/layers/page/nuxt.config.ts
@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+
+})
+  
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2b514c5..ddc7374 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,8 +2,9 @@
 export default defineNuxtConfig({
   extends: [
     './layers/blog',
+    './layers/events',
     './layers/news',
-    './layers/events'
+    './layers/page',
   ],
   modules: [
     '@nuxtjs/tailwindcss'

From f1ae0dcb90655df2b0cd5b80507afc41860671d6 Mon Sep 17 00:00:00 2001
From: Arthur Lorenz <arthur.lorenz@drunomics.com>
Date: Tue, 2 Sep 2025 15:58:31 +0200
Subject: [PATCH 3/3] Update components.

---
 .../global/drupal-view--default.vue           | 29 ++++++++
 .../global/media-image--default.vue           | 21 ++++++
 .../base/components/global/node--default.vue  | 19 ++++++
 layers/base/nuxt.config.ts                    |  5 ++
 .../blog/components/global/node-blog-card.vue | 32 ++++++++-
 .../blog/components/global/node-blog-full.vue | 30 ++++++++-
 .../global/node-case-study-card.vue           | 26 ++++++++
 .../global/node-case-study-full.vue           | 23 +++++++
 layers/case-studies/nuxt.config.ts            |  3 +
 .../components/global/node-event-card.vue     |  6 +-
 .../components/global/node-event-full.vue     | 16 ++---
 .../news/components/global/node-news-card.vue | 52 +++++++++++++++
 .../news/components/global/node-news-full.vue | 66 ++++++++++++-------
 layers/news/nuxt.config.ts                    |  1 -
 .../page/components/global/node-page-full.vue |  4 +-
 .../components/global/node-person-card.vue    | 30 +++++++++
 .../components/global/node-person-full.vue    | 56 ++++++++++++++++
 layers/person/nuxt.config.ts                  |  4 ++
 .../components/global/node-project-card.vue   | 26 ++++++++
 .../components/global/node-project-full.vue   | 23 +++++++
 layers/project/nuxt.config.ts                 |  3 +
 nuxt.config.ts                                |  4 ++
 22 files changed, 437 insertions(+), 42 deletions(-)
 create mode 100644 layers/base/components/global/drupal-view--default.vue
 create mode 100644 layers/base/components/global/media-image--default.vue
 create mode 100644 layers/base/components/global/node--default.vue
 create mode 100644 layers/base/nuxt.config.ts
 create mode 100644 layers/case-studies/components/global/node-case-study-card.vue
 create mode 100644 layers/case-studies/components/global/node-case-study-full.vue
 create mode 100644 layers/case-studies/nuxt.config.ts
 create mode 100644 layers/news/components/global/node-news-card.vue
 create mode 100644 layers/person/components/global/node-person-card.vue
 create mode 100644 layers/person/components/global/node-person-full.vue
 create mode 100644 layers/person/nuxt.config.ts
 create mode 100644 layers/project/components/global/node-project-card.vue
 create mode 100644 layers/project/components/global/node-project-full.vue
 create mode 100644 layers/project/nuxt.config.ts

diff --git a/layers/base/components/global/drupal-view--default.vue b/layers/base/components/global/drupal-view--default.vue
new file mode 100644
index 0000000..a78e63e
--- /dev/null
+++ b/layers/base/components/global/drupal-view--default.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="view">
+    <h1 class="text-4xl font-bold mb-8 text-center tracking-tight">{{ title }}</h1>
+    <div class="lg:flex lg:justify-around">
+      <component
+        :is="renderCustomElements(row)"
+        v-for="(row, index) in rows"
+        :key="index"
+        class="w-full mb-8 lg:w-[33%]"
+      />
+    </div>
+    <div class="text-center">
+      <DrupalViewsPagination
+        :total-pages="pager.totalPages"
+        :current="pager.current"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  rows?: object[]
+  pager?: object
+}>()
+
+const {renderCustomElements} = useDrupalCe()
+</script>
diff --git a/layers/base/components/global/media-image--default.vue b/layers/base/components/global/media-image--default.vue
new file mode 100644
index 0000000..2a72920
--- /dev/null
+++ b/layers/base/components/global/media-image--default.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="relative">
+    <img
+      :src="image.url"
+      :title="image.title"
+      :alt="image.alt"
+      :width="image.width"
+      :height="image.height"
+    >
+    <div v-if="copyright" class="absolute bottom-0 right-0 bg-black/50 text-white text-xs px-2 py-1">
+      {{ copyright }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  image?: object
+  copyright?: string
+}>()
+</script>
diff --git a/layers/base/components/global/node--default.vue b/layers/base/components/global/node--default.vue
new file mode 100644
index 0000000..fce78bd
--- /dev/null
+++ b/layers/base/components/global/node--default.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
+    </div>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  content?: string;
+}>();
+</script>
diff --git a/layers/base/nuxt.config.ts b/layers/base/nuxt.config.ts
new file mode 100644
index 0000000..4bbd5ff
--- /dev/null
+++ b/layers/base/nuxt.config.ts
@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+
+})
+  
\ No newline at end of file
diff --git a/layers/blog/components/global/node-blog-card.vue b/layers/blog/components/global/node-blog-card.vue
index 9e695d2..866e7e7 100644
--- a/layers/blog/components/global/node-blog-card.vue
+++ b/layers/blog/components/global/node-blog-card.vue
@@ -1,16 +1,30 @@
 <template>
   <nuxt-link :to="path.pathAlias" class="block">
-    <article class="rounded-lg border border-gray-200 hover:border-gray-300 transition-all duration-200 bg-white shadow-sm overflow-hidden">
+    <article class="rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md dark:shadow-gray-900/50 overflow-hidden">
       <div class="overflow-hidden">
         <component
           :is="renderCustomElements(featuredImage)"
-          class="w-full h-full object-cover"
+          class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
         />
       </div>
       <div class="p-4">
-        <h2 v-if="title" class="text-lg font-semibold text-gray-900">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
           {{ title }}
         </h2>
+        <div v-if="author || created" class="flex items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
+          <span v-if="author" class="flex items-center gap-1">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+            </svg>
+            {{ author }}
+          </span>
+          <span v-if="created" class="flex items-center gap-1">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+            </svg>
+            {{ formatDate(created) }}
+          </span>
+        </div>
       </div>
     </article>
   </nuxt-link>
@@ -22,5 +36,17 @@ defineProps<{
   title?: String;
   path?: object;
   featuredImage?: CustomElementContent;
+  author?: string;
+  created?: string;
 }>()
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  }).format(date);
+}
 </script>
diff --git a/layers/blog/components/global/node-blog-full.vue b/layers/blog/components/global/node-blog-full.vue
index 8b9d49b..ac97f69 100644
--- a/layers/blog/components/global/node-blog-full.vue
+++ b/layers/blog/components/global/node-blog-full.vue
@@ -2,9 +2,23 @@
   <div class="max-w-4xl mx-auto px-4 py-8">
     <div class="mb-8">
       <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
-      <h1 v-if="title" class="text-4xl font-bold text-gray-900 mb-4">{{ title }}</h1>
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
+      <div v-if="author || created" class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
+        <span v-if="author" class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+          </svg>
+          {{ author }}
+        </span>
+        <span v-if="created" class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+          </svg>
+          {{ formatDate(created) }}
+        </span>
+      </div>
     </div>
-    <div class="prose max-w-none mb-8" v-html="content"></div>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
   </div>
 </template>
 
@@ -15,5 +29,17 @@ defineProps<{
   title?: string;
   featuredImage?: object;
   content?: string;
+  author?: string;
+  created?: string;
 }>();
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+};
 </script>
diff --git a/layers/case-studies/components/global/node-case-study-card.vue b/layers/case-studies/components/global/node-case-study-card.vue
new file mode 100644
index 0000000..850fc30
--- /dev/null
+++ b/layers/case-studies/components/global/node-case-study-card.vue
@@ -0,0 +1,26 @@
+<template>
+  <nuxt-link :to="path.pathAlias" class="block">
+    <article class="rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md dark:shadow-gray-900/50 overflow-hidden">
+      <div class="overflow-hidden">
+        <component
+          :is="renderCustomElements(featuredImage)"
+          class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+        />
+      </div>
+      <div class="p-4">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {{ title }}
+        </h2>
+      </div>
+    </article>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+const { renderCustomElements } = useDrupalCe()
+defineProps<{
+  title?: String;
+  path?: object;
+  featuredImage?: CustomElementContent;
+}>()
+</script>
diff --git a/layers/case-studies/components/global/node-case-study-full.vue b/layers/case-studies/components/global/node-case-study-full.vue
new file mode 100644
index 0000000..5722026
--- /dev/null
+++ b/layers/case-studies/components/global/node-case-study-full.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <component :is="useDrupalCe().renderCustomElements(clientLogo)" class="w-80 mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
+    </div>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
+    <a v-if="clientLink" :href="clientLink.clientLinkUri" target="_blank" class="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition-colors duration-200">Visit website</a>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  clientLogo?: object;
+  clientLink?: object;
+  content?: string;
+}>();
+</script>
diff --git a/layers/case-studies/nuxt.config.ts b/layers/case-studies/nuxt.config.ts
new file mode 100644
index 0000000..e5c194c
--- /dev/null
+++ b/layers/case-studies/nuxt.config.ts
@@ -0,0 +1,3 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+})
diff --git a/layers/events/components/global/node-event-card.vue b/layers/events/components/global/node-event-card.vue
index 9e695d2..850fc30 100644
--- a/layers/events/components/global/node-event-card.vue
+++ b/layers/events/components/global/node-event-card.vue
@@ -1,14 +1,14 @@
 <template>
   <nuxt-link :to="path.pathAlias" class="block">
-    <article class="rounded-lg border border-gray-200 hover:border-gray-300 transition-all duration-200 bg-white shadow-sm overflow-hidden">
+    <article class="rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md dark:shadow-gray-900/50 overflow-hidden">
       <div class="overflow-hidden">
         <component
           :is="renderCustomElements(featuredImage)"
-          class="w-full h-full object-cover"
+          class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
         />
       </div>
       <div class="p-4">
-        <h2 v-if="title" class="text-lg font-semibold text-gray-900">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900 dark:text-gray-100">
           {{ title }}
         </h2>
       </div>
diff --git a/layers/events/components/global/node-event-full.vue b/layers/events/components/global/node-event-full.vue
index 092fa62..912dff6 100644
--- a/layers/events/components/global/node-event-full.vue
+++ b/layers/events/components/global/node-event-full.vue
@@ -2,27 +2,27 @@
   <div class="max-w-4xl mx-auto px-4 py-8">
     <div class="mb-8">
       <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
-      <h1 v-if="title" class="text-4xl font-bold text-gray-900 mb-4">{{ title }}</h1>
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
     </div>
     <div class="bg-white rounded-lg shadow-md p-6 mb-8">
       <div v-if="date" class="mb-4">
-        <h3 class="text-lg font-semibold text-gray-700 mb-2">Date:</h3>
-        <p class="text-gray-600">{{ formatDate(date.value) }} - {{ formatDate(date.endValue) }}</p>
+        <h3 class="text-lg font-semibold mb-2">Date:</h3>
+        <p>{{ formatDate(date.value) }} - {{ formatDate(date.endValue) }}</p>
       </div>
       <div v-if="locationName" class="mb-4">
-        <h3 class="text-lg font-semibold text-gray-700 mb-2">Venue:</h3>
-        <p class="text-gray-600">{{ locationName }}</p>
+        <h3 class="text-lg font-semibold mb-2">Venue:</h3>
+        <p>{{ locationName }}</p>
       </div>
       <div v-if="locationAddress" class="mb-4">
-        <p class="text-gray-600">{{ locationAddress.addressLine1 }}</p>
-        <p class="text-gray-600">{{ locationAddress.locality }},
+        <p>{{ locationAddress.addressLine1 }}</p>
+        <p>{{ locationAddress.locality }},
           {{ locationAddress.administrativeArea }} {{ locationAddress.postalCode }}</p>
       </div>
       <div v-if="link" class="mb-4">
         <a :href="link.uri" target="_blank">{{ link.title }}</a>
       </div>
     </div>
-    <div class="prose max-w-none mb-8" v-html="content"></div>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
     <div v-if="geofield" class="rounded-lg overflow-hidden shadow-lg">
       <div class="h-[400px]">
         <LMap
diff --git a/layers/news/components/global/node-news-card.vue b/layers/news/components/global/node-news-card.vue
new file mode 100644
index 0000000..866e7e7
--- /dev/null
+++ b/layers/news/components/global/node-news-card.vue
@@ -0,0 +1,52 @@
+<template>
+  <nuxt-link :to="path.pathAlias" class="block">
+    <article class="rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md dark:shadow-gray-900/50 overflow-hidden">
+      <div class="overflow-hidden">
+        <component
+          :is="renderCustomElements(featuredImage)"
+          class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+        />
+      </div>
+      <div class="p-4">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+          {{ title }}
+        </h2>
+        <div v-if="author || created" class="flex items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
+          <span v-if="author" class="flex items-center gap-1">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+            </svg>
+            {{ author }}
+          </span>
+          <span v-if="created" class="flex items-center gap-1">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+            </svg>
+            {{ formatDate(created) }}
+          </span>
+        </div>
+      </div>
+    </article>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+const { renderCustomElements } = useDrupalCe()
+defineProps<{
+  title?: String;
+  path?: object;
+  featuredImage?: CustomElementContent;
+  author?: string;
+  created?: string;
+}>()
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  }).format(date);
+}
+</script>
diff --git a/layers/news/components/global/node-news-full.vue b/layers/news/components/global/node-news-full.vue
index 7d19978..ac97f69 100644
--- a/layers/news/components/global/node-news-full.vue
+++ b/layers/news/components/global/node-news-full.vue
@@ -1,25 +1,45 @@
 <template>
-    <div class="node">
-      <h2 v-if="title">News: {{ title }}</h2>
-      <slot name="image">
-        <component :is="useDrupalCe().renderCustomElements($attrs.image)" />
-      </slot>
-      <slot name="body">
-        <component :is="useDrupalCe().renderCustomElements($attrs.body)" />
-      </slot>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
+      <div v-if="author || created" class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
+        <span v-if="author" class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+          </svg>
+          {{ author }}
+        </span>
+        <span v-if="created" class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+          </svg>
+          {{ formatDate(created) }}
+        </span>
+      </div>
     </div>
-  </template>
-  
-  <script setup lang="ts">
-  defineSlots<{
-    body();
-    image();
-  }>()
-  defineProps<{
-    title?: string;
-    type?: string;
-    created?: number | string;
-    // Layout-builder support.
-    sections?: object;
-  }>()
-  </script>
\ No newline at end of file
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  content?: string;
+  author?: string;
+  created?: string;
+}>();
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+};
+</script>
diff --git a/layers/news/nuxt.config.ts b/layers/news/nuxt.config.ts
index 4bbd5ff..5e7d9c6 100644
--- a/layers/news/nuxt.config.ts
+++ b/layers/news/nuxt.config.ts
@@ -2,4 +2,3 @@
 export default defineNuxtConfig({
 
 })
-  
\ No newline at end of file
diff --git a/layers/page/components/global/node-page-full.vue b/layers/page/components/global/node-page-full.vue
index 8b9d49b..fce78bd 100644
--- a/layers/page/components/global/node-page-full.vue
+++ b/layers/page/components/global/node-page-full.vue
@@ -2,9 +2,9 @@
   <div class="max-w-4xl mx-auto px-4 py-8">
     <div class="mb-8">
       <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
-      <h1 v-if="title" class="text-4xl font-bold text-gray-900 mb-4">{{ title }}</h1>
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
     </div>
-    <div class="prose max-w-none mb-8" v-html="content"></div>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
   </div>
 </template>
 
diff --git a/layers/person/components/global/node-person-card.vue b/layers/person/components/global/node-person-card.vue
new file mode 100644
index 0000000..de94602
--- /dev/null
+++ b/layers/person/components/global/node-person-card.vue
@@ -0,0 +1,30 @@
+<template>
+  <nuxt-link :to="path.pathAlias" class="block">
+    <article class="rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md dark:shadow-gray-900/50 overflow-hidden">
+      <div class="overflow-hidden">
+        <component
+          :is="renderCustomElements(featuredImage)"
+          class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+        />
+      </div>
+      <div class="p-4">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {{ title }}
+        </h2>
+        <p v-if="personRoleJobTitle" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+          {{ personRoleJobTitle }}
+        </p>
+      </div>
+    </article>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+const { renderCustomElements } = useDrupalCe()
+defineProps<{
+  title?: String;
+  path?: object;
+  featuredImage?: CustomElementContent;
+  personRoleJobTitle?: string;
+}>()
+</script>
diff --git a/layers/person/components/global/node-person-full.vue b/layers/person/components/global/node-person-full.vue
new file mode 100644
index 0000000..08ef7f7
--- /dev/null
+++ b/layers/person/components/global/node-person-full.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8 text-center">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="image-wrapper max-w-[60%]" />
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
+      <div v-if="personRoleJobTitle || personEmail || personPhoneNumber" class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 max-w-2xl mx-auto">
+        <div v-if="personRoleJobTitle" class="mb-4">
+          <div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+            </svg>
+            <span class="font-medium">{{ personRoleJobTitle }}</span>
+          </div>
+        </div>
+        <div v-if="personEmail && personEmail.length > 0" class="mb-4">
+          <div v-for="(email, index) in personEmail" :key="index" class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+            </svg>
+            <a :href="'mailto:' + email.value" class="text-blue-600 dark:text-blue-400 hover:underline">{{ email.value }}</a>
+          </div>
+        </div>
+        <div v-if="personPhoneNumber && personPhoneNumber.length > 0" class="mb-4 last:mb-0">
+          <div v-for="(phone, index) in personPhoneNumber" :key="index" class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+            </svg>
+            <a :href="'tel:' + phone.value.replace(/\s/g, '')" class="text-blue-600 dark:text-blue-400 hover:underline">{{ phone.value }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  content?: string;
+  personRoleJobTitle?: string;
+  personEmail?: Array<{ value: string }>;
+  personPhoneNumber?: Array<{ value: string }>;
+}>();
+</script>
+<style lang="postcss">
+.image-wrapper {
+  @apply inline-block mb-6;
+}
+.image-wrapper img {
+  @apply rounded-full;
+}
+</style>
diff --git a/layers/person/nuxt.config.ts b/layers/person/nuxt.config.ts
new file mode 100644
index 0000000..5e7d9c6
--- /dev/null
+++ b/layers/person/nuxt.config.ts
@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+
+})
diff --git a/layers/project/components/global/node-project-card.vue b/layers/project/components/global/node-project-card.vue
new file mode 100644
index 0000000..850fc30
--- /dev/null
+++ b/layers/project/components/global/node-project-card.vue
@@ -0,0 +1,26 @@
+<template>
+  <nuxt-link :to="path.pathAlias" class="block">
+    <article class="rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md dark:shadow-gray-900/50 overflow-hidden">
+      <div class="overflow-hidden">
+        <component
+          :is="renderCustomElements(featuredImage)"
+          class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+        />
+      </div>
+      <div class="p-4">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {{ title }}
+        </h2>
+      </div>
+    </article>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+const { renderCustomElements } = useDrupalCe()
+defineProps<{
+  title?: String;
+  path?: object;
+  featuredImage?: CustomElementContent;
+}>()
+</script>
diff --git a/layers/project/components/global/node-project-full.vue b/layers/project/components/global/node-project-full.vue
new file mode 100644
index 0000000..5722026
--- /dev/null
+++ b/layers/project/components/global/node-project-full.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <component :is="useDrupalCe().renderCustomElements(clientLogo)" class="w-80 mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
+    </div>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
+    <a v-if="clientLink" :href="clientLink.clientLinkUri" target="_blank" class="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition-colors duration-200">Visit website</a>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  clientLogo?: object;
+  clientLink?: object;
+  content?: string;
+}>();
+</script>
diff --git a/layers/project/nuxt.config.ts b/layers/project/nuxt.config.ts
new file mode 100644
index 0000000..e5c194c
--- /dev/null
+++ b/layers/project/nuxt.config.ts
@@ -0,0 +1,3 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ddc7374..e228d9c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,9 +2,13 @@
 export default defineNuxtConfig({
   extends: [
     './layers/blog',
+    './layers/base',
     './layers/events',
     './layers/news',
+    './layers/case-studies',
     './layers/page',
+    './layers/person',
+    './layers/project'
   ],
   modules: [
     '@nuxtjs/tailwindcss'