From f5e54cd3d553397d04405247cd8b27f2a063a851 Mon Sep 17 00:00:00 2001 From: Majid Achhoud Date: Mon, 2 Mar 2026 11:28:04 +0100 Subject: [PATCH 1/6] WIP refine homepage hero and hub illustration --- assets/css/custom.css | 218 ++++++++++++++++++++++++++++++++++++- assets/css/main.css | 11 ++ i18n/de.yaml | 18 +++ i18n/en.yaml | 18 +++ layouts/index.html | 224 +++++++++++++++++++++++++++++++------- layouts/partials/nav.html | 8 +- static/img/logo-hub.png | Bin 0 -> 49343 bytes static/img/logo-hub.svg | 14 +++ 8 files changed, 467 insertions(+), 44 deletions(-) create mode 100644 static/img/logo-hub.png create mode 100644 static/img/logo-hub.svg diff --git a/assets/css/custom.css b/assets/css/custom.css index 4d271921a..7c54cd064 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -30,15 +30,226 @@ @apply bg-primary border-primary text-white; } +.btn-secondary { + @apply bg-secondary border-secondary text-white; +} + .btn-primary:hover, -.btn-primary:focus { +.btn-primary:focus, +.btn-secondary:hover, +.btn-secondary:focus { @apply text-white transition transform duration-200 ease-in-out shadow-md -translate-y-px; } -.btn-primary:disabled { +.btn-primary:disabled, +.btn-secondary:disabled { @apply shadow-none translate-y-0; } +.hero-split-contrast { + @apply py-12 md:py-16 lg:py-20; +} + +.hero-split-header { + @apply text-center mb-10 md:mb-14 px-4; +} + +.animate-slide li i { + @apply inline-block w-8 text-center; +} + +.hero-split-panels { + @apply relative grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 max-w-5xl mx-auto px-4; + align-items: stretch; +} + +.hero-panel { + @apply flex flex-col items-center text-center p-8 rounded-2xl bg-white; + box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08); +} + +.hero-panel-visual { + @apply flex items-center justify-center; + height: 200px; +} + +.hero-panel-content { + @apply flex flex-col items-center flex-1; +} + +.hero-panel-content h2 { + @apply font-headline font-bold text-2xl mb-2; +} + +.hero-panel-content .hero-panel-tagline { + @apply text-gray-700 font-medium mb-2; +} + +.hero-panel-content p.text-sm { + @apply flex-1; +} + +.hero-panel-content a.btn { + @apply mt-auto; +} + +@keyframes file-to-logo { + 0% { left: 0; top: 50%; transform: translateY(-50%); opacity: 1; } + 40% { left: 100%; top: 50%; transform: translateY(-50%); opacity: 1; } + 45%, 100% { left: 100%; opacity: 0; } +} + +@keyframes logo-shake { + 0%, 35% { transform: rotate(0deg); } + 40% { transform: rotate(-5deg); } + 45% { transform: rotate(5deg); } + 50% { transform: rotate(-5deg); } + 55% { transform: rotate(5deg); } + 60% { transform: rotate(0deg); } + 100% { transform: rotate(0deg); } +} + +@keyframes file-to-cloud { + 0%, 55% { left: 0; top: 50%; transform: translateY(-50%); opacity: 0; } + 60% { left: 0; top: 50%; transform: translateY(-50%); opacity: 1; } + 95% { left: 100%; top: 50%; transform: translateY(-50%); opacity: 1; } + 100% { left: 100%; opacity: 0; } +} + +.animate-file-to-logo { + opacity: 0; +} + +.animate-logo-shake { + transform: rotate(0deg); +} + +.animate-file-to-cloud { + opacity: 0; +} + +.hero-panel:hover .animate-file-to-logo { + animation: file-to-logo 3s ease-in-out infinite; +} + +.hero-panel:hover .animate-logo-shake { + animation: logo-shake 3s ease-in-out infinite; +} + +.hero-panel:hover .animate-file-to-cloud { + animation: file-to-cloud 3s ease-in-out infinite; +} + +@keyframes hub-pulse-center { + 0%, 25% { transform: scale(1); } + 35% { transform: scale(1.1); } + 45% { transform: scale(1); } + 100% { transform: scale(1); } +} + +.animate-hub-pulse-center { + transform: scale(1); +} + +.hero-panel:hover .animate-hub-pulse-center { + animation: hub-pulse-center 3s ease-in-out infinite; +} + +@keyframes hub-flow-auth { + 0%, 5% { opacity: 0; offset-distance: 0%; } + 10% { opacity: 1; offset-distance: 0%; } + 32% { opacity: 1; offset-distance: 100%; } + 38%, 100% { opacity: 0; offset-distance: 100%; } +} + +@keyframes hub-flow-key { + 0%, 30% { opacity: 0; offset-distance: 0%; } + 35% { opacity: 1; offset-distance: 0%; } + 55% { opacity: 1; offset-distance: 100%; } + 60%, 100% { opacity: 0; offset-distance: 100%; } +} + +@keyframes hub-flow-file { + 0%, 56% { opacity: 0; offset-distance: 0%; } + 61% { opacity: 1; offset-distance: 0%; } + 86% { opacity: 1; offset-distance: 100%; } + 92%, 100% { opacity: 0; offset-distance: 100%; } +} + +.animate-hub-auth, +.animate-hub-key-1, +.animate-hub-key-2, +.animate-hub-key-3, +.animate-hub-file-u1-cloud, +.animate-hub-file-u2-local, +.animate-hub-file-u3-local { + position: absolute; + left: 0; + top: 0; + opacity: 0; + offset-rotate: 0deg; + -webkit-offset-rotate: 0deg; +} + +.animate-hub-auth { + offset-path: path("M36 88 H112"); + -webkit-offset-path: path("M36 88 H112"); +} + +.animate-hub-key-1 { + offset-path: path("M112 88 H148 V40 H188"); + -webkit-offset-path: path("M112 88 H148 V40 H188"); +} + +.animate-hub-key-2 { + offset-path: path("M112 88 H188"); + -webkit-offset-path: path("M112 88 H188"); +} + +.animate-hub-key-3 { + offset-path: path("M112 88 H148 V136 H188"); + -webkit-offset-path: path("M112 88 H148 V136 H188"); +} + +.animate-hub-file-u1-cloud { + offset-path: path("M188 40 H220 V56 H252"); + -webkit-offset-path: path("M188 40 H220 V56 H252"); +} + +.animate-hub-file-u2-local { + offset-path: path("M188 88 H220 V120 H252"); + -webkit-offset-path: path("M188 88 H220 V120 H252"); +} + +.animate-hub-file-u3-local { + offset-path: path("M188 136 H220 V120 H252"); + -webkit-offset-path: path("M188 136 H220 V120 H252"); +} + +.hero-panel:hover .animate-hub-auth { + animation: hub-flow-auth 3.5s ease-in-out infinite; +} + +.hero-panel:hover .animate-hub-key-1, +.hero-panel:hover .animate-hub-key-2, +.hero-panel:hover .animate-hub-key-3 { + animation: hub-flow-key 3.5s linear infinite; +} + +.hero-panel:hover .animate-hub-key-1 { animation-delay: 0.1s; } +.hero-panel:hover .animate-hub-key-2 { animation-delay: 0.35s; } +.hero-panel:hover .animate-hub-key-3 { animation-delay: 0.6s; } + +.hero-panel:hover .animate-hub-file-u1-cloud, +.hero-panel:hover .animate-hub-file-u2-local, +.hero-panel:hover .animate-hub-file-u3-local { + animation: hub-flow-file 3.5s linear infinite; +} + +.hero-panel:hover .animate-hub-file-u1-cloud { animation-delay: 0.95s; } +.hero-panel:hover .animate-hub-file-u2-local { animation-delay: 1.35s; } +.hero-panel:hover .animate-hub-file-u3-local { animation-delay: 1.75s; } + .btn-outline-primary { @apply border border-primary text-primary; } @@ -87,14 +298,17 @@ .font-h1 { @apply font-headline font-medium text-3xl md:text-4xl leading-tight; + text-wrap: balance; } .font-h2 { @apply font-headline font-medium text-xl md:text-2xl leading-snug; + text-wrap: balance; } .font-h3 { @apply font-headline text-lg md:text-xl leading-relaxed; + text-wrap: balance; } .font-p { diff --git a/assets/css/main.css b/assets/css/main.css index b7bf5fc6d..d40fafc42 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -194,6 +194,17 @@ transform: translateY(-88.88%); } } + +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } } @utility container { diff --git a/i18n/de.yaml b/i18n/de.yaml index cc2ab5094..da17d84fd 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -322,6 +322,24 @@ translation: "Kostenlose 30-Tage-Testversion" - id: home_header_for_teams_cta translation: "Für Teams" + +- id: home_hero_question + translation: "Wie möchtest du verschlüsseln?" +- id: home_hero_cryptomator_tagline + translation: "Deine Dateien. Deine Privatsphäre." +- id: home_hero_cryptomator_description + translation: "Lass Cloud-Anbieter nicht in deine privaten Dateien schauen. Verschlüssle vor dem Sync – nur du hast Zugriff." +- id: home_hero_cryptomator_cta + translation: "Kostenlos laden" +- id: home_hero_hub_tagline + translation: "Sichere Teams. Kein Passwort-Chaos." +- id: home_hero_hub_description + translation: "Schluss mit Passwörtern auf Klebezetteln. Vergib und entziehe Vault-Zugriff sofort – ohne je einen Schlüssel zu teilen." +- id: home_hero_hub_cta + translation: "Kostenlos testen" +- id: home_hero_social_proof_audited + translation: "Sicherheitsgeprüft" + - id: home_get_started_title translation: "Wie wirst du Cryptomator nutzen?" - id: home_get_started_for_individuals_title diff --git a/i18n/en.yaml b/i18n/en.yaml index bd7cdd075..208529854 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -322,6 +322,24 @@ translation: "Free 30-Day Trial" - id: home_header_for_teams_cta translation: "For Teams" + +- id: home_hero_question + translation: "How do you want to encrypt?" +- id: home_hero_cryptomator_tagline + translation: "Your files. Your privacy." +- id: home_hero_cryptomator_description + translation: "Don't let cloud providers peek at your private files. Encrypt before you sync – no one but you can access your data." +- id: home_hero_cryptomator_cta + translation: "Download Free" +- id: home_hero_hub_tagline + translation: "Secure teams. No password chaos." +- id: home_hero_hub_description + translation: "Stop sharing passwords on sticky notes. Grant and revoke vault access instantly – without ever sharing a single key." +- id: home_hero_hub_cta + translation: "Start Free Trial" +- id: home_hero_social_proof_audited + translation: "Security Audited" + - id: home_get_started_title translation: "How will you use Cryptomator?" - id: home_get_started_for_individuals_title diff --git a/layouts/index.html b/layouts/index.html index 94bf67563..24c75ced7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,8 +1,8 @@ {{ define "preloads" }} - - + + @@ -12,47 +12,195 @@ {{ partial "altcha-css.html" . }} {{ end }} {{ define "main" }} -
-
- -
-
-
- - {{ i18n "home_header_kicker" }} +
+ +
+

+ {{ i18n "home_header_title" }} + +
    +
  • Google Drive
    • +
  • iCloud Drive
    • +
  • OneDrive
    • +
  • SharePoint
    • +
  • Dropbox
    • +
  • pCloud
    • +
  • Nextcloud
    • +
  • {{ i18n "home_header_title_last_item" }}
    • + +
+ +

+

{{ i18n "home_header_description" }}

+
+ +

{{ i18n "home_hero_question" }}

+ +
+
+ {{ i18n "home_get_started_for_individuals_title" }} +
+
+
+ +
You
+
+
+ + + + +
+
+ +
+
+ + + + +
+
+ +
Cloud
+
-

- {{ i18n "home_header_title" }} - -
    -
  • Google Drive
    • -
  • iCloud Drive
    • -
  • OneDrive
    • -
  • SharePoint
    • -
  • Dropbox
    • -
  • pCloud
    • -
  • Nextcloud
    • -
  • {{ i18n "home_header_title_last_item" }}
    • - -
- -

-

{{ i18n "home_header_description" . | safeHTML }}

-
-
-

{{ i18n "home_header_for_individuals_title" . }}

- {{ i18n "home_header_for_individuals_cta" . }} -
-
-

{{ i18n "home_header_for_teams_title" . }}

- {{ i18n "home_header_for_teams_cta" . }} +
+

CRYPTOMATOR

+

{{ i18n "home_hero_cryptomator_tagline" }}

+

{{ i18n "home_hero_cryptomator_description" }}

+ + {{ i18n "home_hero_cryptomator_cta" }} + +
+
+ +
+ {{ i18n "home_get_started_for_teams_title" }} +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
IdP
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
Cloud
+
+ +
+
+ +
+
On-Prem
+
+
+

CRYPTOMATOR HUB

+

{{ i18n "home_hero_hub_tagline" }}

+

{{ i18n "home_hero_hub_description" }}

+ + {{ i18n "home_hero_hub_cta" }} + +
-
+ + +
+
+ + GitHub Stars +
+
+ + 100% Open Source +
+
+ + CeBIT Innovation Award +
+
+ + {{ i18n "home_hero_social_proof_audited" }} +
+
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 26adfff23..1966e5b07 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -1,7 +1,7 @@ -{{- $textColor := cond .IsHome "text-white" "text-primary" -}} -{{- $borderColor := cond .IsHome "border-white" "border-primary" -}} -{{- $hoverBorderColor := cond .IsHome "hover:border-white" "hover:border-primary" -}} -{{- $backgroundColor := cond .IsHome "bg-dark" "bg-white" -}} +{{- $textColor := "text-primary" -}} +{{- $borderColor := "border-primary" -}} +{{- $hoverBorderColor := "hover:border-primary" -}} +{{- $backgroundColor := "bg-white" -}} {{- $currentRelPermalink := .RelPermalink -}}