Merge branch 'develop'

Author: tobihagemann

assets/css/main.css

@@ -148,21 +148,52 @@
   --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;
 
   --width-fit: fit-content;
 
   @keyframes hover {
-    0%,
-    100% {
+    0%, 100% {
       transform: rotate(0deg) translateY(0);
     }
     50% {
       transform: rotate(-3deg) translateY(-10px);
     }
   }
+
+  /* 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%);
+    }
+  }
 }
 
 @utility container {

i18n/de.yaml

@@ -310,7 +310,7 @@
 - id: home_header_kicker
   translation: "3.000.000+ Downloads"
 - id: home_header_title
-  translation: "Cloud verschlüsseln, Privatsphäre schützen"
+  translation: "Privatsphäre schützen in"
 - 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."
 - id: home_header_woman_cloud_alt

i18n/en.yaml

@@ -310,7 +310,7 @@
 - id: home_header_kicker
   translation: "3,000,000+ Downloads"
 - id: home_header_title
-  translation: "Encrypt your cloud, protect your privacy"
+  translation: "Protect your privacy in"
 - 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."
 - id: home_header_woman_cloud_alt

layouts/index.html

@@ -23,7 +23,22 @@
             {{ i18n "home_header_kicker" }}
           </div>
         </div>
-        <h1 class="font-h1 mb-6">{{ i18n "home_header_title" . | safeHTML }}</h1>
+        <h1 class="font-h1 mb-6">
+          {{ i18n "home_header_title" }}
+          <span class="inline-flex flex-col h-[calc(theme(fontSize.3xl)*theme(lineHeight.tight))] md:h-[calc(theme(fontSize.4xl)*theme(lineHeight.tight))] overflow-hidden">
+            <ul class="animate-slide">
+              <li>Google Drive</li>
+              <li>iCloud Drive</li>
+              <li>Dropbox</li>
+              <li>OneDrive</li>
+              <li>SharePoint</li>
+              <li>Box</li>
+              <li>pCloud</li>
+              <li>Nextcloud</li>
+              <li aria-hidden="true">Google Drive</li>
+            </ul>
+          </span>
+        </h1>
         <p class="text-lg md:text-xl leading-relaxed text-gray-300 mb-6">{{ i18n "home_header_description" . | safeHTML }}</p>
         <div class="flex flex-col md:flex-row gap-6">
           <div class="flex flex-col gap-2">