mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-10 15:35:34 +00:00
Add components
This commit is contained in:
khatabwedaa
159
components/ui/FAQ/Cards.vue
Normal file
159
components/ui/FAQ/Cards.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-12 mx-auto">
|
||||
<h1 class="text-4xl font-semibold text-gray-800 dark:text-white">Frequently asked questions</h1>
|
||||
|
||||
<div class="mt-8 space-y-8 lg:mt-12">
|
||||
<div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
|
||||
<button class="flex items-center justify-between w-full">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
|
||||
|
||||
<span class="text-gray-400 bg-gray-200 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<p class="mt-6 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
|
||||
<button class="flex items-center justify-between w-full">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
|
||||
<button class="flex items-center justify-between w-full">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
|
||||
<button class="flex items-center justify-between w-full">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
|
||||
<button class="flex items-center justify-between w-full">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Cards',
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-12 mx-auto">
|
||||
<h1 class="text-4xl font-semibold text-gray-800 dark:text-white">Frequently asked questions</h1>
|
||||
|
||||
<div class="mt-8 space-y-8 lg:mt-12">
|
||||
<div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
|
||||
<button class="flex items-center justify-between w-full">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
|
||||
|
||||
<span class="text-gray-400 bg-gray-200 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<p class="mt-6 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
|
||||
<button class="flex items-center justify-between w-full">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
|
||||
<button class="flex items-center justify-between w-full">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
|
||||
<button class="flex items-center justify-between w-full">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
|
||||
<button class="flex items-center justify-between w-full">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
163
components/ui/FAQ/Centered.vue
Normal file
163
components/ui/FAQ/Centered.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container max-w-4xl px-6 py-10 mx-auto">
|
||||
<h1 class="text-4xl font-semibold text-center text-gray-800 dark:text-white">Frequently asked questions</h1>
|
||||
|
||||
<div class="mt-12 space-y-8">
|
||||
<div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
|
||||
<button class="flex items-center justify-between w-full p-8">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
|
||||
|
||||
<span class="text-gray-400 bg-gray-200 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<hr class="border-gray-200 dark:border-gray-700">
|
||||
|
||||
<p class="p-8 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
|
||||
<button class="flex items-center justify-between w-full p-8">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
|
||||
<button class="flex items-center justify-between w-full p-8">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
|
||||
<button class="flex items-center justify-between w-full p-8">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
|
||||
<button class="flex items-center justify-between w-full p-8">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Centered',
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container max-w-4xl px-6 py-10 mx-auto">
|
||||
<h1 class="text-4xl font-semibold text-center text-gray-800 dark:text-white">Frequently asked questions</h1>
|
||||
|
||||
<div class="mt-12 space-y-8">
|
||||
<div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
|
||||
<button class="flex items-center justify-between w-full p-8">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
|
||||
|
||||
<span class="text-gray-400 bg-gray-200 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<hr class="border-gray-200 dark:border-gray-700">
|
||||
|
||||
<p class="p-8 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
|
||||
<button class="flex items-center justify-between w-full p-8">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
|
||||
<button class="flex items-center justify-between w-full p-8">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
|
||||
<button class="flex items-center justify-between w-full p-8">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
|
||||
<button class="flex items-center justify-between w-full p-8">
|
||||
<h1 class="font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
|
||||
|
||||
<span class="text-white bg-blue-500 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
163
components/ui/FAQ/Collapse.vue
Normal file
163
components/ui/FAQ/Collapse.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-10 mx-auto">
|
||||
<h1 class="text-4xl font-semibold text-gray-800 dark:text-white">FQA's</h1>
|
||||
|
||||
<hr class="my-6 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
|
||||
</button>
|
||||
|
||||
<div class="flex mt-8 md:mx-10">
|
||||
<span class="border border-blue-500"></span>
|
||||
|
||||
<p class="max-w-3xl px-4 text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, eum quae. Harum officiis reprehenderit ex quia ducimus minima id provident molestias optio nam vel, quidem iure voluptatem, repellat et ipsa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">What can i expect at my first consultation ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">What are your opening house ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">Do i need a referral ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Collapse',
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-10 mx-auto">
|
||||
<h1 class="text-4xl font-semibold text-gray-800 dark:text-white">FQA's</h1>
|
||||
|
||||
<hr class="my-6 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
|
||||
</button>
|
||||
|
||||
<div class="flex mt-8 md:mx-10">
|
||||
<span class="border border-blue-500"></span>
|
||||
|
||||
<p class="max-w-3xl px-4 text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, eum quae. Harum officiis reprehenderit ex quia ducimus minima id provident molestias optio nam vel, quidem iure voluptatem, repellat et ipsa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">What can i expect at my first consultation ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">What are your opening house ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">Do i need a referral ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
187
components/ui/FAQ/CollapseWithSideLinks.vue
Normal file
187
components/ui/FAQ/CollapseWithSideLinks.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-12 mx-auto">
|
||||
<h1 class="text-2xl font-semibold text-center text-gray-800 lg:text-4xl dark:text-white">Have any Questions?</h1>
|
||||
|
||||
<div class="mt-8 xl:mt-16 lg:flex lg:-mx-12">
|
||||
<div class="lg:mx-12">
|
||||
<h1 class="text-xl font-semibold text-gray-800 dark:text-white">Table of Content</h1>
|
||||
|
||||
<div class="mt-4 space-y-4 lg:mt-8">
|
||||
<a href="#" class="block text-blue-500 dark:text-blue-400 hover:underline">General</a>
|
||||
<a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Trust & Safety</a>
|
||||
<a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Services</a>
|
||||
<a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Billing</a>
|
||||
<a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Office Cleaning</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 mt-8 lg:mx-12 lg:mt-0">
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
|
||||
</button>
|
||||
|
||||
<div class="flex mt-8 md:mx-10">
|
||||
<span class="border border-blue-500"></span>
|
||||
|
||||
<p class="max-w-3xl px-4 text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, eum quae. Harum officiis reprehenderit ex quia ducimus minima id provident molestias optio nam vel, quidem iure voluptatem, repellat et ipsa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">What can i expect at my first consultation ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">What are your opening house ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">Do i need a referral ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Collapse With Side Links',
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-12 mx-auto">
|
||||
<h1 class="text-2xl font-semibold text-center text-gray-800 lg:text-4xl dark:text-white">Have any Questions?</h1>
|
||||
|
||||
<div class="mt-8 xl:mt-16 lg:flex lg:-mx-12">
|
||||
<div class="lg:mx-12">
|
||||
<h1 class="text-xl font-semibold text-gray-800 dark:text-white">Table of Content</h1>
|
||||
|
||||
<div class="mt-4 space-y-4 lg:mt-8">
|
||||
<a href="#" class="block text-blue-500 dark:text-blue-400 hover:underline">General</a>
|
||||
<a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Trust & Safety</a>
|
||||
<a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Services</a>
|
||||
<a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Billing</a>
|
||||
<a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Office Cleaning</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 mt-8 lg:mx-12 lg:mt-0">
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
|
||||
</button>
|
||||
|
||||
<div class="flex mt-8 md:mx-10">
|
||||
<span class="border border-blue-500"></span>
|
||||
|
||||
<p class="max-w-3xl px-4 text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, eum quae. Harum officiis reprehenderit ex quia ducimus minima id provident molestias optio nam vel, quidem iure voluptatem, repellat et ipsa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">What can i expect at my first consultation ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">What are your opening house ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">Do i need a referral ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-8 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<button class="flex items-center focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-4 text-xl text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance ?</h1>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
223
components/ui/FAQ/Grid.vue
Normal file
223
components/ui/FAQ/Grid.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-12 mx-auto">
|
||||
<h1 class="text-2xl font-semibold text-gray-800 lg:text-4xl dark:text-white">Frequently asked questions.</h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 mt-8 lg:mt-16 md:grid-cols-2 xl:grid-cols-3">
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">What is your cancellation policy?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">What are the parking and public transport options?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Grid',
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-12 mx-auto">
|
||||
<h1 class="text-2xl font-semibold text-gray-800 lg:text-4xl dark:text-white">Frequently asked questions.</h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 mt-8 lg:mt-16 md:grid-cols-2 xl:grid-cols-3">
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">What is your cancellation policy?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">What are the parking and public transport options?</h1>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user