polarpress-pagebuilder/resources/js/components/Blocks/Statics/FrontPageMembershipInfo.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>

<style>

.memberShipBlock p {
    margin-bottom: 12px;
}

.memberShipBlock p:last-child {
    margin-bottom: 0;
}

.memberShipBlock a {
    color: #f59e0b;
    text-decoration: underline;
}

.memberShipBlock a:hover {
    color: #d97706;
    text-decoration: none;
}

.memberShipBlock a:active {
    color: #d97706;
    text-decoration: none;
}

.memberShipBlock a:focus {
    color: #d97706;
    text-decoration: none;
}

.memberShipBlock a:visited {
    color: #fcd34d;
    text-decoration: underline;
}

.memberShipBlock ul {
    color: #9ca3af;
    margin-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
    list-style-type: circle;
}

.memberShipBlock li p {
    color: #9ca3af;
    font-size: 1rem;
}

.memberShipBlock ul li {
    margin-bottom: 6px;
}

.memberShipBlock ul li:last-child {
    margin-bottom: 0;
}

.memberShipBlock ol {
    color: #9ca3af;
    margin-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
    list-style-type: decimal;
}

.memberShipBlock ol li {
    margin-bottom: 6px;
}

.memberShipBlock ol li:last-child {
    margin-bottom: 0;
}

.memberShipBlock hr {
    border-top-color: #f59e0b;
    margin-top: 12px;
    margin-bottom: 12px;
}

.memberShipBlock h1 {
    @apply font-arctic text-4xl;
}

.memberShipBlock h2 {
    color: #f59e0b;
    font-family: 'Arctic';
    margin-top: 6px;
    margin-bottom: 6px;
    font-size: x-large;
}

.memberShipBlock h3 {
    color: #fff;
    margin-top: 6px;
    margin-bottom: 6px;
    font-size: large;
    font-weight: bold;
}

.memberShipBlock h4 {
    color: #f59e0b;
    margin-top: 6px;
    margin-bottom: 6px;
    font-size: medium;
    font-weight: bold;
}

.memberShipBlock h5 {
    color: #f59e0b;
    margin-top: 6px;
    margin-bottom: 6px;
    font-size: small;
    font-weight: bold;
}

.memberShipBlock h6 {
    color: #f59e0b;
    margin-top: 6px;
    margin-bottom: 6px;
    font-size: x-small;
    font-weight: bold;
}

.memberShipBlock blockquote {
    color: #9ca3af;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 20px;
    padding-left: 10px;
    border-left: 3px solid #ccc;
    font-style: italic;
}

.memberShipBlock code {
    background-color: #1f2937;
    color: #ef4444;
    border-radius: 0.3em;
    padding: 8px 10px 12px;
    white-space: nowrap;
    margin-top: 12px;
    margin-bottom: 12px;
}

</style>