polarpress-pagebuilder/resources/js/components/Blocks/Statics/FrontPageMembershipInfo.vue
Helge-Mikael Nordgård 75156d4e5e
Some checks are pending
linter / quality (push) Waiting to run
tests / ci (push) Waiting to run
Implemented missing component, moved markdown style to main css
2025-05-05 22:07:51 +02:00

49 lines
2.5 KiB
Vue

<script setup>
import { defineProps } from 'vue';
import { usePage } from '@inertiajs/vue3';
import { marked } from 'marked';
const page = usePage();
const props = defineProps({
block: {
type: Object,
required: true,
},
});
</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 class="text-center text-white font-arctic text-2xl md:text-4xl">{{ block.title || 'Medlemskap' }}</h1>
</div>
<div class="mx-auto max-w-[1280px]">
<p v-if="block.showprices" class="mt-2 text-white">
Prisen for medlemskap er
{{ page.props.pageSettings['membership_fee'] }},- kr per år for voksne eller {{ page.props.pageSettings['membership_child_fee'] }}
for barn/ungdom under {{ page.props.pageSettings['membership_child_age_limit'] }} år. Du må være
{{ page.props.pageSettings['membership_age_limit'] }} år eller eldre for å bli medlem hos oss. Medlemskapet
varer i {{ page.props.pageSettings['membership_time_interval_months'] }} måneder
<span v-if="page.props.pageSettings['membership_annual']"> eller ut kalenderåret </span>
før det må fornyes. Betalinger kan gjøres på nettsiden via vipps <span v-if="page.props.pageSettings['module_stripe_payment']">eller bankkort</span> ved å besøke
<Link :href="route('page-builder.index')" class="text-amber-400 hover:text-amber-300 underline hover:no-underline">
din medlemsside
</Link>
.
</p>
<p v-if="$page.props.auth.user && block.showprices" class="mt-2 text-white">
<span class="font-semibold">Merk:</span> Priser og betingelser kan variere. Besøk medlemssiden for å se
dine spesifike betingelser.
</p>
<div class="mt-2 text-white memberShipBlock" v-html="marked(block.text)">
</div>
</div>
</div>
</section>
</template>