85 lines
4.8 KiB
Vue
85 lines
4.8 KiB
Vue
<script setup>
|
|
import { defineProps } from 'vue';
|
|
import { usePage } from '@inertiajs/vue3';
|
|
|
|
const props = defineProps({
|
|
block: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const page = usePage();
|
|
|
|
const events = [
|
|
{
|
|
headline: 'Familiekveld hos ENHET',
|
|
text: 'Ta med familien for en hyggelig kveld med mat, drikke og underholdning.',
|
|
time: '15/04/2025, klokken 12:31'
|
|
},
|
|
{
|
|
headline: 'ENHETs Veldedighetsløp for Lokalsamfunnet',
|
|
text: 'Dette arrangementet kombinerer fysisk aktivitet med en god sak. ENHETs spillere og støttespillere samles for å løpe en forhåndsbestemt distanse.',
|
|
time: '22/04/2025, klokken 12:31'
|
|
},
|
|
{
|
|
headline: 'Bli Med på ENHETs Fotballklinikk for Barn',
|
|
text: 'En helg dedikert til å lære opp unge fotballspillere med trenere og spillere fra ENHET. Barn i alderen 6-14 år inviteres til å delta i treningsøkter hvor de kan forbedre sine fotballferdigheter, lære om teamarbeid og sportsånd, og ha det gøy',
|
|
time: '29/04/2025, klokken 12:31'
|
|
},
|
|
{
|
|
headline: 'ENHET Fanfest og Sesongkickoff',
|
|
text: 'En fest for å markere starten på den nye fotballsesongen, hvor fansen kan samles for å feire starten på en ny jakt på seier. Arrangementet kan inkludere live musikk, matboder fra lokale leverandører, autografsignering med spillere, og avduking av ENHET...',
|
|
time: '06/05/2025, klokken 12:31'
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<section class="relative block w-full h-screen overflow-hidden">
|
|
<div class="absolute inset-0 bg-cover" :style="{ backgroundImage: `url('${block.image}')` }"></div>
|
|
<div class="absolute inset-0 bg-black opacity-80"></div>
|
|
<div class="absolute p-12 w-full overflow-auto" style="top: 0; bottom: 0;">
|
|
<div class="flex-row justify-center items-center">
|
|
<h1 v-if="block.showtitle" class="text-center text-white font-arctic text-2xl md:text-4xl">{{ block.title || 'Tittel' }}</h1>
|
|
<h2 v-if="block.showlabel" class="text-center text-amber-600 font-serif text-md md:text-xl">{{ block.label || 'Merkelapp' }}</h2>
|
|
<h3 v-if="block.showsecondarylabel" class="text-center text-gray-400 font-serif text-sm md:text-md">{{ block.secondarylabel || 'Sekundær merkelapp' }}</h3>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-[1280px]">
|
|
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-12">
|
|
<!-- Begin events loop -->
|
|
<div
|
|
v-for="(event, index) in events"
|
|
:key="index"
|
|
class="max-w-sm rounded-lg shadow-xl bg-gray-800 border-gray-700 relative"
|
|
>
|
|
<div class="relative">
|
|
<a href="#">
|
|
<img class="rounded-t-lg" src="/img/blocks/arrangement_placeholder.jpg" alt="Eksempelbilde" />
|
|
<!-- Badge positioned absolutely within the relative container -->
|
|
<div class="absolute top-0 right-0 bg-green-100 text-green-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border-green-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
|
Ingen plassrestriksjoner
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="p-5">
|
|
<a href="#">
|
|
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white">{{ event.headline }}</h5>
|
|
</a>
|
|
<p class="mb-2 text-sm text-green-400">Oppstart: {{ event.time }}</p>
|
|
<p class="mb-3 font-normal text-gray-400">{{ event.text }}</p>
|
|
<a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-green-600 hover:bg-green-700 focus:ring-green-800">
|
|
Les mer
|
|
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End events loop -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template> |