Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-09 15:05:34 +00:00
Code Issues Projects Releases Wiki Activity

Update simple pricing component

Browse Source
This commit is contained in:
khatabwedaa
2021-05-29 21:43:17 +02:00
parent f7f2ef5b0a
commit 90e524b020
1 changed files with 131 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

379
components/ui/Pricing/Simple.vue
View File

@@ -3,59 +3,16 @@
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<div class="bg-white dark:bg-gray-800"> <div class="bg-white dark:bg-gray-800">
<div class="container px-6 py-8 mx-auto"> <div class="container px-6 py-8 mx-auto">
<div <div class="flex flex-col items-center justify-center space-y-8 lg:-mx-4 lg:flex-row lg:items-stretch lg:space-y-0">
class=" <div class="flex flex-col w-full max-w-sm p-8 space-y-8 text-center bg-white border-2 border-gray-200 rounded-lg lg:mx-4 dark:bg-gray-800 dark:border-gray-700">
flex flex-col
items-center
justify-center
space-y-8
lg:flex-row
lg:items-stretch
lg:space-x-8 lg:space-y-0
"
>
<div
class="
flex flex-col
w-full
max-w-sm
text-center
p-8
space-y-8
bg-white
dark:bg-gray-800
border-2 border-gray-200
dark:border-gray-700
"
>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<h2 <h2 class="inline-flex items-center justify-center px-2 font-semibold tracking-tight text-blue-400 uppercase rounded-lg bg-gray-50 dark:bg-gray-700">
class="
inline-flex
items-center
justify-center
uppercase
bg-gray-50
dark:bg-gray-700
px-2
font-semibold
tracking-tight
text-blue-400
"
>
Casual Casual
</h2> </h2>
</div> </div>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span <span
class=" class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
text-gray-800
dark:text-gray-100
text-4xl
pt-2
uppercase
font-bold
"
> >
Free Free
</span> </span>
@@ -73,66 +30,23 @@
</ul> </ul>
<button <button
class=" class="inline-flex items-center justify-center px-4 py-2 font-semibold text-white uppercase transition-colors bg-blue-500 rounded-lg hover:bg-blue-700 focus:outline-none"
inline-flex
items-center
justify-center
uppercase
bg-blue-500
py-2
px-4
text-white
transition-colors
hover:bg-blue-700
font-semibold
focus:outline-none
"
> >
Start free Start free
</button> </button>
</div> </div>
<div
class=" <div class="flex flex-col w-full max-w-sm p-8 space-y-8 text-center bg-white border-2 border-gray-200 rounded-lg lg:mx-4 dark:bg-gray-800 dark:border-gray-700">
flex flex-col
w-full
max-w-sm
text-center
p-8
space-y-8
bg-white
dark:bg-gray-800
border-2 border-gray-200
dark:border-gray-700
"
>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<h2 <h2
class=" class="inline-flex items-center justify-center px-2 font-semibold tracking-tight text-blue-400 uppercase rounded-lg bg-gray-50 dark:bg-gray-700"
inline-flex
items-center
justify-center
uppercase
bg-gray-50
dark:bg-gray-700
px-2
font-semibold
tracking-tight
text-blue-400
"
> >
Profesional Profesional
</h2> </h2>
</div> </div>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span <span
class=" class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
text-gray-800
dark:text-gray-100
text-4xl
pt-2
uppercase
font-bold
"
> >
$24.90 $24.90
</span> </span>
@@ -156,66 +70,23 @@
</ul> </ul>
<button <button
class=" class="inline-flex items-center justify-center px-4 py-2 font-semibold text-white uppercase transition-colors bg-blue-500 rounded-lg hover:bg-blue-700 focus:outline-none"
inline-flex
items-center
justify-center
uppercase
bg-blue-500
py-2
px-4
text-white
transition-colors
hover:bg-blue-700
font-semibold
focus:outline-none
"
> >
Start free trial Start free trial
</button> </button>
</div> </div>
<div
class=" <div class="flex flex-col w-full max-w-sm p-8 space-y-8 text-center bg-white border-2 border-gray-200 rounded-lg lg:mx-4 dark:bg-gray-800 dark:border-gray-700">
flex flex-col
w-full
max-w-sm
text-center
p-8
space-y-8
bg-white
dark:bg-gray-800
border-2 border-gray-200
dark:border-gray-700
"
>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<h2 <h2
class=" class="inline-flex items-center justify-center px-2 font-semibold tracking-tight text-blue-400 uppercase rounded-lg bg-gray-50 dark:bg-gray-700"
inline-flex
items-center
justify-center
uppercase
bg-gray-50
dark:bg-gray-700
px-2
font-semibold
tracking-tight
text-blue-400
"
> >
Expert Expert
</h2> </h2>
</div> </div>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span <span
class=" class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
text-gray-800
dark:text-gray-100
text-4xl
pt-2
uppercase
font-bold
"
> >
$49.90 $49.90
</span> </span>
@@ -242,20 +113,7 @@
</ul> </ul>
<button <button
class=" class="inline-flex items-center justify-center px-4 py-2 font-semibold text-white uppercase transition-colors bg-blue-500 rounded-lg hover:bg-blue-700 focus:outline-none"
inline-flex
items-center
justify-center
uppercase
bg-blue-500
py-2
px-4
text-white
transition-colors
hover:bg-blue-700
font-semibold
focus:outline-none
"
> >
Start free trial Start free trial
</button> </button>
@@ -273,101 +131,126 @@ export default {
return { return {
name: "Simple", name: "Simple",
code: ` code: `
<div class="bg-white dark:bg-gray-800"> <div class="bg-white dark:bg-gray-800">
<div class="container px-6 py-8 mx-auto"> <div class="container px-6 py-8 mx-auto">
<div <div class="flex flex-col items-center justify-center space-y-8 lg:-mx-4 lg:flex-row lg:items-stretch lg:space-y-0">
class="flex flex-col items-center justify-center space-y-8 lg:flex-row lg:items-stretch lg:space-x-8 lg:space-y-0" <div class="flex flex-col w-full max-w-sm p-8 space-y-8 text-center bg-white border-2 border-gray-200 rounded-lg lg:mx-4 dark:bg-gray-800 dark:border-gray-700">
> <div class="flex-shrink-0">
<div <h2 class="inline-flex items-center justify-center px-2 font-semibold tracking-tight text-blue-400 uppercase rounded-lg bg-gray-50 dark:bg-gray-700">
class="flex flex-col w-full max-w-sm text-center p-8 space-y-8 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700" Casual
> </h2>
<div class="flex-shrink-0"> </div>
<h2 <div class="flex-shrink-0">
class="inline-flex items-center justify-center uppercase bg-gray-50 dark:bg-gray-700 px-2 font-semibold tracking-tight text-blue-400" <span
> class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
Casual >
</h2> Free
</div> </span>
<div class="flex-shrink-0"> </div>
<span class="text-gray-800 dark:text-gray-100 text-4xl pt-2 uppercase font-bold"> <ul class="flex-1 space-y-4">
Free <li class="text-gray-500 dark:text-gray-400">
</span> Up to 5 projects
</div> </li>
<ul class="flex-1 space-y-4"> <li class="text-gray-500 dark:text-gray-400">
<li class="text-gray-500 dark:text-gray-400">Up to 5 projects</li> Up to 10 collaborators
<li class="text-gray-500 dark:text-gray-400">Up to 10 collaborators</li> </li>
<li class="text-gray-500 dark:text-gray-400">2Gb of storage</li> <li class="text-gray-500 dark:text-gray-400">
</ul> 2Gb of storage
</li>
</ul>
<button <button
class="inline-flex items-center justify-center uppercase bg-blue-500 py-2 px-4 text-white transition-colors hover:bg-blue-700 font-semibold focus:outline-none" class="inline-flex items-center justify-center px-4 py-2 font-semibold text-white uppercase transition-colors bg-blue-500 rounded-lg hover:bg-blue-700 focus:outline-none"
> >
Start free Start free
</button> </button>
</div> </div>
<div
class="flex flex-col w-full max-w-sm text-center p-8 space-y-8 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700"
>
<div class="flex-shrink-0">
<h2
class="inline-flex items-center justify-center uppercase bg-gray-50 dark:bg-gray-700 px-2 font-semibold tracking-tight text-blue-400"
>
Profesional
</h2>
</div>
<div class="flex-shrink-0">
<span class="text-gray-800 dark:text-gray-100 text-4xl pt-2 uppercase font-bold">
$24.90
</span>
<span class="text-gray-500 dark:text-gray-400"> /month </span>
</div>
<ul class="flex-1 space-y-4">
<li class="text-gray-500 dark:text-gray-400">Up to 10 projects</li>
<li class="text-gray-500 dark:text-gray-400">Up to 20 collaborators</li>
<li class="text-gray-500 dark:text-gray-400">10Gb of storage</li>
<li class="text-gray-500 dark:text-gray-400">Real-time collaborations</li>
</ul>
<button <div class="flex flex-col w-full max-w-sm p-8 space-y-8 text-center bg-white border-2 border-gray-200 rounded-lg lg:mx-4 dark:bg-gray-800 dark:border-gray-700">
class="inline-flex items-center justify-center uppercase bg-blue-500 py-2 px-4 text-white transition-colors hover:bg-blue-700 font-semibold focus:outline-none" <div class="flex-shrink-0">
> <h2
Start free trial class="inline-flex items-center justify-center px-2 font-semibold tracking-tight text-blue-400 uppercase rounded-lg bg-gray-50 dark:bg-gray-700"
</button> >
</div> Profesional
<div </h2>
class="flex flex-col w-full max-w-sm text-center p-8 space-y-8 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700" </div>
> <div class="flex-shrink-0">
<div class="flex-shrink-0"> <span
<h2 class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
class="inline-flex items-center justify-center uppercase bg-gray-50 dark:bg-gray-700 px-2 font-semibold tracking-tight text-blue-400" >
> $24.90
Expert </span>
</h2> <span class="text-gray-500 dark:text-gray-400">
</div> /month
<div class="flex-shrink-0"> </span>
<span class="text-gray-800 dark:text-gray-100 text-4xl pt-2 uppercase font-bold"> </div>
$49.90 <ul class="flex-1 space-y-4">
</span> <li class="text-gray-500 dark:text-gray-400">
<span class="text-gray-500 dark:text-gray-400"> /month </span> Up to 10 projects
</div> </li>
<ul class="flex-1 space-y-4"> <li class="text-gray-500 dark:text-gray-400">
<li class="text-gray-500 dark:text-gray-400">Unlimited projects</li> Up to 20 collaborators
<li class="text-gray-500 dark:text-gray-400">Unlimited collaborators</li> </li>
<li class="text-gray-500 dark:text-gray-400">Unlimited storage</li> <li class="text-gray-500 dark:text-gray-400">
<li class="text-gray-500 dark:text-gray-400">Real-time collaborations</li> 10Gb of storage
<li class="text-gray-500 dark:text-gray-400">24x7 Support</li> </li>
</ul> <li class="text-gray-500 dark:text-gray-400">
Real-time collaborations
</li>
</ul>
<button <button
class="inline-flex items-center justify-center uppercase bg-blue-500 py-2 px-4 text-white transition-colors hover:bg-blue-700 font-semibold focus:outline-none" class="inline-flex items-center justify-center px-4 py-2 font-semibold text-white uppercase transition-colors bg-blue-500 rounded-lg hover:bg-blue-700 focus:outline-none"
> >
Start free trial Start free trial
</button> </button>
</div>
<div class="flex flex-col w-full max-w-sm p-8 space-y-8 text-center bg-white border-2 border-gray-200 rounded-lg lg:mx-4 dark:bg-gray-800 dark:border-gray-700">
<div class="flex-shrink-0">
<h2
class="inline-flex items-center justify-center px-2 font-semibold tracking-tight text-blue-400 uppercase rounded-lg bg-gray-50 dark:bg-gray-700"
>
Expert
</h2>
</div>
<div class="flex-shrink-0">
<span
class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
>
$49.90
</span>
<span class="text-gray-500 dark:text-gray-400">
/month
</span>
</div>
<ul class="flex-1 space-y-4">
<li class="text-gray-500 dark:text-gray-400">
Unlimited projects
</li>
<li class="text-gray-500 dark:text-gray-400">
Unlimited collaborators
</li>
<li class="text-gray-500 dark:text-gray-400">
Unlimited storage
</li>
<li class="text-gray-500 dark:text-gray-400">
Real-time collaborations
</li>
<li class="text-gray-500 dark:text-gray-400">
24x7 Support
</li>
</ul>
<button
class="inline-flex items-center justify-center px-4 py-2 font-semibold text-white uppercase transition-colors bg-blue-500 rounded-lg hover:bg-blue-700 focus:outline-none"
>
Start free trial
</button>
</div>
</div>
</div> </div>
</div> </div>`,
</div>
</div>
`,
}; };
}, },
}; };