Add deployment options section to for-teams page

Author: tobihagemann

i18n/de.yaml

@@ -385,6 +385,8 @@
   translation: "Live-Demo buchen"
 - id: hub_header_contact_cta
   translation: "Vertrieb kontaktieren"
+- id: hub_header_deployment_link
+  translation: "Bereit, mit Cryptomator Hub zu starten?"
 - id: hub_header_group_magic_alt
   translation: "Cryptobot verbindet eine Gruppe von Menschen mit seinen magischen Fähigkeiten durch Zero-Knowledge-Verschlüsselung"
 
@@ -448,6 +450,25 @@
 - id: hub_pricing_button
   translation: "Preisgestaltung anzeigen"
 
+- id: hub_deployment_title
+  translation: "Bereit, mit Cryptomator Hub zu starten?"
+- id: hub_deployment_managed_subtitle
+  translation: "Von Skymatic gehostet und gewartet"
+- id: hub_deployment_managed_benefit_1
+  translation: "Keine Infrastruktur-Einrichtung erforderlich"
+- id: hub_deployment_managed_benefit_2
+  translation: "Automatische Updates und Wartung"
+- id: hub_deployment_managed_benefit_3
+  translation: "ISO/IEC 27001 zertifiziertes Rechenzentrum in der EU"
+- id: hub_deployment_self_hosted_subtitle
+  translation: "Volle Kontrolle über deine Infrastruktur"
+- id: hub_deployment_self_hosted_benefit_1
+  translation: "Bereitstellung auf eigenen Servern oder in der Cloud"
+- id: hub_deployment_self_hosted_benefit_2
+  translation: "Flexible Integration in bestehende Systeme"
+- id: hub_deployment_self_hosted_benefit_3
+  translation: "Vollständige Datenhoheit"
+
 - id: hub_contact_us_title
   translation: "Weitere Fragen?"
 - id: hub_contact_us_description
@@ -897,7 +918,7 @@
 - id: pricing_hub_managed_title
   translation: "Managed"
 - id: pricing_hub_managed_cta
-  translation: "Jetzt loslegen"
+  translation: "Jetzt anmelden"
 
 - id: pricing_hub_community_title
   translation: "Community"

i18n/en.yaml

@@ -385,6 +385,8 @@
   translation: "Book a Live Demo"
 - id: hub_header_contact_cta
   translation: "Contact Sales"
+- id: hub_header_deployment_link
+  translation: "Ready to get started with Cryptomator Hub?"
 - id: hub_header_group_magic_alt
   translation: "Cryptobot connects a group of people with its magical abilities through zero-knowledge encryption"
 
@@ -448,6 +450,25 @@
 - id: hub_pricing_button
   translation: "View Pricing Plans"
 
+- id: hub_deployment_title
+  translation: "Ready to Get Started with Cryptomator Hub?"
+- id: hub_deployment_managed_subtitle
+  translation: "Hosted and maintained by Skymatic"
+- id: hub_deployment_managed_benefit_1
+  translation: "No infrastructure setup required"
+- id: hub_deployment_managed_benefit_2
+  translation: "Automatic updates and maintenance"
+- id: hub_deployment_managed_benefit_3
+  translation: "ISO/IEC 27001 certified data center in the EU"
+- id: hub_deployment_self_hosted_subtitle
+  translation: "Full control over your infrastructure"
+- id: hub_deployment_self_hosted_benefit_1
+  translation: "Deploy on your own servers or cloud"
+- id: hub_deployment_self_hosted_benefit_2
+  translation: "Flexible integration with existing systems"
+- id: hub_deployment_self_hosted_benefit_3
+  translation: "Complete data sovereignty"
+
 - id: hub_contact_us_title
   translation: "More questions?"
 - id: hub_contact_us_description
@@ -897,7 +918,7 @@
 - id: pricing_hub_managed_title
   translation: "Managed"
 - id: pricing_hub_managed_cta
-  translation: "Get Started"
+  translation: "Sign Up Now"
 
 - id: pricing_hub_community_title
   translation: "Community"

layouts/for-teams/single.html

@@ -18,14 +18,14 @@
         <h1 class="font-h1 mb-6">{{ i18n "hub_header_title" . | safeHTML }}</h1>
         <p class="lead mb-6">{{ i18n "hub_header_description" . | safeHTML }}</p>
         <div class="flex flex-col md:flex-row gap-6 mb-4">
-          <div class="flex flex-col gap-2">
-            <a href="{{ .Site.LanguagePrefix }}/book-a-demo/" role="button" class="btn btn-primary text-lg w-full md:w-64" data-umami-event="hub-header-demo-cta">{{ i18n "hub_header_demo_cta" . }}</a>
-          </div>
-          <div class="flex flex-col gap-2">
-            <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-primary text-lg w-full md:w-64" data-umami-event="hub-header-contact-cta">{{ i18n "hub_header_contact_cta" . }}</a>
-          </div>
+          <a href="{{ .Site.LanguagePrefix }}/book-a-demo/" role="button" class="btn btn-primary text-lg w-full md:w-64" data-umami-event="hub-header-demo-cta">{{ i18n "hub_header_demo_cta" . }}</a>
+          <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-primary text-lg w-full md:w-64" data-umami-event="hub-header-contact-cta">{{ i18n "hub_header_contact_cta" . }}</a>
         </div>
