Add whitepaper section with gated downloads

content/whitepaper/_index.de.html

@@ -0,0 +1,5 @@
+---
+title: "Whitepaper"
+type: "whitepaper"
+description: "Ausführliche Whitepaper zu Zero-Knowledge-Verschlüsselung, DSGVO-konformer Zusammenarbeit und der Kontrolle über deine Daten in der Cloud."
+---

content/whitepaper/_index.en.html

@@ -0,0 +1,5 @@
+---
+title: "Whitepapers"
+type: "whitepaper"
+description: "In-depth whitepapers on zero-knowledge encryption, GDPR-compliant collaboration, and how organizations keep control of their data in the cloud."
+---

content/whitepaper/gdpr-compliant-cloud-collaboration.de.html

@@ -0,0 +1,12 @@
+---
+title: "DSGVO-konforme Cloud-Zusammenarbeit"
+type: "whitepaper"
+description: "Ein praktischer Leitfaden für die Zusammenarbeit in der Cloud unter Einhaltung der DSGVO: Verschlüsselung, Zugriffskontrolle und Nachvollziehbarkeit."
+cardtitle: "DSGVO-konforme Cloud-Zusammenarbeit"
+cardtext: "Wie Organisationen sensible Dateien in der Cloud teilen, ohne Datenschutzrecht zu verletzen: von rechtlichen Grundlagen bis zu technischen Maßnahmen."
+comingsoon: false
+weight: 20
+espoId: "" # ID of the CWhitepaper record in EspoCRM
+
+abstract: "Dieses Whitepaper zeigt, welche DSGVO-Pflichten gelten, wenn Teams in der Cloud mit personenbezogenen Daten arbeiten, und wie Ende-zu-Ende-Verschlüsselung und granulare Zugriffskontrolle Compliance-Anforderungen in gelebte Praxis übersetzen."
+---

content/whitepaper/gdpr-compliant-cloud-collaboration.en.html

@@ -0,0 +1,12 @@
+---
+title: "GDPR-Compliant Cloud Collaboration"
+type: "whitepaper"
+description: "A practical guide to collaborating in the cloud while meeting GDPR requirements: encryption, access control, and audit trails."
+cardtitle: "GDPR-Compliant Cloud Collaboration"
+cardtext: "How organizations share sensitive files in the cloud without violating data protection law, from legal basics to technical safeguards."
+comingsoon: false
+weight: 20
+espoId: "" # ID of the CWhitepaper record in EspoCRM
+
+abstract: "This whitepaper walks through the GDPR obligations that apply when teams collaborate on personal data in the cloud, and shows how end-to-end encryption and granular access control turn compliance requirements into everyday practice."
+---

content/whitepaper/zero-knowledge-cloud-encryption.de.html

@@ -0,0 +1,12 @@
+---
+title: "Zero-Knowledge-Verschlüsselung in der Cloud"
+type: "whitepaper"
+description: "Erfahre, wie Zero-Knowledge-Ende-zu-Ende-Verschlüsselung die Cloud-Daten deiner Organisation schützt, selbst vor deinem Cloud-Anbieter."
+cardtitle: "Zero-Knowledge-Verschlüsselung in der Cloud"
+cardtext: "Warum clientseitige Verschlüsselung der einzige Weg ist, die Kontrolle über deine Daten in der Cloud zu behalten: Architektur, Bedrohungsmodell und praktische Einführung."
+comingsoon: false
+weight: 10
+espoId: "" # ID of the CWhitepaper record in EspoCRM
+
+abstract: "Dieses Whitepaper erklärt die Architektur hinter Zero-Knowledge-Verschlüsselung, vergleicht sie mit serverseitigen Alternativen und zeigt, wie Organisationen sie einführen, ohne bestehende Arbeitsabläufe zu stören."
+---

content/whitepaper/zero-knowledge-cloud-encryption.en.html

