Update simple pricing component
This commit is contained in:
khatabwedaa
parent
f7f2ef5b0a
commit
90e524b020
|
|
@ -3,59 +3,16 @@
|
|||
<div class="py-6" slot="component">
|
||||
<div class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div
|
||||
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
|
||||
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 flex-col items-center justify-center space-y-8 lg:-mx-4 lg:flex-row lg:items-stretch 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">
|
||||
<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
|
||||
"
|
||||
>
|
||||
<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">
|
||||
Casual
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<span
|
||||
class="
|
||||
text-gray-800
|
||||
dark:text-gray-100
|
||||
text-4xl
|
||||
pt-2
|
||||
uppercase
|
||||
font-bold
|
||||
"
|
||||
class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
|
||||
>
|
||||
Free
|
||||
</span>
|
||||
|
|
@ -73,66 +30,23 @@
|
|||
</ul>
|
||||
|
||||
<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
|
||||
</button>
|
||||
</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 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
|
||||
uppercase
|
||||
bg-gray-50
|
||||
dark:bg-gray-700
|
||||
px-2
|
||||
font-semibold
|
||||
tracking-tight
|
||||
text-blue-400
|
||||
"
|
||||
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"
|
||||
>
|
||||
Profesional
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<span
|
||||
class="
|
||||
text-gray-800
|
||||
dark:text-gray-100
|
||||
text-4xl
|
||||
pt-2
|
||||
uppercase
|
||||
font-bold
|
||||
"
|
||||
class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
|
||||
>
|
||||
$24.90
|
||||
</span>
|
||||
|
|
@ -156,66 +70,23 @@
|
|||
</ul>
|
||||
|
||||
<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
|
||||
</button>
|
||||
</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 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
|
||||
uppercase
|
||||
bg-gray-50
|
||||
dark:bg-gray-700
|
||||
px-2
|
||||
font-semibold
|
||||
tracking-tight
|
||||
text-blue-400
|
||||
"
|
||||
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="
|
||||
text-gray-800
|
||||
dark:text-gray-100
|
||||
text-4xl
|
||||
pt-2
|
||||
uppercase
|
||||
font-bold
|
||||
"
|
||||
class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
|
||||
>
|
||||
$49.90
|
||||
</span>
|
||||
|
|
@ -242,20 +113,7 @@
|
|||
</ul>
|
||||
|
||||
<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
|
||||
</button>
|
||||
|
|
@ -273,101 +131,126 @@ export default {
|
|||
return {
|
||||
name: "Simple",
|
||||
code: `
|
||||
<div class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div
|
||||
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 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"
|
||||
>
|
||||
Casual
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<span class="text-gray-800 dark:text-gray-100 text-4xl pt-2 uppercase font-bold">
|
||||
Free
|
||||
</span>
|
||||
</div>
|
||||
<ul class="flex-1 space-y-4">
|
||||
<li class="text-gray-500 dark:text-gray-400">Up to 5 projects</li>
|
||||
<li class="text-gray-500 dark:text-gray-400">Up to 10 collaborators</li>
|
||||
<li class="text-gray-500 dark:text-gray-400">2Gb of storage</li>
|
||||
</ul>
|
||||
<div class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<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">
|
||||
<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">
|
||||
Casual
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<span
|
||||
class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
|
||||
>
|
||||
Free
|
||||
</span>
|
||||
</div>
|
||||
<ul class="flex-1 space-y-4">
|
||||
<li class="text-gray-500 dark:text-gray-400">
|
||||
Up to 5 projects
|
||||
</li>
|
||||
<li class="text-gray-500 dark:text-gray-400">
|
||||
Up to 10 collaborators
|
||||
</li>
|
||||
<li class="text-gray-500 dark:text-gray-400">
|
||||
2Gb of storage
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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"
|
||||
>
|
||||
Start free
|
||||
</button>
|
||||
</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
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
>
|
||||
Start free trial
|
||||
</button>
|
||||
</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"
|
||||
>
|
||||
Expert
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<span class="text-gray-800 dark:text-gray-100 text-4xl pt-2 uppercase font-bold">
|
||||
$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>
|
||||
<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"
|
||||
>
|
||||
Profesional
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<span
|
||||
class="pt-2 text-4xl font-bold text-gray-800 uppercase dark:text-gray-100"
|
||||
>
|
||||
$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
|
||||
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"
|
||||
>
|
||||
Start free trial
|
||||
</button>
|
||||
<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 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>`,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue