From 1a917cf7ceaa19026550edbcfcae065bf3c978fb Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Sat, 23 Nov 2024 17:38:20 +0100
Subject: [PATCH] Added enterprise plan

---
 .../components/pages/pricing/CustomPlan.vue   | 210 +++++++++++++++---
 .../components/pages/pricing/PricingTable.vue |   5 +-
 2 files changed, 187 insertions(+), 28 deletions(-)

diff --git a/client/components/pages/pricing/CustomPlan.vue b/client/components/pages/pricing/CustomPlan.vue
index 4ea966e03..53b454122 100644
--- a/client/components/pages/pricing/CustomPlan.vue
+++ b/client/components/pages/pricing/CustomPlan.vue
@@ -1,35 +1,191 @@
 <template>
-  <div class="border lg:rounded-xl bg-gray-50 dark:bg-gray-800 relative max-w-5xl mx-auto mt-10">
-    <div
-      class=" p-6 lg:flex lg:items-center"
-    >
-      <div class="flex-1">
-        <h3
-          class="inline-flex px-4 py-1 rounded-full text-md font-semibold tracking-wide bg-blue-500 text-white"
-        >
-          Custom Plan
-        </h3>
-        <div class="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl">
-          Get a custom file upload limit, enterprise-level support, custom
-          contract, dedicated application instance in a specific region,
-          payment via invoice/PO etc.
+  <section class="relative">
+    <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
+      <div class="max-w-5xl mx-auto bg-white shadow-xl rounded-3xl ring-1 ring-gray-200 lg:flex isolate">
+        <div class="p-8 sm:p-8 lg:flex-auto">
+          <h3 class="text-3xl font-semibold tracking-tight text-blue-500">
+            Enterprise Plan
+          </h3>
+          <p class="mt-2 text-base font-medium leading-7 text-gray-600">
+            Unlock ultimate scalability and enterprise-grade features with the Enterprise Plan. Tailored to meet the needs of organizations requiring dedicated infrastructure, advanced security, and priority support.
+          </p>
+          <div class="flex items-center mt-6 gap-x-4">
+            <h4 class="flex-none text-sm font-semibold leading-6 tracking-widest text-gray-400 uppercase">
+              What's included
+            </h4>
+            <div class="flex-auto h-px bg-gray-200" />
+          </div>
+          <ul
+            role="list"
+            class="grid grid-cols-1 gap-4 mt-4 text-sm font-medium leading-6 text-gray-900 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-2"
+          >
+            <li class="flex gap-x-3">
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5 shrink-0 stroke-blue-600"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20 6L9 17L4 12"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              Everything in Pro Plan
+            </li>
+            <li class="flex gap-x-3">
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5 shrink-0 stroke-blue-600"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20 6L9 17L4 12"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              Self-hosted/dedicated instance
+            </li>
+            <li class="flex gap-x-3">
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5 shrink-0 stroke-blue-600"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20 6L9 17L4 12"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              Priority support
+            </li>
+            <li class="flex gap-x-3">
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5 shrink-0 stroke-blue-600"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20 6L9 17L4 12"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              Payment via invoice/PO
+            </li>
+            <li class="flex gap-x-3">
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5 shrink-0 stroke-blue-600"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20 6L9 17L4 12"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              SAML single sign-on (SSO)
+            </li>
+            <li class="flex gap-x-3">
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5 shrink-0 stroke-blue-600"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20 6L9 17L4 12"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              Security audits
+            </li>
+            <li class="flex gap-x-3">
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5 shrink-0 stroke-blue-600"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20 6L9 17L4 12"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              Two-factor authentication (2FA)
+            </li>
+            <li class="flex gap-x-3">
+              <Icon
+                class="w-5 h-5 shrink-0 text-blue-600"
+                name="i-heroicons-users-16-solid"
+              />
+              Unlimited users
+            </li>
+          </ul>
+        </div>
+        <div class="p-2 -mt-2 flex-col lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
+          <div class="grow h-full py-10 text-center rounded-2xl bg-gray-50 ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-12">
+            <div class="max-w-xs px-8 mx-auto space-y-6">
+              <div class="flex items-center justify-center mb-10">
+                <monthly-yearly-selector v-model="isYearly" />
+              </div>
+              <p class="flex flex-col items-center">
+                <span class="text-6xl font-semibold tracking-tight text-gray-950">
+                  <template v-if="isYearly">$160</template>
+                  <template v-else>$200</template>
+                </span>
+                <span class="text-sm font-medium leading-6 text-gray-600">
+                  starting from {{ isYearly ? 'per year' : 'per month' }}
+                </span>
+              </p>
+              <div class="flex justify-center">
+                <button 
+                  class="v-btn py-2 px-4 bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg flex items-center hover:no-underline"
+                  @click="customPlanClick"
+                >
+                  <span class="no-underline mx-auto">Contact Us</span>
+                </button>
+              </div>
+              <p class="text-xs font-medium leading-5 text-gray-600">
+                Let us design a tailored plan to meet your enterprise needs.
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="mt-6 lg:mt-0 lg:ml-10 lg:flex-shrink-0">
-        <UButton
-          size="xl"
-          color="white"
-          class="w-auto"
-          icon="i-heroicons-chat-bubble-left"
-          @click.prevent="customPlanClick"
-        >
-          Contact us
-        </UButton>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
+<script setup>
+import { ref } from 'vue'
+const isYearly = ref(true)
+</script>
+
 <script>
 export default {
   name: "CustomPlan",
@@ -43,7 +199,7 @@ export default {
   methods: {
     customPlanClick() {
       useCrisp().sendTextMessage(
-        "Hi, I would like to discuss about a custom plan",
+        "Hi, I would like to discuss about an enterprise plan",
       )
     },
   },
diff --git a/client/components/pages/pricing/PricingTable.vue b/client/components/pages/pricing/PricingTable.vue
index c5025db26..05c0c9dbe 100644
--- a/client/components/pages/pricing/PricingTable.vue
+++ b/client/components/pages/pricing/PricingTable.vue
@@ -168,7 +168,10 @@
       </div>
     </section>
 
-    <custom-plan v-if="!homePage" />
+    <custom-plan
+      v-if="!homePage"
+      class="mt-8"
+    />
   </div>
 </template>