@@ -0,0 +1,12 @@
+---
+title: "Zero-Knowledge Encryption in the Cloud"
+type: "whitepaper"
+description: "Learn how zero-knowledge, end-to-end encryption protects your organization's cloud data, even from your cloud provider."
+cardtitle: "Zero-Knowledge Encryption in the Cloud"
+cardtext: "Why client-side encryption is the only way to keep control of your data in the cloud: architecture, threat model, and practical rollout."
+comingsoon: false
+weight: 10
+espoId: "" # ID of the CWhitepaper record in EspoCRM
+
+abstract: "This whitepaper explains the architecture behind zero-knowledge encryption, compares it to server-side alternatives, and shows how organizations roll it out without disrupting existing workflows."
+---

data/nav.yaml

@@ -20,6 +20,7 @@
   - Path: "/guides"
   - Path: "/comparisons"
   - Path: "/compliance"
+  - Path: "/whitepaper"
   - Separator: true
   - Path: "/success-stories"
   - Path: "/coop"

i18n/de.yaml

@@ -1416,7 +1416,7 @@
   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
+- id: success_inbox_hint
   translation: "Bitte prüfe auch deinen Spam-Ordner."
 - id: webinar_details_title
   translation: "Webinar-Details"
@@ -1441,6 +1441,32 @@
 - id: webinar_none_newsletter_instruction
   translation: "Abonniere unseren Hub-Newsletter und wir informieren dich, sobald das nächste Webinar feststeht."
 
+# Whitepaper
+- id: whitepaper_eyebrow
+  translation: "Whitepaper"
+- id: whitepaper_first_name
+  translation: "Vorname"
+- id: whitepaper_last_name
+  translation: "Nachname"
+- id: whitepaper_email
+  translation: "E-Mail-Adresse"
+- id: whitepaper_company
+  translation: "Unternehmen / Organisation"
+- id: whitepaper_submit
+  translation: "Download"
+- id: whitepaper_success_title
+  translation: "Vielen Dank!"
+- id: whitepaper_success_message
+  translation: "Wir haben dir den Download-Link per E-Mail geschickt."
+- id: whitepaper_contact_title
+  translation: "Fragen zu unseren Whitepapern?"
+- id: whitepaper_contact_description
+  translation: "Du möchtest tiefer in ein Thema einsteigen oder besprechen, was es für deine Organisation bedeutet? Unser Team hilft gerne weiter."
+- id: whitepaper_contact_button
+  translation: "Kontakt aufnehmen"
+- id: whitepaper_more
+  translation: "Weitere Whitepaper"
+
 # Sale
 - id: nav_promotion
   translation: ":sunny: Summer Sale: 50 %* Rabatt auf Cryptomator – Bis&nbsp;zum&nbsp;07.&nbsp;Juli!&nbsp;<a class=\"whitespace-nowrap font-bold\" href=\"/de/blog/2026/07/01/summer-sale-2026/\">Mehr erfahren&nbsp;<span aria-hidden=\"true\">&rarr;</span></a>"

i18n/en.yaml

@@ -1449,7 +1449,7 @@
   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
+- id: success_inbox_hint
   translation: "Please also check your spam folder."
 - id: webinar_details_title
   translation: "Webinar Details"
@@ -1474,6 +1474,32 @@
 - id: webinar_none_newsletter_instruction
   translation: "Subscribe to our Hub mailing list and we'll let you know as soon as the next webinar is scheduled."
 
+# Whitepaper
+- id: whitepaper_eyebrow
+  translation: "Whitepaper"
+- id: whitepaper_first_name
+  translation: "First Name"
+- id: whitepaper_last_name
+  translation: "Last Name"
+- id: whitepaper_email
+  translation: "Email Address"
+- id: whitepaper_company
+  translation: "Company / Organization"
+- id: whitepaper_submit
+  translation: "Download"
+- id: whitepaper_success_title
+  translation: "Thank You!"
+- id: whitepaper_success_message
+  translation: "We've sent the download link to your email address."
+- id: whitepaper_contact_title
+  translation: "Questions About Our Whitepapers?"
+- id: whitepaper_contact_description
+  translation: "Want to dive deeper into a topic or discuss how it applies to your organization? Our team is happy to help."
+- id: whitepaper_contact_button
+  translation: "Contact Us"
+- id: whitepaper_more
+  translation: "More Whitepapers"
+
 # Sale
 - id: nav_promotion
   translation: ":sunny: Summer Sale: 50%* Off Cryptomator – Until&nbsp;July&nbsp;7!&nbsp;<a class=\"whitespace-nowrap font-bold\" href=\"/blog/2026/07/01/summer-sale-2026/\">Learn More&nbsp;<span aria-hidden=\"true\">&rarr;</span></a>"

layouts/partials/whitepaper-cover.html

@@ -0,0 +1,18 @@
+{{/* Proportional cover: all sizes derive from the container width (cqw), so
+     small teaser covers render as exact scale-downs of the large hero cover. */}}
+<div class="@container">
+  <div class="relative aspect-[3/4] w-full rounded-md shadow-md bg-primary overflow-hidden p-[7.3cqw] pl-[9.4cqw] flex flex-col text-left">
+    <div class="absolute inset-y-0 left-0 w-[2cqw] bg-black/15"></div>
+    <div class="absolute inset-y-0 left-[2cqw] w-px bg-black/20"></div>
+    <div class="absolute inset-y-0 left-[calc(2cqw+1px)] w-px bg-white/30"></div>
+    <div class="relative flex items-center gap-[2cqw] mb-[10.4cqw]">
+      <img src="/img/logo.svg" class="h-[6.25cqw]" alt=""/>
+      <span class="font-headline font-bold text-white text-[3.65cqw] pb-px">CRYPTOMATOR</span>
+    </div>
+    <p class="relative uppercase tracking-widest text-white/70 text-[3.125cqw] mb-[3.1cqw]">
+      {{ i18n "whitepaper_eyebrow" }}
+    </p>
+    <p class="relative font-headline text-white text-[6.25cqw]">{{ .page.Title }}</p>
+    <p class="relative mt-auto text-white/70 text-[3.125cqw]">cryptomator.org</p>
+  </div>
+</div>

layouts/partials/whitepaper-grid.html

@@ -0,0 +1,35 @@
+<section class="mb-20">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-16">
+    {{ range .page.Pages.ByWeight }}
+      <article class="relative h-full">
+        {{ if .Params.comingsoon }}
+          <div class="absolute top-4 left-6 z-20">
+            <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase bg-white text-primary">
+              <i class="fa-solid fa-hourglass-half"></i>
+              <span>{{ i18n "coming_soon" }}</span>
+            </div>
+          </div>
+          <div class="h-full flex flex-col">
+            <div class="opacity-60">
+              {{ partial "whitepaper-cover.html" (dict "page" .) }}
+            </div>
+            <h2 class="font-h3 mt-6 mb-2 text-gray-600">{{ .Params.cardtitle }}</h2>
+            <p class="font-p text-sm leading-relaxed text-gray-500 flex-1">
+              {{ .Params.cardtext }}
+            </p>
+          </div>
+        {{ else }}
+          <a href="{{ .RelPermalink }}" class="group h-full flex flex-col hover:no-underline">
+            <div class="transition duration-300 ease-out group-hover:-translate-y-1.5 group-hover:drop-shadow-lg">
+              {{ partial "whitepaper-cover.html" (dict "page" .) }}
+            </div>
+            <h2 class="font-h3 mt-6 mb-2 text-dark group-hover:text-primary transition-colors duration-200">{{ .Params.cardtitle }}</h2>
+            <p class="font-p text-sm leading-relaxed text-gray-700 flex-1">
+              {{ .Params.cardtext }}
+            </p>
+          </a>
+        {{ end }}
+      </article>
+    {{ end }}
+  </div>
+</section>

layouts/webinar/single.html

