%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<div :style="'background-image: url('+post.image_url+')'"
class="relative h-96 bg-cover bg-center bg-no-repeat bg-black">
<div class="waves absolute z-10 top-0 left-0 w-full h-full bg-bottom bg-no-repeat"></div>
</div>
<section class="bg-gray -mt-8 mb-12 py-20 px-8">
<div class="max-w-5xl mx-auto w-full">
<header class="max-w-2xl mx-auto w-full text-center mb-20">
<span>{{ post.created_at }}</span>
<h1 class="text-5xl">{{ post.title }}</h1>
</header>
<div class="prose max-w-full"
v-html="post.content"></div>
</div>
</section>
<div v-if="post.therapist"
class="mb-16 px-6 lg:px-0">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
<h4 class="text-3xl font-bold text-center sm:text-left">About the Author</h4>
<div class="flex items-center justify-center sm:justify-end">
<NuxtLink
class="text-yellow transition hover:text-black font-medium"
to="/therapists">View all therapists</NuxtLink>
</div>
</div>
<div class="bg-blue-medium grid lg:grid-cols-6">
<div class="lg:col-span-4 grid sm:grid-cols-7 gap-8 p-6 md:p-10">
<div class="sm:col-span-3 md:col-span-2 flex justify-center sm:items-start">
<div class="w-40 sm:w-full relative">
<div :class="post.therapist ? 'border-'+post.therapist.colour : 'border-gray'"
class="absolute top-0 left-0 w-full h-full border-40 border-opacity-50"></div>
<img :src="post.author.photo_url"
:alt="post.author.full_name" />
</div>
</div>
<div class="sm:col-span-4 md:col-span-5 flex flex-col justify-center">
<h2 class="text-3xl font-bold mb-6">{{ post.author.full_name }}</h2>
<div class="mb-6"
v-html="post.therapist.short_description"></div>
<NuxtLink
class="inline-block uppercase text-sm transition duration-100 hover:text-white"
:to="'/therapists/'+post.therapist.slug">View Profile</NuxtLink>
</div>
</div>
<div class="lg:col-span-2 bg-black p-10 text-white">
<div class="grid grid-cols-2 gap-6 text-xs lg:text-sm mb-8">
<div class="flex flex-col items-end">
<div v-if="post.therapist.price_from"
class="mb-6 flex flex-col items-end justify-center">
<h4 class="block uppercase text-blue-medium">Prices</h4>
<span class="block uppercase">From {{ post.therapist.price_from.formatted }}</span>
</div>
<div v-if="post.therapist.location"
class="mb-6 flex flex-col items-end justify-center">
<h4 class="block uppercase text-blue-medium">Location</h4>
<span class="block uppercase">{{ post.therapist.location.town_city }}</span>
</div>
<div v-if="post.therapist.sessions"
class="flex flex-col items-end justify-center">
<h4 class="block uppercase text-blue-medium">Sessions</h4>
<span v-for="(session, key) in post.therapist.sessions"
v-bind:key="key"
class="block uppercase">{{ session.name }}</span>
</div>
</div>
<div v-if="post.therapist.sessions"
class="flex flex-col items-start">
<h4 class="block uppercase text-blue-medium">Specialisms</h4>
<span v-for="(specialisms, key) in post.therapist.specialisms"
v-bind:key="key"
class="block uppercase">{{ specialisms.name }}</span>
</div>
</div>
<div v-if="post.therapist.is_booking_enabled">
<NuxtLink
class="btn bg-blue-medium hover:bg-white text-black text-sm uppercase font-bold"
:to="'/booking/'+post.therapist.slug">Book {{ post.author.full_name }}</NuxtLink>
</div>
<div v-else>
<NuxtLink
class="btn bg-blue-medium hover:bg-white text-black text-sm uppercase font-bold"
:to="'/therapists/'+post.therapist.slug">View {{ post.author.full_name }}</NuxtLink>
</div>
</div>
</div>
</div>
<section v-if="related.length"
class="px-6 lg:px-0">
<header class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<h2 class="text-3xl font-bold text-center md:text-left">Most posts by {{ post.author.full_name }}</h2>
<div class="flex items-center justify-center md:justify-end">
<NuxtLink
class="text-yellow transition hover:text-black font-medium"
to="/blog">View all posts</NuxtLink>
</div>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-6">
<Post v-for="(post, key) in related"
v-bind:key="key"
:post="post" />
</div>
</section>
</div>
</template>
<script>
export default {
head () {
return {
titleTemplate: this.post.title + ' | Blog | %s',
}
},
computed: {
post() {
return this.$store.state.blog.single
},
related() {
return this.$store.state.blog.related
}
},
async asyncData ({ store, params }) {
await store.dispatch('blog/single', params.slug)
},
}
</script>
<style lang="postcss" scoped>
.waves {
background-image: url('~assets/images/blog-waves.svg');
background-size: 100% auto;
}
</style>
Zerion Mini Shell 1.0