Re-Add webinar section

assets/js/hubcontact.js → assets/js/apiform.js

@@ -1,13 +1,12 @@
 "use strict";
 
-const REQUEST_HUB_CONTACT_URL = API_BASE_URL + '/connect/contact/request-contact';
+class ApiForm {
 
-class HubContact {
-
-  constructor(form, feedbackData, submitData) {
+  constructor(form, feedbackData, submitData, url) {
     this._form = form;
     this._feedbackData = feedbackData;
     this._submitData = submitData;
+    this._url = url;
   }
 
   request() {
@@ -22,7 +21,7 @@ class HubContact {
     this._feedbackData.errorMessage = '';
 
     $.ajax({
-      url: REQUEST_HUB_CONTACT_URL,
+      url: this._url,
       type: 'POST',
       data: JSON.stringify(this._submitData),
       contentType: "application/json; charset=utf-8",
@@ -46,4 +45,4 @@ class HubContact {
     window.scrollTo(0, 0);
   }
 
-}
+}

assets/js/webinar.js

@@ -0,0 +1,22 @@
+"use strict";
+
+class Webinar {
+
+  constructor(webinarId, lang, languageNames, data) {
+    $.getJSON(`${API_BASE_URL}/connect/contact/webinar/${webinarId}`).done(d => {
+      data.name = d.name;
+      data.language = languageNames[d.language];
+      data.dateStart = d.dateStart.replace(' ', 'T') + 'Z';
+      data.lead = d.metadata.lead[lang];
+      data.learnTitle = d.metadata.learn.title[lang];
+      data.learnItems = (d.metadata.learn.items).map(i => i[lang]);
+    }).fail(xhr => {
+      console.error('Fetching webinar data failed:', xhr.responseJSON?.message || xhr.statusText);
+    });
+  }
+
+  static formatBerlin(iso, opts) {
+    return new Intl.DateTimeFormat(document.documentElement.lang || 'en', { timeZone: 'Europe/Berlin', ...opts }).format(new Date(iso));
+  }
+
+}

config/_default/params.yaml

@@ -8,6 +8,15 @@ anniversaryBanner:
     - /paddle-checkout/
     - /hub/billing/
 
+webinar:
+  webinarId: "6a0427f47bf7eebc0"
+  banner:
+    enabled: false
+    excludePaths:
+      - /downloads-thanks/
+      - /paddle-checkout/
+      - /hub/billing/
+
 releases:
   exe:
     version: 1.19.2

content/webinar.de.html

@@ -0,0 +1,5 @@
+---
+title: "Webinar"
+description: "Nimm an unserem kostenlosen Live-Webinar teil und erfahre, wie du die Cloud-Daten deines Teams mit Zero-Knowledge-Verschlüsselung schützt."
+type: webinar
+---

content/webinar.en.html

@@ -0,0 +1,5 @@
+---
+title: "Webinar"
+description: "Join our free live webinar and learn how to protect your team's cloud data with zero-knowledge encryption."
+type: webinar
+---

i18n/de.yaml

@@ -1328,6 +1328,46 @@
 - id: success_story_read_link
   translation: "Erfolgsgeschichte lesen"
 
+# Live Webinar Banner
+- id: webinar_banner
+  translation: "Live-Webinar – <a class=\"whitespace-nowrap font-bold\" href=\"/de/webinar/\">Jetzt anmelden<i class=\"fa-regular fa-arrow-right ml-1\" aria-hidden=\"true\"></i></a>"
+
+# Webinar Form
+- id: webinar_first_name
+  translation: "Vorname"
+- id: webinar_last_name
+  translation: "Nachname"
+- id: webinar_email
+  translation: "E-Mail-Adresse"
+- id: webinar_company
+  translation: "Unternehmen / Organisation"
+- id: webinar_submit
+  translation: "Jetzt anmelden"
+- id: webinar_form_title
+  translation: "Sichere dir deinen Platz"
+- id: webinar_form_subtitle
+  translation: "Du erhältst die Bestätigung und vor dem Termin eine Erinnerung per E-Mail."
+- id: webinar_success_title
+  translation: "Du bist angemeldet!"
+- id: webinar_success_message
+  translation: "Vielen Dank für deine Anmeldung. Du erhältst in Kürze eine Bestätigungs-E-Mail mit den Webinar-Details."
+- id: webinar_success_inbox_hint
+  translation: "Bitte prüfe auch deinen Spam-Ordner."
+- id: webinar_details_title
+  translation: "Webinar-Details"
+- id: webinar_date_label
+  translation: "Datum"
+- id: webinar_time_label
+  translation: "Uhrzeit"
+- id: webinar_language_label
+  translation: "Sprache"
+- id: webinar_language_en
+  translation: "Englisch"
+- id: webinar_language_de
+  translation: "Deutsch"
+- id: webinar_accept_privacy
+  translation: "Ich akzeptiere die <a class=\"text-link\" href=\"/de/privacy/\">Datenschutzerklärung</a>."
+
 # Sale
 - id: sale_off
   translation: "Rabatt"

i18n/en.yaml

@@ -1367,6 +1367,46 @@
 - id: success_story_read_link
   translation: "Read success story"
 
+# Live Webinar Banner
+- id: webinar_banner
+  translation: "Live Webinar – <a class=\"whitespace-nowrap font-bold\" href=\"/webinar/\">Sign up<i class=\"fa-regular fa-arrow-right ml-1\" aria-hidden=\"true\"></i></a>"
+
+# Webinar Form
+- id: webinar_first_name
+  translation: "First Name"
+- id: webinar_last_name
+  translation: "Last Name"
+- id: webinar_email
+  translation: "Email Address"
+- id: webinar_company
+  translation: "Company / Organization"
+- id: webinar_submit
+  translation: "Register Now"
+- id: webinar_form_title
+  translation: "Reserve your seat"
+- id: webinar_form_subtitle
+  translation: "We'll email you a confirmation and a reminder before the session."
+- id: webinar_success_title
+  translation: "You're registered!"
+- id: webinar_success_message
+  translation: "Thank you for registering. You will receive a confirmation email with the webinar details shortly."
+- id: webinar_success_inbox_hint
+  translation: "Please also check your spam folder."
+- id: webinar_details_title
+  translation: "Webinar Details"
+- id: webinar_date_label
+  translation: "Date"
+- id: webinar_time_label
+  translation: "Time"
+- id: webinar_language_label
+  translation: "Language"
+- id: webinar_language_en
+  translation: "English"
+- id: webinar_language_de
+  translation: "German"
+- id: webinar_accept_privacy
+  translation: "I accept the <a class=\"text-link\" href=\"/privacy/\" target=\"_blank\">Privacy Policy</a>."
+
 # Sale
 - id: sale_off
   translation: "Off"

layouts/_default/baseof.html

@@ -76,13 +76,29 @@
       {{- end -}}
     {{- end -}}
     {{- .Scratch.Set "anniversaryBannerActive" $showAnniversaryBanner -}}
+    {{- $webinarBanner := .Site.Params.webinar.banner -}}
+    {{- $showWebinarBanner := false -}}
+    {{- if and $webinarBanner $webinarBanner.enabled -}}
+      {{- $showWebinarBanner = true -}}
+      {{- $currentPath := .RelPermalink -}}
+      {{- range $webinarBanner.excludePaths -}}
+        {{- if hasPrefix $currentPath . -}}
+          {{- $showWebinarBanner = false -}}
+        {{- end -}}
+      {{- end -}}
+    {{- end -}}
+    {{- .Scratch.Set "webinarBannerActive" $showWebinarBanner -}}
     {{ partial "nav.html" . }}
     {{- if $showAnniversaryBanner -}}
       {{ partial "anniversary-banner.html" . }}
     {{- end -}}
     {{- $topPadding := cond .IsHome "" "pt-12" -}}
-    {{- if $showAnniversaryBanner -}}
+    {{- if and $showWebinarBanner (not $showAnniversaryBanner) -}}
+      {{- $topPadding = cond .IsHome "" "pt-24 md:pt-18" -}}
+    {{- else if and (not $showWebinarBanner) $showAnniversaryBanner -}}
       {{- $topPadding = cond .IsHome "" "pt-28 md:pt-24" -}}
+    {{- else if and $showWebinarBanner $showAnniversaryBanner -}}
+      {{- $topPadding = cond .IsHome "" "pt-40 md:pt-32" -}}
     {{- end -}}
     <div class="bg-gray-100 min-h-[80vh] {{ $topPadding }}">
     <!-- Code that all your templates share, like a header -->

layouts/become-a-partner/single.html

@@ -2,13 +2,13 @@
   {{ partial "altcha-css.html" . }}
 {{ end }}
 {{ define "main" }}
-  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {firstName: '', lastName: '', email: '', phone: '', company: '', website: '', partnershipType: '', message: '', captcha: null, acceptNewsletter: false, formType: 'become-partner'}, acceptTerms: false, hubContact: null, captchaState: null}" x-init="hubContact = new HubContact($refs.form, feedbackData, submitData)" class="container py-12">
+  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {firstName: '', lastName: '', email: '', phone: '', company: '', website: '', partnershipType: '', message: '', captcha: null, acceptNewsletter: false, formType: 'become-partner'}, acceptTerms: false, apiForm: null, captchaState: null}" x-init="apiForm = new ApiForm($refs.form, feedbackData, submitData, API_BASE_URL + '/connect/contact/request-contact')" class="container py-12">
     <header class="mb-6">
       <h1 class="font-h1 mb-8">{{ .Title }}</h1>
       <p class="lead">{{ .Description }}</p>
     </header>
 
-    <form x-ref="form" @submit.prevent="hubContact.request(); $refs.captcha.reset()">
+    <form x-ref="form" @submit.prevent="apiForm.request(); $refs.captcha.reset()">
       <div x-show="!feedbackData.success" class="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
         <!-- Left Side - Partner Form -->
         <section class="white-box md:col-span-2">
@@ -218,17 +218,17 @@ <h3 class="font-h3">
   {{ if hugo.IsDevelopment }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" defer></script>
-    {{ $hubContactJs := resources.Get "js/hubcontact.js" }}
-    <script type="text/javascript" src="{{ $hubContactJs.RelPermalink }}" defer></script>
+    {{ $apiFormJs := resources.Get "js/apiform.js" }}
+    <script type="text/javascript" src="{{ $apiFormJs.RelPermalink }}" defer></script>
     {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
     <script type="module" src="{{ $altchaJs.RelPermalink }}" defer></script>
     {{ $altchaWorkerJs := resources.Get "js/altcha/worker.js" }}
     <script type="module" src="{{ $altchaWorkerJs.RelPermalink }}" defer></script>
   {{ else }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" integrity="{{ $newsletterJs.Data.Integrity }}" defer></script>
-    {{ $hubContactJs := resources.Get "js/hubcontact.js" | minify | fingerprint }}
-    <script type="text/javascript" src="{{ $hubContactJs.RelPermalink }}" integrity="{{ $hubContactJs.Data.Integrity }}" defer></script>
+    {{ $apiFormJs := resources.Get "js/apiform.js" | minify | fingerprint }}
+    <script type="text/javascript" src="{{ $apiFormJs.RelPermalink }}" integrity="{{ $apiFormJs.Data.Integrity }}" defer></script>
     {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
     <script type="module" src="{{ $altchaJs.RelPermalink }}" integrity="{{ $altchaJs.Data.Integrity }}" defer></script>
     {{ $altchaWorkerJs := resources.Get "js/altcha/worker.js" }}

layouts/book-a-demo/single.html

@@ -2,13 +2,13 @@
   {{ partial "altcha-css.html" . }}
 {{ end }}
 {{ define "main" }}
-  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {firstName: '', lastName: '', email: '', phone: '', company: '', interests: [], attendees: [], message: '', captcha: null, acceptNewsletter: false, formType: 'book-demo'}, acceptTerms: false, hubContact: null, captchaState: null}" x-init="hubContact = new HubContact($refs.form, feedbackData, submitData)" class="container py-12">
+  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {firstName: '', lastName: '', email: '', phone: '', company: '', interests: [], attendees: [], message: '', captcha: null, acceptNewsletter: false, formType: 'book-demo'}, acceptTerms: false, apiForm: null, captchaState: null}" x-init="apiForm = new ApiForm($refs.form, feedbackData, submitData, API_BASE_URL + '/connect/contact/request-contact')" class="container py-12">
     <header class="mb-6">
       <h1 class="font-h1 mb-8">{{ .Title }}</h1>
       <p class="lead">{{ .Description }}</p>
     </header>
 
-    <form x-ref="form" @submit.prevent="hubContact.request(); $refs.captcha.reset()">
+    <form x-ref="form" @submit.prevent="apiForm.request(); $refs.captcha.reset()">
       <div x-show="!feedbackData.success" class="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
         <!-- Left Side - Contact Form -->
         <section class="white-box md:col-span-2">
@@ -264,17 +264,17 @@ <h3 class="font-h3">
   {{ if hugo.IsDevelopment }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" defer></script>
-    {{ $hubContactJs := resources.Get "js/hubcontact.js" }}
-    <script type="text/javascript" src="{{ $hubContactJs.RelPermalink }}" defer></script>
+    {{ $apiFormJs := resources.Get "js/apiform.js" }}
+    <script type="text/javascript" src="{{ $apiFormJs.RelPermalink }}" defer></script>
     {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
     <script type="module" src="{{ $altchaJs.RelPermalink }}" defer></script>
     {{ $altchaWorkerJs := resources.Get "js/altcha/worker.js" }}
     <script type="module" src="{{ $altchaWorkerJs.RelPermalink }}" defer></script>
   {{ else }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" integrity="{{ $newsletterJs.Data.Integrity }}" defer></script>
-    {{ $hubContactJs := resources.Get "js/hubcontact.js" | minify | fingerprint }}
-    <script type="text/javascript" src="{{ $hubContactJs.RelPermalink }}" integrity="{{ $hubContactJs.Data.Integrity }}" defer></script>
+    {{ $apiFormJs := resources.Get "js/apiform.js" | minify | fingerprint }}
+    <script type="text/javascript" src="{{ $apiFormJs.RelPermalink }}" integrity="{{ $apiFormJs.Data.Integrity }}" defer></script>
     {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
     <script type="module" src="{{ $altchaJs.RelPermalink }}" integrity="{{ $altchaJs.Data.Integrity }}" defer></script>
     {{ $altchaWorkerJs := resources.Get "js/altcha/worker.js" }}

layouts/contact-sales/single.html

@@ -2,13 +2,13 @@
   {{ partial "altcha-css.html" . }}
 {{ end }}
 {{ define "main" }}
-  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {firstName: '', lastName: '', email: '', phone: '', website: '', topic: '', message: '', captcha: null, acceptNewsletter: false, formType: 'contact-sales'}, acceptTerms: false, hubContact: null, captchaState: null}" x-init="hubContact = new HubContact($refs.form, feedbackData, submitData)" class="container py-12">
+  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {firstName: '', lastName: '', email: '', phone: '', website: '', topic: '', message: '', captcha: null, acceptNewsletter: false, formType: 'contact-sales'}, acceptTerms: false, apiForm: null, captchaState: null}" x-init="apiForm = new ApiForm($refs.form, feedbackData, submitData, API_BASE_URL + '/connect/contact/request-contact')" class="container py-12">
     <header class="mb-6">
       <h1 class="font-h1 mb-8">{{ .Title }}</h1>
       <p class="lead">{{ .Description }}</p>
     </header>
 
-    <form x-ref="form" @submit.prevent="hubContact.request(); $refs.captcha.reset()">
+    <form x-ref="form" @submit.prevent="apiForm.request(); $refs.captcha.reset()">
       <div x-show="!feedbackData.success" class="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
         <!-- Left Side - Contact Form -->
         <section class="white-box md:col-span-2">
@@ -206,17 +206,17 @@ <h3 class="font-h3">
   {{ if hugo.IsDevelopment }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" defer></script>
-    {{ $hubContactJs := resources.Get "js/hubcontact.js" }}
-    <script type="text/javascript" src="{{ $hubContactJs.RelPermalink }}" defer></script>
+    {{ $apiFormJs := resources.Get "js/apiform.js" }}
+    <script type="text/javascript" src="{{ $apiFormJs.RelPermalink }}" defer></script>
     {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
     <script type="module" src="{{ $altchaJs.RelPermalink }}" defer></script>
     {{ $altchaWorkerJs := resources.Get "js/altcha/worker.js" }}
     <script type="module" src="{{ $altchaWorkerJs.RelPermalink }}" defer></script>
   {{ else }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" integrity="{{ $newsletterJs.Data.Integrity }}" defer></script>
-    {{ $hubContactJs := resources.Get "js/hubcontact.js" | minify | fingerprint }}
-    <script type="text/javascript" src="{{ $hubContactJs.RelPermalink }}" integrity="{{ $hubContactJs.Data.Integrity }}" defer></script>
+    {{ $apiFormJs := resources.Get "js/apiform.js" | minify | fingerprint }}
+    <script type="text/javascript" src="{{ $apiFormJs.RelPermalink }}" integrity="{{ $apiFormJs.Data.Integrity }}" defer></script>
     {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
     <script type="module" src="{{ $altchaJs.RelPermalink }}" integrity="{{ $altchaJs.Data.Integrity }}" defer></script>
     {{ $altchaWorkerJs := resources.Get "js/altcha/worker.js" }}

layouts/partials/nav.html

@@ -4,6 +4,11 @@
 {{- $backgroundColor := cond .IsHome "bg-dark" "bg-white" -}}
 {{- $currentRelPermalink := .RelPermalink -}}
 <nav class="w-full max-h-screen {{ $textColor }} fixed {{ $backgroundColor }} shadow-sm z-50">
+  {{- if .Scratch.Get "webinarBannerActive" -}}
+  <div class="w-full bg-primary text-center text-sm text-white p-0.5">
+    <p>{{ i18n "webinar_banner" | safeHTML }}</p>
+  </div>
+  {{- end -}}
   <div class="flex justify-between items-stretch w-full lg:px-8">
     <!-- Regular Navigation -->
     <div class="flex items-stretch">
@@ -113,7 +118,7 @@
   </div>
 
   <!-- Smartphone Navigation -->
-  <div :class="isNavOpen ? 'block' : 'hidden'" x-cloak class="lg:hidden max-h-[calc(100vh-48px)] overflow-y-auto">
+  <div :class="isNavOpen ? 'block' : 'hidden'" x-cloak class="lg:hidden {{ cond (.Scratch.Get "webinarBannerActive") "max-h-[calc(100vh-72px)]" "max-h-[calc(100vh-48px)]" }} overflow-y-auto">
     {{- range .Site.Data.nav }}
     {{- if .Dropdown }}
     <div class="uppercase tracking-wide text-gray-500 text-xs font-bold p-2">