402 lines
20 KiB
JavaScript
402 lines
20 KiB
JavaScript
import Layout from "../src/components/Layout";
|
|
|
|
export default function Payments() {
|
|
return (
|
|
<Layout title="Payments">
|
|
<div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6">
|
|
{/* This example requires Tailwind CSS v2.0+ */}
|
|
<dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
|
|
<div className="bg-white overflow-hidden shadow rounded-lg">
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<dt className="text-sm font-medium text-gray-500 truncate">Current plan</dt>
|
|
<dd className="mt-1 text-3xl font-semibold text-gray-900">Free Plan</dd>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white overflow-hidden shadow rounded-lg">
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<dt className="text-sm font-medium text-gray-500 truncate">Next invoice</dt>
|
|
<dd className="mt-1 text-3xl font-semibold text-gray-900">-</dd>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white overflow-hidden shadow rounded-lg">
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<dt className="text-sm font-medium text-gray-500 truncate">Plan usage this month</dt>
|
|
<dd className="mt-1 text-3xl font-semibold text-gray-900">24.57%</dd>
|
|
</div>
|
|
</div>
|
|
</dl>
|
|
|
|
{/* This example requires Tailwind CSS v2.0+ */}
|
|
<div className="bg-white">
|
|
<div className="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
|
|
<div className="sm:flex sm:flex-col sm:align-center">
|
|
<h1 className="text-5xl font-extrabold text-gray-900 sm:text-center">Pricing Plans</h1>
|
|
<p className="mt-5 text-xl text-gray-500 sm:text-center">
|
|
Start building for free, then add a site plan to go live. Account plans unlock additional features.
|
|
</p>
|
|
</div>
|
|
<div className="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4">
|
|
<div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
|
|
<div className="p-6">
|
|
<h2 className="text-lg leading-6 font-medium text-gray-900">Hobby</h2>
|
|
<p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
|
|
<p className="mt-8">
|
|
<span className="text-4xl font-extrabold text-gray-900">$12</span>
|
|
<span className="text-base font-medium text-gray-500">/mo</span>
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
|
|
>
|
|
Buy Hobby
|
|
</a>
|
|
</div>
|
|
<div className="pt-6 pb-8 px-6">
|
|
<h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
|
|
<ul className="mt-6 space-y-4">
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc.</span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
|
|
<div className="p-6">
|
|
<h2 className="text-lg leading-6 font-medium text-gray-900">Freelancer</h2>
|
|
<p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
|
|
<p className="mt-8">
|
|
<span className="text-4xl font-extrabold text-gray-900">$24</span>
|
|
<span className="text-base font-medium text-gray-500">/mo</span>
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
|
|
>
|
|
Buy Freelancer
|
|
</a>
|
|
</div>
|
|
<div className="pt-6 pb-8 px-6">
|
|
<h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
|
|
<ul className="mt-6 space-y-4">
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
|
|
<div className="p-6">
|
|
<h2 className="text-lg leading-6 font-medium text-gray-900">Startup</h2>
|
|
<p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
|
|
<p className="mt-8">
|
|
<span className="text-4xl font-extrabold text-gray-900">$32</span>
|
|
<span className="text-base font-medium text-gray-500">/mo</span>
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
|
|
>
|
|
Buy Startup
|
|
</a>
|
|
</div>
|
|
<div className="pt-6 pb-8 px-6">
|
|
<h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
|
|
<ul className="mt-6 space-y-4">
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Faucibus volutpat magna.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
|
|
<div className="p-6">
|
|
<h2 className="text-lg leading-6 font-medium text-gray-900">Enterprise</h2>
|
|
<p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
|
|
<p className="mt-8">
|
|
<span className="text-4xl font-extrabold text-gray-900">$48</span>
|
|
<span className="text-base font-medium text-gray-500">/mo</span>
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
|
|
>
|
|
Buy Enterprise
|
|
</a>
|
|
</div>
|
|
<div className="pt-6 pb-8 px-6">
|
|
<h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
|
|
<ul className="mt-6 space-y-4">
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Faucibus volutpat magna.</span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Id sed tellus in varius quisque.</span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Risus egestas faucibus.</span>
|
|
</li>
|
|
<li className="flex space-x-3">
|
|
{/* Heroicon name: check */}
|
|
<svg
|
|
className="flex-shrink-0 h-5 w-5 text-green-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-500">Risus cursus ullamcorper.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|