mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve design

Browse Source
This commit is contained in:
prototypa
2023-01-21 20:21:00 -05:00
parent 79283511d9
commit 8e702e6ee5
11 changed files with 53 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
src/components/widgets/Pricing.astro
View File

@ -1,274 +0,0 @@
---
---
<!-- Pricing -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Pricing</h2>
<p class="mt-1 text-gray-600 dark:text-gray-400">
Whatever your status, our offers evolve according to your needs.
</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:items-center">
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Free</h4>
<span class="mt-7 font-bold text-5xl text-gray-800 dark:text-gray-200">Free</span>
<p class="mt-2 text-sm text-gray-500">Forever free</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 1 user</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border-2 border-blue-600 text-center shadow-xl rounded-xl p-8 dark:border-blue-500">
<p class="mb-3">
<span
class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs uppercase font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-white"
>Most popular</span
>
</p>
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Startup</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
39
</span>
<p class="mt-2 text-sm text-gray-500">All the basics for starting a new business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 2 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Team</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
89
</span>
<p class="mt-2 text-sm text-gray-500">Everything you need for a growing business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 5 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Enterprise</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
149
</span>
<p class="mt-2 text-sm text-gray-500">Advanced features for scaling your business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 10 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Pricing -->