89 lines
5.2 KiB
Vue
89 lines
5.2 KiB
Vue
<script setup>
|
||
import { onMounted, defineProps } from 'vue';
|
||
import { initFlowbite } from 'flowbite';
|
||
|
||
onMounted(() => {
|
||
initFlowbite();
|
||
});
|
||
|
||
const props = defineProps({
|
||
block: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
const firstColumn = props.block.firstcolumn || [
|
||
{ text: 'Vårt samhold styrkes gjennom regelmessige arrangementer, med månedlige lokale turneringer og kvartalsvise vennskapsspill mot naboklubber.', style: 'heading' },
|
||
{ text: 'Hvert år arrangerer ENHET også en spennende utenlandstur hvor våre lag får utfordre internasjonale motstandere og oppleve nye kulturer. Bli med og opplev spenningen ved å representere ENHET både hjemme og på turer.', style: 'heading' },
|
||
{ text: 'Fotball er mer enn et spill; det er en verdensomspennende lidenskap som lærer oss verdien av lagarbeid og fair play. Som den mest populære sporten i verden, bringer fotball sammen mennesker fra alle livets hjørner, og bygger broer på tvers av kulturelle og språklige barrierer.', style: 'regular' },
|
||
{ text: 'Denne vakre sporten er en fest for fysisk dyktighet og strategisk tenkning, hvor spenningen på banen kun er matchet av fansens entusiasme. Fra spennende lokale kamper til den elektriske atmosfæren ved verdensmesterskapet, fotball tilbyr en unik kilde til glede og fellesskapsfølelse', style: 'regular' }
|
||
];
|
||
|
||
const secondColumn = props.block.secondcolumn || [
|
||
{ text: 'Bli med på våre ukentlige treninger, strategiseminarer og veldedighetsaktiviteter som styrker både kropp og fellesskap.', style: 'headingbold' },
|
||
{ text: 'Og trenger du utstyr har vi har et bredt spekter av fotballrelatert utstyr tilgjengelig for våre medlemmer, for å sikre at alle har det de trenger for å spille sitt beste.', style: 'regular' },
|
||
{ text: 'Hvordan begynne? Å starte med fotball har aldri vært enklere. Kom til en åpen trening eller kontakt oss for en prat om hvordan du kan bli en del av ENHET. Alt du trenger for å starte er et par fotballsko og et ønske om å lære. Vi tar oss av resten – fra drakter til treningsutstyr.', style: 'regular' }
|
||
];
|
||
</script>
|
||
|
||
<template>
|
||
<section class="mx-auto max-w-[1280px] bg-black">
|
||
<div class="grid gap-8 grid-cols-1 md:grid-cols-2 p-6">
|
||
<div class="max-w-2xl text-gray-200">
|
||
<template v-for="(paragraph, index) in firstColumn" :index="index">
|
||
<h1 v-if="paragraph.style === 'headinglarge'" class="text-gray-500 text-2xl md:text-4xl font-arctic">
|
||
{{ paragraph.text || '' }}
|
||
</h1>
|
||
<h2 v-if="paragraph.style === 'headingbold'" class="text-gray-500 text-xl md:text-2xl font-arctic mt-4">
|
||
{{ paragraph.text || '' }}
|
||
</h2>
|
||
<h3 v-else-if="paragraph.style === 'heading'" class="text-amber-600 text-xl md:text-2xl font-serif mt-1">
|
||
{{ paragraph.text || '' }}
|
||
</h3>
|
||
<p v-else-if="paragraph.style === 'regular'" class="mt-2">
|
||
{{ paragraph.text || '' }}
|
||
</p>
|
||
<iframe
|
||
v-else-if="paragraph.style === 'video'"
|
||
class="mt-6 w-72 h-72 md:w-96 md:h-96 lg:w-[560px] lg:h-[315px]"
|
||
:src="paragraph.text"
|
||
title="YouTube video spiller"
|
||
frameborder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen
|
||
>
|
||
|
||
</iframe>
|
||
</template>
|
||
</div>
|
||
<div class="max-w-2xl text-gray-200">
|
||
<template v-for="(paragraph, index) in secondColumn" :index="index">
|
||
<h1 v-if="paragraph.style === 'headinglarge'" class="text-gray-500 text-2xl md:text-4xl font-arctic">
|
||
{{ paragraph.text || '' }}
|
||
</h1>
|
||
<h2 v-if="paragraph.style === 'headingbold'" class="text-gray-500 text-xl md:text-2xl font-arctic mt-4">
|
||
{{ paragraph.text || '' }}
|
||
</h2>
|
||
<h3 v-else-if="paragraph.style === 'heading'" class="text-amber-600 text-xl md:text-2xl font-serif mt-1">
|
||
{{ paragraph.text || '' }}
|
||
</h3>
|
||
<p v-else-if="paragraph.style === 'regular'" class="mt-2">
|
||
{{ paragraph.text || '' }}
|
||
</p>
|
||
<iframe
|
||
v-else-if="paragraph.style === 'video'"
|
||
class="mt-6 w-72 h-72 md:w-96 md:h-96 lg:w-[560px] lg:h-[315px]"
|
||
:src="paragraph.text"
|
||
title="YouTube video spiller"
|
||
frameborder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen
|
||
>
|
||
|
||
</iframe>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template> |