%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<PageHeader classObject='home bg-blue-light'>
<div class="w-full flex flex-col items-center justify-center flex-wrap relative z-20">
<img class="mb-8"
src="~assets/images/logo-white-small.svg" alt="Takeaseat" />
<h1 class="text-4xl md:text-5xl lg:text-7xl">
<span class="block mb-3 font-bold">Therapy for a better you</span>
<span class="block text-white text-xl md:text-2xl lg:text-5xl font-bold">Book now with a take a seat verified therapist</span>
</h1>
</div>
<div @mouseleave="closeSearch"
class="max-w-md w-full mx-auto mt-6 md:mt-16 relative z-20">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-x-4">
<NuxtLink class="btn btn-primary"
to="/therapists?session_types=3">In Person</NuxtLink>
<NuxtLink class="btn btn-primary"
to="/therapists?session_types=1&session_types=2">Online/Phone</NuxtLink>
</div>
<span class="mb-2 block text-sm">Or</span>
<div class="relative">
<button @click="openSearch"
type="button"
:class="isSearchOpen ? 'shadow-md' : ''"
class="flex items-center justify-between bg-white py-4 px-6 text-left leading-4 rounded-full w-full mb-3 focus:outline-none">
<span class="font-medium">Tell us what's worrying you...</span>
<svg :class="isSearchOpen ? 'rotate-180' : ''"
class="transform duration-100 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div
v-if="isSearchActive"
:class="isSearchOpen ? 'scale-100 opacity-100' : 'scale-90 opacity-0'"
class="absolute top-full left-0 w-full bg-white p-6 rounded-xl shadow-lg transition transform origin-top text-left">
<div style="max-height: 250px"
class="overflow-y-auto">
<t-checkbox-group
v-model="form.specialisms"
name="specialisms"
:classes="{
groupWrapper: 'grid grid-cols-1 sm:grid-cols-2 gap-x-4',
label: 'block pl-2.5 text-sm',
input: 'rounded-md w-5 h-5 text-black transition duration-100 ease-in-out border-gray-300 shadow-sm focus:border-black focus:ring-2 focus:ring-black focus:outline-none focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed',
inputWrapper: 'inline-flex',
wrapper: 'flex items-center my-1',
}"
:options="filters.specialisms"
value-attribute="id"
text-attribute="name"></t-checkbox-group>
</div>
<div class="pt-4 grid grid-cols-1 sm:grid-cols-6 gap-x-4">
<div class="sm:col-span-4">
<ValidationProvider name="postcode" :rules="{ regex: /^(([gG][iI][rR] {0,}0[aA]{2})|((([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y]?[0-9][0-9]?)|(([a-pr-uwyzA-PR-UWYZ][0-9][a-hjkstuwA-HJKSTUW])|([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y][0-9][abehmnprv-yABEHMNPRV-Y]))) {0,}[0-9][abd-hjlnp-uw-zABD-HJLNP-UW-Z]{2}))$/ }" v-slot="{ errors }">
<t-input-group label="Postcode (Optional)">
<t-input
v-model="form.postcode"
placeholder="Enter your postcode" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</t-input-group>
</ValidationProvider>
</div>
<div class="sm:col-span-2">
<ValidationProvider name="postcode" rules="required" v-slot="{ errors }">
<t-input-group label="Distance">
<t-select
v-model="form.distance"
:options="[
{ id: 5, text: '5 miles' },
{ id: 10, text: '10 miles' },
{ id: 20, text: '20 miles' },
{ id: 30, text: '30 miles' },
{ id: 40, text: '40 miles' },
{ id: 50, text: '50 miles' },
]"
placeholder="Choose a distance" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</t-input-group>
</ValidationProvider>
</div>
</div>
<div class="border-t border-black border-opacity-10 pt-4 -mt-2">
<button @click="search"
class="w-full btn btn-primary btn-small rounded-lg"
type="button">
Search
</button>
</div>
</div>
</div>
</div>
</PageHeader>
<section class="bg-gray py-20 px-8 mb-8">
<div class="max-w-xl mx-auto w-full">
<header class="text-center mb-20">
<h1 class="text-5xl font-bold mb-8">Follow these 3 steps to start your journey</h1>
<p>We know the start of the journey is sometimes the hardest so we have made it as simple as possible…</p>
</header>
</div>
<div class="max-w-5xl mx-auto w-full">
<div class="grid grid-cols-1 md:grid-cols-3 gap-x-16 gap-y-10 mb-20">
<div class="text-sm leading-6">
<div class="flex items-end mb-6">
<img class="h-10 mr-3" src="~/assets/images/icons/icon-mobile.svg" alt="Browse" />
<h2 class="text-3xl font-medium">Browse</h2>
</div>
<p>Just tell us what’s worrying you, give us a few pieces of key information, such as location and budget, and we will match you with the perfect therapists.</p>
</div>
<div class="text-sm leading-6">
<div class="flex items-end mb-6">
<img class="h-10 mr-3" src="~/assets/images/icons/icon-calendar.svg" alt="Book" />
<h2 class="text-3xl font-medium">Book</h2>
</div>
<p>Once you find a therapist you like. Pick a date and time they have available, book, and pay it's that simple.</p>
</div>
<div class="text-sm leading-6">
<div class="flex items-end mb-6">
<img class="h-9 mr-3" src="~/assets/images/icons/icon-sofa.svg" alt="Take a Seat" />
<h2 class="text-3xl font-medium">Take a Seat</h2>
</div>
<p>Take a seat with your therapist face to face, via video, or telephone, and start the journey to a new you.</p>
</div>
</div>
<div class="flex flex-col items-center justify-center">
<NuxtLink class="btn btn-primary rounded-full shadow"
to="/therapists">Start here</NuxtLink>
<NuxtLink class="mt-8 transition hover:text-blue-light"
to="/therapists">Or Browse Our Therapists</NuxtLink>
</div>
</div>
</section>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 px-6 lg:px-0">
<div class="box-one flex flex-col justify-between b bg-yellow bg-no-repeat bg-bottom p-8 py-10">
<div>
<div class="flex flex-col justify-center items-center sm:grid sm:grid-cols-2 mb-6">
<h2 class="order-2 sm:order-1 mt-3 sm:mt-0 text-3xl font-bold text-center sm:text-left">You’re in Safe Hands</h2>
<div class="order-1 sm:order-2 flex items-center justify-end">
<img src="~/assets/images/icons/icon-check.svg" alt="You’re in Safe Hands" />
</div>
</div>
<p class="text-sm leading-6 mb-6">All of our therapists have been take a seat verified, to ensure they have the right qualifications, are fully insured and members of an accredited body. They undertake regular supervision, continued professional development and adhere to the highest ethical standards.</p>
</div>
<div class="flex items-center">
<NuxtLink class="w-full sm:w-auto btn btn-small btn-primary rounded-full"
to="/">About our Therapists</NuxtLink>
</div>
</div>
<div class="box-two flex flex-col justify-between bg-blue-light bg-no-repeat bg-bottom p-8 py-10">
<div>
<div class="flex flex-col justify-center items-center sm:grid sm:grid-cols-2 mb-6">
<h2 class="order-2 sm:order-1 mt-3 sm:mt-0 text-3xl font-bold text-center sm:text-left">Are you a therapist?</h2>
<div class="order-1 sm:order-2 flex items-center justify-end">
<img src="~/assets/images/icons/icon-chat.svg" alt="Are you a therapist?" />
</div>
</div>
<p class="text-sm leading-6 mb-6">Are you an Integrative therapist/counsellor and want to be part of a community where you can grow your business, your network and you! click the register button to find out how take a seat can help you.</p>
</div>
<div class="flex items-center">
<NuxtLink class="w-full sm:w-auto btn btn-small btn-primary rounded-full"
to="/community">Join our Community</NuxtLink>
</div>
</div>
<div class="box-three flex flex-col justify-between b bg-green bg-no-repeat bg-bottom p-8 py-10">
<div>
<div class="flex flex-col justify-center items-center sm:grid sm:grid-cols-2 mb-6">
<h2 class="order-2 sm:order-1 mt-3 sm:mt-0 text-3xl font-bold text-center sm:text-left">Business Partnerships</h2>
<div class="order-1 sm:order-2 flex items-center justify-end">
<img src="~/assets/images/icons/icon-handshake.svg" alt="Business Partnerships" />
</div>
</div>
<p class="text-sm leading-6 mb-6">Do you want a mental health strategy that drives engagement, culture, productivity and growth. Find out how working with us can help. Register interest below to find out more. </p>
</div>
<div class="flex items-center">
<NuxtLink class="w-full sm:w-auto btn btn-small btn-primary rounded-full"
to="/partnerships">We can support your workforce</NuxtLink>
</div>
</div>
</div>
<section v-if="posts.length"
class="pt-16 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 recent posts</h2>
<div class="flex items-center justify-center md:justify-end">
<NuxtLink
class="text-md font-bold text-blue-light"
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 posts"
v-bind:key="key"
:post="post" />
</div>
</section>
</div>
</template>
<script>
export default {
head () {
return {
titleTemplate: 'Home | %s',
}
},
data() {
return {
isSearchOpen: false,
isSearchActive: false,
form: {
specialisms: [],
postcode: null,
distance: 30
},
}
},
computed: {
posts() {
return this.$store.state.blog.list
},
filters() {
return this.$store.state.therapists.filters
},
},
async asyncData ({ store }) {
await store.dispatch('therapists/filters')
await store.dispatch('blog/get', {
total: 4
})
},
methods: {
search() {
this.$router.push({
path: '/therapists',
query: {
specialisms: this.form.specialisms,
postcode: this.form.postcode,
distance: this.form.distance
}
})
},
openSearch() {
this.isSearchActive = true;
setTimeout(() => {
this.isSearchOpen = true;
}, 150)
},
closeSearch() {
this.isSearchOpen = false;
setTimeout(() => {
this.isSearchActive = false;
}, 150)
}
}
}
</script>
<style scoped>
.box-one,
.box-two,
.box-three {
background-image: url('~assets/images/pageheader-bg.svg');
background-size: auto 40%;
}
.box-one {
background-position: bottom left;
}
.box-two {
background-position: bottom center;
}
.box-three {
background-position: bottom right;
}
</style>
Zerion Mini Shell 1.0