From a96fb2f8d11b340c9ab2313f4ad61154b29ab846 Mon Sep 17 00:00:00 2001
From: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Date: Fri, 27 Jan 2023 17:07:22 +0500
Subject: [PATCH] website: improvements to design (#1405)

* updated the design of join simplex

* updated the design of Comparison section

* updated the design of Simplex explained

* updated the design of Simplex network

* updated the design of private section

* updated the design of features section

* updated the design of unique section

* updated the design of privacy matters

* added improvements in design

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
---
 .../src/_includes/sections/join_simplex.html  |  19 ++-
 .../_includes/sections/simplex_unique.html    |   6 +-
 website/src/_includes/simplex_explained.html  |  19 ++-
 website/src/css/style.css                     |  50 ++++---
 website/src/index.html                        | 138 +++++++++---------
 website/src/js/script.js                      |  24 +--
 6 files changed, 138 insertions(+), 118 deletions(-)

diff --git a/website/src/_includes/sections/join_simplex.html b/website/src/_includes/sections/join_simplex.html
index 65d578fc14..c6f6070bd2 100644
--- a/website/src/_includes/sections/join_simplex.html
+++ b/website/src/_includes/sections/join_simplex.html
@@ -1,31 +1,30 @@
 {# join simplex #}
-<section class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] px-5">
+<section class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[855px] py-[90px] px-5">
     <div class="container flex flex-col items-center">
-        <p class="text-[35px] lg:text-[45px] text-grey-black dark:text-white text-center font-bold mb-4"><span class="text-active-blue">Join</span> SimpleX</p>
-        <p class="text-black dark:text-white text-base text-center mb-10">We invite you to join the conversation</p>
+        <p class="text-[38px] leading-[36px] md:leading-[55px] text-grey-black dark:text-white text-center font-bold mb-5"><span class="text-active-blue">Join</span> SimpleX</p>
+        <p class="text-black dark:text-white text-base text-center mb-14">We invite you to join the conversation</p>
 
-        <div class="flex flex-col items-center gap-5 self-stretch mb-10">
+        <div class="flex flex-col items-center gap-5 self-stretch mb-12">
             <a href="https://www.reddit.com/r/SimpleXChat/" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join the REDDIT community</a>
             <a href="https://github.com/simplex-chat" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join us on GitHub</a>
             <a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border-none bg-white dark:bg-[rgba(112,240,249,0.2)] border border-[#0053D0]">Donate here to help us</a>
         </div>
 
-        <p class="text-black dark:text-white text-base text-center mb-5">Sign up to receive our updates</p>
+        <p class="text-grey-black dark:text-white text-base text-center mb-7">Sign up to receive our updates</p>
 
-        <form class="flex items-center w-full max-w-[540px] mb-4"
+        <form class="flex items-center w-full max-w-[540px] mb-20"
             action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&amp;id=ad6037a2fe"
             method="post" target="_blank" novalidate>
-            <input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5"
-                placeholder="Enter your email address">
+            <input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5 placeholder:text-grey-black placeholder:dark:text-white placeholder:text-base placeholder:font-normal placeholder:tracking-[0.01em]" placeholder="Enter your email address">
             <span style="position: absolute; left: -5000px" aria-hidden="true">
                 <input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
             </span>
             <input type="submit" class="h-[44px] rounded-r-[34px] bg-primary-light text-white text-center px-8">
         </form>
 
-        <hr class="block my-10 mx-5 dark:opacity-[0.2] w-full">
+        <hr class="block mb-7 mx-5 dark:opacity-[0.2] w-full">
 
-        <p class="text-black dark:text-white text-center mb-5">Get SimpleX</p>
+        <p class="text-grey-black dark:text-white text-center mb-7">Get SimpleX</p>
         <div class="flex items-center justify-center gap-4 flex-wrap">
             <a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
             <a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
diff --git a/website/src/_includes/sections/simplex_unique.html b/website/src/_includes/sections/simplex_unique.html
index 0e87db6b64..3ae49e0b5c 100644
--- a/website/src/_includes/sections/simplex_unique.html
+++ b/website/src/_includes/sections/simplex_unique.html
@@ -1,12 +1,12 @@
-<section id="why-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] overflow-hidden px-0 sm:px-1">
+<section id="why-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] overflow-hidden px-0 sm:px-1 xl:h-[888px]">
     <div class="container scale-100">
-        <p class="text-grey-black dark:text-white text-[35px] lg:text-[45px] text-center font-bold mb-[44px] px-5 sm:px-4">Why SimpleX is <span class="gradient-text">unique</span></p>
+        <p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-14 px-5 sm:px-4">Why SimpleX is <span class="gradient-text">unique</span></p>
 
         <div class="swiper unique-swiper px-5 sm:px-4 py-2">
             <div class="swiper-wrapper mb-16">
 
                 {% for section in why_simplex_is_unique.sections %}
-                    <div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
+                    <div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit xl:min-h-[565px] px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
                         
                         <div class="md:flex-1 flex items-center justify-center h-[55%] md:h-fit w-full card-image">
                             <img class="w-full max-w-[400px] dark:hidden" src="{{ section.imgLight }}" alt="">
diff --git a/website/src/_includes/simplex_explained.html b/website/src/_includes/simplex_explained.html
index 008369512a..7016328b77 100644
--- a/website/src/_includes/simplex_explained.html
+++ b/website/src/_includes/simplex_explained.html
@@ -23,12 +23,12 @@
     }
 </style>
 
-<section id="simplex-explained" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[80px] px-5">
+<section id="simplex-explained" class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[890px] py-[90px] px-5">
     <div class="container">
-        <p class="text-[35px] lg:text-[45px] text-center font-bold text-grey-black dark:text-white mb-[40px]">Simplex explained</p>
+        <p class="text-[35px] leading-[45px] md:leading-[55px] lg:text-[38px] text-center font-bold text-grey-black dark:text-white mb-9">Simplex explained</p>
 
         <!-- Tab links -->
-        <div class="tabs hidden md:flex gap-2 mb-16">
+        <div class="tabs hidden md:flex gap-2 mb-24">
             <div data-btn-index="0" class="flex-1 tab-button tab-1 p-2 text-[20px] text-center font-bold cursor-pointer active">1. What users experience</div>
             <div data-btn-index="1" class="flex-1 tab-button tab-2 p-2 text-[20px] text-center font-bold cursor-pointer">2. How does it work</div>
             <div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. What servers see</div>
@@ -41,8 +41,8 @@
                 <div class="swiper-slide h-[inherit]">
                     <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. What users experience</div>
                     <div class="flex flex-col justify-center items-center">
-                        <img class="h-[340px] my-16" src="/img/new/explained-1.svg" alt="" />
-                        <p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
+                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-1.svg" alt="" />
+                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                             You can create contacts and groups, and have two-way conversations, as in any other messenger.
                         </p>
                         <p class="text-black dark:text-white text-[16px] font-normal text-center">
@@ -54,8 +54,8 @@
                 <div class="swiper-slide h-[inherit]">
                     <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. How does it work</div>
                     <div class="flex flex-col justify-center items-center">
-                        <img class="h-[340px] my-16" src="/img/new/explained-2.svg" alt="" />
-                        <p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
+                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-2.svg" alt="" />
+                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                             For each connection you use two separate messaging queues to send and receive messages via different servers.
                         </p>
                         <p class="text-black dark:text-white text-[16px] font-normal text-center">
@@ -67,8 +67,8 @@
                 <div class="swiper-slide h-[inherit]">
                     <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. What servers see</div>
                     <div class="flex flex-col justify-center items-center">
-                        <img class="h-[340px] my-16" src="/img/new/explained-3.svg" alt="" />
-                        <p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
+                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-3.svg" alt="" />
+                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                             The servers have separate anonymous credentials for each queue, and do not know which users they belong to.
                         </p>
                         <p class="text-black dark:text-white text-[16px] font-normal text-center">
@@ -84,7 +84,6 @@
 </section>
 
 <script>
-   
 window.addEventListener("load", function () {
     const simplexExplainedSwiper__bullets = document.querySelectorAll(".simplex-explained-swiper .swiper-pagination > span");
     const simplexExplainedSwiper__tabs = document.querySelectorAll("#simplex-explained .tabs .tab-button");
diff --git a/website/src/css/style.css b/website/src/css/style.css
index ac4fe2c12c..332247885c 100644
--- a/website/src/css/style.css
+++ b/website/src/css/style.css
@@ -159,7 +159,8 @@ html {
 #network::before {
   display: block;
   content: " ";
-  margin-top: -26px;
+  position: absolute;
+  top: -26px;
   height: 66px;
   visibility: hidden;
   pointer-events: none;
@@ -357,7 +358,7 @@ header nav {
 }
 
 .swiper-scrollbar-drag {
-  width: 112px !important;
+  /* width: 112px !important; */
   height: 8px !important;
   background-color: #0197FF;
 }
@@ -387,24 +388,24 @@ header nav {
   transform: translateY(40px);
 }
 
-.card:hover > div:nth-child(1) {
+.card:not(.no-hover):hover > div:nth-child(1) {
   height: 200px;
   padding: 12px 10px;
 }
-.card:hover > div:nth-child(2) {
+.card:not(.no-hover):hover > div:nth-child(2) {
   height: 270px;
   padding: 8px 24px;
 }
 .card.card-active > div:nth-child(2) {
-  height: 470px;
+  height: 480px;
 }
 
-.card:hover > div:nth-child(2) > *:nth-child(2),
-.card:hover > div:nth-child(2) > *:nth-child(3),
+.card:not(.no-hover):hover > div:nth-child(2) > *:nth-child(2),
+.card:not(.no-hover):hover > div:nth-child(2) > *:nth-child(3),
 .card.card-active > div:nth-child(2) > *:nth-child(2),
 .card.card-active > div:nth-child(2) > *:nth-child(3) {
   opacity: 1;
-  max-height: 470px;
+  max-height: 480px;
   transform: translateY(0px);
 }
 
@@ -417,7 +418,7 @@ header nav {
 .simplex-unique-card .card-content{
   transition: all .5s ease-out;
 }
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .simplex-unique-card .card-content .content-body{
     height: 0;
     opacity: 0;
@@ -446,16 +447,29 @@ header nav {
 
 
 /* comparison */
-#comparison table td,
-#comparison table th {
-  font-size: 15px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.4;
-  letter-spacing: 0.47px;
+#comparison table thead th{
+  font-size: 16px;
+  line-height: 36px;
+  font-weight: 500;
+  text-align: center;
+}
+#comparison table tbody td{
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
+#comparison table tbody tr > td:first-child{
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  text-align: left;
+}
+@media (min-width: 1024px) {
+  #comparison table tbody tr > td:first-child{
+    font-size: 18px;
+    line-height: 36px;
+  }  
 }
-
 
 /* hero */
 header{
diff --git a/website/src/index.html b/website/src/index.html
index e07cd3138f..a016482840 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -9,21 +9,21 @@ active_home: true
 
 {% include "hero.html" %}
 
-<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] px-5">
+<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[90px] px-5 lg:h-[888px]">
     <div class="container">
-        <p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[32px]">Why privacy <span class="gradient-text">matters</span></p>
-        <p class="text-center text-[20px] font-medium mb-[86px] text-black dark:text-white">Preserving the privacy of your metadata &mdash; <span class="text-active-blue">who you talk with</span> &mdash; protects you from:</p>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[20px] mb-[90px]">
+        <p 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">Why privacy <span class="gradient-text">matters</span></p>
+        <p class="text-center text-[18px] md:text-[20px] font-medium mb-7 md:mb-16 lg:mb-20 text-black dark:text-white">Preserving the privacy of your metadata &mdash; <span class="text-active-blue">who you talk with</span> &mdash; protects you from:</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 rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
-                <div class="flex items-center justify-center h-[215px]">
+            <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="h-[152px] flex flex-col items-center justify-between">
-                    <p class="text-center font-medium leading-[28px] text-grey-black dark:text-white">{{ section.title }}</p>
+                <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 }}</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] underline-offset-2 mb-[53px]">{{ section.overlayContent.linkText }}</a>
+                    <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] underline-offset-2">{{ section.overlayContent.linkText }}</a>
                     {{ overlay(section) }}
                     {% endif %}
                 </div>
@@ -39,11 +39,11 @@ active_home: true
 {% include "sections/simplex_unique.html" %}
 
 {# Features #}
-<section id="features" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[60px] px-5">
-    <div class="container flex flex-col items-center gap-[50px]">
-        <p class="text-[45px] text-center font-bold gradient-text">Features</p>
+<section id="features" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[95px] px-5 lg:h-[888px]">
+    <div class="container">
+        <p class="text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold gradient-text mb-20">Features</p>
 
-        <div class="mb-[50px] grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-10 gap-y-20">
+        <div class="mb-[50px] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-10 gap-y-32">
             {% for feature in features.sections %}
             <div class="flex flex-col items-center">
                 <div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
@@ -58,15 +58,15 @@ active_home: true
 </section>
 
 {# what makes simplex private #}
-<section id="privacy" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] overflow-hidden px-5">
+<section id="privacy" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] overflow-hidden px-5 lg:h-[888px]">
     <div class="container scale-100">
-        <p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[60px]">What makes SimpleX <span class="gradient-text">private</span></p>
+        <p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-20">What makes SimpleX <span class="gradient-text">private</span></p>
 
         <div class="swiper private-swiper overflow-hidden px-4 py-2">
-            <div class="swiper-wrapper mb-14">
+            <div class="swiper-wrapper mb-16">
 
                 {% for section in what_makes_simplex_private.sections %}
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="{{ section.imgLight }}" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="{{ section.imgDark }}" alt=""/>
@@ -94,20 +94,20 @@ active_home: true
 </section>
 
 {# Network #}
-<section id="network" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] px-5">
+<section id="network" class="bg-secondary-bg-light dark:bg-secondary-bg-dark lg:h-[642px] py-[95px] px-5">
     <div class="container">
-        <p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[21px]">SimpleX <span class="gradient-text">Network</span></p>
-        <p class="text-black dark:text-white text-[16px] font-normal text-center mb-[95px]">Simplex Chat provides the best privacy by combining the advantages of P2P and federated networks.</p>
+        <p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-5">SimpleX <span class="gradient-text">Network</span></p>
+        <p class="text-black dark:text-white text-[16px] font-normal text-center mb-16">Simplex Chat provides the best privacy by combining the advantages of P2P and federated networks.</p>
 
-        <div class="flex flex-col lg:flex-row justify-between gap-16">
-            <div class="flex flex-col items-center">
-                <div class="mb-[30px]">
+        <div class="flex flex-col lg:flex-row justify-between gap-12 md:gap-14 lg:gap-16">
+            <div class="flex flex-col md:flex-row lg:flex-col items-center md:gap-9 lg:gap-0">
+                <div class="mb-4 md:mb-0 lg:mb-8 md:flex-[1] flex items-center justify-center">
                     <img src="/img/new/network-1.svg" alt="" class="dark:hidden"/>
                     <img src="/img/new/network-1-dark.svg" alt="" class="hidden dark:block"/>
                 </div>
-                <div class="flex flex-col items-center justify-center">
-                    <p class="text-active-blue text-[20px] font-bold text-center">Unlike P2P networks</p>
-                    <p class="text-black dark:text-white text-[16px] font-normal text-center mb-[32px]">
+                <div class="md:flex-[2] flex flex-col items-center justify-center">
+                    <p class="text-active-blue text-xl font-bold text-center md:text-left lg:text-center self-stretch">Unlike P2P networks</p>
+                    <p class="text-black dark:text-white text-base font-normal text-center md:text-left lg:text-center">
                         All messages are sent via the servers, both providing better
                         metadata privacy and reliable asynchronous message delivery,
                         while avoiding many <a href="javascript:void(0)" data-show-overlay="{{ simplex_network_overlay.sections[0].overlayContent.overlayId }}" class="open-overlay-btn">problems of P2P networks</a>.
@@ -116,28 +116,32 @@ active_home: true
                 </div>
             </div>
 
-            <div class="flex flex-col items-center ">
-                <div class="mb-[30px]">
+            <hr class="hidden md:block lg:hidden mx-5 dark:opacity-[0.2]">
+
+            <div class="flex flex-col md:flex-row lg:flex-col items-center md:gap-9 lg:gap-0">
+                <div class="mb-4 md:mb-0 lg:mb-8 md:flex-[1] flex items-center justify-center">
                     <img src="/img/new/network-2.svg" alt="" class="dark:hidden"/>
                     <img src="/img/new/network-2-dark.svg" alt="" class="hidden dark:block"/>
                 </div>
-                <div class="flex flex-col items-center justify-center">
-                    <p class="text-active-blue text-[20px] font-bold text-center">Unlike federated networks</p>
-                    <p class="text-black dark:text-white text-[16px] font-normal text-center mb-[32px]">
+                <div class="md:flex-[2] flex flex-col items-center justify-center">
+                    <p class="text-active-blue text-xl font-bold text-center md:text-left lg:text-center self-stretch">Unlike federated networks</p>
+                    <p class="text-black dark:text-white text-base font-normal text-center md:text-left lg:text-center">
                         SimpleX relay servers do NOT store user profiles, contacts and delivered messages,
                         do NOT connect to each other, and there is NO servers directory.
                     </p>
                 </div>
             </div>
 
-            <div class="flex flex-col items-center ">
-                <div class="mb-[30px]">
+            <hr class="hidden md:block lg:hidden mx-5 dark:opacity-[0.2]">
+
+            <div class="flex flex-col md:flex-row lg:flex-col items-center md:gap-9 lg:gap-0">
+                <div class="mb-4 md:mb-0 lg:mb-8 md:flex-[1] flex items-center justify-center">
                     <img src="/img/new/network-3.svg" alt="" class="dark:hidden"/>
                     <img src="/img/new/network-3-dark.svg" alt="" class="hidden dark:block"/>
                 </div>
-                <div class="flex flex-col items-center justify-center">
-                    <p class="text-active-blue text-[20px] font-bold text-center">SimpleX network</p>
-                    <p class="text-black dark:text-white text-[16px] font-normal text-center">
+                <div class="md:flex-[2] flex flex-col items-center justify-center">
+                    <p class="text-active-blue text-xl font-bold text-center md:text-left lg:text-center self-stretch">SimpleX network</p>
+                    <p class="text-black dark:text-white text-base font-normal text-center md:text-left lg:text-center">
                         servers provide <span class="text-active-blue">unidirectional queues</span>
                         to connect the users, but they have no visibility of the network connection graph &mdash; only the users do.
                     </p>
@@ -155,69 +159,69 @@ active_home: true
 
 
 {# Comparison #}
-<section id="comparison" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] px-5">
+<section id="comparison" class="bg-secondary-bg-light dark:bg-secondary-bg-dark lg:h-[950px] py-[90px] px-5">
     <div class="text-grey-black dark:text-white container flex flex-col">
-        <p class="text-[35px] lg:text-[45px] text-center font-bold mb-10 lg:mb-20">Comparison with other protocols</p>
+        <p class="text-[35px] leading-[43px] md:leading-[55px] lg:leading-[36px] text-center font-bold mb-12 lg:mb-[90px]">Comparison with other protocols</p>
 
         <div class="w-full overflow-auto">
-            <table class="w-full border-separate border-spacing-x-5 border-spacing-y-2">
+            <table class="w-full border-separate border-spacing-x-5 border-spacing-y-2 mb-14">
                 <thead>
                     <tr>
                         <th></th>
-                        <th class="flex items-center justify-center">
-                            <img class="h-6 dark:hidden" alt="simplex logo" src="/img/new/logo-light.png"/>
-                            <img class="h-6 hidden dark:block" alt="simplex logo" src="/img/new/logo-dark.png"/>
+                        <th class="flex items-center justify-center pb-4">
+                            <img class="h-[34px] dark:hidden" alt="simplex logo" src="/img/new/logo-light.png"/>
+                            <img class="h-[34px] hidden dark:block" alt="simplex logo" src="/img/new/logo-dark.png"/>
                         </th>
-                        <th>Signal, big platforms</th>
-                        <th>XMPP, Matrix</th>
-                        <th>P2P protocols</th>
+                        <th class="pb-4">Signal, big platforms</th>
+                        <th class="pb-4">XMPP, Matrix</th>
+                        <th class="pb-4">P2P protocols</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
                         <td class="min-w-[210px]">Requires global identity</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - private</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>1</sup></td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>3</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - private</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>1</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>3</sup></td>
                     </tr>
                     <tr>
                         <td class="min-w-[210px]">Possibility of MITM</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - secure</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>4</sup></td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - secure</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>4</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
                     </tr>
                     <tr>
                         <td class="min-w-[210px]">Dependence on DNS</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No</td>
                     </tr>
                     <tr>
                         <td class="min-w-[210px]">Single or centralized network</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - decentralized</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - federated <sup>5</sup></td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>6</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - decentralized</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - federated <sup>5</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>6</sup></td>
                     </tr>
                     <tr>
                         <td class="min-w-[210px]">Central component or other network-wide attack</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>7</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>7</sup></td>
                     </tr>
                 </tbody>
             </table>
         </div>
 
-        <hr class="block my-12 mx-5 dark:opacity-[0.2]">
+        <hr class="block mb-8 mx-5 dark:opacity-[0.2]">
 
         <div>
             <div class="px-5">
-                <ol class="text-base leading-6 list-decimal list-inside">
+                <ol class="text-sm lg:text-base font-medium leading-6 list-decimal list-inside">
                     <li> Usually based on a phone number, in some cases on usernames</li>
                     <li> DNS-based addresses</li>
                     <li> Public key or some other globally unique ID</li>
diff --git a/website/src/js/script.js b/website/src/js/script.js
index 4c392b7a94..facc0c39ca 100644
--- a/website/src/js/script.js
+++ b/website/src/js/script.js
@@ -23,34 +23,38 @@ const isMobile = {
 
 const privateSwiper = new Swiper('.private-swiper', {
     slidesPerView: 1,
+    slidesPerGroup: 1,
     spaceBetween: 20,
-    // autoplay: {
-    //     delay: 3000,
-    // },
-
-    direction: 'horizontal',
+    allowTouchMove: true,
     scrollbar: {
-        el: ".swiper-scrollbar",
+        el: '.swiper-scrollbar',
+        draggable: true,
+        snapOnRelease: true,
         dragSize: 100,
     },
-
+    direction: 'horizontal',
     navigation: {
         nextEl: '.private-swiper-button-next',
         prevEl: '.private-swiper-button-prev',
     },
-
     breakpoints: {
-        1280: {
+        1400: {
             slidesPerView: 4,
+            slidesPerGroup: 4,
             spaceBetween: 20,
+            allowTouchMove: false,
         },
-        1024: {
+        1200: {
             slidesPerView: 3,
+            slidesPerGroup: 3,
             spaceBetween: 20,
+            allowTouchMove: true,
         },
         768: {
             slidesPerView: 2,
+            slidesPerGroup: 2,
             spaceBetween: 20,
+            allowTouchMove: true,
         }
     },
 });