@@ -159,7 +159,7 @@ <h3 class="font-h3">
             </p>
             <p class="text-sm text-gray-500 inline-flex items-center gap-2">
               <i class="fa-solid fa-envelope" aria-hidden="true"></i>
-              {{ i18n "webinar_success_inbox_hint" }}
+              {{ i18n "success_inbox_hint" }}
             </p>
           </div>
         </section>

layouts/whitepaper/list.html

@@ -0,0 +1,21 @@
+{{ define "main" }}
+  <div class="container py-12">
+    <section class="text-center mb-20">
+      <h1 class="font-h1 mb-8">{{ .Title }}</h1>
+      <p class="lead mb-6 max-w-4xl mx-auto">{{ .Description }}</p>
+    </section>
+
+    {{ partial "whitepaper-grid.html" (dict "page" .) }}
+
+    <section class="text-center mt-20 p-8">
+      <h3 class="font-h2 mb-4 text-dark">{{ i18n "whitepaper_contact_title" }}</h3>
+      <p class="font-p text-gray-700 mb-6 max-w-2xl mx-auto">
+        {{ i18n "whitepaper_contact_description" }}
+      </p>
+      <a href="{{ .Site.LanguagePrefix }}/contact-sales/" class="btn btn-outline-primary px-8">
+        <i class="fa-solid fa-envelope mr-2"></i>
+        {{ i18n "whitepaper_contact_button" }}
+      </a>
+    </section>
+  </div>
+{{ end }}

layouts/whitepaper/single.html

