diff --git a/assets/css/custom.css b/assets/css/custom.css index d011359f7..e506cc033 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -259,6 +259,10 @@ ul.list-primary li::marker { @apply rounded-sm shadow-sm bg-white; } +.compare-th { + @apply @min-[72rem]:sticky @min-[72rem]:top-[var(--nav-height,48px)] z-10 whitespace-nowrap border-b border-gray-200 bg-white align-bottom font-medium first:rounded-tl-sm last:rounded-tr-sm; +} + .input-box { @apply rounded-sm border border-gray-300 focus:ring-0 focus:border-secondary px-3 py-2; } @@ -317,9 +321,9 @@ textarea:read-only { left: 50%; } -/* offsetting anchor targets to adjust for fixed navbar; the offset grows when the - nav banner strip (.nav-promo-strip) is rendered, detected via :has() below; - tooltips carry an id only for aria-describedby, not as scroll anchors */ +/* offsetting anchor targets to adjust for fixed navbar; the offset grows with the + nav banner strip, see the :has() rule below; tooltips carry an id only for + aria-describedby, not as scroll anchors */ [id]:not([role="tooltip"])::before { content: ''; display: block; @@ -328,6 +332,9 @@ textarea:read-only { visibility: hidden; } -body:has(.nav-promo-strip) { +/* The webinar strip stays in the DOM when Alpine hides it, so the marker class — + not its presence — decides whether the nav is one strip taller. */ +body:has(.nav-promo-strip:not(.nav-promo-strip-collapsed)) { --anchor-offset: 138px; + --nav-height: 72px; } diff --git a/data/pricing_comparison.yaml b/data/pricing_comparison.yaml new file mode 100644 index 000000000..a6d3c338c --- /dev/null +++ b/data/pricing_comparison.yaml @@ -0,0 +1,107 @@ +# Shared across languages: a plan capability is a product fact, not a +# translation. Booleans render as a check or a dash, numbers render as they are, +# and every other cell is an i18n key. +- SectionKey: "pricing_compare_section_basics" + Rows: + - LabelKey: "pricing_compare_seats" + Cryptomator: 1 + Community: 5 + Standard: "pricing_compare_seats_standard" + Enterprise: "pricing_compare_seats_enterprise" + - LabelKey: "pricing_compare_unlimited_vaults" + Cryptomator: true + Community: true + Standard: true + Enterprise: true + - LabelKey: "pricing_compare_any_cloud" + TooltipKey: "pricing_individual_benefit_2_tooltip" + Cryptomator: true + Community: true + Standard: true + Enterprise: true + - LabelKey: "pricing_compare_desktop_access" + Cryptomator: true + Community: true + Standard: true + Enterprise: true +- SectionKey: "pricing_compare_section_collaboration" + Rows: + - LabelKey: "pricing_compare_user_management" + Cryptomator: false + Community: true + Standard: true + Enterprise: true + - LabelKey: "pricing_compare_key_management" + Cryptomator: false + Community: true + Standard: true + Enterprise: true + - LabelKey: "pricing_compare_mobile_access" + Cryptomator: "pricing_compare_optional_upgrade" + Community: "pricing_compare_optional_upgrade" + Standard: true + Enterprise: true +- SectionKey: "pricing_compare_section_hosting" + Rows: + - LabelKey: "pricing_compare_self_hosted" + Cryptomator: false + Community: true + Standard: true + Enterprise: true + - LabelKey: "pricing_compare_managed_hosting" + TooltipKey: "pricing_compare_managed_hosting_tooltip" + Cryptomator: false + Community: false + Standard: true + Enterprise: true +- SectionKey: "pricing_compare_section_security" + Rows: + - LabelKey: "pricing_compare_audit_logs" + Cryptomator: false + Community: false + Standard: true + Enterprise: true + - LabelKey: "pricing_compare_emergency_access" + Cryptomator: false + Community: false + Standard: false + Enterprise: true + - LabelKey: "pricing_compare_security_questionnaires" + Cryptomator: false + Community: false + Standard: false + Enterprise: true +- SectionKey: "pricing_compare_section_procurement" + Rows: + - LabelKey: "pricing_compare_contract_terms" + Cryptomator: false + Community: false + Standard: false + Enterprise: true + - LabelKey: "pricing_compare_procurement" + Cryptomator: false + Community: false + Standard: false + Enterprise: true +- SectionKey: "pricing_compare_section_support" + Rows: + - LabelKey: "pricing_compare_community_support" + Cryptomator: true + Community: true + Standard: true + Enterprise: true + - LabelKey: "pricing_compare_email_support" + Cryptomator: false + Community: false + Standard: true + Enterprise: "pricing_compare_priority" + - LabelKey: "pricing_compare_expert_training" + Cryptomator: false + Community: false + Standard: false + Enterprise: true + - LabelKey: "pricing_compare_account_manager" + Cryptomator: false + Community: false + Standard: false + Enterprise: true diff --git a/i18n/de.yaml b/i18n/de.yaml index 1ee1fbc16..2ec911641 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -1126,6 +1126,8 @@ translation: "Community" - id: pricing_hub_community_subtitle translation: "Kostenlos und Open Source für kleine Teams. Auf eigener Infrastruktur deployen mit voller Kontrolle über die Daten." +- id: pricing_hub_community_price_description + translation: "Self-Hosted" - id: pricing_hub_community_benefit_1 translation: "Inklusive 5 Sitze" - id: pricing_hub_community_benefit_2 @@ -1138,7 +1140,7 @@ - id: pricing_hub_standard_price_description translation: "pro Sitz, pro Monat" - id: pricing_hub_standard_benefit_1 - translation: "Alle Cryptomator-Features, plus:" + translation: "Alle Cryptomator-Features" - id: pricing_hub_standard_benefit_2 translation: "Benutzer- und Gruppenverwaltung" - id: pricing_hub_standard_benefit_3 @@ -1156,10 +1158,14 @@ translation: "Enterprise" - id: pricing_hub_enterprise_subtitle translation: "Für großflächige Deployments mit Premium-Support." +- id: pricing_hub_enterprise_price_prefix + translation: "ab" - id: pricing_hub_enterprise_price - translation: "Individuell" + translation: "10.000 €" +- id: pricing_hub_enterprise_price_period + translation: "/Jahr" - id: pricing_hub_enterprise_price_description - translation: "maßgeschneiderte Preise" + translation: "mindestens 50 Sitze" - id: pricing_hub_enterprise_cta translation: "Kontaktiere uns" - id: pricing_hub_enterprise_benefit_1 @@ -1173,6 +1179,87 @@ - id: pricing_hub_enterprise_benefit_5 translation: "Vorrangiger E-Mail-Support" +- id: pricing_compare_title + translation: "Alle Funktionen im Vergleich" +- id: pricing_compare_subtitle + translation: "Finde den passenden Plan – Funktion für Funktion." +- id: pricing_compare_choose + translation: "Wähle zwei Pläne für den Vergleich." +- id: pricing_compare_first_plan + translation: "Erster Plan" +- id: pricing_compare_second_plan + translation: "Zweiter Plan" +- id: more_information + translation: "Weitere Informationen" +- id: pricing_compare_features + translation: "Funktionen" +- id: pricing_compare_included + translation: "Enthalten" +- id: pricing_compare_not_included + translation: "Nicht enthalten" +- id: pricing_compare_hub_self_hosted_cta + translation: "Einrichten" +- id: pricing_compare_hub_managed_cta + translation: "Gratis testen" +- id: pricing_compare_managed_hosting_tooltip + translation: "Gewartet und aktualisiert von unserem Team in einem ISO/IEC 27001:2022-zertifizierten Rechenzentrum in der EU." +- id: pricing_compare_section_basics + translation: "Grundlagen" +- id: pricing_compare_section_collaboration + translation: "Teamarbeit" +- id: pricing_compare_section_hosting + translation: "Hosting" +- id: pricing_compare_section_security + translation: "Sicherheit & Compliance" +- id: pricing_compare_section_procurement + translation: "Beschaffung & Verträge" +- id: pricing_compare_section_support + translation: "Support" +- id: pricing_compare_seats + translation: "Sitze" +- id: pricing_compare_unlimited_vaults + translation: "Unbegrenzte Tresore" +- id: pricing_compare_any_cloud + translation: "Kompatibel mit jedem Cloud-Speicher" +- id: pricing_compare_desktop_access + translation: "Voller Zugriff über Desktop-App" +- id: pricing_compare_user_management + translation: "Benutzer- und Gruppenverwaltung" +- id: pricing_compare_key_management + translation: "Zero-Knowledge-Schlüsselverwaltung" +- id: pricing_compare_mobile_access + translation: "Voller Zugriff über Mobile-Apps" +- id: pricing_compare_self_hosted + translation: "Self-Hosted-Deployment" +- id: pricing_compare_managed_hosting + translation: "Managed Hosting verfügbar" +- id: pricing_compare_audit_logs + translation: "Audit-Logs" +- id: pricing_compare_emergency_access + translation: "Notfallzugriff" +- id: pricing_compare_security_questionnaires + translation: "Unterstützung bei Sicherheitsfragebögen" +- id: pricing_compare_contract_terms + translation: "Individuelle Vertragsbedingungen" +- id: pricing_compare_procurement + translation: "Unterstützung im Beschaffungsprozess" +- id: pricing_compare_community_support + translation: "Community-Support" +- id: pricing_compare_email_support + translation: "E-Mail-Support" +- id: pricing_compare_expert_training + translation: "Schulungen und Unterstützung durch Experten" +- id: pricing_compare_account_manager + translation: "Dedizierter Kundenbetreuer" +- id: pricing_compare_seats_standard + translation: "3+" +- id: pricing_compare_seats_enterprise + translation: "50+" +- id: pricing_compare_optional_upgrade + translation: "Optionales Upgrade" +- id: pricing_compare_priority + translation: "Vorrangig" + - id: pricing_support_us_title translation: "Möchtest du unser Open-Source-Projekt unterstützen?" - id: pricing_support_us_description diff --git a/i18n/en.yaml b/i18n/en.yaml index 2ce7906ca..38d72a2da 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -1127,6 +1127,8 @@ translation: "Community" - id: pricing_hub_community_subtitle translation: "Free and open source for small teams. Deploy on your own infrastructure with full control over your data." +- id: pricing_hub_community_price_description + translation: "self-hosted" - id: pricing_hub_community_benefit_1 translation: "Includes 5 seats" - id: pricing_hub_community_benefit_2 @@ -1139,7 +1141,7 @@ - id: pricing_hub_standard_price_description translation: "per seat, per month" - id: pricing_hub_standard_benefit_1 - translation: "All Cryptomator features, plus:" + translation: "All Cryptomator features" - id: pricing_hub_standard_benefit_2 translation: "User and group management" - id: pricing_hub_standard_benefit_3 @@ -1157,10 +1159,14 @@ translation: "Enterprise" - id: pricing_hub_enterprise_subtitle translation: "For large-scale deployments with premium support." +- id: pricing_hub_enterprise_price_prefix + translation: "from" - id: pricing_hub_enterprise_price - translation: "Custom" + translation: "€10,000" +- id: pricing_hub_enterprise_price_period + translation: "/yr" - id: pricing_hub_enterprise_price_description - translation: "tailored pricing" + translation: "starts at 50 seats" - id: pricing_hub_enterprise_cta translation: "Contact Us" - id: pricing_hub_enterprise_benefit_1 @@ -1174,6 +1180,87 @@ - id: pricing_hub_enterprise_benefit_5 translation: "Priority email support" +- id: pricing_compare_title + translation: "Compare All Features" +- id: pricing_compare_subtitle + translation: "See which plan fits your needs, feature by feature." +- id: pricing_compare_choose + translation: "Choose two plans to compare." +- id: pricing_compare_first_plan + translation: "First plan" +- id: pricing_compare_second_plan + translation: "Second plan" +- id: more_information + translation: "More information" +- id: pricing_compare_features + translation: "Features" +- id: pricing_compare_included + translation: "Included" +- id: pricing_compare_not_included + translation: "Not included" +- id: pricing_compare_hub_self_hosted_cta + translation: "Deploy Now" +- id: pricing_compare_hub_managed_cta + translation: "Try for Free" +- id: pricing_compare_managed_hosting_tooltip + translation: "Maintained and updated by our team in an ISO/IEC 27001:2022 certified data center in the EU." +- id: pricing_compare_section_basics + translation: "Basics" +- id: pricing_compare_section_collaboration + translation: "Team Collaboration" +- id: pricing_compare_section_hosting + translation: "Hosting" +- id: pricing_compare_section_security + translation: "Security & Compliance" +- id: pricing_compare_section_procurement + translation: "Procurement & Contracts" +- id: pricing_compare_section_support + translation: "Support" +- id: pricing_compare_seats + translation: "Seats" +- id: pricing_compare_unlimited_vaults + translation: "Unlimited vaults" +- id: pricing_compare_any_cloud + translation: "Works with any cloud storage" +- id: pricing_compare_desktop_access + translation: "Full access via Desktop app" +- id: pricing_compare_user_management + translation: "User and group management" +- id: pricing_compare_key_management + translation: "Zero-knowledge key management" +- id: pricing_compare_mobile_access + translation: "Full access via Mobile apps" +- id: pricing_compare_self_hosted + translation: "Self-hosted deployment" +- id: pricing_compare_managed_hosting + translation: "Managed hosting available" +- id: pricing_compare_audit_logs + translation: "Audit logs" +- id: pricing_compare_emergency_access + translation: "Emergency Access" +- id: pricing_compare_security_questionnaires + translation: "Security questionnaire assistance" +- id: pricing_compare_contract_terms + translation: "Individual contract terms" +- id: pricing_compare_procurement + translation: "Procurement support" +- id: pricing_compare_community_support + translation: "Community support" +- id: pricing_compare_email_support + translation: "Email support" +- id: pricing_compare_expert_training + translation: "Expert training and assistance" +- id: pricing_compare_account_manager + translation: "Dedicated account manager" +- id: pricing_compare_seats_standard + translation: "3+" +- id: pricing_compare_seats_enterprise + translation: "50+" +- id: pricing_compare_optional_upgrade + translation: "Optional upgrade" +- id: pricing_compare_priority + translation: "Priority" + - id: pricing_support_us_title translation: "Want to support our open-source project?" - id: pricing_support_us_description diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 5aff3c9d4..b425605a5 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -11,7 +11,8 @@ {{- else if .Scratch.Get "webinarBannerActive" -}} {{- $webinarPath := printf "%s/webinar/" .Site.LanguagePrefix -}} -
+ {{- /* x-show keeps the strip in the DOM, so mark it collapsed for the :has() nav-offset rule in custom.css. */ -}} +

{{ i18n "webinar_banner" | safeHTML }} diff --git a/layouts/partials/pricing/comparison-action.html b/layouts/partials/pricing/comparison-action.html new file mode 100644 index 000000000..8a7cc4dc0 --- /dev/null +++ b/layouts/partials/pricing/comparison-action.html @@ -0,0 +1,13 @@ +{{- $page := .page }} +{{- if eq .plan.dataKey "Standard" }} + + {{ i18n "pricing_compare_hub_managed_cta" $page }} + + + {{ i18n "pricing_compare_hub_self_hosted_cta" $page }} + +{{- else }} + + {{ i18n .plan.ctaKey $page }} + +{{- end }} diff --git a/layouts/partials/pricing/comparison-price.html b/layouts/partials/pricing/comparison-price.html new file mode 100644 index 000000000..036b2279c --- /dev/null +++ b/layouts/partials/pricing/comparison-price.html @@ -0,0 +1,14 @@ +{{- if eq .plan.dataKey "Standard" }} +

+{{- else }} +

+ {{- /* The space after the prefix sits inside its span so it takes the label size, not the price size. */}} + {{- with .plan.pricePrefixKey }}{{ i18n . $.page }} {{ end -}} + {{ i18n .plan.priceKey .page }} + {{- with .plan.pricePeriodKey }}{{ i18n . $.page }}{{ end -}} +

+{{- end }} +{{- if .plan.vatExcluded }} +

{{ i18n "pricing_vat_excluded" .page }}

+{{- end }} +

{{ i18n .plan.priceDescriptionKey .page }}

diff --git a/layouts/partials/pricing/comparison-value.html b/layouts/partials/pricing/comparison-value.html new file mode 100644 index 000000000..453733059 --- /dev/null +++ b/layouts/partials/pricing/comparison-value.html @@ -0,0 +1,14 @@ +{{- $cell := index .row .plan.dataKey }} +{{- if eq $cell true }} + +{{ i18n "pricing_compare_included" .page }} +{{- else if eq $cell false }} + +{{ i18n "pricing_compare_not_included" .page }} +{{- else if eq (printf "%T" $cell) "string" }} +{{ i18n $cell .page }} +{{- else if $cell }} +{{ $cell }} +{{- else }} +{{- errorf "pricing_comparison: row %q is missing a value for plan %q" .row.LabelKey .plan.dataKey }} +{{- end }} diff --git a/layouts/partials/pricing/comparison.html b/layouts/partials/pricing/comparison.html new file mode 100644 index 000000000..f60a17560 --- /dev/null +++ b/layouts/partials/pricing/comparison.html @@ -0,0 +1,166 @@ +{{- $cryptomatorBrand := dict "logo" "/img/logo.svg" "logoAspect" "aspect-1110/942" "brandColor" "text-primary" }} +{{- $hubBrand := dict "logo" "/img/zero-knowledge-bot.svg" "logoAspect" "aspect-988/877" "brandColor" "text-hub" }} +{{- $plans := slice + (merge $cryptomatorBrand (dict "dataKey" "Cryptomator" "brand" "Cryptomator" "priceKey" "pricing_free" "priceDescriptionKey" "pricing_individual_price_description" "href" "/downloads/" "ctaKey" "pricing_individual_cta" "event" "pricing-compare-individual-cta")) + (merge $hubBrand (dict "dataKey" "Community" "brand" "Cryptomator Hub" "tier" (i18n "pricing_hub_community_title" .) "priceKey" "pricing_free" "priceDescriptionKey" "pricing_hub_community_price_description" "href" "/hub/self-hosted/" "ctaKey" "pricing_compare_hub_self_hosted_cta" "event" "pricing-compare-hub-community-self-hosted-cta")) + (merge $hubBrand (dict "dataKey" "Standard" "brand" "Cryptomator Hub" "tier" (i18n "pricing_hub_standard_title" .) "vatExcluded" true "priceDescriptionKey" "pricing_hub_standard_price_description")) + (merge $hubBrand (dict "dataKey" "Enterprise" "brand" "Cryptomator Hub" "tier" (i18n "pricing_hub_enterprise_title" .) "priceKey" "pricing_hub_enterprise_price" "pricePrefixKey" "pricing_hub_enterprise_price_prefix" "pricePeriodKey" "pricing_hub_enterprise_price_period" "vatExcluded" true "priceDescriptionKey" "pricing_hub_enterprise_price_description" "href" "/contact-sales/" "ctaKey" "pricing_hub_enterprise_cta" "event" "pricing-compare-hub-enterprise-cta")) +}} +
+
+

{{ i18n "pricing_compare_title" . }}

+

{{ i18n "pricing_compare_subtitle" . }}

+
+
+
+

{{ i18n "pricing_compare_choose" . }}

+
+
+
{{ i18n "pricing_compare_features" . }}
+ {{- range $side := slice "first" "second" }} +
+ {{- range $plans }} +
+ +

{{ .brand }}

+
+ {{- end }} +
+ + +
+
+ {{- end }} +
+ {{- range hugo.Data.pricing_comparison }} +
+

{{ i18n .SectionKey $ }}

+
+ {{- range .Rows }} + {{- $row := . }} +
+
+ {{ i18n .LabelKey $ }} + {{- with .TooltipKey }} +

{{ i18n . $ | safeHTML }}

+ {{- end }} +
+ {{- range $side := slice "first" "second" }} +
+ {{- range $plans }} +
+ {{ .brand }}{{ with .tier }} {{ . }}{{ end }}: + {{ partial "pricing/comparison-value.html" (dict "row" $row "plan" . "page" $) }} +
+ {{- end }} +
+ {{- end }} +
+ {{- end }} +
+
+ {{- end }} +
+
+ {{- range $side := slice "first" "second" }} +
+ {{- range $plans }} +
+

{{ or .tier .brand }}

+
+ {{ partial "pricing/comparison-price.html" (dict "plan" . "page" $) }} +
+ {{ partial "pricing/comparison-action.html" (dict "plan" . "page" $) }} +
+ {{- end }} +
+ {{- end }} +
+
+
+ {{/* Without Alpine, the full table stays available as a scrollable fallback. */}} +
+
+ + + + + {{- range $plans }} + + {{- end }} + + + {{- range $sectionIndex, $section := hugo.Data.pricing_comparison }} + + + + {{- range $plans }} + + {{- end }} + + {{- range $rowIndex, $row := .Rows }} + + + {{- range $plans }} + + {{- end }} + + {{- end }} + + {{- end }} + + + + {{- range $plans }} + + {{- end }} + + + + {{- range $plans }} + + {{- end }} + + +
{{ i18n "pricing_compare_features" . }} + +

{{ .brand }}

+ {{- /* Cryptomator has no plan name; the empty line keeps its logo level with the Hub columns. */}} +

{{ with .tier }}{{ . }}{{ else }} {{ end }}

+
+

{{ i18n .SectionKey $ }}

+
+ {{ i18n .LabelKey $ }} + {{- with .TooltipKey }} + {{- $tooltipId := printf "tooltip-compare-%d-%d" $sectionIndex $rowIndex }} +
+ + +
+ {{- end }} + 		+ {{ partial "pricing/comparison-value.html" (dict "row" $row "plan" . "page" $) }} +
+ {{ partial "pricing/comparison-price.html" (dict "plan" . "page" $) }} +
+ {{ partial "pricing/comparison-action.html" (dict "plan" . "page" $) }} +
+
+
+
+
diff --git a/layouts/pricing/single.html b/layouts/pricing/single.html index 25746d077..d4afb4a92 100644 --- a/layouts/pricing/single.html +++ b/layouts/pricing/single.html @@ -185,7 +185,7 @@

{{ i18n "pricing_hub_managed_cta" . }} - + {{ i18n "pricing_hub_self_hosted_cta" . }}

@@ -239,8 +239,16 @@

{{ i18n "pricing_hub_enterprise_subtitle" . }}

-

- {{ i18n "pricing_hub_enterprise_price" . }} +

+ + {{- /* The space after the prefix sits inside its span so it takes the label size, not the price size. */ -}} + {{ i18n "pricing_hub_enterprise_price_prefix" . }} + {{- i18n "pricing_hub_enterprise_price" . -}} + {{ i18n "pricing_hub_enterprise_price_period" . }} + + + {{ i18n "pricing_vat_excluded" . }} +

{{ i18n "pricing_hub_enterprise_price_description" . }} @@ -256,12 +264,9 @@

{{ i18n "pricing_hub_enterprise_benefit_1" . }} -
  • +
  • {{ i18n "pricing_hub_enterprise_benefit_2" . }} - - {{ i18n "coming_soon" . }} -
  • @@ -346,7 +351,10 @@

    • + {{ partial "pricing/comparison.html" . }} + {{/* Support Us Section */}} + {{- $data := index hugo.Data $.Site.Language.Lang }}

    {{ i18n "pricing_support_us_title" . }}

    {{ i18n "pricing_support_us_description" . }}

    @@ -366,7 +374,6 @@

    {{ i18n "pricing_support_us_title" . }}

    {{ i18n "faq_title" . }}

    - {{- $data := index hugo.Data $.Site.Language.Lang }}