diff --git a/myproject/myapp/templates/_base.html b/myproject/myapp/templates/_base.html index ed8586a8d7ed226bb3f3b4c9284de6c1b63bdae9..d89d96a8a78ac2db0842c6fc21e7da912f0de21a 100644 --- a/myproject/myapp/templates/_base.html +++ b/myproject/myapp/templates/_base.html @@ -88,7 +88,7 @@ </div> </div> </nav> - <div class="container mx-auto mt-4"> + <div class="container mx-auto mt-6"> {% block content %} {% endblock content %} </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script> diff --git a/myproject/myapp/templates/pricing.html b/myproject/myapp/templates/pricing.html index cc7b60b27275a82b97ffbfdfa226a58dd58ce253..66b2954f536f2966a322c262b68b0341cd95856e 100644 --- a/myproject/myapp/templates/pricing.html +++ b/myproject/myapp/templates/pricing.html @@ -1,3 +1,115 @@ {% extends "_base.html" %}{% block content %} -<h1>Pricing page</h1> + +<div class="grid grid-cols-2 content-start"> + <div class="w-full mx-auto max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700"> + <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Trial plan</h5> + <div class="flex items-baseline text-gray-900 dark:text-white"> + <span class="text-5xl font-extrabold tracking-tight">Free</span> + </div> + <ul role="list" class="space-y-5 my-7"> + <li class="flex items-center"> + <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">1 team member</span> + </li> + <li class="flex"> + <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">0GB Cloud storage</span> + </li> + <li class="flex decoration-gray-500"> + <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 ms-3">1 File upload</span> + <span class="ms-1 text-sm font-normal text-gray-500 dark:text-gray-400">/month</span> + </li> + <li class="flex line-through decoration-gray-500"> + <svg class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">Integration help</span> + </li> + <li class="flex line-through decoration-gray-500"> + <svg class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 ms-3">API Access</span> + </li> + <li class="flex line-through decoration-gray-500"> + <svg class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 ms-3">Complete documentation</span> + </li> + <li class="flex line-through decoration-gray-500"> + <svg class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 ms-3">24×7 phone & email support</span> + </li> + </ul> + <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center">Choose plan</button> + </div> + + <div class="w-full mx-auto max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700"> + <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Standard plan</h5> + <div class="flex items-baseline text-gray-900 dark:text-white"> + <span class="text-3xl font-semibold">£</span> + <span class="text-5xl font-extrabold tracking-tight">49</span> + <span class="ms-1 text-xl font-normal text-gray-500 dark:text-gray-400">/month</span> + </div> + <ul role="list" class="space-y-5 my-7"> + <li class="flex items-center"> + <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">2 team members</span> + </li> + <li class="flex"> + <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">20GB Cloud storage</span> + </li> + <li class="flex decoration-gray-500"> + <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 ms-3">100 File Uploads</span> + <span class="ms-1 text-sm font-normal text-gray-500 dark:text-gray-400">/month</span> + </li> + <li class="flex"> + <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">Integration help</span> + </li> + <li class="flex decoration-gray-500"> + <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 ms-3">API Access</span> + </li> + <li class="flex decoration-gray-500"> + <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 ms-3">Complete documentation</span> + </li> + <li class="flex decoration-gray-500"> + <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/> + </svg> + <span class="text-base font-normal leading-tight text-gray-500 ms-3">24×7 phone & email support</span> + </li> + </ul> + <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center">Choose plan</button> + </div> + +</div> + + {% endblock content %} \ No newline at end of file