@@ -0,0 +1,129 @@
+{{ define "preloads" }}
+  {{ if not .Params.comingsoon }}
+    {{ partial "altcha-css.html" . }}
+  {{ end }}
+{{ end }}
+{{ define "main" }}
+  <div {{ if not .Params.comingsoon }}x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {whitepaperId: '{{ .Params.espoId }}', firstName: '', lastName: '', email: '', company: '', captcha: null, acceptNewsletter: false}, acceptTerms: false, apiForm: null, captchaState: null}" x-init="apiForm = new ApiForm($refs.form, feedbackData, submitData, API_BASE_URL + '/connect/contact/request-whitepaper')"{{ end }}>
+    <section class="container py-12 md:py-16">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16 items-center">
+        <div>
+          <div class="mb-4">
+            <span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium uppercase tracking-wide">{{ i18n "whitepaper_eyebrow" }}</span>
+          </div>
+          <h1 class="font-h1 mb-6">{{ .Title }}</h1>
+
+          <p class="lead mb-10">{{ .Params.abstract }}</p>
+
+          {{ if not .Params.comingsoon }}
+          <form x-ref="form" @submit.prevent="apiForm.request(); $refs.captcha.reset()">
+            <div x-show="!feedbackData.success" class="max-w-xl">
+              <div class="grid grid-cols-2 gap-6 mb-6">
+                <div class="col-span-2 md:col-span-1">
+                  <label for="firstName" class="label-uppercase mb-2">
+                    {{ i18n "whitepaper_first_name" }} <span class="text-red-500" aria-label="required">*</span>
+                  </label>
+                  <input type="text" id="firstName" name="firstName" x-model="submitData.firstName" class="block input-box w-full" maxlength="100" required aria-required="true" @blur="$el.classList.add('show-invalid')">
+                </div>
+                <div class="col-span-2 md:col-span-1">
+                  <label for="lastName" class="label-uppercase mb-2">
+                    {{ i18n "whitepaper_last_name" }} <span class="text-red-500" aria-label="required">*</span>
+                  </label>
+                  <input type="text" id="lastName" name="lastName" x-model="submitData.lastName" class="block input-box w-full" maxlength="100" required aria-required="true" @blur="$el.classList.add('show-invalid')">
+                </div>
+                <div class="col-span-2 md:col-span-1">
+                  <label for="company" class="label-uppercase mb-2">
+                    {{ i18n "whitepaper_company" }}
+                  </label>
+                  <input type="text" id="company" name="company" x-model="submitData.company" class="block input-box w-full" maxlength="200">
+                </div>
+                <div class="col-span-2 md:col-span-1">
+                  <label for="email" class="label-uppercase mb-2">
+                    {{ i18n "whitepaper_email" }} <span class="text-red-500" aria-label="required">*</span>
+                  </label>
+                  <input type="email" id="email" name="email" x-model="submitData.email" class="block input-box w-full" required aria-required="true" @blur="$el.classList.add('show-invalid')">
+                </div>
+              </div>
+
+              <p class="font-p text-sm mb-2">
+                {{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_privacy" | safeHTML)) }}
+              </p>
+              <p class="font-p text-sm mb-6">
+                {{ partial "checkbox.html" (dict "context" . "alpineVariable" "submitData.acceptNewsletter" "label" (i18n "accept_hub_newsletter_optional")) }}
+              </p>
+
+              <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
+              <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64" data-umami-event="whitepaper-form" x-cloak>
+                <i :class="{'fa-download': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
+                {{ i18n "whitepaper_submit" }}
+              </button>
+              {{ $challengeUrl := printf "%s/connect/contact/challenge" .Site.Params.apiBaseUrl }}
+              {{ partial "captcha.html" (dict "challengeUrl" $challengeUrl "captchaPayload" "submitData.captcha" "captchaState" "captchaState") }}
+            </div>
+
+            <div x-show="feedbackData.success" class="max-w-xl white-box" x-cloak>
+              <div class="flex flex-col items-center justify-center gap-4 text-center px-4 py-5 md:p-6">
+                <i class="fa-solid fa-check-circle text-7xl text-secondary" aria-hidden="true"></i>
+                <h3 class="font-h3">
+                  {{ i18n "whitepaper_success_title" }}
+                </h3>
+                <p class="font-p max-w-md text-gray-600">
+                  {{ i18n "whitepaper_success_message" }}
+                </p>
+                <p class="text-sm text-gray-500 inline-flex items-center gap-2">
+                  <i class="fa-solid fa-envelope" aria-hidden="true"></i>
+                  {{ i18n "success_inbox_hint" }}
+                </p>
+              </div>
+            </div>
+          </form>
+          {{ end }}
+        </div>
+
+        <figure class="max-w-sm w-full mx-auto drop-shadow-xl">
+          {{ if .Params.cover }}
+            <img class="w-full" src="{{ .Params.cover }}" alt="{{ .Params.cardtitle }}">
+          {{ else }}
+            {{ partial "whitepaper-cover.html" (dict "page" .) }}
+          {{ end }}
+        </figure>
+      </div>
+    </section>
+
+    {{ $others := where (where .CurrentSection.RegularPages "Permalink" "ne" .Permalink) "Params.comingsoon" "ne" true }}
+    {{ with $others }}
+      <section class="container pb-24 pt-4">
+        <h2 class="font-h2 mb-8">
+          <a class="text-link" href="{{ $.CurrentSection.RelPermalink }}">{{ i18n "whitepaper_more" }} <i class="fa-solid fa-arrow-right ml-1" aria-hidden="true"></i></a>
+        </h2>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-10">
+          {{ range . }}
+            <a href="{{ .RelPermalink }}" class="group block hover:no-underline" aria-label="{{ .Params.cardtitle }}">
+              <div class="transition duration-300 ease-out group-hover:-translate-y-1.5 group-hover:drop-shadow-lg">
+                {{ partial "whitepaper-cover.html" (dict "page" .) }}
+              </div>
+            </a>
+          {{ end }}
+        </div>
+      </section>
+    {{ end }}
+  </div>
+{{ end }}
+{{ define "script" }}
+  {{ if .Params.comingsoon }}
+  {{ else if hugo.IsDevelopment }}
+    {{ $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 }}
+    {{ $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" }}
+    <script type="module" src="{{ $altchaWorkerJs.RelPermalink }}" integrity="{{ $altchaWorkerJs.Data.Integrity }}" defer></script>
+  {{ end }}
+{{ end }}