From 6397655f7d0b1f85046e6d6969dc6bc3ee9f6f61 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Fri, 3 May 2024 09:35:09 +0200
Subject: [PATCH] Update pricing plan details and add pay-as-you-go option

---
 .../subscription/pricing-plans.blade.php      | 167 +++++++++++++-----
 1 file changed, 118 insertions(+), 49 deletions(-)

diff --git a/resources/views/livewire/subscription/pricing-plans.blade.php b/resources/views/livewire/subscription/pricing-plans.blade.php
index 78544e7bf..e11b14525 100644
--- a/resources/views/livewire/subscription/pricing-plans.blade.php
+++ b/resources/views/livewire/subscription/pricing-plans.blade.php
@@ -2,19 +2,19 @@
     <div class="max-w-3xl px-6 mx-auto lg:px-8">
         <div class="flex justify-center">
             <fieldset
-                class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded dark:text-white gap-x-1 bg-white/5">
+                class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
                 <legend class="sr-only">Payment frequency</legend>
                 <label class="cursor-pointer rounded px-2.5 py-1"
-                    :class="selected === 'monthly' ? 'bg-coollabs-100 text-white' : ''">
+                    :class="selected === 'monthly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
                     <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
                         class="sr-only">
                     <span>Monthly</span>
                 </label>
                 <label class="cursor-pointer rounded px-2.5 py-1"
-                    :class="selected === 'yearly' ? 'bg-coollabs-100 text-white' : ''">
+                    :class="selected === 'yearly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
                     <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
                         class="sr-only">
-                    <span>Annually <span class="text-xs text-warning">(save ~20%)</span
+                    <span>Annually <span class="text-xs dark:text-warning text-coollabs">(save ~20%)</span
                         ></span>
                 </label>
             </fieldset>
@@ -26,37 +26,31 @@
                 class="grid max-w-sm grid-cols-1 -mt-16 divide-y divide-neutral-200 dark:divide-coolgray-500 isolate gap-y-16 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-1 lg:divide-x lg:divide-y-0 xl:-mx-4">
                 <div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
                     <h3 id="tier-dynamic" class="text-4xl font-semibold leading-7 dark:text-white">Pay-as-you-go</h3>
-                    <p class="mt-4 text-sm leading-6 text-neutral-400">
+                    <p class="mt-4 text-sm leading-6 dark:text-neutral-400">
                         Dynamic pricing based on the number of servers you connect.
                       </p>
                     <p class="flex items-baseline mt-6 gap-x-1">
                         <span x-show="selected === 'monthly'" x-cloak>
                             <span class="text-4xl font-bold tracking-tight dark:text-white">$5</span>
-                            <span class="text-sm font-semibold leading-6 "> for 2 servers</span>
+                            <span class="text-sm font-semibold leading-6 "> base price</span>
                         </span>
 
                         <span x-show="selected === 'yearly'" x-cloak>
                             <span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
-                            <span class="text-sm font-semibold leading-6 "> for 2 servers</span>
+                            <span class="text-sm font-semibold leading-6 "> base price</span>
                         </span>
                     </p>
                     <p class="flex items-baseline mb-4 gap-x-1">
                         <span x-show="selected === 'monthly'" x-cloak>
-                            <span class="text-sm font-semibold tracking-tight dark:text-white">$3</span>
-                            <span class="text-sm font-semibold leading-6 "> per server from 3+ servers</span>
+                            <span class="text-base font-semibold tracking-tight dark:text-white">$3</span>
+                            <span class="text-sm font-semibold leading-6 "> per additional servers <span class="font-normal dark:text-white">billed monthly (+VAT)</span></span>
                         </span>
 
                         <span x-show="selected === 'yearly'" x-cloak>
                             <span class="text-sm font-semibold tracking-tight dark:text-white">$2.7</span>
-                            <span class="text-sm font-semibold leading-6 "> per server from 3+ servers</span>
+                            <span class="text-sm font-semibold leading-6 "> per additional servers <span class="font-normal dark:text-white">billed annually (+VAT)</span></span>
                         </span>
                     </p>
