Redesign homepage hero section

assets/css/main.css

@@ -123,6 +123,7 @@
   --color-primary-l2: #ebf5eb;
   --color-secondary: #008a7b;
   --color-tertiary: #005e71;
+  --color-tertiary2: #354960;
   --color-dark: #1e2b33;
 
   --font-*: initial;
@@ -148,7 +149,6 @@
   --breakpoint-lg: 1280px;
 
   --animate-hover: hover 10s ease-in-out infinite;
-  --animate-slide: slide 20s cubic-bezier(0.83, 0, 0.17, 1) infinite;
 
   --height-70px: 70px;
   --height-412px: 412px;
@@ -164,35 +164,15 @@
     }
   }
 
-  /* see https://cruip.com/creating-a-sliding-text-animation-with-tailwind-css/ */
-  @keyframes slide {
-    0%, 10% {
-      transform: translateY(0%);
-    }
-    12.5%, 22.5% {
-      transform: translateY(-11.11%);
-    }
-    25%, 35% {
-      transform: translateY(-22.22%);
-    }
-    37.5%, 47.5% {
-      transform: translateY(-33.33%);
-    }
-    50%, 60% {
-      transform: translateY(-44.44%);
-    }
-    62.5%, 72.5% {
-      transform: translateY(-55.55%);
-    }
-    75%, 85% {
-      transform: translateY(-66.66%);
-    }
-    87.5%, 97.5% {
-      transform: translateY(-77.77%);
-    }
-    100% {
-      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;
   }
 }
 

i18n/de.yaml

@@ -306,14 +306,12 @@
   translation: "Community beitreten"
 
 # Home
-- id: home_header_kicker
-  translation: "4.000.000+ Downloads"
 - id: home_header_title
-  translation: "Privatsphäre schützen in"
-- id: home_header_title_last_item
-  translation: "jeder Cloud"
-- id: home_header_description
-  translation: "Mit Cryptomator liegt der Schlüssel zu deinen Daten bei dir. Durch Cryptomator sicherst und verschlüsselst du deine sensiblen Daten in deiner Lieblingscloud. So bleiben sie privat und vor unbefugtem Zugriff geschützt."
+  translation: "Schütze deine Privatsphäre in jeder Cloud"
+- id: home_clouds_sharepoint_tooltip
+  translation: "Inklusive Microsoft Teams"
+- id: home_header_supported_clouds
+  translation: "Kompatible Clouds ansehen"
 - id: home_header_woman_cloud_alt
   translation: "Entspannte Frau auf einer Wolke, die durch ein Schloss gesichert ist"
 - id: home_header_for_individuals_title
@@ -324,6 +322,30 @@
   translation: "Kostenlose 30-Tage-Testversion"
 - id: home_header_for_teams_cta
   translation: "Für Teams"
+
+- id: home_hero_card_just_me
+  translation: "Für Einzelnutzer"
+- id: home_hero_card_our_team
+  translation: "Für Teams"
+- id: home_hero_hub_node_team
+  translation: "Team"
+- id: home_hero_cryptomator_description
+  translation: "Nur du kannst deine Dateien öffnen – verschlüsselt, bevor sie in die Cloud kommen."
+- id: home_hero_cryptomator_cta
+  translation: "Kostenlos laden"
+- id: home_hero_cryptomator_link
+  translation: "Alle Funktionen entdecken"
+- id: home_hero_hub_description
+  translation: "Gib deinem Team Zugriff auf gemeinsame Dateien – und entzieh ihn jeder Person jederzeit."
+- id: home_hero_hub_cta
+  translation: "Kostenlos testen"
+- id: home_hero_hub_link
+  translation: "So funktioniert Hub"
+- id: home_hero_cryp_label_you
+  translation: "Du"
+- id: home_hero_cryp_label_cloud
+  translation: "Cloud"
+
 - id: home_get_started_title
   translation: "Wie wirst du Cryptomator nutzen?"
 - id: home_get_started_for_individuals_title

i18n/en.yaml

@@ -306,14 +306,12 @@
   translation: "Join Community"
 
 # Home
-- id: home_header_kicker
-  translation: "4,000,000+ Downloads"
 - id: home_header_title
-  translation: "Protect your privacy in"
-- id: home_header_title_last_item
-  translation: "any cloud"
-- id: home_header_description
-  translation: "With Cryptomator, the key to your data is in your hands. Cryptomator secures and encrypts your sensitive data in your favorite cloud service. So you can rest assured that only you can access your data."
+  translation: "Protect your privacy in any cloud"
+- id: home_clouds_sharepoint_tooltip
+  translation: "Includes Microsoft Teams"
+- id: home_header_supported_clouds
+  translation: "See compatible clouds"
 - id: home_header_woman_cloud_alt
   translation: "Relaxed woman on a cloud secured by a lock"
 - id: home_header_for_individuals_title
@@ -324,6 +322,30 @@
   translation: "Free 30-Day Trial"
 - id: home_header_for_teams_cta
   translation: "For Teams"
+
+- id: home_hero_card_just_me
+  translation: "For Individuals"
+- id: home_hero_card_our_team
+  translation: "For Teams"
+- id: home_hero_hub_node_team
+  translation: "Team"
+- id: home_hero_cryptomator_description
+  translation: "Only you can open your files — encrypted before they reach the cloud."
+- id: home_hero_cryptomator_cta
+  translation: "Download Free"
+- id: home_hero_cryptomator_link
+  translation: "Explore all features"
+- id: home_hero_hub_description
+  translation: "Give your team access to shared files — and revoke it for anyone, anytime."
+- id: home_hero_hub_cta
+  translation: "Start Free Trial"
+- id: home_hero_hub_link
+  translation: "See how Hub works"
+- id: home_hero_cryp_label_you
+  translation: "You"
+- id: home_hero_cryp_label_cloud
+  translation: "Cloud"
+
 - id: home_get_started_title
   translation: "How will you use Cryptomator?"
 - id: home_get_started_for_individuals_title

layouts/_default/baseof.html

@@ -92,13 +92,14 @@
     {{- if $showAnniversaryBanner -}}
       {{ partial "anniversary-banner.html" . }}
     {{- end -}}
-    {{- $topPadding := cond .IsHome "" "pt-12" -}}
+    {{- $flushHero := or .IsHome .Params.flushHero -}}
+    {{- $topPadding := cond $flushHero "" "pt-12" -}}
     {{- if and $showWebinarBanner (not $showAnniversaryBanner) -}}
-      {{- $topPadding = cond .IsHome "" "pt-24 md:pt-18" -}}
+      {{- $topPadding = cond $flushHero "" "pt-24 md:pt-18" -}}
     {{- else if and (not $showWebinarBanner) $showAnniversaryBanner -}}
-      {{- $topPadding = cond .IsHome "" "pt-28 md:pt-24" -}}
+      {{- $topPadding = cond $flushHero "" "pt-28 md:pt-24" -}}
     {{- else if and $showWebinarBanner $showAnniversaryBanner -}}
-      {{- $topPadding = cond .IsHome "" "pt-40 md:pt-32" -}}
+      {{- $topPadding = cond $flushHero "" "pt-40 md:pt-32" -}}
     {{- end -}}
     <div class="bg-gray-100 min-h-[80vh] {{ $topPadding }}">
     <!-- Code that all your templates share, like a header -->