110 lines
11 KiB
Vue
110 lines
11 KiB
Vue
<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' }} </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> |