-                    <span x-show="selected === 'monthly'" x-cloak>
-                        <span class="dark:text-white p">billed monthly (+VAT)</span>
-                    </span>
-                    <span x-show="selected === 'yearly'" x-cloak>
-                        <span class="dark:text-white">billed annually (+VAT)</span>
-                    </span>
                     <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
                         class="w-full h-10 buyme" wire:click="subscribeStripe('dynamic-monthly')">
                         Subscribe
@@ -65,47 +59,122 @@
                         class="w-full h-10 buyme" wire:click="subscribeStripe('dynamic-yearly')">
                         Subscribe
                     </x-forms.button>
-                    <ul role="list" class="pt-6 space-y-3 text-sm leading-6">
+                    <ul role="list" class="mt-8 space-y-3 text-sm leading-6 dark:text-neutral-400">
                         <li class="flex">
-                            <svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
-                                fill="currentColor" aria-hidden="true">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.775 0 001.137-.089l4-5.5z"
-                                    clip-rule="evenodd" />
-                            </svg>
-                            Connect <span class="px-1 font-bold dark:text-white">unlimited</span> servers
+                          <svg
+                            class="flex-none w-5 h-6 mr-3 text-warning"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            aria-hidden="true"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                              clip-rule="evenodd"
+                            />
+                          </svg>
+                          Connect
+                          <span class="px-1 font-bold dark:text-white">unlimited</span> servers
+                        </li>
+                        <li class="flex">
+                          <svg
+                            class="flex-none w-5 h-6 mr-3 text-warning"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            aria-hidden="true"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                              clip-rule="evenodd"
+                            />
+                          </svg>
+                          Deploy
+                          <span class="px-1 font-bold dark:text-white">unlimited</span> applications per server
                         </li>
                         <li class="flex gap-x-3">
-                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
-                                aria-hidden="true">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                                    clip-rule="evenodd" />
-                            </svg>
-                            Free Email Notifications
+                          <svg
+                            class="flex-none w-5 h-6 text-warning"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            aria-hidden="true"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                              clip-rule="evenodd"
+                            />
+                          </svg>
+                          Free email notifications
                         </li>
                         <li class="flex gap-x-3">
-                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
-                                aria-hidden="true">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                                    clip-rule="evenodd" />
-                            </svg>
-                            Support by Email
+                          <svg
+                            class="flex-none w-5 h-6 text-warning"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            aria-hidden="true"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                              clip-rule="evenodd"
+                            />
+                          </svg>
+                          Support by email
                         </li>
                         <li class="flex font-bold dark:text-white gap-x-3">
-                            <svg width="512" height="512" class="flex-none w-5 h-6 text-green-600"
-                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                    stroke-width="2">
-                                    <path
-                                        d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
-                                    <path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
-                                </g>
-                            </svg>
-                            + All upcoming features
+                          <svg
+                            width="512"
+                            height="512"
+                            class="flex-none w-5 h-6 text-green-500"
+                            viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <g
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                            >
+                              <path
+                                d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3"
+                              />
+                              <path
+                                d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
+                              />
+                            </g>
+                          </svg>
+                          + All Upcoming Features
                         </li>
-                    </ul>
+                        <li class="flex dark:text-white gap-x-3">
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="flex-none w-5 h-6 text-green-500"
+                            viewBox="0 0 256 256"
+                            ><rect width="256" height="256" fill="none" /><polyline
+                              points="32 136 72 136 88 112 120 160 136 136 160 136"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="16"
+                            /><path
+                              d="M24,104c0-.67,0-1.33,0-2A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54c0,66-104,122-104,122s-42-22.6-72.58-56"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="16"
+                            /></svg
+                          >
+
+                          Do you require official support for your self-hosted instance?<a
+                            class="underline"
+                            href="https://coolify.io/docs/contact">Contact Us</a
+                          >
+                        </li>
+                      </ul>
                 </div>
             </div>
         </div>