Merge pull request #61 from merakiui/jan-2022-components
Jan 2022 components
This commit is contained in:
khatab Wedaa
GitHub
commit
2cc3666577
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div slot="component">
|
||||
<div class="bg-white dark:bg-gray-900">
|
||||
<div class="flex justify-center h-screen">
|
||||
<div class="hidden bg-cover lg:block lg:w-2/3" style="background-image: url(https://images.unsplash.com/photo-1616763355603-9755a640a287?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80)">
|
||||
<div class="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
|
||||
<div>
|
||||
<h2 class="text-4xl font-bold text-white">Brand</h2>
|
||||
|
||||
<p class="max-w-xl mt-3 text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In autem ipsa, nulla laboriosam dolores, repellendus perferendis libero suscipit nam temporibus molestiae</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
|
||||
<div class="flex-1">
|
||||
<div class="text-center">
|
||||
<h2 class="text-4xl font-bold text-center text-gray-700 dark:text-white">Brand</h2>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-300">Sign in to access your account</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<form>
|
||||
<div>
|
||||
<label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Email Address</label>
|
||||
<input type="email" name="email" id="email" placeholder="example@example.com" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="flex justify-between mb-2">
|
||||
<label for="password" class="text-sm text-gray-600 dark:text-gray-200">Password</label>
|
||||
<a href="#" class="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<input type="password" name="password" id="password" placeholder="Your Password" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50">
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-sm text-center text-gray-400">Don't have an account yet? <a href="#" class="text-blue-500 focus:outline-none focus:underline hover:underline">Sign up</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Fill Page With Image',
|
||||
code: `
|
||||
<div class="bg-white dark:bg-gray-900">
|
||||
<div class="flex justify-center h-screen">
|
||||
<div class="hidden bg-cover lg:block lg:w-2/3" style="background-image: url(https://images.unsplash.com/photo-1616763355603-9755a640a287?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80)">
|
||||
<div class="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
|
||||
<div>
|
||||
<h2 class="text-4xl font-bold text-white">Brand</h2>
|
||||
|
||||
<p class="max-w-xl mt-3 text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In autem ipsa, nulla laboriosam dolores, repellendus perferendis libero suscipit nam temporibus molestiae</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
|
||||
<div class="flex-1">
|
||||
<div class="text-center">
|
||||
<h2 class="text-4xl font-bold text-center text-gray-700 dark:text-white">Brand</h2>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-300">Sign in to access your account</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<form>
|
||||
<div>
|
||||
<label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Email Address</label>
|
||||
<input type="email" name="email" id="email" placeholder="example@example.com" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="flex justify-between mb-2">
|
||||
<label for="password" class="text-sm text-gray-600 dark:text-gray-200">Password</label>
|
||||
<a href="#" class="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<input type="password" name="password" id="password" placeholder="Your Password" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50">
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-sm text-center text-gray-400">Don't have an account yet? <a href="#" class="text-blue-500 focus:outline-none focus:underline hover:underline">Sign up</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container flex flex-col items-center px-4 py-12 mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-600 dark:text-white">
|
||||
Try something really different right now.
|
||||
</h2>
|
||||
|
||||
<p class="block max-w-2xl mt-4 text-xl text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto recusandae tenetur iste quaerat voluptatibus quibusdam nam repudiandae </p>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="inline-flex w-full overflow-hidden rounded-lg shadow sm:w-auto sm:mx-3">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white bg-gradient-to-r from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-600 sm:w-auto">
|
||||
<svg class="w-6 h-6 mx-2 fill-current" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105
|
||||
C512,47.103,464.897,0,407,0z M482,407c0,41.355-33.645,75-75,75H105c-41.355,0-75-33.645-75-75V105c0-41.355,33.645-75,75-75h302
|
||||
c41.355,0,75,33.645,75,75V407z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M305.646,123.531c-1.729-6.45-5.865-11.842-11.648-15.18c-11.936-6.892-27.256-2.789-34.15,9.151L256,124.166
|
||||
l-3.848-6.665c-6.893-11.937-22.212-16.042-34.15-9.151h-0.001c-11.938,6.893-16.042,22.212-9.15,34.151l18.281,31.664
|
||||
L159.678,291H110.5c-13.785,0-25,11.215-25,25c0,13.785,11.215,25,25,25h189.86l-28.868-50h-54.079l85.735-148.498
|
||||
C306.487,136.719,307.375,129.981,305.646,123.531z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M401.5,291h-49.178l-55.907-96.834l-28.867,50l86.804,150.348c3.339,5.784,8.729,9.921,15.181,11.65
|
||||
c2.154,0.577,4.339,0.863,6.511,0.863c4.332,0,8.608-1.136,12.461-3.361c11.938-6.893,16.042-22.213,9.149-34.15L381.189,341
|
||||
H401.5c13.785,0,25-11.215,25-25C426.5,302.215,415.285,291,401.5,291z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M119.264,361l-4.917,8.516c-6.892,11.938-2.787,27.258,9.151,34.15c3.927,2.267,8.219,3.345,12.458,3.344
|
||||
c8.646,0,17.067-4.484,21.693-12.495L176.999,361H119.264z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="mx-2">
|
||||
Get it on the App Store
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex w-full mt-4 overflow-hidden rounded-lg shadow sm:w-auto sm:mx-3 sm:mt-0">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white transition-colors duration-150 transform sm:w-auto bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-600 hover:to-blue-600">
|
||||
<svg class="w-6 h-6 mx-2 fill-current" viewBox="-28 0 512 512.00075" xmlns="http://www.w3.org/2000/svg"><path d="m432.320312 215.121094-361.515624-208.722656c-14.777344-8.53125-32.421876-8.53125-47.203126 0-.121093.070312-.230468.148437-.351562.21875-.210938.125-.421875.253906-.628906.390624-14.175782 8.636719-22.621094 23.59375-22.621094 40.269532v417.445312c0 17.066406 8.824219 32.347656 23.601562 40.878906 7.390626 4.265626 15.496094 6.398438 23.601563 6.398438s16.214844-2.132812 23.601563-6.398438l361.519531-208.722656c14.777343-8.53125 23.601562-23.8125 23.601562-40.878906s-8.824219-32.347656-23.605469-40.878906zm-401.941406 253.152344c-.21875-1.097657-.351562-2.273438-.351562-3.550782v-417.445312c0-2.246094.378906-4.203125.984375-5.90625l204.324219 213.121094zm43.824219-425.242188 234.21875 135.226562-52.285156 54.539063zm-6.480469 429.679688 188.410156-196.527344 54.152344 56.484375zm349.585938-201.835938-80.25 46.332031-60.125-62.714843 58.261718-60.773438 82.113282 47.40625c7.75 4.476562 8.589844 11.894531 8.589844 14.875s-.839844 10.398438-8.589844 14.875zm0 0"></path></svg>
|
||||
<span class="mx-2">
|
||||
Get it on Google Play
|
||||
</span>
|
||||
</a>
|
||||
</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 flex flex-col items-center px-4 py-12 mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-600 dark:text-white">
|
||||
Try something really different right now.
|
||||
</h2>
|
||||
|
||||
<p class="block max-w-2xl mt-4 text-xl text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto recusandae tenetur iste quaerat voluptatibus quibusdam nam repudiandae </p>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="inline-flex w-full overflow-hidden rounded-lg shadow sm:w-auto sm:mx-3">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white bg-gradient-to-r from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-600 sm:w-auto">
|
||||
<svg class="w-6 h-6 mx-2 fill-current" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105
|
||||
C512,47.103,464.897,0,407,0z M482,407c0,41.355-33.645,75-75,75H105c-41.355,0-75-33.645-75-75V105c0-41.355,33.645-75,75-75h302
|
||||
c41.355,0,75,33.645,75,75V407z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M305.646,123.531c-1.729-6.45-5.865-11.842-11.648-15.18c-11.936-6.892-27.256-2.789-34.15,9.151L256,124.166
|
||||
l-3.848-6.665c-6.893-11.937-22.212-16.042-34.15-9.151h-0.001c-11.938,6.893-16.042,22.212-9.15,34.151l18.281,31.664
|
||||
L159.678,291H110.5c-13.785,0-25,11.215-25,25c0,13.785,11.215,25,25,25h189.86l-28.868-50h-54.079l85.735-148.498
|
||||
C306.487,136.719,307.375,129.981,305.646,123.531z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M401.5,291h-49.178l-55.907-96.834l-28.867,50l86.804,150.348c3.339,5.784,8.729,9.921,15.181,11.65
|
||||
c2.154,0.577,4.339,0.863,6.511,0.863c4.332,0,8.608-1.136,12.461-3.361c11.938-6.893,16.042-22.213,9.149-34.15L381.189,341
|
||||
H401.5c13.785,0,25-11.215,25-25C426.5,302.215,415.285,291,401.5,291z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M119.264,361l-4.917,8.516c-6.892,11.938-2.787,27.258,9.151,34.15c3.927,2.267,8.219,3.345,12.458,3.344
|
||||
c8.646,0,17.067-4.484,21.693-12.495L176.999,361H119.264z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="mx-2">
|
||||
Get it on the App Store
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex w-full mt-4 overflow-hidden rounded-lg shadow sm:w-auto sm:mx-3 sm:mt-0">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white transition-colors duration-150 transform sm:w-auto bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-600 hover:to-blue-600">
|
||||
<svg class="w-6 h-6 mx-2 fill-current" viewBox="-28 0 512 512.00075" xmlns="http://www.w3.org/2000/svg"><path d="m432.320312 215.121094-361.515624-208.722656c-14.777344-8.53125-32.421876-8.53125-47.203126 0-.121093.070312-.230468.148437-.351562.21875-.210938.125-.421875.253906-.628906.390624-14.175782 8.636719-22.621094 23.59375-22.621094 40.269532v417.445312c0 17.066406 8.824219 32.347656 23.601562 40.878906 7.390626 4.265626 15.496094 6.398438 23.601563 6.398438s16.214844-2.132812 23.601563-6.398438l361.519531-208.722656c14.777343-8.53125 23.601562-23.8125 23.601562-40.878906s-8.824219-32.347656-23.605469-40.878906zm-401.941406 253.152344c-.21875-1.097657-.351562-2.273438-.351562-3.550782v-417.445312c0-2.246094.378906-4.203125.984375-5.90625l204.324219 213.121094zm43.824219-425.242188 234.21875 135.226562-52.285156 54.539063zm-6.480469 429.679688 188.410156-196.527344 54.152344 56.484375zm349.585938-201.835938-80.25 46.332031-60.125-62.714843 58.261718-60.773438 82.113282 47.40625c7.75 4.476562 8.589844 11.894531 8.589844 14.875s-.839844 10.398438-8.589844 14.875zm0 0"></path></svg>
|
||||
<span class="mx-2">
|
||||
Get it on Google Play
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container grid grid-cols-1 gap-8 px-4 py-12 mx-auto lg:grid-cols-2">
|
||||
<div class="flex flex-col items-center max-w-lg mx-auto text-center">
|
||||
<h2 class="text-3xl font-semibold tracking-tight text-gray-800 dark:text-white">
|
||||
Web development
|
||||
</h2>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ex cupiditate corrupti aliquam eum vel consequuntur hic culpa unde natus officia enim est impedit consequatur aut, voluptatem minima repellat non!</p>
|
||||
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 mt-6 text-white bg-blue-600 rounded-lg sm:w-auto hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Start now
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center max-w-lg mx-auto text-center">
|
||||
<h2 class="text-3xl font-semibold tracking-tight text-gray-800 dark:text-white">
|
||||
App development
|
||||
</h2>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ex cupiditate corrupti aliquam eum vel consequuntur hic culpa unde natus officia enim est impedit consequatur aut, voluptatem minima repellat non!</p>
|
||||
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 mt-6 text-gray-700 transition-colors duration-150 transform bg-white border border-gray-200 rounded-lg dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100 dark:text-white sm:w-auto dark:hover:bg-gray-800 dark:ring-gray-700 focus:ring focus:ring-gray-200 focus:ring-opacity-80">
|
||||
Start now
|
||||
</a>
|
||||
</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 grid grid-cols-1 gap-8 px-4 py-12 mx-auto lg:grid-cols-2">
|
||||
<div class="flex flex-col items-center max-w-lg mx-auto text-center">
|
||||
<h2 class="text-3xl font-semibold tracking-tight text-gray-800 dark:text-white">
|
||||
Web development
|
||||
</h2>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ex cupiditate corrupti aliquam eum vel consequuntur hic culpa unde natus officia enim est impedit consequatur aut, voluptatem minima repellat non!</p>
|
||||
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 mt-6 text-white bg-blue-600 rounded-lg sm:w-auto hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Start now
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center max-w-lg mx-auto text-center">
|
||||
<h2 class="text-3xl font-semibold tracking-tight text-gray-800 dark:text-white">
|
||||
App development
|
||||
</h2>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ex cupiditate corrupti aliquam eum vel consequuntur hic culpa unde natus officia enim est impedit consequatur aut, voluptatem minima repellat non!</p>
|
||||
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 mt-6 text-gray-700 transition-colors duration-150 transform bg-white border border-gray-200 rounded-lg dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100 dark:text-white sm:w-auto dark:hover:bg-gray-800 dark:ring-gray-700 focus:ring focus:ring-gray-200 focus:ring-opacity-80">
|
||||
Start now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container flex flex-col items-center px-4 py-12 mx-auto text-center">
|
||||
<h2 class="text-3xl font-semibold tracking-tight text-gray-700 sm:text-4xl dark:text-white">
|
||||
Join us and get the update <br> from anywhere
|
||||
</h2>
|
||||
|
||||
<div class="mt-6 sm:-mx-2">
|
||||
<div class="inline-flex w-full sm:w-auto sm:mx-2">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Buy Blox Now
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex w-full mt-4 sm:w-auto sm:mx-2 sm:mt-0">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 text-gray-700 transition-colors duration-150 transform bg-white border border-gray-200 rounded-lg dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100 dark:text-white sm:w-auto dark:hover:bg-gray-800 dark:ring-gray-700 focus:ring focus:ring-gray-200 focus:ring-opacity-80">
|
||||
Start a Journey
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple',
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container flex flex-col items-center px-4 py-12 mx-auto text-center">
|
||||
<h2 class="text-3xl font-semibold tracking-tight text-gray-700 sm:text-4xl dark:text-white">
|
||||
Join us and get the update <br> from anywhere
|
||||
</h2>
|
||||
|
||||
<div class="mt-6 sm:-mx-2">
|
||||
<div class="inline-flex w-full sm:w-auto sm:mx-2">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Buy Blox Now
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex w-full mt-4 sm:w-auto sm:mx-2 sm:mt-0">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 text-gray-700 transition-colors duration-150 transform bg-white border border-gray-200 rounded-lg dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100 dark:text-white sm:w-auto dark:hover:bg-gray-800 dark:ring-gray-700 focus:ring focus:ring-gray-200 focus:ring-opacity-80">
|
||||
Start a Journey
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<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-4 py-16 mx-auto lg:flex lg:items-center lg:justify-between">
|
||||
<h2 class="text-3xl font-semibold tracking-tight text-gray-800 xl:text-4xl dark:text-white">
|
||||
Join us and get the update from anywhere
|
||||
</h2>
|
||||
|
||||
<div class="mt-8 lg:mt-0">
|
||||
<div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:-mx-2">
|
||||
<input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md sm:mx-2 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" placeholder="Email Address">
|
||||
|
||||
<button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-700 rounded-md focus:ring focus:ring-blue-300 focus:ring-opacity-80 fo sm:mx-2 hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 text-sm text-gray-500 dark:text-gray-300">Attention! Offer expires in 30 days. Make sure not to miss this opportunity</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Form',
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-4 py-16 mx-auto lg:flex lg:items-center lg:justify-between">
|
||||
<h2 class="text-3xl font-semibold tracking-tight text-gray-800 xl:text-4xl dark:text-white">
|
||||
Join us and get the update from anywhere
|
||||
</h2>
|
||||
|
||||
<div class="mt-8 lg:mt-0">
|
||||
<div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:-mx-2">
|
||||
<input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md sm:mx-2 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" placeholder="Email Address">
|
||||
|
||||
<button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-700 rounded-md focus:ring focus:ring-blue-300 focus:ring-opacity-80 fo sm:mx-2 hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 text-sm text-gray-500 dark:text-gray-300">Attention! Offer expires in 30 days. Make sure not to miss this opportunity</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container flex flex-col items-center px-4 py-12 mx-auto xl:flex-row">
|
||||
<div class="flex justify-center xl:w-1/2">
|
||||
<img class="h-80 w-80 sm:w-[28rem] sm:h-[28rem] flex-shrink-0 object-cover rounded-full" src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" alt="">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center mt-6 xl:items-start xl:w-1/2 xl:mt-0">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-800 xl:text-4xl dark:text-white">
|
||||
Download our free mobile app
|
||||
</h2>
|
||||
|
||||
<p class="block max-w-2xl mt-4 text-xl text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto recusandae tenetur iste quaerat voluptatibus quibusdam nam repudiandae </p>
|
||||
|
||||
<div class="mt-6 sm:-mx-2">
|
||||
<div class="inline-flex w-full overflow-hidden rounded-lg shadow sm:w-auto sm:mx-2">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white bg-gradient-to-r from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-600 sm:w-auto">
|
||||
<svg class="w-6 h-6 mx-2 fill-current" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105
|
||||
C512,47.103,464.897,0,407,0z M482,407c0,41.355-33.645,75-75,75H105c-41.355,0-75-33.645-75-75V105c0-41.355,33.645-75,75-75h302
|
||||
c41.355,0,75,33.645,75,75V407z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M305.646,123.531c-1.729-6.45-5.865-11.842-11.648-15.18c-11.936-6.892-27.256-2.789-34.15,9.151L256,124.166
|
||||
l-3.848-6.665c-6.893-11.937-22.212-16.042-34.15-9.151h-0.001c-11.938,6.893-16.042,22.212-9.15,34.151l18.281,31.664
|
||||
L159.678,291H110.5c-13.785,0-25,11.215-25,25c0,13.785,11.215,25,25,25h189.86l-28.868-50h-54.079l85.735-148.498
|
||||
C306.487,136.719,307.375,129.981,305.646,123.531z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M401.5,291h-49.178l-55.907-96.834l-28.867,50l86.804,150.348c3.339,5.784,8.729,9.921,15.181,11.65
|
||||
c2.154,0.577,4.339,0.863,6.511,0.863c4.332,0,8.608-1.136,12.461-3.361c11.938-6.893,16.042-22.213,9.149-34.15L381.189,341
|
||||
H401.5c13.785,0,25-11.215,25-25C426.5,302.215,415.285,291,401.5,291z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M119.264,361l-4.917,8.516c-6.892,11.938-2.787,27.258,9.151,34.15c3.927,2.267,8.219,3.345,12.458,3.344
|
||||
c8.646,0,17.067-4.484,21.693-12.495L176.999,361H119.264z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="mx-2">
|
||||
Get it on the App Store
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex w-full mt-4 overflow-hidden rounded-lg shadow sm:w-auto sm:mx-2 sm:mt-0">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white transition-colors duration-150 transform sm:w-auto bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-600 hover:to-blue-600">
|
||||
<svg class="w-6 h-6 mx-2 fill-current" viewBox="-28 0 512 512.00075" xmlns="http://www.w3.org/2000/svg"><path d="m432.320312 215.121094-361.515624-208.722656c-14.777344-8.53125-32.421876-8.53125-47.203126 0-.121093.070312-.230468.148437-.351562.21875-.210938.125-.421875.253906-.628906.390624-14.175782 8.636719-22.621094 23.59375-22.621094 40.269532v417.445312c0 17.066406 8.824219 32.347656 23.601562 40.878906 7.390626 4.265626 15.496094 6.398438 23.601563 6.398438s16.214844-2.132812 23.601563-6.398438l361.519531-208.722656c14.777343-8.53125 23.601562-23.8125 23.601562-40.878906s-8.824219-32.347656-23.605469-40.878906zm-401.941406 253.152344c-.21875-1.097657-.351562-2.273438-.351562-3.550782v-417.445312c0-2.246094.378906-4.203125.984375-5.90625l204.324219 213.121094zm43.824219-425.242188 234.21875 135.226562-52.285156 54.539063zm-6.480469 429.679688 188.410156-196.527344 54.152344 56.484375zm349.585938-201.835938-80.25 46.332031-60.125-62.714843 58.261718-60.773438 82.113282 47.40625c7.75 4.476562 8.589844 11.894531 8.589844 14.875s-.839844 10.398438-8.589844 14.875zm0 0"></path></svg>
|
||||
<span class="mx-2">
|
||||
Get it on Google Play
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Image',
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container flex flex-col items-center px-4 py-12 mx-auto xl:flex-row">
|
||||
<div class="flex justify-center xl:w-1/2">
|
||||
<img class="h-80 w-80 sm:w-[28rem] sm:h-[28rem] flex-shrink-0 object-cover rounded-full" src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" alt="">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center mt-6 xl:items-start xl:w-1/2 xl:mt-0">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-800 xl:text-4xl dark:text-white">
|
||||
Download our free mobile app
|
||||
</h2>
|
||||
|
||||
<p class="block max-w-2xl mt-4 text-xl text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto recusandae tenetur iste quaerat voluptatibus quibusdam nam repudiandae </p>
|
||||
|
||||
<div class="mt-6 sm:-mx-2">
|
||||
<div class="inline-flex w-full overflow-hidden rounded-lg shadow sm:w-auto sm:mx-2">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white bg-gradient-to-r from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-600 sm:w-auto">
|
||||
<svg class="w-6 h-6 mx-2 fill-current" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105
|
||||
C512,47.103,464.897,0,407,0z M482,407c0,41.355-33.645,75-75,75H105c-41.355,0-75-33.645-75-75V105c0-41.355,33.645-75,75-75h302
|
||||
c41.355,0,75,33.645,75,75V407z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M305.646,123.531c-1.729-6.45-5.865-11.842-11.648-15.18c-11.936-6.892-27.256-2.789-34.15,9.151L256,124.166
|
||||
l-3.848-6.665c-6.893-11.937-22.212-16.042-34.15-9.151h-0.001c-11.938,6.893-16.042,22.212-9.15,34.151l18.281,31.664
|
||||
L159.678,291H110.5c-13.785,0-25,11.215-25,25c0,13.785,11.215,25,25,25h189.86l-28.868-50h-54.079l85.735-148.498
|
||||
C306.487,136.719,307.375,129.981,305.646,123.531z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M401.5,291h-49.178l-55.907-96.834l-28.867,50l86.804,150.348c3.339,5.784,8.729,9.921,15.181,11.65
|
||||
c2.154,0.577,4.339,0.863,6.511,0.863c4.332,0,8.608-1.136,12.461-3.361c11.938-6.893,16.042-22.213,9.149-34.15L381.189,341
|
||||
H401.5c13.785,0,25-11.215,25-25C426.5,302.215,415.285,291,401.5,291z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M119.264,361l-4.917,8.516c-6.892,11.938-2.787,27.258,9.151,34.15c3.927,2.267,8.219,3.345,12.458,3.344
|
||||
c8.646,0,17.067-4.484,21.693-12.495L176.999,361H119.264z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="mx-2">
|
||||
Get it on the App Store
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex w-full mt-4 overflow-hidden rounded-lg shadow sm:w-auto sm:mx-2 sm:mt-0">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white transition-colors duration-150 transform sm:w-auto bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-600 hover:to-blue-600">
|
||||
<svg class="w-6 h-6 mx-2 fill-current" viewBox="-28 0 512 512.00075" xmlns="http://www.w3.org/2000/svg"><path d="m432.320312 215.121094-361.515624-208.722656c-14.777344-8.53125-32.421876-8.53125-47.203126 0-.121093.070312-.230468.148437-.351562.21875-.210938.125-.421875.253906-.628906.390624-14.175782 8.636719-22.621094 23.59375-22.621094 40.269532v417.445312c0 17.066406 8.824219 32.347656 23.601562 40.878906 7.390626 4.265626 15.496094 6.398438 23.601563 6.398438s16.214844-2.132812 23.601563-6.398438l361.519531-208.722656c14.777343-8.53125 23.601562-23.8125 23.601562-40.878906s-8.824219-32.347656-23.605469-40.878906zm-401.941406 253.152344c-.21875-1.097657-.351562-2.273438-.351562-3.550782v-417.445312c0-2.246094.378906-4.203125.984375-5.90625l204.324219 213.121094zm43.824219-425.242188 234.21875 135.226562-52.285156 54.539063zm-6.480469 429.679688 188.410156-196.527344 54.152344 56.484375zm349.585938-201.835938-80.25 46.332031-60.125-62.714843 58.261718-60.773438 82.113282 47.40625c7.75 4.476562 8.589844 11.894531 8.589844 14.875s-.839844 10.398438-8.589844 14.875zm0 0"></path></svg>
|
||||
<span class="mx-2">
|
||||
Get it on Google Play
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -16,11 +16,12 @@ export default [
|
|||
},
|
||||
{
|
||||
name: "Authentication",
|
||||
new: false,
|
||||
new: true,
|
||||
components: [
|
||||
{ name: "SimpleLogin" },
|
||||
{ name: "LoginWithSocialMediaLinks" },
|
||||
{ name: "LoginWithSideImage" },
|
||||
{ name: "FullPageWithImage" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -61,14 +62,25 @@ export default [
|
|||
],
|
||||
},
|
||||
{
|
||||
name: "Forms",
|
||||
new: false,
|
||||
name: "CTA",
|
||||
new: true,
|
||||
components: [
|
||||
{ name: "Simple" },
|
||||
{ name: "Search" },
|
||||
{ name: "Contact" },
|
||||
{ name: "SimpleNewsletter" },
|
||||
{ name: "Newsletter" },
|
||||
{ name: "Centered" },
|
||||
{ name: "Grid" },
|
||||
{ name: "WithForm" },
|
||||
{ name: "WithImage" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
new: true,
|
||||
components: [
|
||||
{ name: "Centered" },
|
||||
{ name: "Cards" },
|
||||
{ name: "Grid" },
|
||||
{ name: "Collapse" },
|
||||
{ name: "CollapseWithSideLinks" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -84,6 +96,17 @@ export default [
|
|||
{ name: "TrustedBy" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Forms",
|
||||
new: false,
|
||||
components: [
|
||||
{ name: "Simple" },
|
||||
{ name: "Search" },
|
||||
{ name: "Contact" },
|
||||
{ name: "SimpleNewsletter" },
|
||||
{ name: "Newsletter" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Dropdowns",
|
||||
new: false,
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@ import AlertsErrorFullWidth from "~/components/ui/Alerts/ErrorFullWidth";
|
|||
import AuthenticationSimpleLogin from "~/components/ui/Authentication/SimpleLogin";
|
||||
import AuthenticationLoginWithSocialMediaLinks from "~/components/ui/Authentication/LoginWithSocialMediaLinks";
|
||||
import AuthenticationLoginWithSideImage from "~/components/ui/Authentication/LoginWithSideImage";
|
||||
import AuthenticationFullPageWithImage from "~/components/ui/Authentication/FullPageWithImage";
|
||||
// Breadcrumbs
|
||||
import BreadcrumbsSimple from "~/components/ui/Breadcrumbs/Simple";
|
||||
import BreadcrumbsWithArrow from "~/components/ui/Breadcrumbs/WithArrow";
|
||||
|
|
@ -127,6 +128,12 @@ import CardsSimpleProduct from "~/components/ui/Cards/SimpleProduct";
|
|||
import CardsTestimonial from "~/components/ui/Cards/Testimonial";
|
||||
import CardsUser from "~/components/ui/Cards/User";
|
||||
import CardsUserWithDetails from "~/components/ui/Cards/UserWithDetails";
|
||||
// CTA
|
||||
import CTACentered from "~/components/ui/CTA/Centered";
|
||||
import CTAGrid from "~/components/ui/CTA/Grid";
|
||||
import CTASimple from "~/components/ui/CTA/Simple";
|
||||
import CTAWithForm from "~/components/ui/CTA/WithForm";
|
||||
import CTAWithImage from "~/components/ui/CTA/WithImage";
|
||||
// Dropdowns
|
||||
import DropdownsSimple from "~/components/ui/Dropdowns/Simple";
|
||||
import DropdownsMultiLevel from "~/components/ui/Dropdowns/MultiLevel";
|
||||
|
|
@ -134,6 +141,12 @@ import DropdownsMultiLevelWithIcons from "~/components/ui/Dropdowns/MultiLevelWi
|
|||
import DropdownsUserInfo from "~/components/ui/Dropdowns/UserInfo";
|
||||
import DropdownsUserInfoWithIcons from "~/components/ui/Dropdowns/UserInfoWithIcons";
|
||||
import DropdownsNotification from "~/components/ui/Dropdowns/Notification";
|
||||
// FAQ
|
||||
import FAQCards from "~/components/ui/FAQ/Cards";
|
||||
import FAQCentered from "~/components/ui/FAQ/Centered";
|
||||
import FAQCollapse from "~/components/ui/FAQ/Collapse";
|
||||
import FAQCollapseWithSideLinks from "~/components/ui/FAQ/CollapseWithSideLinks";
|
||||
import FAQGrid from "~/components/ui/FAQ/Grid";
|
||||
// Forms
|
||||
import FormsNewsletter from "~/components/ui/Forms/Newsletter";
|
||||
import FormsSimpleNewsletter from "~/components/ui/Forms/SimpleNewsletter";
|
||||
|
|
@ -225,6 +238,7 @@ export default {
|
|||
AuthenticationSimpleLogin,
|
||||
AuthenticationLoginWithSocialMediaLinks,
|
||||
AuthenticationLoginWithSideImage,
|
||||
AuthenticationFullPageWithImage,
|
||||
BreadcrumbsSimple,
|
||||
BreadcrumbsWithArrow,
|
||||
BreadcrumbsWithIcons,
|
||||
|
|
@ -244,12 +258,22 @@ export default {
|
|||
CardsTestimonial,
|
||||
CardsUser,
|
||||
CardsUserWithDetails,
|
||||
CTACentered,
|
||||
CTAGrid,
|
||||
CTASimple,
|
||||
CTAWithForm,
|
||||
CTAWithImage,
|
||||
DropdownsSimple,
|
||||
DropdownsMultiLevel,
|
||||
DropdownsMultiLevelWithIcons,
|
||||
DropdownsUserInfo,
|
||||
DropdownsUserInfoWithIcons,
|
||||
DropdownsNotification,
|
||||
FAQCards,
|
||||
FAQCentered,
|
||||
FAQCollapse,
|
||||
FAQCollapseWithSideLinks,
|
||||
FAQGrid,
|
||||
FormsNewsletter,
|
||||
FormsSimpleNewsletter,
|
||||
FormsSimple,
|
||||
|
|
|
|||
Loading…
Reference in New Issue