Transferred and translated the frontend code from L10 to L12

2025-05-05 19:01:27 +02:00
parent 98205954c3
commit e15d3ae146
96 changed files with 6398 additions and 701 deletions
@@ -0,0 +1,110 @@
+<script setup>
+    import { onMounted, defineProps } from 'vue';
+    import { Link, router } from '@inertiajs/vue3';
+    import { initFlowbite } from 'flowbite';
+
+    import ArcticLogo from '@/Components/ClubLogo.vue';
+
+    onMounted(() => {
+        initFlowbite();
+    });
+
+    const props = defineProps({
+        block: {
+            type: Object,
+            required: true,
+        },
+    });
+
+    const texts = props.block.texts || [
+        { paragraph: 'Trenger du et enkelt og fleksibelt system for å organisere din klubb og klubbaktiviteter, uten å knekke lommeboka? Ønsker du et partnerskap med en utvikler med tilhold i Norge og som er lett tilgjengelig dersom du har behov for oppfølging? Kontakt oss for mer informasjon om hvordan vi kan hjelpe deg og din klubb' }
+    ];
+</script>
+
+<template>
+    <section class="relative py-20 md:py-24 overflow-hidden mx-auto max-w-[1280px] bg-black">
+        <div class="relative container px-4 mx-auto">
+            <div class="max-w-2xl lg:max-w-3xl xl:max-w-5xl xl:pr-20">
+                <h1 v-show="block.showtitle" class="font-heading text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-gray-500 mb-10">
+                    <span>{{ block.title || 'Overskrift' }}&nbsp;</span>
+                    <span class="font-serif italic font-normal">{{ block.titlecursive || 'Overskriftkursiv' }}</span>
+                </h1>
+                <p
+                    v-for="(text, index) in texts"
+                    :key="index"
+                    class="max-w-xl text-base sm:text-xl text-gray-300 font-semibold"
+                    :class="{
+                        'mt-4': index > 0,
+                        'mb-10': index === texts.length - 1
+                    }"
+                >
+                    {{ text.paragraph }}
+                </p>
+                <div class="lg:flex items-center">
+                    <a v-if="props.block.showbutton && props.block.buttonaction === 'none'" class="relative group inline-block mb-12 lg:mb-0 md:mr-10 lg:mr-18 py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" href="#">
+                        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
+                        <div class="relative flex items-center justify-center">
+                            <span class="mr-4">{{ props.block.buttontext }}</span>
+                            <span>
+                                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
+                                </svg>
+                            </span>
+                        </div>
+                    </a>
+                    <a v-else-if="props.block.showbutton && props.block.buttonaction === 'external_link'" class="relative group inline-block mb-12 lg:mb-0 md:mr-10 lg:mr-18 py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" :href="props.block.buttonlink" target="_new">
+                        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
+                        <div class="relative flex items-center justify-center">
+                            <span class="mr-4">{{ props.block.buttontext }}</span>
+                            <span>
+                                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
+                                </svg>
+                            </span>
+                        </div>
+                    </a>
+                    <Link v-else-if="props.block.showbutton && props.block.buttonaction === 'newslink'" class="relative group inline-block mb-12 lg:mb-0 md:mr-10 lg:mr-18 py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" :href="route('newsArticle', props.block.buttonlink)">
+                        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
+                        <div class="relative flex items-center justify-center">
+                            <span class="mr-4">{{ props.block.buttontext }}</span>
+                            <span>
+                                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
+                                </svg>
+                            </span>
+                        </div>
+                    </Link>
+                    <Link v-else-if="props.block.showbutton && props.block.buttonaction === 'eventlink'" class="relative group inline-block mb-12 lg:mb-0 md:mr-10 lg:mr-18 py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" :href="route('event', props.block.buttonlink)">
+                        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
+                        <div class="relative flex items-center justify-center">
+                            <span class="mr-4">{{ props.block.buttontext }}</span>
+                            <span>
+                                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
+                                </svg>
+                            </span>
+                        </div>
+                    </Link>
+                    <Link v-else-if="props.block.showbutton && props.block.buttonaction === 'pagelink'" class="relative group inline-block mb-12 lg:mb-0 md:mr-10 lg:mr-18 py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" :href="route('page.view', props.block.buttonlink)">
+                        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
+                        <div class="relative flex items-center justify-center">
+                            <span class="mr-4">{{ props.block.buttontext }}</span>
+                            <span>
+                                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
+                                </svg>
+                            </span>
+                        </div>
+                    </Link>
+                    <div v-show="props.block.showlogo" class="flex items-center">
+                        <ArcticLogo class="w-14 h-14" />
+                        <div class="flex-col items-center justify-center text-center">
+                            <p class="font-topsecret text-white text-lg ml-2">Østfold Milsim</p>
+                            <p class="font-topsecret text-white text-lg ml-2">Airsoftklubb</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
@@ -0,0 +1,226 @@
+<script setup>
+    import Icon from '@/Components/Icon.vue';
+    import { toRef, ref, onMounted } from 'vue';
+    import { initFlowbite } from 'flowbite';
+
+    onMounted(() => {
+        initFlowbite();
+    });
+    
+    const props = defineProps({
+        block: {
+            type: Object,
+            required: true,
+        },
+    });
+
+    const emit = defineEmits(['update:block']);
+    const local = toRef(props, 'block');
+
+    // Drag state for paragraphs
+    const draggedIndex = ref(null);
+
+    function handleDragStart(event, index) {
+        draggedIndex.value = index;
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('text/plain', index);
+    };
+
+    function handleDragOver(event) {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+    };
+
+    function handleDrop(event, index) {
+        event.preventDefault();
+        const fromIndex = draggedIndex.value;
+        if (fromIndex === null || fromIndex === index) return;
+
+        const item = local.value.texts.splice(fromIndex, 1)[0];
+        local.value.texts.splice(index, 0, item);
+        draggedIndex.value = null;
+    };
+
+    function add() {
+        local.value.texts.push({
+            paragraph: ''
+        });
+    };
+
+    function remove(index) {
+        local.value.texts.splice(index, 1);
+    }
+    // End drag state functions for paragraphs
+
+    const texts = props.block.texts || [
+        { paragraph: 'Trenger du et enkelt og fleksibelt system for å organisere din klubb og klubbaktiviteter, uten å knekke lommeboka? Ønsker du et partnerskap med en utvikler med tilhold i Norge og som er lett tilgjengelig dersom du har behov for oppfølging? Kontakt oss for mer informasjon om hvordan vi kan hjelpe deg og din klubb' }
+    ];
+</script>
+
+<template>
+    <div class="space-y-4">
+        <div class="mb-2">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">DOM ID</label>
+            <input
+                type="text"
+                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
+                v-model="local.anchorName"
+            />
+        </div>
+        <div class="mb-2">
+            <div class="flex">
+                <div class="flex items-center h-5">
+                    <input 
+                        id="title-checkbox" 
+                        aria-describedby="title-checkbox-text" 
+                        type="checkbox" 
+                        v-model="local.showtitle"
+                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                    >
+                </div>
+                <div class="ms-2 text-sm">
+                    <label for="title-checkbox" class="font-medium text-gray-900 dark:text-gray-300">Vis tittel</label>
+                    <p id="title-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Skru tittelen på komponenten av, eller på</p>
+                </div>
+            </div>
+        </div>
+        <div class="mb-2">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tittel tekst</label>
+            <input
+                type="text"
+                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
+                v-model="local.title"
+                :disabled="!local.showtitle"
+            />
+        </div>
+        <div class="mb-2">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tittel kursiv tekst</label>
+            <input
+                type="text"
+                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
+                v-model="local.titlecursive"
+                :disabled="!local.showtitle"
+            />
+        </div>
+
+        <div class="mb-2">
+            <div class="flex">
+                <div class="flex items-center h-5">
+                    <input 
+                        id="button-checkbox" 
+                        aria-describedby="button-checkbox-text" 
+                        type="checkbox" 
+                        v-model="local.showbutton"
+                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                    >
+                </div>
+                <div class="ms-2 text-sm">
+                    <label for="button-checkbox" class="font-medium text-gray-900 dark:text-gray-300">Vis knapp</label>
+                    <p id="button-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Skru handlingsknappen for komponenten av, eller på</p>
+                </div>
+            </div>
+        </div>
+        <div class="mb-2">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tittel knapp</label>
+            <input
+                type="text"
+                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
+                v-model="local.buttontext"
+                :disabled="!local.showbutton"
+            />
+        </div>
+        <div class="mb-2">
+            <label for="actiontype" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Velg knapp handling</label>
+            <select 
+                id="actiontype" 
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                v-model="local.buttonaction"
+                :disabled="!local.showbutton"
+            >
+                <option value="none">Inaktiv</option>
+                <option value="newslink">Lenke til nyhetsartikkel</option>
+                <option value="eventlink">Lenke til arrangement</option>
+                <option value="pagelink">Lenke til en annen side</option>
+                <option value="external_link">Ekstern lenke</option>
+            </select>
+        </div>
+        <div v-show="local.buttonaction != 'none'" class="mb-2">
+            <label for="address-text" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Adresse</label>
+            <input 
+                type="email" 
+                id="address-text" 
+                aria-describedby="address-text-explanation" 
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
+                :placeholder="local.buttonaction === 'newslink' ? 'slug-til-nyhetsartikkel'
+                    : local.buttonaction === 'eventlink' ? 'slug-til-arrangement'
+                    : local.buttonaction === 'pagelink' ? 'slug-til-side'
+                    : local.buttonaction === 'external_link' ? 'https://ekstern.lenke.no'
+                    : ''"
+                :disabled="!local.showbutton"
+                v-model="local.buttonlink"
+            >
+            <p id="address-text-explanation" class="mt-2 text-sm text-gray-500 dark:text-gray-400">Skriv inn enten identifikatoren (slug) til den interne lenken, eller full nettsideadresse hvis det er en ekstern lenke</p>
+        </div>
+
+        <div class="mb-2">
+            <div class="flex">
+                <div class="flex items-center h-5">
+                    <input 
+                        id="logo-checkbox" 
+                        aria-describedby="logo-checkbox-text" 
+                        type="checkbox" 
+                        v-model="local.showlogo"
+                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                    >
+                </div>
+                <div class="ms-2 text-sm">
+                    <label for="logo-checkbox" class="font-medium text-gray-900 dark:text-gray-300">Vis logo</label>
+                    <p id="logo-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Skru logovisning i komponenten av, eller på</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="space-y-4">
+            <h3 class="font-bold text-sm text-gray-800 dark:text-white">
+                Tekstparagrafer
+            </h3>
+        </div>
+
+        <div class="space-y-4">
+            <div
+                v-for="(text, index) in local.texts"
+                :key="index"
+                class="flex items-start gap-2 p-4 rounded border dark:border-gray-600 bg-gray-50 dark:bg-gray-800"
+                draggable="true"
+                @dragstart="handleDragStart($event, index)"
+                @dragover="handleDragOver"
+                @drop="handleDrop($event, index)"
+            >
+                <div class="cursor-move mt-1 text-gray-500 dark:text-gray-400">
+                    <Icon name="move" class="w-4 h-4" />
+                </div>
+
+                <div class="flex-1 space-y-2">
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">Paragraf {{ index + 1 }}</span>
+                        <button @click="remove(index)" class="text-red-500 hover:underline text-xs">Fjern</button>
+                    </div>
+
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400">Tekst</label>
+                        <textarea rows="2" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white" v-model="text.paragraph"></textarea>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <button @click="add" class="mt-2 px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
+            Legg til ny paragraf
+        </button>
+
+    </div>
+</template>
+
+<style scoped>
+/* Optional FAQ list styles */
+</style>
@@ -0,0 +1,110 @@
+<script setup>
+    import { onMounted, defineProps } from 'vue';
+    import { Link, router } from '@inertiajs/vue3';
+    import { initFlowbite } from 'flowbite';
+
+    import ArcticLogo from '@/Components/ArcticFooterLogo.vue';
+
+    onMounted(() => {
+        initFlowbite();
+    });
+
+    const props = defineProps({
+        block: {
+            type: Object,
+            required: true,
+        },
+    });
+
+    const texts = props.block.texts || [
+        { paragraph: 'Trenger du et enkelt og fleksibelt system for å organisere din klubb og klubbaktiviteter, uten å knekke lommeboka? Ønsker du et partnerskap med en utvikler med tilhold i Norge og som er lett tilgjengelig dersom du har behov for oppfølging? Kontakt oss for mer informasjon om hvordan vi kan hjelpe deg og din klubb' }
+    ];
+</script>
+
+<template>
+    <section :id="block.anchorName" class="relative py-20 md:py-24 overflow-hidden mx-auto max-w-[1280px] bg-black">
+        <div class="relative container px-4 mx-auto">
+            <div class="max-w-2xl lg:max-w-3xl xl:max-w-5xl xl:pr-20">
+                <h1 v-show="block.showtitle" class="font-heading text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-gray-500 mb-10">
+                    <span>{{ block.title || 'Overskrift' }}&nbsp;</span>
+                    <span class="font-serif italic font-normal">{{ block.titlecursive || 'Overskriftkursiv' }}</span>
+                </h1>
+                <p
+                    v-for="(text, index) in texts"
+                    :key="index"
+                    class="max-w-xl text-base sm:text-xl text-gray-300 font-semibold"
+                    :class="{
+                        'mt-4': index > 0,
+                        'mb-10': index === texts.length - 1
+                    }"
+                >
+                    {{ text.paragraph }}
+                </p>
+                <div class="lg:flex items-center">
+                    <a v-if="props.block.showbutton && props.block.buttonaction === 'none'" class="relative group inline-block mb-12 lg:mb-0 md:mr-10 lg:mr-18 py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" href="#">
+                        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
+                        <div class="relative flex items-center justify-center">
+                            <span class="mr-4">{{ props.block.buttontext }}</span>
+                            <span>
+                                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
+                                </svg>
+                            </span>
+                        </div>
+                    </a>
+                    <a v-else-if="props.block.showbutton && props.block.buttonaction === 'external_link'" class="relative group inline-block mb-12 lg:mb-0 md:mr-10 lg:mr-18 py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" :href="props.block.buttonlink" target="_new">
+                        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
+                        <div class="relative flex items-center justify-center">
+                            <span class="mr-4">{{ props.block.buttontext }}</span>
+                            <span>
+                                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
+                                </svg>
+                            </span>
+                        </div>
+                    </a>
+                    <Link v-else-if="props.block.showbutton && props.block.buttonaction === 'newslink'" class="relative group inline-block mb-12 lg:mb-0 md:mr-10 lg:mr-18 py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" :href="route('newsArticle', props.block.buttonlink)">
+                        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
+                        <div class="relative flex items-center justify-center">
+                            <span class="mr-4">{{ props.block.buttontext }}</span>
+                            <span>
+                                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
+                                </svg>
+                            </span>
+                        </div>
+                    </Link>
+                    <Link v-else-if="props.block.showbutton && props.block.buttonaction === 'eventlink'" class="relative group inline-block mb-12 lg:mb-0 md:mr-10 lg:mr-18 py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" :href="route('event', props.block.buttonlink)">
+                        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
+                        <div class="relative flex items-center justify-center">
+                            <span class="mr-4">{{ props.block.buttontext }}</span>
+                            <span>
+                                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
+                                </svg>
+                            </span>
+                        </div>
+                    </Link>
+                    <Link v-else-if="props.block.showbutton && props.block.buttonaction === 'pagelink'" class="relative group inline-block mb-12 lg:mb-0 md:mr-10 lg:mr-18 py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" :href="route('page.view', props.block.buttonlink)">
+                        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
+                        <div class="relative flex items-center justify-center">
+                            <span class="mr-4">{{ props.block.buttontext }}</span>
+                            <span>
+                                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
+                                </svg>
+                            </span>
+                        </div>
+                    </Link>
+                    <div v-show="props.block.showlogo" class="flex items-center">
+                        <ArcticLogo class="w-14 h-14" />
+                        <div class="flex-col items-center justify-center text-center">
+                            <p class="font-topsecret text-white text-lg ml-2">Østfold Milsim</p>
+                            <p class="font-topsecret text-white text-lg ml-2">Airsoftklubb</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>