-        <p class="font-p">{{ i18n "hub_header_cta_description" . | safeHTML }}</p>
+        <p class="font-p">
+          <a href="#deployment" class="text-gray-700 hover:text-gray-900" data-umami-event="hub-header-deployment-link">
+            <i class="fa-solid fa-arrow-down"></i> {{ i18n "hub_header_deployment_link" . }}
+          </a>
+        </p>
       </div>
     </header>
   </section>
@@ -148,6 +148,90 @@ <h2 id="pricing-plans" class="font-h2 mb-4">{{ i18n "hub_pricing_title" . }}</h2
     </div>
   </section>
 
+  <section class="container pt-12 pb-24">
+    <h2 id="deployment" class="text-center font-h2 mb-4">{{ i18n "hub_deployment_title" . }}</h2>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="flex flex-col white-box">
+        <div class="flex justify-between items-center p-4 border-b border-primary">
+          <h3>
+            <div class="flex items-center">
+              <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
+              <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+            </div>
+          </h3>
+          <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+            <i class="fa-solid fa-cloud"></i>
+            {{ i18n "pricing_hub_managed_title" . }}
+          </div>
+        </div>
+        <div class="flex flex-col justify-between h-full gap-8 px-4 py-8">
+          <div class="flex flex-col gap-4">
+            <h4 class="font-medium lg:text-lg leading-relaxed">
+              {{ i18n "hub_deployment_managed_subtitle" . }}
+            </h4>
+            <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
+              <li>
+                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span>{{ i18n "hub_deployment_managed_benefit_1" . }}</span>
+              </li>
+              <li>
+                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span>{{ i18n "hub_deployment_managed_benefit_2" . }}</span>
+              </li>
+              <li>
+                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span>{{ i18n "hub_deployment_managed_benefit_3" . }}</span>
+              </li>
+            </ul>
+          </div>
+          <a href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-primary w-full lg:w-96" data-umami-event="hub-deployment-managed-cta">
+            {{ i18n "pricing_hub_managed_cta" . }}
+          </a>
+        </div>
+      </div>
+
+      <div class="flex flex-col white-box">
+        <div class="flex justify-between items-center p-4 border-b border-primary">
+          <h3>
+            <div class="flex items-center">
+              <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
+              <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+            </div>
+          </h3>
+          <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+            <i class="fa-solid fa-server"></i>
+            {{ i18n "pricing_hub_self_hosted_title" . }}
+          </div>
+        </div>
+        <div class="flex flex-col justify-between h-full gap-8 px-4 py-8">
+          <div class="flex flex-col gap-4">
+            <h4 class="font-medium lg:text-lg leading-relaxed">
+              {{ i18n "hub_deployment_self_hosted_subtitle" . }}
+            </h4>
+            <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
+              <li>
+                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span>{{ i18n "hub_deployment_self_hosted_benefit_1" . }}</span>
+              </li>
+              <li>
+                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span>{{ i18n "hub_deployment_self_hosted_benefit_2" . }}</span>
+              </li>
+              <li>
+                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span>{{ i18n "hub_deployment_self_hosted_benefit_3" . }}</span>
+              </li>
+            </ul>
+          </div>
+          <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-primary w-full lg:w-96" data-umami-event="hub-deployment-self-hosted-cta">
+            {{ i18n "pricing_hub_self_hosted_cta" . }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <section class="container py-12">
     <header class="text-center">
       <h2 id="faq" class="font-h2 mb-4">{{ i18n "faq_title" . }}</h2>

layouts/pricing/single.html

@@ -286,7 +286,7 @@ <h3 class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tra
                 </span>
               </div>
               <div x-show="infrastructure === 'managed'">
-                <p class="flex items-baseline gap-2 mt-2">
+                <p class="flex items-baseline gap-2">
                   <span x-text="data.managedMonthlyPrice ? data.managedMonthlyPrice.amount.toLocaleString('{{ .Site.Language.Lang }}', { style: 'currency', currency: data.managedMonthlyPrice.currency }) : '…'" class="font-bold text-2xl md:text-3xl lg:text-4xl leading-relaxed"></span>
                   <span class="text-xs md:text-sm lg:text-base text-gray-700">
                     {{ i18n "pricing_vat_excluded" . }}
@@ -300,7 +300,7 @@ <h3 class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tra
                 </a>
               </div>
               <div x-show="infrastructure === 'self-hosted'">
-                <p class="flex items-baseline gap-2 mt-2">
+                <p class="flex items-baseline gap-2">
                   <span x-text="data.selfHostedMonthlyPrice ? data.selfHostedMonthlyPrice.amount.toLocaleString('{{ .Site.Language.Lang }}', { style: 'currency', currency: data.selfHostedMonthlyPrice.currency }) : '…'" class="font-bold text-2xl md:text-3xl lg:text-4xl leading-relaxed"></span>
                   <span class="text-xs md:text-sm lg:text-base text-gray-700">
                     {{ i18n "pricing_vat_excluded" . }}