From 1c6246e40c3a9ad25275bfb2bbc8e92e289faf11 Mon Sep 17 00:00:00 2001 From: Tobias Hagemann Date: Thu, 18 Jul 2024 17:50:14 +0200 Subject: [PATCH] added "get started" flow between "for individuals" and "for teams" --- assets/css/custom.css | 4 +- assets/js/index.js | 24 +++++- i18n/de.yaml | 34 ++++++-- i18n/en.yaml | 34 ++++++-- layouts/index.html | 89 ++++++++++++++++++++- layouts/partials/nav.html | 163 ++++++++++++++++++++------------------ 6 files changed, 253 insertions(+), 95 deletions(-) diff --git a/assets/css/custom.css b/assets/css/custom.css index 95ab461f49..0e763bad41 100644 --- a/assets/css/custom.css +++ b/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; } diff --git a/assets/js/index.js b/assets/js/index.js index f1fb7b97e4..57aaa11c39 100644 --- a/assets/js/index.js +++ b/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; + } +}); diff --git a/i18n/de.yaml b/i18n/de.yaml index 4b3372f542..439a298dd3 100644 --- a/i18n/de.yaml +++ b/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 Cryptomator Hub!" + 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 diff --git a/i18n/en.yaml b/i18n/en.yaml index 11afdea11f..c9fdc648e9 100644 --- a/i18n/en.yaml +++ b/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 Cryptomator Hub!" + 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 diff --git a/layouts/index.html b/layouts/index.html index 3da3fd26f2..d79bd82eb2 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -10,8 +10,7 @@

{{ i18n "home_header_title" . | safeHTML }}

{{ i18n "home_header_description" . | safeHTML }}

- {{ i18n "home_header_cta" . }} -

{{ i18n "home_header_hub" . | safeHTML }}

+ {{ i18n "home_header_cta" . }}
@@ -20,8 +19,90 @@

{{ {{ .Content }} -
-

{{ i18n "home_newsletter_title" . }}

+
+

{{ i18n "home_get_started_title" . }}

+ +
+
+
+

+
+ Logo + CRYPTOMATOR +
+

+
+ {{ i18n "home_get_started_for_individuals_title" . }} +
+
+
+
+

+ {{ i18n "home_get_started_for_individuals_subtitle" . }} +

+
    +
  • + + {{ i18n "home_get_started_for_individuals_benefit_1" . }} +
    • +
  • + + {{ i18n "home_get_started_for_individuals_benefit_2" . }} +
    • +
  • + + {{ i18n "home_get_started_for_individuals_benefit_3" . }} +
    • +
+
+ + {{ i18n "home_get_started_for_individuals_cta" . }} + +
+
+ +
+
+

+
+ Logo + CRYPTOMATOR HUB +
+

+
+ {{ i18n "home_get_started_for_teams_title" . }} +
+
+
+
+

+ {{ i18n "home_get_started_for_teams_subtitle" . }} +

+
    +
  • + + {{ i18n "home_get_started_for_teams_benefit_1" . }} +
    • +
  • + + {{ i18n "home_get_started_for_teams_benefit_2" . }} +
    • +
  • + + {{ i18n "home_get_started_for_teams_benefit_3" . }} +
    • +
+
+ + {{ i18n "home_get_started_for_teams_cta" . }} + +
+
+
+
+ +
+

{{ i18n "home_newsletter_title" . }}

{{ i18n "home_newsletter_instruction" . | safeHTML }}

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 7e0d3384ef..b79487a5bd 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -4,80 +4,95 @@ {{- $currentRelPermalink := .RelPermalink -}}