added "get started" flow between "for individuals" and "for teams"

assets/css/custom.css

@@ -164,8 +164,8 @@ nav a:hover {
 [id]::before {
   content: '';
   display: block;
-  height: 64px;
-  margin-top: -64px;
+  height: 96px;
+  margin-top: -96px;
   visibility: hidden;
 }
 

assets/js/index.js

@@ -2,17 +2,17 @@ if (window.location.hash == '#donate') {
   window.location.replace('/donate/');
 }
 
-$('#testimonial-carousel .next-button').on('click', function () {
+$('#testimonial-carousel .next-button').on('click', () => {
   let wrapper = $('#testimonial-carousel ul');
   let firstItem = wrapper.children('li').first();
-  firstItem.animate({ marginLeft: -firstItem.width() }, 300, 'swing', function () {
+  firstItem.animate({ marginLeft: -firstItem.width() }, 300, 'swing', () => {
     firstItem.detach();
     firstItem.css('margin-left', 0);
     firstItem.appendTo(wrapper);
   });
 });
 
-$('#testimonial-carousel .prev-button').on('click', function () {
+$('#testimonial-carousel .prev-button').on('click', () => {
   let wrapper = $('#testimonial-carousel ul');
   let lastItem = wrapper.children('li').last();
   let w = lastItem.width();
@@ -21,3 +21,21 @@ $('#testimonial-carousel .prev-button').on('click', function () {
   lastItem.prependTo(wrapper);
   lastItem.animate({ marginLeft: 0 }, 300, 'swing');
 });
+
+$(() => {
+  $.getJSON('https://api.github.com/repos/cryptomator/cryptomator', data => {
+    $('#github-stargazers').text(formatNumber(data.stargazers_count));
+  }).fail(() => {
+    console.error('Error fetching repository data.');
+  });
+  function formatNumber(num) {
+    if (num >= 1000 && num < 1000000) {
+      const formatted = (num / 1000).toFixed(1);
+      return formatted.endsWith('.0') ? formatted.slice(0, -2) + 'k' : formatted + 'k';
+    } else if (num >= 1000000) {
+      const formatted = (num / 1000000).toFixed(1);
+      return formatted.endsWith('.0') ? formatted.slice(0, -2) + 'M' : formatted + 'M';
+    }
+    return num;
+  }
+});

i18n/de.yaml

@@ -1,11 +1,11 @@
 - id: site_meta_description
   translation: "Verschlüssle deine Dropbox, Google Drive, und Co. Cryptomator ist eine freie Open-Source-Software."
+- id: nav_cta
+  translation: "Jetzt loslegen"
 - id: nav_support_us
   translation: "Unterstütze uns"
 - id: nav_learn_more
   translation: "Mehr erfahren"
-- id: nav_fediverse
-  translation: "Cryptomator auf Fediverse"
 - id: nav_github
   translation: "Cryptomator auf GitHub"
 - id: footer_contribute_title
@@ -214,11 +214,35 @@
 - id: home_header_description
   translation: "Mit Cryptomator liegt der Schlüssel zu deinen Daten bei dir. Durch Cryptomator ver­schlüsselst du deine Daten schnell und unkompliziert. Anschließend lädst du sie geschützt in deinen Lieblingscloudservice hoch."
 - id: home_header_cta
-  translation: "Jetzt herunterladen"
-- id: home_header_hub
-  translation: "Arbeitest du in einem Team? Hier geht's zu <span class=\"underline\">Cryptomator Hub</span>!"
+  translation: "Jetzt loslegen"
 - id: home_header_woman_cloud_alt
   translation: "Entspannte Frau auf einer Wolke, die durch ein Schloss gesichert ist"
+- id: home_get_started_title
+  translation: "Wie wirst du Cryptomator nutzen?"
+- id: home_get_started_for_individuals_title
+  translation: "Für Einzelnutzer"
+- id: home_get_started_for_individuals_subtitle
+  translation: "Sichere deine persönlichen Dateien"
+- id: home_get_started_for_individuals_benefit_1
+  translation: "Verschlüssele deine Daten lokal mit clientseitiger Verschlüsselung"
+- id: home_get_started_for_individuals_benefit_2
+  translation: "Greife sicher auf deine Dateien mit einem Tresor-Passwort zu"
+- id: home_get_started_for_individuals_benefit_3
+  translation: "Bewahre deine Dateien sicher auf, unabhängig vom Speicherort"
+- id: home_get_started_for_individuals_cta
+  translation: "Jetzt herunterladen"
+- id: home_get_started_for_teams_title
+  translation: "Für Teams"
+- id: home_get_started_for_teams_subtitle
+  translation: "Verwalte den Teamzugriff"
+- id: home_get_started_for_teams_benefit_1
+  translation: "Sichere den Teamzugriff mit Zero-Knowledge-Schlüsselmanagement"
+- id: home_get_started_for_teams_benefit_2
+  translation: "Entsperre deine gemeinsamen Tresore mit individuellen Team-Accounts"
+- id: home_get_started_for_teams_benefit_3
+  translation: "Integriere leicht dein bestehendes Identitätsmanagement"
+- id: home_get_started_for_teams_cta
+  translation: "Jetzt loslegen"
 - id: home_newsletter_title
   translation: "Bleibe mit uns in Verbindung"
 - id: home_newsletter_instruction

i18n/en.yaml

@@ -1,11 +1,11 @@
 - id: site_meta_description
   translation: "Encrypt Dropbox, Google Drive, and any other cloud. Cryptomator is free and open source."
+- id: nav_cta
+  translation: "Get Started"
 - id: nav_support_us
   translation: "Support Us"
 - id: nav_learn_more
   translation: "Learn More"
-- id: nav_fediverse
-  translation: "Cryptomator on Fediverse"
 - id: nav_github
   translation: "Cryptomator on GitHub"
 - id: footer_contribute_title
@@ -214,11 +214,35 @@
 - id: home_header_description
   translation: "With Cryptomator, the key to your data is in your hands. Cryptomator encrypts your data quickly and easily. Afterwards you upload them protected to your favorite cloud service."
 - id: home_header_cta
-  translation: "Download Now"
-- id: home_header_hub
-  translation: "Working in teams? Check out <span class=\"underline\">Cryptomator Hub</span>!"
+  translation: "Get Started"
 - id: home_header_woman_cloud_alt
   translation: "Relaxed woman on a cloud secured by a lock"
+- id: home_get_started_title
+  translation: "How will you use Cryptomator?"
+- id: home_get_started_for_individuals_title
+  translation: "For Individuals"
+- id: home_get_started_for_individuals_subtitle
+  translation: "Secure Your Personal Files"
+- id: home_get_started_for_individuals_benefit_1
+  translation: "Encrypt your data locally with client-side encryption"
+- id: home_get_started_for_individuals_benefit_2
+  translation: "Access your files securely using a vault password"
+- id: home_get_started_for_individuals_benefit_3
+  translation: "Keep your files safe, regardless of storage location"
+- id: home_get_started_for_individuals_cta
+  translation: "Download Now"
+- id: home_get_started_for_teams_title
+  translation: "For Teams"
+- id: home_get_started_for_teams_subtitle
+  translation: "Manage Team Access"
+- id: home_get_started_for_teams_benefit_1
+  translation: "Secure team access with zero-knowledge key management"
+- id: home_get_started_for_teams_benefit_2
+  translation: "Unlock your shared vaults using individual team member accounts"
+- id: home_get_started_for_teams_benefit_3
+  translation: "Integrate your existing identity management easily"
+- id: home_get_started_for_teams_cta
+  translation: "Get Started"
 - id: home_newsletter_title
   translation: "Let's stay in touch"
 - id: home_newsletter_instruction

layouts/index.html

@@ -10,8 +10,7 @@
       <div class="w-full md:w-2/3 lg:w-3/5">
         <h1 class="font-headline font-medium text-3xl md:text-4xl leading-tight mb-6">{{ i18n "home_header_title" . | safeHTML }}</h1>
         <p class="text-lg md:text-xl leading-relaxed text-gray-300 mb-6">{{ i18n "home_header_description" . | safeHTML }}</p>
-        <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-primary text-lg px-8 mb-4">{{ i18n "home_header_cta" . }}</a>
-        <p><a href="{{ .Site.LanguagePrefix }}/hub/" role="button" class="text-btn text-white">{{ i18n "home_header_hub" . | safeHTML }}</a></p>
+        <a href="{{ .Site.LanguagePrefix }}/#get-started" role="button" class="btn btn-primary text-lg px-8 mb-4">{{ i18n "home_header_cta" . }}</a>
       </div>
     </header>
   </section>
@@ -20,8 +19,90 @@ <h1 class="font-headline font-medium text-3xl md:text-4xl leading-tight mb-6">{{
     {{ .Content }}
   </div>
 
-  <section id="newsletter" x-data="{data: {email: '', listId: 6, errorMessage: '', success: false, inProgress: false}}" class="container text-center pt-12 pb-24">
-    <h2 class="font-headline font-medium text-xl md:text-2xl leading-snug mb-4">{{ i18n "home_newsletter_title" . }}</h2>
+  <section class="container pt-12 pb-24">
+    <h2 id="get-started" class="text-center font-headline font-medium text-xl md:text-2xl leading-snug mb-4">{{ i18n "home_get_started_title" . }}</h2>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      <div class="flex flex-col rounded shadow bg-white">
+        <div class="flex justify-between items-center p-4 border-b border-primary">
+          <h3>
+            <div class="flex items-center">
+              <img src="/img/logo.svg" class="h-8" alt="Logo"/>
+              <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR</span>
+            </div>
+          </h3>
+          <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-semibold tracking-wide uppercase bg-primary-l2 text-dark">
+            {{ i18n "home_get_started_for_individuals_title" . }}
+          </div>
+        </div>
+        <div class="flex flex-col justify-between h-full gap-8 px-4 py-8">
+          <div class="flex flex-col gap-4">
+            <h4 class="font-bold lg:text-lg leading-relaxed">
+              {{ i18n "home_get_started_for_individuals_subtitle" . }}
+            </h4>
+            <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
+              <li>
+                <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
+                <span>{{ i18n "home_get_started_for_individuals_benefit_1" . }}</span>
+              </li>
+              <li>
+                <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
+                <span>{{ i18n "home_get_started_for_individuals_benefit_2" . }}</span>
+              </li>
+              <li>
+                <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
+                <span>{{ i18n "home_get_started_for_individuals_benefit_3" . }}</span>
+              </li>
+            </ul>
+          </div>
+          <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-primary w-full lg:w-1/2">
+            {{ i18n "home_get_started_for_individuals_cta" . }}
+          </a>
+        </div>
+      </div>
+
+      <div class="flex flex-col rounded shadow bg-white">
+        <div class="flex justify-between items-center p-4 border-b border-primary">
+          <h3>
+            <div class="flex items-center">
+              <img src="/img/logo.svg" class="h-8" alt="Logo"/>
+              <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
+            </div>
+          </h3>
+          <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-semibold tracking-wide uppercase bg-primary-l2 text-dark">
+            {{ i18n "home_get_started_for_teams_title" . }}
+          </div>
+        </div>
+        <div class="flex flex-col justify-between h-full gap-8 px-4 py-8">
+          <div class="flex flex-col gap-4">
+            <h4 class="font-bold lg:text-lg leading-relaxed">
+              {{ i18n "home_get_started_for_teams_subtitle" . }}
+            </h4>
+            <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
+              <li>
+                <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
+                <span>{{ i18n "home_get_started_for_teams_benefit_1" . }}</span>
+              </li>
+              <li>
+                <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
+                <span>{{ i18n "home_get_started_for_teams_benefit_2" . }}</span>
+              </li>
+              <li>
+                <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
+                <span>{{ i18n "home_get_started_for_teams_benefit_3" . }}</span>
+              </li>
+            </ul>
+          </div>
+          <a href="{{ .Site.LanguagePrefix }}/hub/" role="button" class="btn btn-primary w-full lg:w-1/2">
+            {{ i18n "home_get_started_for_teams_cta" . }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section x-data="{data: {email: '', listId: 6, errorMessage: '', success: false, inProgress: false}}" class="container text-center pt-12 pb-24">
+    <h2 id="newsletter" class="font-headline font-medium text-xl md:text-2xl leading-snug mb-4">{{ i18n "home_newsletter_title" . }}</h2>
 
     <form x-show="!data.success" x-ref="form" class="max-w-xl mx-auto">
       <p class="text-sm md:text-base leading-relaxed text-gray-700 mb-4">{{ i18n "home_newsletter_instruction" . | safeHTML }}</p>