diff --git a/website/src/_includes/layouts/community_vouchers.html b/website/src/_includes/layouts/token.html similarity index 98% rename from website/src/_includes/layouts/community_vouchers.html rename to website/src/_includes/layouts/token.html index 0e24d42739..42038db072 100644 --- a/website/src/_includes/layouts/community_vouchers.html +++ b/website/src/_includes/layouts/token.html @@ -30,7 +30,7 @@ {% include "navbar.html" %} -
+
{{ content | safe }}
diff --git a/website/src/css/design3.css b/website/src/css/design3.css index 677a950e86..b24610054a 100644 --- a/website/src/css/design3.css +++ b/website/src/css/design3.css @@ -404,12 +404,13 @@ section.page { /* fallback */ height: 100lvh; padding-bottom: calc(100lvh - 100svh); + z-index: 10; } section.page .area { - position: relative; width: var(--sec-w); height: var(--sec-h); + z-index: 11; /* border: 2px solid red; */ } @@ -419,6 +420,7 @@ section.cover { background-size: var(--cover-bg-w) var(--cover-bg-h); background-position: center; background-repeat: no-repeat; + z-index: 12; } .dark section.cover { @@ -473,30 +475,150 @@ section.cover div.content p { max-width: calc(var(--sec-vwu) * 25); } -section.cover div.socials { +.publications-btns { position: absolute; - width: var(--sec-w); - bottom: calc(var(--sec-vhu) * 3); - padding: 0 calc(var(--sec-vwu) * 4); + bottom: 24px; + left: 16px; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 12px; +} +.publications-btns img { + height: 36px; +} + +.security-btns { + position: absolute; + bottom: 24px; + left: 0; + transform: translateX(calc((100vw / 2) - 50%)); + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 12px; +} + +.security-btns img { + height: 36px; +} + +.box-btn { + height: 36px; + padding: 0 16px; display: flex; align-items: center; - justify-content: flex-end; - gap: calc(var(--sec-vwu) * 0.6); + justify-content: center; + font-size: 16px !important; + font-family: 'Manrope', 'GT-Walsheim', sans-serif !important; + font-weight: 700 !important; + letter-spacing: -0.25px !important; + border-radius: 6px !important; +} + +.box-btn.btn-1 { + background-color: #639bd9; +} + +.box-btn.btn-2 { + background: linear-gradient(100deg, + #ffb55d 0%, + #fff494 50%, + #fbffdd 100%); +} + +.security-audits { + font-size: 14px !important; + font-family: 'Manrope', 'GT-Walsheim', sans-serif !important; + font-weight: 300 !important; + text-align: left; + color: white; + width: 55px; + line-height: 1.2; +} + +@media screen and (max-width: 1280px) { + .publications-btns { + display: none; + visibility: hidden; + } + + .security-btns { + transform: translateX(0); + left: 16px; + } +} + +.socials { + position: absolute; + bottom: 22px; + right: 16px; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; flex-wrap: wrap; } -section.cover div.socials a img { +.socials a img { width: auto; - height: calc(var(--sec-vhu) * 4.2); + height: 40px; border: #4f4f4f 1px solid; - border-radius: calc(var(--sec-vhu) * 0.8); + border-radius: 6px; } -section.cover div.socials a img.no-border { +.socials a img.no-border { border: none; } +.desktop-app-btn .btn-content { + height: 40px; + background-color: #000; + border: #4f4f4f 1px solid; + border-radius: 6px; + padding: 6px; + + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.desktop-app-btn .btn-content p { + margin: 0; + font-size: 10px !important; + font-family: 'Manrope', 'GT-Walsheim', sans-serif !important; + font-weight: 300 !important; + line-height: 1.2 !important; + text-align: left; + color: #fff; + width: 60px; +} + +.desktop-app-btn .btn-content img { + height: 22px !important; + width: auto; +} + +.desktop-app-btn .btn-content>div { + display: flex; + align-items: center; + justify-content: center; + gap: 4px; +} + +@media screen and (max-width: 949px) { + + .publications-btns, + .security-btns, + .socials { + position: static; + } +} + /* --- MAIN SECTIONS --- */ main { position: relative; @@ -784,7 +906,19 @@ main .section-bg { } @media (max-width: 949px) { + section.cover div.content { + gap: calc(var(--sec-vhu) * 2.5); + transform: translateY(calc(var(--sec-vhu) * 5)); + } + + .publications-btns, + .security-btns, + .socials { + margin-top: calc(var(--sec-vhu) * 2); + } + section.cover div.content h1 { + line-height: 0.85; font-weight: 700; font-size: calc(var(--sec-vwu) * 30); max-width: calc(var(--sec-vwu) * 65); @@ -801,16 +935,6 @@ main .section-bg { max-width: calc(var(--sec-vwu) * 65); } - section.cover div.socials { - bottom: 32px; - gap: 10px; - justify-content: center; - } - - section.cover div.socials a img { - height: 40px; - } - /* --- MAIN SECTIONS --- */ .page .text-container { diff --git a/website/src/img/design_3/publications/heise.png b/website/src/img/design_3/publications/heise.png new file mode 100644 index 0000000000..185d814fd5 Binary files /dev/null and b/website/src/img/design_3/publications/heise.png differ diff --git a/website/src/img/design_3/publications/kuketz-blog.png b/website/src/img/design_3/publications/kuketz-blog.png new file mode 100644 index 0000000000..f3a033ed15 Binary files /dev/null and b/website/src/img/design_3/publications/kuketz-blog.png differ diff --git a/website/src/img/design_3/publications/optout.png b/website/src/img/design_3/publications/optout.png new file mode 100644 index 0000000000..c2d11e5320 Binary files /dev/null and b/website/src/img/design_3/publications/optout.png differ diff --git a/website/src/img/design_3/publications/privacy-guides.png b/website/src/img/design_3/publications/privacy-guides.png new file mode 100644 index 0000000000..c59594212d Binary files /dev/null and b/website/src/img/design_3/publications/privacy-guides.png differ diff --git a/website/src/img/design_3/publications/trail-of-bits.png b/website/src/img/design_3/publications/trail-of-bits.png new file mode 100644 index 0000000000..84603a414c Binary files /dev/null and b/website/src/img/design_3/publications/trail-of-bits.png differ diff --git a/website/src/img/design_3/publications/whonix.png b/website/src/img/design_3/publications/whonix.png new file mode 100644 index 0000000000..bbad541f71 Binary files /dev/null and b/website/src/img/design_3/publications/whonix.png differ diff --git a/website/src/img/design_3/socials/apple.png b/website/src/img/design_3/socials/apple.png new file mode 100644 index 0000000000..7aad34dc47 Binary files /dev/null and b/website/src/img/design_3/socials/apple.png differ diff --git a/website/src/img/design_3/socials/linux.png b/website/src/img/design_3/socials/linux.png new file mode 100644 index 0000000000..155a9a48ee Binary files /dev/null and b/website/src/img/design_3/socials/linux.png differ diff --git a/website/src/img/design_3/socials/windows.png b/website/src/img/design_3/socials/windows.png new file mode 100644 index 0000000000..d9b192c8cc Binary files /dev/null and b/website/src/img/design_3/socials/windows.png differ diff --git a/website/src/index.html b/website/src/index.html index 486fd6dda1..6d302381fe 100644 --- a/website/src/index.html +++ b/website/src/index.html @@ -71,13 +71,55 @@ active_home: true

Be Free

Freedom & Security
of Your Communications

The first network where you own your identity, contacts, and groups.

- -
- - - - - + +
+ + + + + + +
+
+ + Trail of Bits + + + 2022 + + + 2024 + +

+ Security Audits +

+
+
+ + Privacy Guides + + + Whonix + + + Heise + + + Kuketz Blog + + + Opt Out + +
@@ -85,18 +127,18 @@ active_home: true
-
+

World's Most Secure Messaging

SimpleX messaging has cutting-edge end-to-end encryption.

For your security, servers can’t see your messages or who you talk to.

- Learn more about SimpleX messaging + Learn more about SimpleX messaging
-
+

You Own
The Next Web

@@ -106,18 +148,18 @@ active_home: true
-
+

Communities That Last

You will support your favorite groups with future Community vouchers.

Vouchers will pay for servers, to let your communities stay free and independent.

- Learn more about Community Vouchers + Learn more about Community Vouchers
-
+

SimpleX Roadmap to Free Internet

@@ -140,7 +182,7 @@ active_home: true
-
+
diff --git a/website/src/js/design3.js b/website/src/js/design3.js index 915c37b244..7fd551b155 100644 --- a/website/src/js/design3.js +++ b/website/src/js/design3.js @@ -11,8 +11,9 @@ document.addEventListener('DOMContentLoaded', () => { const fDroidBtn = document.querySelector('.f-droid-btn'); const testflightBtn = document.querySelector('.testflight-btn'); const androidBtn = document.querySelector('.android-btn'); + const desktopAppBtn = document.querySelector('.desktop-app-btn'); - if (!googlePlayBtn || !appleStoreBtn || !fDroidBtn || !testflightBtn || !androidBtn) return; + if (!googlePlayBtn || !appleStoreBtn || !fDroidBtn || !testflightBtn || !androidBtn || !desktopAppBtn) return; if (isMobile.Android()) { @@ -27,9 +28,10 @@ document.addEventListener('DOMContentLoaded', () => { else { appleStoreBtn.classList.remove('hidden'); googlePlayBtn.classList.remove('hidden'); - fDroidBtn.classList.remove('hidden'); - testflightBtn.classList.remove('hidden'); - androidBtn.classList.remove('hidden'); + desktopAppBtn.classList.remove('hidden'); + // fDroidBtn.classList.remove('hidden'); + // testflightBtn.classList.remove('hidden'); + // androidBtn.classList.remove('hidden'); } showPromotedGroups(); diff --git a/website/src/learn-more.html b/website/src/messaging.html similarity index 100% rename from website/src/learn-more.html rename to website/src/messaging.html diff --git a/website/src/community-vouchers.md b/website/src/token.md similarity index 93% rename from website/src/community-vouchers.md rename to website/src/token.md index c865d3b97d..fe7ad26538 100644 --- a/website/src/community-vouchers.md +++ b/website/src/token.md @@ -1,7 +1,7 @@ --- -layout: layouts/community_vouchers.html +layout: layouts/token.html title: "Simplex Chat" -permalink: "/community-vouchers/index.html" +permalink: "/token/index.html" --- # Community Vouchers diff --git a/website/web.sh b/website/web.sh index 06cce1e153..5cad238190 100755 --- a/website/web.sh +++ b/website/web.sh @@ -32,7 +32,7 @@ node customize_docs_frontmatter.js for lang in "${langs[@]}"; do mkdir -p src/$lang cp src/index.html src/$lang - cp src/learn-more.html src/$lang + cp src/messaging.html src/$lang cp src/contact.html src/$lang cp src/invitation.html src/$lang cp src/fdroid.html src/$lang @@ -65,6 +65,6 @@ done # val_json_obj=$(echo "$val_json_obj" | jq ". + {$lang: $val}") # fi # done -# main_json_obj=$(echo "$main_json_obj" | jq ". + {\"$key\": $val_json_obj}") +# main_json_obj=$(echo "$main_json_obj" | jq ". + {\"$key\": $val_json_obj}") # done # echo "$main_json_obj" > translations.json \ No newline at end of file