From a153a37e139b2e1d357ac2d34877d97ea5f389bb Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Thu, 25 Jun 2026 16:48:28 +0200
Subject: [PATCH 1/7] Ground work + more for spots. Added small text box.
 Advanced medium box with progress bar. and max size with categories

---
 src/App.vue                                  |   8 +-
 src/assets/fonts/iconfont/material-icons.css |  38 +++++
 src/assets/styles/elements.css               |   6 +-
 src/components/common/AdvancedSpot.vue       | 171 +++++++++++++++++++
 src/components/common/KBButton.vue           |  30 +++-
 src/components/common/PortalContent.vue      |  10 +-
 src/components/common/SimpleSpot.vue         | 121 +++++++++++++
 src/components/common/SpotCategories.vue     | 123 +++++++++++++
 src/components/common/SpotContainer.vue      | 126 ++++++++++++++
 src/views/Home.vue                           |   2 +-
 10 files changed, 617 insertions(+), 18 deletions(-)
 create mode 100644 src/components/common/AdvancedSpot.vue
 create mode 100644 src/components/common/SimpleSpot.vue
 create mode 100644 src/components/common/SpotCategories.vue
 create mode 100644 src/components/common/SpotContainer.vue

diff --git a/src/App.vue b/src/App.vue
index dee38727..57629b7f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -459,7 +459,7 @@ export default defineComponent({
 }
 
 .search-to-home-enter-from {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
@@ -498,7 +498,7 @@ export default defineComponent({
 }
 
 .home-to-search-enter-from {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
@@ -532,7 +532,7 @@ export default defineComponent({
 }
 
 .record-to-search-enter-from {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
@@ -586,7 +586,7 @@ export default defineComponent({
 }
 
 .search-to-record-leave-to {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
diff --git a/src/assets/fonts/iconfont/material-icons.css b/src/assets/fonts/iconfont/material-icons.css
index fc4d3f37..68018ab2 100644
--- a/src/assets/fonts/iconfont/material-icons.css
+++ b/src/assets/fonts/iconfont/material-icons.css
@@ -37,3 +37,41 @@
   /* Support for IE. */
   font-feature-settings: 'liga';
 }
+.category-image {
+	width: 16px;
+	height: 16px;
+  background-image: url('@/assets/icons/blue/diverse-blue.svg');
+}
+.category-image.diverse {
+	background-image: url('@/assets/icons/blue/diverse-blue.svg');
+}
+.category-image.dokumentar {
+	background-image: url('@/assets/icons/blue/dokumentar-blue.svg');
+}
+.category-image.film-og-serier {
+	background-image: url('@/assets/icons/blue/fiktion-blue.svg');
+}
+.category-image.kultur-og-oplysning {
+	background-image: url('@/assets/icons/blue/kultur-blue.svg');
+}
+.category-image.livsstil {
+	background-image: url('@/assets/icons/blue/livsstil-blue.svg');
+}
+.category-image.musik {
+	background-image: url('@/assets/icons/blue/musik-blue.svg');
+}
+.category-image.nyheder-politik-og-samfund {
+	background-image: url('@/assets/icons/blue/nyheder-blue.svg');
+}
+.category-image.sport {
+	background-image: url('@/assets/icons/blue/sport-blue.svg');
+}
+.category-image.humor-quiz-og-underholdning {
+	background-image: url('@/assets/icons/blue/underholdning-blue.svg');
+}
+.category-image.natur-og-videnskab {
+	background-image: url('@/assets/icons/blue/videnskab-blue.svg');
+}
+.category-image.brn-og-unge {
+	background-image: url('@/assets/icons/blue/born-blue.svg');
+}
\ No newline at end of file
diff --git a/src/assets/styles/elements.css b/src/assets/styles/elements.css
index a1b9bec5..de71c18d 100644
--- a/src/assets/styles/elements.css
+++ b/src/assets/styles/elements.css
@@ -2,7 +2,7 @@
     /*background-colors*/
     --bg-main:#ea9fbc;
     --bg-cta:#ea9fbc;
-    --bg-light:#013277;
+    --bg-light:#ea9fbc1a;
     --bg-remove:#f7ae3b;
     --bg-main-hover:#c4f1ed;
     --bg-disabled:#757575;
@@ -13,7 +13,7 @@
     --bg-secondary-light: #caf0fe;
     --bg-secondary-light-20: #F0FBFF;
     --bg-header: #002e70;
-    --bg-footer: #002e70;
+    --bg-footer: #013277;
 
     /*colors*/
     --color-main:#ea9fbc;
@@ -35,7 +35,7 @@
 
     /*rounded*/
     --rounded-small: var(--scale-50);
-    --rounded-medium: var(--scale-150);
+    --rounded-medium: var(--scale-100);
     --rounded-large: var(--scale-800);
     
     /*padding*/
diff --git a/src/components/common/AdvancedSpot.vue b/src/components/common/AdvancedSpot.vue
new file mode 100644
index 00000000..c2fa2ca0
--- /dev/null
+++ b/src/components/common/AdvancedSpot.vue
@@ -0,0 +1,171 @@
+<template>
+	<simple-spot
+		:spot-size="spotSize"
+		:color="color"
+		:icon-name="iconName"
+	>
+		<transition name="fade">
+			<div
+				v-show="authStore.currentArchiveProgress !== 0"
+				class="hero-info"
+			>
+				<div class="info">
+					<div class="progress-headline">
+						<h2>{{ t('hero.progress', { index: Math.round(currentProgress) }) }}</h2>
+						<p>
+							{{ t('hero.explanation') }}
+						</p>
+					</div>
+					<div class="process-bar">
+						<div
+							v-for="i in 20"
+							:key="i"
+							:class="progress(i)"
+						></div>
+					</div>
+				</div>
+			</div>
+		</transition>
+	</simple-spot>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
+import SimpleSpot from '@/components/common/SimpleSpot.vue';
+import { useAuthStore } from '@/store/authStore';
+import gsap from 'gsap';
+import { useI18n } from 'vue-i18n';
+type SpotSizeType = 'small' | 'medium' | 'large' | 'max';
+type ColorType = 'main' | 'light';
+export default defineComponent({
+	name: 'AdvancedSpot',
+	components: { SimpleSpot },
+	props: {
+		spotSize: {
+			type: String as PropType<SpotSizeType>,
+			required: true,
+		},
+		color: {
+			type: String as PropType<ColorType>,
+			default() {
+				return 'main';
+			},
+		},
+		iconName: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
+	},
+	setup() {
+		const currentProgress = ref();
+		const authStore = useAuthStore();
+		const { t } = useI18n();
+		onMounted(() => {
+			if (authStore.currentArchiveProgress !== 0) {
+				currentProgress.value = authStore.currentArchiveProgress;
+			}
+		});
+
+		const progress = (index: number) => {
+			const maxRange = 20;
+			let pt = Math.round((maxRange / 100) * currentProgress.value);
+			if (index < pt) return 'step darkblue';
+			if (index === pt) return 'step darkblue';
+			if (index === pt + 1) return 'step blue';
+			if (index === pt + 2) return 'step lightblue';
+			if (index === pt + 3) return 'step grey';
+			if (index === pt + 4) return 'step lightgrey';
+			if (index > pt + 4) return 'step white';
+		};
+
+		watch(
+			() => authStore.currentArchiveProgress,
+			(newVal: number) => {
+				if (newVal !== 0) {
+					gsap.to(currentProgress, {
+						value: authStore.currentArchiveProgress,
+						duration: 2,
+						ease: 'power2.out',
+						snap: { value: 1 },
+					});
+				}
+			},
+		);
+		return { authStore, progress, currentProgress, t };
+	},
+});
+</script>
+
+<style scoped>
+.progress-headline > * {
+	margin: 0;
+}
+
+.hero-info {
+	max-width: 100%;
+	/* position: relative; */
+	z-index: 0;
+	display: flex;
+	box-sizing: border-box;
+	height: 150px;
+	justify-content: flex-start;
+}
+
+.info {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.hero-info .link-container {
+	font-weight: 100;
+}
+
+.process-bar {
+	height: 34px;
+	display: flex;
+	position: absolute;
+	width: 100%;
+	left: 0px;
+	bottom: 0px;
+	background-color: var(--bg-default);
+}
+
+.step {
+	width: 5%;
+	height: 100%;
+	box-sizing: border-box;
+	border-left: 1px solid rgba(255, 255, 255, 0.05);
+	transition: all 0.15s ease-in-out 0s;
+}
+
+.step.darkblue {
+	background-color: var(--bg-main);
+}
+.step.blue {
+	background-color: var(--bg-main);
+	opacity: 0.95;
+}
+
+.step.lightblue {
+	background-color: var(--bg-main);
+	opacity: 0.85;
+}
+
+.step.grey {
+	background-color: var(--bg-main);
+	opacity: 0.75;
+}
+
+.step.lightgrey {
+	background-color: var(--bg-main);
+	opacity: 0.7;
+}
+
+.step.white {
+	background-color: transparent;
+	border-color: transparent;
+}
+</style>
diff --git a/src/components/common/KBButton.vue b/src/components/common/KBButton.vue
index f97516bb..b882e882 100644
--- a/src/components/common/KBButton.vue
+++ b/src/components/common/KBButton.vue
@@ -9,15 +9,17 @@
 		:style="customStyle"
 	>
 		<span
-			v-if="leftIconName"
+			v-if="leftIconName || customIconLeft"
 			class="material-icons left"
+			:class="customIconLeft"
 		>
 			{{ leftIconName }}
 		</span>
 		<span class="btn-text">{{ buttonText }}</span>
 		<span
-			v-if="rightIconName"
+			v-if="rightIconName || customIconRight"
 			class="material-icons right"
+			:class="customIconRight"
 		>
 			{{ rightIconName }}
 		</span>
@@ -33,15 +35,17 @@
 		:style="customStyle"
 	>
 		<span
-			v-if="leftIconName"
+			v-if="leftIconName || customIconLeft"
 			class="material-icons left"
+			:class="customIconLeft"
 		>
 			{{ leftIconName }}
 		</span>
 		<span class="btn-text">{{ buttonText }}</span>
 		<span
-			v-if="rightIconName"
+			v-if="rightIconName || customIconRight"
 			class="material-icons right"
+			:class="customIconRight"
 		>
 			{{ rightIconName }}
 		</span>
@@ -57,15 +61,17 @@
 		:style="customStyle"
 	>
 		<span
-			v-if="leftIconName"
+			v-if="leftIconName || customIconLeft"
 			class="material-icons left"
+			:class="customIconLeft"
 		>
 			{{ leftIconName }}
 		</span>
 		<span class="btn-text">{{ buttonText }}</span>
 		<span
-			v-if="rightIconName"
+			v-if="rightIconName || customIconRight"
 			class="material-icons right"
+			:class="customIconRight"
 		>
 			{{ rightIconName }}
 		</span>
@@ -135,6 +141,18 @@ export default defineComponent({
 				return false;
 			},
 		},
+		customIconLeft: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
+		customIconRight: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
 	},
 	setup(props) {
 		const attrs = useAttrs();
diff --git a/src/components/common/PortalContent.vue b/src/components/common/PortalContent.vue
index 6f2d47b6..d894d932 100644
--- a/src/components/common/PortalContent.vue
+++ b/src/components/common/PortalContent.vue
@@ -1,5 +1,6 @@
 <template>
 	<div class="portal-container container">
+		<SpotContainer></SpotContainer>
 		<div class="time-search">
 			<SkewedFoldable
 				:title="$t('timeSearch.timeMachine')"
@@ -57,6 +58,7 @@ import { APISearchResponseType } from '@/types/APIResponseTypes';
 import { Priority, Severity } from '@/types/NotificationType';
 import { ErrorManagerType } from '@/types/ErrorManagerType';
 import { CuratedItemsType } from '@/types/CuratedItemsType';
+import SpotContainer from '@/components/common/SpotContainer.vue';
 
 export default defineComponent({
 	name: 'PortalContent',
@@ -65,6 +67,7 @@ export default defineComponent({
 		TimeSearchComponent,
 		TiltedDivider,
 		SkewedFoldable,
+		SpotContainer,
 	},
 
 	setup() {
@@ -205,14 +208,13 @@ export default defineComponent({
 
 .portal-container {
 	position: relative;
-	margin-top: -110px !important;
+	/* margin-top: -110px !important; */
 	align-items: center;
 }
 .categories,
 .date-picker,
 .time-search {
 	position: relative;
-	margin-top: -6.1vw;
 	width: calc(100% + 24px);
 	margin-left: -12px;
 }
@@ -252,13 +254,13 @@ export default defineComponent({
 @media (min-width: 2000px) {
 	.date-picker,
 	.time-search {
-		margin-top: -3vw;
+		/* margin-top: -3vw; */
 	}
 }
 @media (min-width: 4000px) {
 	.date-picker,
 	.time-search {
-		margin-top: -1.5vw;
+		/* margin-top: -1.5vw; */
 	}
 }
 </style>
diff --git a/src/components/common/SimpleSpot.vue b/src/components/common/SimpleSpot.vue
new file mode 100644
index 00000000..08defc2c
--- /dev/null
+++ b/src/components/common/SimpleSpot.vue
@@ -0,0 +1,121 @@
+<template>
+	<div
+		class="spot"
+		:class="[spotSize, color]"
+	>
+		<div
+			v-if="iconName"
+			class="icon"
+		>
+			<span class="material-icons">
+				{{ iconName }}
+			</span>
+		</div>
+		<div class="inner"><slot></slot></div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+// import { useI18n } from 'vue-i18n';
+type SpotSizeType = 'small' | 'medium' | 'large' | 'max';
+type ColorType = 'main' | 'light';
+export default defineComponent({
+	name: 'SimpleSpot',
+	props: {
+		spotSize: {
+			type: String as PropType<SpotSizeType>,
+			required: true,
+		},
+		color: {
+			type: String as PropType<ColorType>,
+			default() {
+				return 'main';
+			},
+		},
+		iconName: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
+	},
+	setup() {
+		// const { t } = useI18n();
+		// return t;
+	},
+});
+</script>
+
+<style scoped>
+.spot {
+	display: flex;
+	height: 100%;
+	min-height: 190px;
+	border-radius: var(--rounded-medium);
+	border: 1px solid var(--color-border-success);
+	box-sizing: border-box;
+	margin-bottom: 20px;
+	position: relative;
+	overflow: hidden;
+	flex-wrap: wrap;
+	align-content: baseline;
+}
+.spot .icon {
+	width: 40px;
+	align-items: center;
+	display: flex;
+	text-align: center;
+	justify-content: center;
+	height: 40px;
+	background-color: var(--bg-main);
+	color: var(--color-default);
+	border-radius: 0 0 var(--rounded-medium) 0;
+	top: 0;
+	left: 0;
+}
+.icon .material-icons {
+	font-size: var(--fs-lead);
+}
+.spot .inner {
+	width: 100%;
+	height: inherit;
+	padding: 20px;
+	display: flex;
+	justify-content: start;
+	align-items: flex-start;
+	text-align: start;
+	/* word-break: break-all; */
+}
+.spot.main {
+	background-color: var(--bg-main);
+	color: var(--color-default);
+}
+
+.spot.light {
+	background-color: var(--bg-light);
+	color: var(--color-main);
+}
+.spot.small {
+	width: 100%;
+	max-width: 49%;
+}
+.spot.medium {
+	width: 100%;
+	max-width: 100%;
+}
+.spot.large {
+	width: 100%;
+}
+.spot.max {
+	width: 100%;
+}
+@media (min-width: 1280px) {
+	.spot.small {
+		max-width: 20%;
+	}
+	.spot.medium {
+		max-width: 45%;
+	}
+}
+</style>
diff --git a/src/components/common/SpotCategories.vue b/src/components/common/SpotCategories.vue
new file mode 100644
index 00000000..018f772c
--- /dev/null
+++ b/src/components/common/SpotCategories.vue
@@ -0,0 +1,123 @@
+<template>
+	<simple-spot
+		spot-size="max"
+		color="light"
+		icon-name="category"
+	>
+		<div
+			v-if="categoriesLoaded && categories.length"
+			class="spot-categories"
+		>
+			<h3>{{ categories.length }} kategorier:</h3>
+			<KBButton
+				v-for="(category, i) in categories"
+				:key="category.name"
+				button-type="btn-cta"
+				button-color="cta"
+				button-size="small"
+				class="btn-small"
+				:button-text="`${t(`categories.${santizeAndSimplify(category.name)}`)}`"
+				:custom-icon-left="`category-image ${santizeAndSimplify(category.name)}`"
+				:is-router-link="true"
+				:data-testid="addTestDataEnrichment('link', 'category-item', `catergory-${category.name}`, i)"
+				:to="{
+					name: 'Search',
+					query: {
+						q: '*:*',
+						start: 0,
+						fq: [encodeURIComponent(`genre_facet:${quotation(category.name)}`)],
+					},
+				}"
+				@click="scrollToTop()"
+			></KBButton>
+		</div>
+	</simple-spot>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import SimpleSpot from '@/components/common/SimpleSpot.vue';
+import { facetItem } from '@/types/APIResponseTypes';
+import KBButton from '@/components/common/KBButton.vue';
+import { useSearchResultStore } from '@/store/searchResultStore';
+import { ErrorManagerType } from '@/types/ErrorManagerType';
+import { Priority, Severity } from '@/types/NotificationType';
+import { addTestDataEnrichment, santizeAndSimplify } from '@/utils/test-enrichments';
+export default defineComponent({
+	name: 'SpotCategories',
+	components: { SimpleSpot, KBButton },
+	setup() {
+		const { t } = useI18n();
+		const searchResultStore = useSearchResultStore();
+		const categories = ref([] as facetItem[]);
+		const categoriesLoaded = ref(false);
+		const errorManager = inject('errorManager') as ErrorManagerType;
+
+		const quotation = (name: string) => {
+			return `"${name}"`;
+		};
+		const constructGenre = () => {
+			const categoryArray = searchResultStore.initFacets.facet_fields.genre_facet;
+			categoryArray.forEach((item, index) => {
+				if (index % 2 === 0) {
+					let category = {
+						name: `${item}`,
+						number: categoryArray[index + 1],
+					} as unknown as facetItem;
+					categories.value.push(category);
+				}
+			});
+			categories.value.sort((a, b) => a.name.localeCompare(b.name));
+			categoriesLoaded.value = true;
+		};
+		const scrollToTop = () => {
+			window.scrollTo({
+				top: 0,
+				behavior: 'smooth',
+			});
+		};
+		onMounted(() => {
+			if (searchResultStore.firstBackendFetchExecuted && Object.keys(searchResultStore.initFacets).length !== 0) {
+				constructGenre();
+			} else {
+				watch(
+					() => searchResultStore.firstBackendFetchExecuted,
+					(newVal: boolean) => {
+						if (newVal && Object.keys(searchResultStore.initFacets).length !== 0) {
+							constructGenre();
+						} else {
+							categoriesLoaded.value = true;
+							errorManager.submitCustomError(
+								'categories-error',
+								t('error.infoError.title'),
+								t('error.auth.serviceFailed'),
+								Severity.ERROR,
+								true,
+								Priority.MEDIUM,
+							);
+						}
+					},
+				);
+			}
+		});
+		return { t, categories, categoriesLoaded, quotation, scrollToTop, addTestDataEnrichment, santizeAndSimplify };
+	},
+});
+</script>
+
+<style scoped>
+h3 {
+	margin: 0;
+}
+.spot-categories {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	flex-wrap: wrap;
+}
+.spot-categories > * {
+	margin-right: 10px;
+	margin-bottom: 10px;
+}
+</style>
diff --git a/src/components/common/SpotContainer.vue b/src/components/common/SpotContainer.vue
new file mode 100644
index 00000000..2af271db
--- /dev/null
+++ b/src/components/common/SpotContainer.vue
@@ -0,0 +1,126 @@
+<template>
+	<div class="spot-container">
+		<div class="spot-row">
+			<spot-categories></spot-categories>
+		</div>
+		<div class="spot-row">
+			<simple-spot spot-size="small">
+				<span class="label-big">En kasse til noget display 349.994 minutters noget helt tilbage fra 1952.</span>
+			</simple-spot>
+			<simple-spot
+				spot-size="small"
+				icon-name="link"
+				color="light"
+			>
+				<a
+					:href="t('hero.link')"
+					class="label-big link"
+				>
+					{{ t('hero.linkText') }}
+				</a>
+			</simple-spot>
+			<advanced-spot spot-size="medium"></advanced-spot>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import SimpleSpot from '@/components/common/SimpleSpot.vue';
+import { facetItem } from '@/types/APIResponseTypes';
+import AdvancedSpot from '@/components/common/AdvancedSpot.vue';
+import { useSearchResultStore } from '@/store/searchResultStore';
+import { ErrorManagerType } from '@/types/ErrorManagerType';
+import { Priority, Severity } from '@/types/NotificationType';
+import { addTestDataEnrichment, santizeAndSimplify } from '@/utils/test-enrichments';
+import SpotCategories from '@/components/common/SpotCategories.vue';
+export default defineComponent({
+	name: 'SpotContainer',
+	components: { SimpleSpot, AdvancedSpot, SpotCategories },
+	setup() {
+		const { t } = useI18n();
+		const searchResultStore = useSearchResultStore();
+		const categories = ref([] as facetItem[]);
+		const categoriesLoaded = ref(false);
+		const errorManager = inject('errorManager') as ErrorManagerType;
+
+		const quotation = (name: string) => {
+			return `"${name}"`;
+		};
+		const constructGenre = () => {
+			const categoryArray = searchResultStore.initFacets.facet_fields.genre_facet;
+			categoryArray.forEach((item, index) => {
+				if (index % 2 === 0) {
+					let category = {
+						name: `${item}`,
+						number: categoryArray[index + 1],
+					} as unknown as facetItem;
+					categories.value.push(category);
+				}
+			});
+			categories.value.sort((a, b) => a.name.localeCompare(b.name));
+			categoriesLoaded.value = true;
+		};
+		const scrollToTop = () => {
+			window.scrollTo({
+				top: 0,
+				behavior: 'smooth',
+			});
+		};
+		onMounted(() => {
+			if (searchResultStore.firstBackendFetchExecuted && Object.keys(searchResultStore.initFacets).length !== 0) {
+				constructGenre();
+			} else {
+				watch(
+					() => searchResultStore.firstBackendFetchExecuted,
+					(newVal: boolean) => {
+						if (newVal && Object.keys(searchResultStore.initFacets).length !== 0) {
+							constructGenre();
+						} else {
+							categoriesLoaded.value = true;
+							errorManager.submitCustomError(
+								'categories-error',
+								t('error.infoError.title'),
+								t('error.auth.serviceFailed'),
+								Severity.ERROR,
+								true,
+								Priority.MEDIUM,
+							);
+						}
+					},
+				);
+			}
+		});
+		return { t, categories, categoriesLoaded, quotation, scrollToTop, addTestDataEnrichment, santizeAndSimplify };
+	},
+});
+</script>
+
+<style scoped>
+.spot-container {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	flex-direction: column;
+}
+.spot-row {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 100%;
+	flex-wrap: wrap;
+	/* background-repeat: no-repeat; */
+
+	justify-content: space-between;
+}
+.link {
+	color: inherit;
+	text-decoration: inherit;
+	border-bottom: 1px solid transparent;
+}
+.link:hover {
+	transition: border-color linear 0.3s ease-in-out;
+	border-bottom-color: var(--color-border-success);
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5a3f238b..a7b64a63 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -50,7 +50,7 @@ temporary styling until patterns from design system are implemented
 	padding-right: 12px;
 	padding-left: 12px;
 	background-color: var(--bg-default);
-	margin-top: -85px;
+	/* margin-top: -85px; */
 }
 
 .home-container {

From 12f26e04898e62adf8a8fbcf6b5ae116128da012 Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Fri, 26 Jun 2026 09:28:47 +0200
Subject: [PATCH 2/7] Code cleanup. Added loading for category buttons. Added
 shimmer effect.

---
 src/components/common/SpotCategories.vue | 104 +++++++++++++++++++++++
 src/components/common/SpotContainer.vue  |  63 +-------------
 2 files changed, 107 insertions(+), 60 deletions(-)

diff --git a/src/components/common/SpotCategories.vue b/src/components/common/SpotCategories.vue
index 018f772c..e2306c15 100644
--- a/src/components/common/SpotCategories.vue
+++ b/src/components/common/SpotCategories.vue
@@ -31,6 +31,36 @@
 				@click="scrollToTop()"
 			></KBButton>
 		</div>
+		<div
+			v-else
+			class="loading-container"
+		>
+			<h3>
+				<span
+					:style="`width:${Math.random() * 5 + 1}%`"
+					class="loading"
+				></span>
+				kategorier:
+			</h3>
+			<div
+				v-for="i in 12"
+				:key="i"
+				class="category-item"
+			>
+				<div
+					:style="`animation-delay:${Math.random() * 2}s`"
+					class="shimmer"
+				></div>
+				<span
+					:style="`width:${Math.random() * 30 + 50}%`"
+					class="loading"
+				></span>
+				<NoFacetContent
+					v-if="categoriesLoaded && categories.length === 0"
+					position="absolute"
+				></NoFacetContent>
+			</div>
+		</div>
 	</simple-spot>
 </template>
 
@@ -109,6 +139,7 @@ export default defineComponent({
 <style scoped>
 h3 {
 	margin: 0;
+	display: contents;
 }
 .spot-categories {
 	display: flex;
@@ -120,4 +151,77 @@ h3 {
 	margin-right: 10px;
 	margin-bottom: 10px;
 }
+h3 .loading {
+	margin-top: -3px;
+}
+.loading-container {
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+	gap: 20px 15px;
+	flex-wrap: wrap;
+	box-sizing: border-box;
+	padding: 0px 12px;
+}
+
+.loading {
+	display: flex;
+	height: 26px;
+	background-color: rgba(170, 170, 170, 1);
+	border-radius: 15px;
+}
+.category-item {
+	background: var(--bg-main) 0% 0% no-repeat padding-box;
+	box-shadow: 2px 2px 4px #75757500;
+	border: 2px solid #ffffff;
+	border-radius: 4px;
+	color: white;
+	width: 150px;
+	padding: 8px 8px 0px 10px;
+	box-sizing: border-box;
+	margin: 0px 10px;
+	height: 50px;
+	border: 2px solid #002e7026;
+	border-radius: 4px;
+	position: relative;
+	text-decoration: none;
+	display: flex;
+	transition: all 0.1s linear 0s;
+	margin-top: -10px;
+}
+
+.shimmer {
+	animation: loading 3s ease-in-out 0s infinite;
+	background: rgb(255, 255, 255);
+	background: linear-gradient(
+		117deg,
+		rgba(255, 255, 255, 0) 44%,
+		rgba(255, 255, 255, 0.7455357142857143) 64%,
+		rgba(255, 255, 255, 0) 77%
+	);
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	mix-blend-mode: soft-light;
+	overflow: hidden;
+	background-size: 200% 100%;
+	background-position: 200% center;
+	margin-top: -10px;
+	margin-left: -10px;
+}
+
+@keyframes loading {
+	0% {
+		background-position: 200% center;
+	}
+	20% {
+		background-position: 200% center;
+	}
+	80% {
+		background-position: 0% center;
+	}
+	100% {
+		background-position: 0% center;
+	}
+}
 </style>
diff --git a/src/components/common/SpotContainer.vue b/src/components/common/SpotContainer.vue
index 2af271db..881a5832 100644
--- a/src/components/common/SpotContainer.vue
+++ b/src/components/common/SpotContainer.vue
@@ -5,7 +5,7 @@
 		</div>
 		<div class="spot-row">
 			<simple-spot spot-size="small">
-				<span class="label-big">En kasse til noget display 349.994 minutters noget helt tilbage fra 1952.</span>
+				<span class="label-big">En kasse til noget display 349.994 minutters noget helt tilbage fra 1931.</span>
 			</simple-spot>
 			<simple-spot
 				spot-size="small"
@@ -25,74 +25,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SimpleSpot from '@/components/common/SimpleSpot.vue';
-import { facetItem } from '@/types/APIResponseTypes';
 import AdvancedSpot from '@/components/common/AdvancedSpot.vue';
-import { useSearchResultStore } from '@/store/searchResultStore';
-import { ErrorManagerType } from '@/types/ErrorManagerType';
-import { Priority, Severity } from '@/types/NotificationType';
-import { addTestDataEnrichment, santizeAndSimplify } from '@/utils/test-enrichments';
 import SpotCategories from '@/components/common/SpotCategories.vue';
 export default defineComponent({
 	name: 'SpotContainer',
 	components: { SimpleSpot, AdvancedSpot, SpotCategories },
 	setup() {
 		const { t } = useI18n();
-		const searchResultStore = useSearchResultStore();
-		const categories = ref([] as facetItem[]);
-		const categoriesLoaded = ref(false);
-		const errorManager = inject('errorManager') as ErrorManagerType;
-
-		const quotation = (name: string) => {
-			return `"${name}"`;
-		};
-		const constructGenre = () => {
-			const categoryArray = searchResultStore.initFacets.facet_fields.genre_facet;
-			categoryArray.forEach((item, index) => {
-				if (index % 2 === 0) {
-					let category = {
-						name: `${item}`,
-						number: categoryArray[index + 1],
-					} as unknown as facetItem;
-					categories.value.push(category);
-				}
-			});
-			categories.value.sort((a, b) => a.name.localeCompare(b.name));
-			categoriesLoaded.value = true;
-		};
-		const scrollToTop = () => {
-			window.scrollTo({
-				top: 0,
-				behavior: 'smooth',
-			});
-		};
-		onMounted(() => {
-			if (searchResultStore.firstBackendFetchExecuted && Object.keys(searchResultStore.initFacets).length !== 0) {
-				constructGenre();
-			} else {
-				watch(
-					() => searchResultStore.firstBackendFetchExecuted,
-					(newVal: boolean) => {
-						if (newVal && Object.keys(searchResultStore.initFacets).length !== 0) {
-							constructGenre();
-						} else {
-							categoriesLoaded.value = true;
-							errorManager.submitCustomError(
-								'categories-error',
-								t('error.infoError.title'),
-								t('error.auth.serviceFailed'),
-								Severity.ERROR,
-								true,
-								Priority.MEDIUM,
-							);
-						}
-					},
-				);
-			}
-		});
-		return { t, categories, categoriesLoaded, quotation, scrollToTop, addTestDataEnrichment, santizeAndSimplify };
+		return { t };
 	},
 });
 </script>

From 0881a18d9dd2ae89b37ede57e93204636b2f7cb6 Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Fri, 26 Jun 2026 09:58:17 +0200
Subject: [PATCH 3/7] Spot sizes and positioning

---
 src/components/common/SimpleSpot.vue     | 6 +++---
 src/components/common/SpotCategories.vue | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/common/SimpleSpot.vue b/src/components/common/SimpleSpot.vue
index 08defc2c..62561870 100644
--- a/src/components/common/SimpleSpot.vue
+++ b/src/components/common/SimpleSpot.vue
@@ -110,12 +110,12 @@ export default defineComponent({
 .spot.max {
 	width: 100%;
 }
-@media (min-width: 1280px) {
+@media (min-width: 990px) {
 	.spot.small {
-		max-width: 20%;
+		max-width: 23%;
 	}
 	.spot.medium {
-		max-width: 45%;
+		max-width: 48%;
 	}
 }
 </style>
diff --git a/src/components/common/SpotCategories.vue b/src/components/common/SpotCategories.vue
index e2306c15..4da21523 100644
--- a/src/components/common/SpotCategories.vue
+++ b/src/components/common/SpotCategories.vue
@@ -16,6 +16,7 @@
 				button-color="cta"
 				button-size="small"
 				class="btn-small"
+				:custom-style="{ marginTop: '-5px' }"
 				:button-text="`${t(`categories.${santizeAndSimplify(category.name)}`)}`"
 				:custom-icon-left="`category-image ${santizeAndSimplify(category.name)}`"
 				:is-router-link="true"
@@ -148,8 +149,9 @@ h3 {
 	flex-wrap: wrap;
 }
 .spot-categories > * {
-	margin-right: 10px;
-	margin-bottom: 10px;
+	margin-right: 3px;
+	margin-left: 7px;
+	margin-bottom: 15px;
 }
 h3 .loading {
 	margin-top: -3px;

From 482d4b8b9d15f90e51a633c315a85069d22c03d0 Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Fri, 26 Jun 2026 11:00:56 +0200
Subject: [PATCH 4/7] Position changes and placeholder size change

---
 src/components/common/SpotCategories.vue | 42 ++++++++++++++++--------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/common/SpotCategories.vue b/src/components/common/SpotCategories.vue
index 4da21523..30bd9b83 100644
--- a/src/components/common/SpotCategories.vue
+++ b/src/components/common/SpotCategories.vue
@@ -16,7 +16,6 @@
 				button-color="cta"
 				button-size="small"
 				class="btn-small"
-				:custom-style="{ marginTop: '-5px' }"
 				:button-text="`${t(`categories.${santizeAndSimplify(category.name)}`)}`"
 				:custom-icon-left="`category-image ${santizeAndSimplify(category.name)}`"
 				:is-router-link="true"
@@ -36,13 +35,15 @@
 			v-else
 			class="loading-container"
 		>
-			<h3>
-				<span
-					:style="`width:${Math.random() * 5 + 1}%`"
-					class="loading"
-				></span>
-				kategorier:
-			</h3>
+			<div class="loading-header">
+				<div
+					:style="`animation-delay:${Math.random() * 2}s`"
+					class="shimmer"
+				></div>
+				<span class="loading"></span>
+				<h3>kategorier:</h3>
+			</div>
+
 			<div
 				v-for="i in 12"
 				:key="i"
@@ -141,20 +142,35 @@ export default defineComponent({
 h3 {
 	margin: 0;
 	display: contents;
+	text-align: center;
 }
 .spot-categories {
 	display: flex;
 	flex-direction: row;
 	width: 100%;
 	flex-wrap: wrap;
+	align-items: baseline;
 }
 .spot-categories > * {
 	margin-right: 3px;
 	margin-left: 7px;
 	margin-bottom: 15px;
 }
-h3 .loading {
-	margin-top: -3px;
+.loading-header {
+	display: flex;
+	width: fit-content;
+	align-items: baseline;
+}
+.loading-header .shimmer {
+	height: calc(var(--fs-sm) - 5px);
+	width: 35px;
+	margin: 0;
+	border-radius: 15px;
+}
+.loading-header .loading {
+	width: 35px;
+	height: calc(var(--fs-sm) - 5px);
+	margin-right: 5px;
 }
 .loading-container {
 	display: flex;
@@ -164,11 +180,12 @@ h3 .loading {
 	flex-wrap: wrap;
 	box-sizing: border-box;
 	padding: 0px 12px;
+	align-items: baseline;
 }
 
 .loading {
 	display: flex;
-	height: 26px;
+	height: 14px;
 	background-color: rgba(170, 170, 170, 1);
 	border-radius: 15px;
 }
@@ -182,14 +199,13 @@ h3 .loading {
 	padding: 8px 8px 0px 10px;
 	box-sizing: border-box;
 	margin: 0px 10px;
-	height: 50px;
+	height: 34px;
 	border: 2px solid #002e7026;
 	border-radius: 4px;
 	position: relative;
 	text-decoration: none;
 	display: flex;
 	transition: all 0.1s linear 0s;
-	margin-top: -10px;
 }
 
 .shimmer {

From 500a54177ccc16c248ee3f74bb4cec80548d7f5b Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Fri, 26 Jun 2026 11:43:37 +0200
Subject: [PATCH 5/7] Extra breakpoint for phone view. Can click link spot to
 activate href. Hover effect for link spot

---
 src/components/common/SimpleSpot.vue    | 16 +++++++++++++---
 src/components/common/SpotContainer.vue | 23 ++++++++++++++++++-----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/common/SimpleSpot.vue b/src/components/common/SimpleSpot.vue
index 62561870..e409d8c8 100644
--- a/src/components/common/SimpleSpot.vue
+++ b/src/components/common/SimpleSpot.vue
@@ -52,10 +52,10 @@ export default defineComponent({
 	display: flex;
 	height: 100%;
 	min-height: 190px;
-	border-radius: var(--rounded-medium);
+	border-radius: 0px;
 	border: 1px solid var(--color-border-success);
 	box-sizing: border-box;
-	margin-bottom: 20px;
+
 	position: relative;
 	overflow: hidden;
 	flex-wrap: wrap;
@@ -98,7 +98,6 @@ export default defineComponent({
 }
 .spot.small {
 	width: 100%;
-	max-width: 49%;
 }
 .spot.medium {
 	width: 100%;
@@ -110,6 +109,17 @@ export default defineComponent({
 .spot.max {
 	width: 100%;
 }
+
+@media (min-width: 640px) {
+	.spot.small {
+		max-width: 49%;
+	}
+	.spot {
+		margin-bottom: 10px;
+		border-radius: var(--rounded-medium);
+	}
+}
+
 @media (min-width: 990px) {
 	.spot.small {
 		max-width: 23%;
diff --git a/src/components/common/SpotContainer.vue b/src/components/common/SpotContainer.vue
index 881a5832..3cb57c2e 100644
--- a/src/components/common/SpotContainer.vue
+++ b/src/components/common/SpotContainer.vue
@@ -11,8 +11,11 @@
 				spot-size="small"
 				icon-name="link"
 				color="light"
+				class="spot-link"
+				@click="activateLink"
 			>
 				<a
+					ref="spotLink"
 					:href="t('hero.link')"
 					class="label-big link"
 				>
@@ -25,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SimpleSpot from '@/components/common/SimpleSpot.vue';
 import AdvancedSpot from '@/components/common/AdvancedSpot.vue';
@@ -35,7 +38,13 @@ export default defineComponent({
 	components: { SimpleSpot, AdvancedSpot, SpotCategories },
 	setup() {
 		const { t } = useI18n();
-		return { t };
+		const spotLink = ref<HTMLAnchorElement | null>(null);
+		const activateLink = () => {
+			if (spotLink.value) {
+				spotLink.value.click();
+			}
+		};
+		return { t, spotLink, activateLink };
 	},
 });
 </script>
@@ -62,8 +71,12 @@ export default defineComponent({
 	text-decoration: inherit;
 	border-bottom: 1px solid transparent;
 }
-.link:hover {
-	transition: border-color linear 0.3s ease-in-out;
-	border-bottom-color: var(--color-border-success);
+
+.spot-link:hover {
+	.link {
+		transition: border-color linear 0.3s ease-in-out;
+		border-bottom-color: var(--color-border-success);
+	}
+	cursor: pointer;
 }
 </style>

From 0c117d512eb84ec4cee1bcb52cf13d2233a7fda6 Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Wed, 1 Jul 2026 15:52:25 +0200
Subject: [PATCH 6/7] color changes and hover effects

---
 src/assets/styles/elements.css          |  5 +++--
 src/components/common/KBButton.vue      | 10 +++++-----
 src/components/common/SimpleSpot.vue    |  2 +-
 src/components/common/SpotContainer.vue |  7 +++----
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/assets/styles/elements.css b/src/assets/styles/elements.css
index de71c18d..b322d2f8 100644
--- a/src/assets/styles/elements.css
+++ b/src/assets/styles/elements.css
@@ -1,6 +1,7 @@
 :root{
     /*background-colors*/
     --bg-main:#ea9fbc;
+    --bg-main-light:#f0bcd0;
     --bg-cta:#ea9fbc;
     --bg-light:#ea9fbc1a;
     --bg-remove:#f7ae3b;
@@ -10,7 +11,7 @@
     --bg-transparent: transparent;
     --bg-golden:#e0b500;
     --bg-default-gray: #ccc;
-    --bg-secondary-light: #caf0fe;
+    --bg-secondary-light: #324666;
     --bg-secondary-light-20: #F0FBFF;
     --bg-header: #002e70;
     --bg-footer: #013277;
@@ -25,7 +26,7 @@
 
     /*borders*/
     --color-border-active: #001C43;
-    --color-border-light:#96e2fd;
+    --color-border-light:#FBECF2;
     --color-border-golden:#e0b500;
     --color-border-success:#ea9fbc;
     --color-border-disabled:#757575;
diff --git a/src/components/common/KBButton.vue b/src/components/common/KBButton.vue
index b882e882..40a2eb20 100644
--- a/src/components/common/KBButton.vue
+++ b/src/components/common/KBButton.vue
@@ -182,6 +182,7 @@ export default defineComponent({
 	width: fit-content;
 	min-height: 34px;
 	line-height: 1;
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
 }
 .btn-text::first-letter {
 	text-transform: capitalize;
@@ -257,7 +258,6 @@ export default defineComponent({
 /* Call to action buttons */
 .btn-cta {
 	border-radius: var(--rounded-medium);
-	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
 }
 .btn-cta .btn-text {
 	border-bottom: 1px solid transparent;
@@ -265,10 +265,10 @@ export default defineComponent({
 	transition: 200ms;
 }
 .btn-cta:not(:disabled):hover {
-	transition: all 5s ease 0s;
-	.btn-text {
-		border-color: var(--color-border-active);
-	}
+	transition: all 0.3s ease 0s;
+	background-color: var(--bg-main-light);
+	border-color: var(--color-border-light);
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0);
 }
 .btn-cta.medium .material-icons {
 	font-size: calc(var(--fs-lead) + 8px);
diff --git a/src/components/common/SimpleSpot.vue b/src/components/common/SimpleSpot.vue
index e409d8c8..25d2ba60 100644
--- a/src/components/common/SimpleSpot.vue
+++ b/src/components/common/SimpleSpot.vue
@@ -55,11 +55,11 @@ export default defineComponent({
 	border-radius: 0px;
 	border: 1px solid var(--color-border-success);
 	box-sizing: border-box;
-
 	position: relative;
 	overflow: hidden;
 	flex-wrap: wrap;
 	align-content: baseline;
+	box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.34) inset;
 }
 .spot .icon {
 	width: 40px;
diff --git a/src/components/common/SpotContainer.vue b/src/components/common/SpotContainer.vue
index 3cb57c2e..9da4c545 100644
--- a/src/components/common/SpotContainer.vue
+++ b/src/components/common/SpotContainer.vue
@@ -73,10 +73,9 @@ export default defineComponent({
 }
 
 .spot-link:hover {
-	.link {
-		transition: border-color linear 0.3s ease-in-out;
-		border-bottom-color: var(--color-border-success);
-	}
+	transition: background-color 0.3s linear;
+	background-color: var(--bg-secondary-light);
 	cursor: pointer;
+	box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0) inset;
 }
 </style>

From bc3de4328acf3f410f77f443a5618c49a3384cbf Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Tue, 7 Jul 2026 10:34:03 +0200
Subject: [PATCH 7/7] Color change

---
 src/components/common/KBButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/KBButton.vue b/src/components/common/KBButton.vue
index 40a2eb20..863f8629 100644
--- a/src/components/common/KBButton.vue
+++ b/src/components/common/KBButton.vue
@@ -266,7 +266,7 @@ export default defineComponent({
 }
 .btn-cta:not(:disabled):hover {
 	transition: all 0.3s ease 0s;
-	background-color: var(--bg-main-light);
+	background-color: var(--bg-main-2);
 	border-color: var(--color-border-light);
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0);
 }