website: new things (#6344)

* add learn_more.md section in /learn-more page

* fix cover swiping bug & improve gradient

* fix click bug of group-images

website/.eleventy.js

@@ -69,6 +69,13 @@ fs.readdir(translationsDirectoryPath, (err, files) => {
 const translations = require("./translations.json")
 
 module.exports = function (ty) {
+  // Add this after your markdownLib definition
+  ty.addShortcode("mdInclude", function (filepath) {
+    const fullPath = path.join(__dirname, 'src/_includes', filepath);
+    const content = fs.readFileSync(fullPath, 'utf8');
+    return markdownLib.render(content);
+  });
+
   ty.addShortcode("cfg", (name) => globalConfig[name])
 
   ty.addFilter("getlang", (path) => {

website/src/_includes/layouts/main.html

@@ -27,6 +27,7 @@
         <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico"/>
 
         <link rel="stylesheet" href="/css/swiper-bundle.min.css">
+        <link rel="stylesheet" href="/css/blog.css">
         <link href="/css/tailwind.css" rel="stylesheet"/>
         <link rel="stylesheet" href="/css/style.css">
         <script async defer src="https://buttons.github.io/buttons.js"></script>

website/src/_includes/sections/learn_more.md

@@ -0,0 +1,30 @@
+# Learn More
+
+## The First Messenger Without User IDs
+
+Unlike other messaging apps, SimpleX Chat has no user identifiers at all - not even random numbers. This protects both your messages and your metadata, hiding who you communicate with from servers and observers.
+
+## Why It Matters
+
+**Complete Privacy**: Other apps use phone numbers, usernames, or IDs. SimpleX uses none of these, making it impossible to build your social graph.
+
+**No Spam**: You can't be contacted unless you share a one-time invitation link.
+
+**Your Data**: Everything stays on your device. Servers only hold messages temporarily until delivered.
+
+**True Decentralization**: Use your own servers or the provided ones - everyone can still communicate.
+
+## Key Features
+
+- 🔐 Double ratchet end-to-end encryption with post-quantum resistance
+- 📱 Mobile apps for iOS and Android, desktop apps for all platforms
+- 🎭 Incognito mode, disappearing messages, multiple profiles
+- 🌐 Tor support and private message routing
+- 💾 Encrypted local database and files
+- 🚀 Open source with security audits by Trail of Bits
+
+## How It Works
+
+Connect by sharing a QR code or link. SimpleX uses disposable message queues instead of user addresses - like having a different phone number for each contact, automatically managed.
+
+[Get Started](https://simplex.chat/downloads/) | [Read the Docs](https://github.com/simplex-chat/simplex-chat)

website/src/css/blog.css

@@ -190,12 +190,12 @@ h3::before {
   outline: none;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+#article h1,
+#article h2,
+#article h3,
+#article h4,
+#article h5,
+#article h6 {
   clear: both;
 }
 
@@ -220,7 +220,7 @@ h6 {
 }
 
 @media (max-width:768px) {
-  img {
+  #article img {
     width: 100%;
   }
 }

website/src/css/design3.css

@@ -204,12 +204,12 @@
 }
 
 :root {
-    --bg-grad: linear-gradient(10deg,
+    --bg-grad: linear-gradient(9.2deg,
             #000000 0%,
-            #131d49 55%,
-            #3f5598 70%,
-            #c3faff 90%,
-            #fff6e0 100%);
+            #131d49 52%,
+            #3f5598 65%,
+            #c3faff 85%,
+            #fff6e0 90%);
 
     --nav-color: #ffffff;
 
@@ -306,6 +306,7 @@ p {
 html, body {
     scroll-snap-type: y mandatory;
     scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
 }
 
 section.page {
@@ -404,13 +405,16 @@ main {
 }
 
 main .section-bg {
-    position: fixed;
+    position: sticky;
+    top: 0;
     inset: 0;
-    height: 100svh;          /* fallback */
-    margin-bottom: -100svh;  /* cancel own layout height */
+    height: 100lvh;          /* fallback */
+    margin-bottom: -100lvh;  /* cancel own layout height */
+    width: 100vw;
 
     background-image: var(--bg-grad);
     background-position: center;
+    background-size: cover;
     background-repeat: no-repeat;
     z-index: -1;
     pointer-events: none;
@@ -712,6 +716,7 @@ main .section-bg {
     grid-template-columns: repeat(8, 1fr);
     grid-template-rows: repeat(6, 1fr);
     gap: calc(var(--sec-vwu-desktop) * 2.1);
+    z-index: 2;
 }
 
 .page-6 .group-images img {
@@ -1254,8 +1259,8 @@ section.page.footer {
 
 @media screen and (max-width: 768px) {
     section.page.footer {
-        height: 100vh;
-        min-height: 100vh;
+        height: 100lvh;
+        min-height: 100lvh;
     }
 }
 

website/src/learn-more.html

@@ -7,31 +7,9 @@ active_home: true
 ---
 {%- from "components/macro.njk" import overlay -%}
 
-{% include "hero.html" %}
-
-<section id="why-privacy" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[90px] px-5 lg:h-[888px]">
+<section id="article" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[95px] px-5">
     <div class="container">
-        <h2 class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-4 md:mb-8">{{ "privacy-matters-section-header" | i18n({}, lang ) | safe }}</h2>
-        <p class="text-center text-[18px] md:text-[20px] font-medium mb-7 md:mb-16 lg:mb-20 text-black dark:text-white">{{ "privacy-matters-section-subheader" | i18n({}, lang ) | safe }}</p>
-        <div class="flex flex-col lg:flex-row gap-[20px] mb-[62px] lg:mb-[90px]">
-
-            {% for section in why_privacy_matters.sections %}
-            <div class="bg-white dark:bg-transparent px-[34px] flex flex-col md:flex-row lg:flex-col items-center rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
-                <div class="md:w-[30%] lg:w-full flex items-center justify-center h-[215px]">
-                    <img src="{{ section.imgLight }}" alt="">
-                </div>
-                <div class="md:w-[70%] lg:w-full flex flex-col items-center md:items-start lg:items-center gap-5 mb-[54px] md:mb-0 lg:mb-[54px]">
-                    <p class="font-medium text-xl text-center text-grey-black dark:text-white">{{ section.title | i18n({}, lang ) | safe }}</p>
-                    {% if section.overlayContent %}
-                    <a href="javascript:void(0);" data-show-overlay="{{ section.overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] text-center underline-offset-2">{{ section.overlayContent.linkText | i18n({}, lang ) | safe }}</a>
-                    {{ overlay(section,lang) }}
-                    {% endif %}
-                </div>
-            </div>
-            {% endfor %}
-
-        </div>
-        <p class="text-center w-full max-w-[900px] text-[20px] leading-[28px] m-auto text-black dark:text-white">{{ "privacy-matters-section-label" | i18n({}, lang ) | safe }}</p>
+        {% mdInclude "sections/learn_more.md" %}
     </div>
 </section>
 
@@ -239,4 +217,4 @@ active_home: true
 </section>
 
 {# join simplex #}
-{% include "sections/join_simplex.html" %}
+{# {% include "sections/join_simplex.html" %} #}