From aa34446bf48d29145530618b6d68e80abac832d9 Mon Sep 17 00:00:00 2001
From: Evgeny <evgeny@poberezkin.com>
Date: Wed, 1 Oct 2025 17:51:04 +0100
Subject: [PATCH] website: promoted groups on home page (#6323)

* website: promoted groups on home page

* use local images when fallback listing is used, replace image on download error with group icon

* welcome message

* more links

* rename CSS classes
---
 website/src/css/design3.css | 126 +++++++++----------
 website/src/index.html      |  81 ++++++------
 website/src/js/design3.js   | 238 +++++++++++++++++++++++++++++++++++-
 website/src/js/directory.js |  72 +++++------
 4 files changed, 380 insertions(+), 137 deletions(-)

diff --git a/website/src/css/design3.css b/website/src/css/design3.css
index 30f7deb644..d53e48e6c2 100644
--- a/website/src/css/design3.css
+++ b/website/src/css/design3.css
@@ -216,7 +216,7 @@
     /* Compute cover drawn size and inner safe frame (60% of full image on each axis) */
     /* --cover-bg-w: calc(min((3200 / 1920) * 100vw, (3200 / 1080) * 100vh));
     --cover-bg-h: calc(min((1800 / 1920) * 100vw, (1800 / 1080) * 100vh));
-    --cover-safe-w: calc(var(--cover-bg-w) * 0.6); 
+    --cover-safe-w: calc(var(--cover-bg-w) * 0.6);
     --cover-safe-h: calc(var(--cover-bg-h) * 0.6);
     --cover-vw: calc(var(--cover-safe-w) / 100);
     --cover-vh: calc(var(--cover-safe-h) / 100); */
@@ -701,7 +701,7 @@ main .section-bg {
     }
 }
 
-.page-6 .communities-images {
+.page-6 .group-images {
     position: absolute;
     top: 0;
     right: 0;
@@ -716,14 +716,14 @@ main .section-bg {
     gap: calc(var(--sec-vwu-desktop) * 2);
 }
 
-.page-6 .communities-images img {
+.page-6 .group-images img {
     width: 100%;
     height: auto;
     border-radius: calc(var(--sec-vhu-desktop) * 1.8);
 }
 
 @media screen and (max-width: 767px) {
-    .page-6 .communities-images {
+    .page-6 .group-images {
         width: 100%;
         height: 10%;
         padding: calc(var(--sec-vhu-desktop) * 6) calc(var(--sec-vwu-desktop) * 3);
@@ -734,76 +734,78 @@ main .section-bg {
         gap: calc(var(--sec-vwu-desktop) * 1.5);
     }
 
-    .page-6 .communities-images img {
+    .page-6 .group-images img {
         border-radius: calc(var(--sec-vhu-desktop) * 0.8);
     }
 }
 
-/* 
+/*
     Utility: position an image on the grid using CSS vars
     Usage example:
     <img class="pos" style="--c:3; --r:2; --w:2; --h:2" src="..." />
-    places the image starting at column 3, row 2, spanning 2 columns × 2 rows. 
+    places the image starting at column 3, row 2, spanning 2 columns × 2 rows.
 */
-.page-6 .communities-images>img:nth-child(1) { --c: 2; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(2) { --c: 4; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(3) { --c: 5; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(4) { --c: 7; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(5) { --c: 1; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(6) { --c: 3; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(7) { --c: 4; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(8) { --c: 5; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(9) { --c: 6; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(10) { --c: 8; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(11) { --c: 2; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(12) { --c: 3; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(13) { --c: 4; --r: 3; --w: 2; --h: 2 }
-.page-6 .communities-images>img:nth-child(14) { --c: 6; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(15) { --c: 7; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(16) { --c: 1; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(17) { --c: 3; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(18) { --c: 6; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(19) { --c: 8; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(20) { --c: 2; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(21) { --c: 4; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(22) { --c: 5; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(23) { --c: 6; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(24) { --c: 7; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(25) { --c: 3; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(26) { --c: 4; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(27) { --c: 6; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.simplex-image { --c: 4; --r: 3; --w: 2; --h: 2 }
+
+.page-6 .group-images>a.group-image:nth-child(1) { --c: 2; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(2) { --c: 4; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(3) { --c: 5; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(4) { --c: 7; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(5) { --c: 1; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(6) { --c: 3; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(7) { --c: 4; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(8) { --c: 5; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(9) { --c: 6; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(10) { --c: 8; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(11) { --c: 2; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(12) { --c: 3; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(14) { --c: 6; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(15) { --c: 7; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(16) { --c: 1; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(17) { --c: 3; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(18) { --c: 6; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(19) { --c: 8; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(20) { --c: 2; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(21) { --c: 4; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(22) { --c: 5; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(23) { --c: 6; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(24) { --c: 7; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(25) { --c: 3; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(26) { --c: 4; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(27) { --c: 6; --r: 6; --w: 1; --h: 1 }
 
 @media screen and (max-width: 767px) {
-.page-6 .communities-images>img:nth-child(1) { --c: 3; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(2) { --c: 6; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(3) { --c: 2; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(4) { --c: 4; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(5) { --c: 5; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(6) { --c: 7; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(7) { --c: 3; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(8) { --c: 4; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(9) { --c: 5; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(10) { --c: 6; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(11) { --c: 8; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(12) { --c: 2; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(13) { --c: 4; --r: 4; --w: 2; --h: 2 }
-.page-6 .communities-images>img:nth-child(14) { --c: 3; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(15) { --c: 6; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(16) { --c: 7; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(17) { --c: 1; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(18) { --c: 3; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(19) { --c: 6; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(20) { --c: 7; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(21) { --c: 2; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(22) { --c: 4; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(23) { --c: 5; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(24) { --c: 6; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(25) { --c: 3; --r: 7; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(26) { --c: 4; --r: 7; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(27) { --c: 6; --r: 7; --w: 1; --h: 1 }
+.page-6 .group-images>a.simplex-image { --c: 4; --r: 4; --w: 2; --h: 2 }
+
+.page-6 .group-images>a.group-image:nth-child(1) { --c: 3; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(2) { --c: 6; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(3) { --c: 2; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(4) { --c: 4; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(5) { --c: 5; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(6) { --c: 7; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(7) { --c: 3; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(8) { --c: 4; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(9) { --c: 5; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(10) { --c: 6; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(11) { --c: 8; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(12) { --c: 2; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(14) { --c: 3; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(15) { --c: 6; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(16) { --c: 7; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(17) { --c: 1; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(18) { --c: 3; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(19) { --c: 6; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(20) { --c: 7; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(21) { --c: 2; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(22) { --c: 4; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(23) { --c: 5; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(24) { --c: 6; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(25) { --c: 3; --r: 7; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(26) { --c: 4; --r: 7; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(27) { --c: 6; --r: 7; --w: 1; --h: 1 }
 }
 
-.page-6 .communities-images img {
+.page-6 .group-images a {
     grid-column: var(--c) / span var(--w, 1);
     grid-row: var(--r) / span var(--h, 1);
 }
diff --git a/website/src/index.html b/website/src/index.html
index 07e1d9b6fd..35cb9448e9 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -13,13 +13,13 @@
     <header id="navbar">
         <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
         {# <a href="/" class="hidden dark:inline-block dark:lg:hidden lg:hidden ltr:mr-auto rtl:ml-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a> #}
-        
+
         <nav id="menu">
             <ul>
                 <li class="nav-link">
                     <a href="/{{ '' if lang == 'en' else lang }}">
                         <span class="nav-link-text">{{ "home" | i18n({}, lang ) | safe }}</span>
-                    </a>                        
+                    </a>
                 </li>
 
                 <hr>
@@ -65,9 +65,9 @@
                         </a></li>
                         <li><a href="/docs/protocol/simplex-chat.html">{{ "chat-protocol" | i18n({}, lang ) | safe }}</a></li>
                         <li><a href="/docs/glossary.html">{{ "glossary" | i18n({}, lang ) | safe }}</a></li>
-                        
+
                         <hr>
-                        
+
                         {% for doc in docs_dropdown.items %}
                             <li><a href="{{ doc.url | url }}" class="{{ "active" if page.url == doc.url | url else '' }} lg:px-[20px] inline-block whitespace-nowrap">{{ doc.title | i18n({}, lang ) | safe }}</a></li>
                         {% endfor %}
@@ -101,7 +101,7 @@
                 <li class="nav-link">
                     <a href="/jobs">
                         <span class="nav-link-text">{{ "jobs" | i18n({}, lang ) | safe }}</span>
-                    </a>                        
+                    </a>
                 </li>
 
                 <hr>
@@ -142,7 +142,7 @@
                         {% endif %}
                     {% endfor %}
                 </a>
-                
+
                 <ul class="sub-menu">
                     {% for language in languages.languages %}
                         {% if language.enabled %}
@@ -159,7 +159,7 @@
                                         </div>
                                         <p>{{ language.name }}</p>
                                     </a>
-                                {% endif %} 
+                                {% endif %}
                             </li>
                         {% endif %}
                     {% endfor %}
@@ -219,7 +219,7 @@
             </section>
 
             <section class="page-3 page">
-                <div class="area">  
+                <div class="area">
                     <div class="image"></div>
                     <div class="text-container">
                         <h2>You Own<br>The Next Web</h2>
@@ -230,7 +230,7 @@
             </section>
 
             <section class="page-4 page">
-                <div class="area"> 
+                <div class="area">
                     <div class="image"></div>
                     <div class="text-container">
                         <h2>Communities That Last</h2>
@@ -267,40 +267,42 @@
 
             <section class="page-6 page">
                 <div class="area">
-                    <div class="communities-images">
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/new/logo-symbol-dark.svg" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
-                        <img src="/img/design_3/testflight-dark.png" />
+                    <div class="group-images">
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="https://smp4.simplex.im/g#hr4lvFeBmndWMKTwqiodPz3VBo_6UmdGWocXd1SupsM" class="simplex-image" title="SimpleX users group" target="_blank">
+                            <img src="/img/new/logo-symbol-dark.svg">
+                        </a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
+                        <a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
                     </div>
                     <div class="text-container">
                         <h2>Join SimpleX Communities</h2>
                         <p>Hundreds of thousands people already trust SimpleX messaging.</p>
                         <p>Find your communities in SimpleX directory and create your own!</p>
-                        <a class="gradient-text" href="/">View SimpleX Directory</a>
+                        <a class="gradient-text" href="/directory">View SimpleX Directory</a>
                     </div>
                 </div>
             </section>
@@ -308,6 +310,7 @@
         </main>
     </div>
 
+    <script src="/js/directory.js"></script>
     <script src="/js/design3.js"></script>
     <script>
     (function setVH(){
@@ -337,7 +340,7 @@
         }, { threshold: [0, 0.02, 1] });
         io.observe(cover);
     })();
-    
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
diff --git a/website/src/js/design3.js b/website/src/js/design3.js
index 8f1b8902ce..3d97d3438c 100644
--- a/website/src/js/design3.js
+++ b/website/src/js/design3.js
@@ -1,8 +1,10 @@
 const isMobile = {
     Android: () => navigator.userAgent.match(/Android/i),
-    iOS: () => navigator.userAgent.match(/iPhone|iPad|iPod/i)
+    iOS: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
+    any: () => navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)
 };
 
+(function() {
 document.addEventListener('DOMContentLoaded', () => {
     const googlePlayBtn = document.querySelector('.google-play-btn');
     const appleStoreBtn = document.querySelector('.apple-store-btn');
@@ -29,4 +31,238 @@ document.addEventListener('DOMContentLoaded', () => {
         testflightBtn.classList.remove('hidden');
         androidBtn.classList.remove('hidden');
     }
+
+    showPromotedGroups();
 });
+
+async function showPromotedGroups() {
+    welcome();
+    const listing = await fetchJSON(simplexDirectoryDataURL + 'promoted.json');
+    let [entries, imgPath] =
+            Array.isArray(listing?.entries) && listing.entries.length > 0
+            ? [listing.entries, simplexDirectoryDataURL]
+            : [fallbackEntries(), '/img/groups/'];
+    const links = document.querySelectorAll('.group-images a.group-image');
+    entries = shuffleEntries(listing.entries, links.length);
+
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i]
+        const img = link.querySelector('img');
+        const {displayName, imageFile, groupLink} = entries[i % entries.length];
+        img.src = imageFile ? imgPath + imageFile : '/img/group.svg';
+        img.addEventListener('error', () => img.src = '/img/group.svg');
+        link.title = displayName;
+        const groupLinkUri = groupLink.connShortLink ?? groupLink.connFullLink
+        try {
+          link.href = platformSimplexUri(groupLinkUri);
+        } catch(e) {
+          console.log(e);
+          link.href = groupLinkUri;
+        }
+    }
+
+    function shuffleEntries(entries, count) {
+        let a = entries.filter(e => e.displayName != simplexUsersGroup)
+        shuffle();
+        let result = a;
+        while (result.length < count) {
+            shuffle();
+            result = result.concat(a);
+        }
+        return result;
+
+        function shuffle() {
+            for (let i = a.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [a[i], a[j]] = [a[j], a[i]];
+            }
+        }
+    }
+
+    async function fetchJSON(url) {
+        try {
+            const response = await fetch(url)
+            if (!response.ok) throw new Error(`HTTP status: ${response.status}`)
+            return await response.json()
+        } catch (e) {
+            console.error(e)
+        }
+    }
+
+    function welcome() {
+        console.log('%c%s', 'font-family: monospace; white-space: pre;',
+`Welcome to                  __   __
+ ___ ___ __  __ ___ _    ___\\ \\ / / ___ _  _   _ _____
+/ __|_ _|  \\/  | _ \\ |  | __ \\ V / / __| || | /_\\_   _|
+\\__ \\| || |\\/| |  _/ |__| _| / . \\| (__| __ |/ _ \\| |
+|___/___|_|  |_|_| |____|___/_/ \\_\\\\___|_||_/_/ \\_\\_|
+
+SimpleX directory: https://simplex.chat/directory
+Ask SimpleX team: https://smp6.simplex.im/a#lrdvu2d8A1GumSmoKb2krQmtKhWXq-tyGpHuM7aMwsw
+GitHub: https://github.com/simplex-chat/simplex-chat
+Reddit: https://www.reddit.com/r/SimpleXChat
+X/Twitter: https://x.com/SimpleXChat
+
+Docs
+----
+Whitepaper: https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md
+Bots API: https://github.com/simplex-chat/simplex-chat/tree/stable/bots
+TypeScript library: https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript
+Terminal CLI: https://github.com/simplex-chat/simplex-chat/blob/stable/docs/CLI.md
+Hosting SMP servers: https://simplex.chat/docs/server.html
+
+Downloads
+---------
+Apps: https://simplex.chat/downloads
+Servers: https://github.com/simplex-chat/simplexmq/releases
+
+Project
+-------
+About & Contact us: https://simplex.chat/about
+Privacy policy: https://simplex.chat/privacy
+Join team: https://simplex.chat/jobs
+Donations: https://github.com/simplex-chat/simplex-chat#please-support-us-with-your-donations
+`
+        );
+    }
+
+    function fallbackEntries() {
+        console.log('Error: using hardcoded listing as fallback');
+        return [
+            {
+                displayName: "Bitcoin&LightningNetwork",
+                groupLink: {
+                    connShortLink: "https://smp4.simplex.im/g#-xXBhQRrvRB1ffhxcPpB44Im1_ci4BMIdCHwj8m8IHo"
+                },
+                imageFile: "images/F4hPy5IGO6G9QUH6-nM_-A.jpg"
+            },
+            {
+                displayName: "Freedom.Tech",
+                groupLink: {
+                    connShortLink: "https://smp4.simplex.im/g#r5z3uzHp8_pL3ZPyuBCJWmvzQxMnc0Tj3QMLTEnyw6c"
+                },
+                imageFile: "images/HylzOLARvIhUR1wiq0fnJA.png"
+            },
+            {
+                displayName: "Spirituality",
+                groupLink: {
+                    connShortLink: "https://smp5.simplex.im/g#OZ8ml_2dj5AutxnNIrHy0CPn1QdnSkQ0oh_84nAv5io"
+                },
+                imageFile: "images/eb2RINRsdEBI0a06ghzqVg.jpg"
+            },
+            {
+                displayName: "SovereignStack",
+                groupLink: {
+                    connShortLink: "https://smp5.simplex.im/g#u2D3BdOb3nt9wMR_qoweAINLcEZaU60Xjwfpf74Dq2I"
+                },
+                imageFile: "images/YLLz-47eBnAoIH1PKYJ75g.jpg"
+            },
+            {
+                displayName: "Monero",
+                groupLink: {
+                    connShortLink: "https://smp6.simplex.im/g#FlIy4-q4TzZDI9fK2aw3lQTUvnmaoiLCyeKCoP27kGU"
+                },
+                imageFile: "images/TwaN96DcV2OCMfUo6oJ4LQ.png"
+            },
+            {
+                displayName: "GrapheneOS (unofficial)",
+                groupLink: {
+                    connShortLink: "https://smp5.simplex.im/g#6OTo6kP4ccV4lPOOHekZfOajdxGkxC1_DkAR39_cU4U"
+                },
+                imageFile: "images/zIotMF8Zoe85k956B48N9g.jpg"
+            },
+            {
+                displayName: "Aragonite - privacy search engine",
+                groupLink: {
+                    connShortLink: "https://smp4.simplex.im/g#qqkNFo9kdpype-ArQ6HdA_bBpngw37y3Hk-sjp-px_o"
+                },
+                imageFile: "images/vzejmEMUU_ttg2lJDIk5hA.png"
+            },
+            {
+                displayName: "BasicSwap",
+                groupLink: {
+                    connShortLink: "https://smp5.simplex.im/g#yXMQy5Si6sD5YAdCB4DlUM0kvlKYcUfSiIvOA-RXI_U"
+                },
+                imageFile: "images/AXalaTZ4HsgGtEkaGFbclg.png"
+            },
+            {
+                displayName: "Linux",
+                groupLink: {
+                    connShortLink: "https://smp5.simplex.im/g#gqXY-Fxwral34c4bsHlYKZ5QuB6ptVSRMwhWgLKHz54"
+                },
+                imageFile: "images/gqyRO21CwqK3huZ2zbkOqQ.jpg"
+            },
+            {
+                displayName: "ModernSurvival",
+                groupLink: {
+                    connShortLink: "https://smp5.simplex.im/g#e4_r2E20FSWl97XGsHyXoPOkW5B6SmjlWQ1ngVW6Umc"
+                },
+                imageFile: "images/5QzoN8PNFD2dkButszPu5g.png"
+            },
+            {
+                displayName: "Qubes OS",
+                groupLink: {
+                    connShortLink: "https://smp5.simplex.im/g#COegA1s1ppZG4hRbcpuWwx_QWB4ScouQcIDWwXx64SY"
+                },
+                imageFile: "images/Wsdcf731ufbEOYpHc2rqrg.jpg"
+            },
+            {
+                displayName: "RoboSats",
+                groupLink: {
+                    connShortLink: "https://smp4.simplex.im/g#PNRhbupXbsSr5SpkjqP8IjkI6ACPCr2WOxAqSAW4jr0"
+                },
+                imageFile: "images/uZU6Cn1przsjVJ-DBm1-eA.jpg"
+            },
+            {
+                displayName: "Guardian Project (Unofficial)",
+                groupLink: {
+                    connShortLink: "https://smp5.simplex.im/g#7zpeTUzhVIwEbZpvo9SUGz1LE35jKfmF_AHYx5YLsxQ"
+                },
+                imageFile: "images/NvmOInofh4RSB2fHdN0zQA.jpg"
+            },
+            {
+                displayName: "Private Messaging Apps 2",
+                groupLink: {
+                    connShortLink: "https://smp6.simplex.im/g#aPhAePNB7Nn-W4kUBNBpZELXttysG-yAM8ZiU2XoB10"
+                },
+                imageFile: "images/9aT7qRY_JbSJsW4qDaIHEg.jpg"
+            },
+            {
+                displayName: "Cake Wallet - Official",
+                groupLink: {
+                    connShortLink: "https://smp5.simplex.im/g#D46rZgLF1eLDLkOyqYnaifRuZcYjlEMgkujKV2buH6k"
+                },
+                imageFile: "images/YhyznG68PNewCNjoD_ceOg.png"
+            },
+            {
+                displayName: "CoMaps (EN)",
+                groupLink: {
+                    connShortLink: "https://smp4.simplex.im/g#mBdIDCJotrN7pimTmXoaAPybC7CmCaaAFxQcwultCvo"
+                },
+                imageFile: "images/BD6FXuHO-eKOnYCAzkRfmA.jpg"
+            },
+            {
+                displayName: "NBTV Community",
+                groupLink: {
+                    connShortLink: "https://smp6.simplex.im/g#RX598AUwyQBG6bqa4TOnEnUg7xONdrA-_e0CmNGxEBI"
+                },
+                imageFile: "images/n3VLCEBWhqU9rVtlEAKUhQ.jpg"
+            },
+            {
+                displayName: "Lossless Audio Community",
+                groupLink: {
+                    connShortLink: "https://smp6.simplex.im/g#D4P5ENAzT-JoVlFNvRC7geHkkMUuQ9IuhQQC15OFE-o"
+                },
+                imageFile: "images/B3xza7zUzYi3dHiRsg6Afg.jpg"
+            },
+            {
+                displayName: "RetoSwap – Official SimpleXChat Group",
+                groupLink: {
+                    connShortLink: "https://smp5.simplex.im/g#-_h6fBWisca6RKhteZtVuXol1a49vFH1Jo-n74fnRK0"
+                },
+                imageFile: "images/ESomaJp7MlFlThqcoj3Ycg.png"
+            }
+        ]
+    }
+}
+})();
diff --git a/website/src/js/directory.js b/website/src/js/directory.js
index eb8b457c59..47426ffdac 100644
--- a/website/src/js/directory.js
+++ b/website/src/js/directory.js
@@ -1,7 +1,5 @@
 (function() {
-const directoryDataURL = 'https://directory.simplex.chat/data/';
-
-// const directoryDataURL = 'http://localhost:8080/directory-data/';
+if (!document.location.pathname.startsWith('/directory')) return;
 
 let allEntries = [];
 
@@ -14,7 +12,7 @@ let currentSearch = '';
 let currentPage = 1;
 
 async function initDirectory() {
-  const listing = await fetchJSON(directoryDataURL + 'listing.json')
+  const listing = await fetchJSON(simplexDirectoryDataURL + 'listing.json')
   const liveBtn = document.querySelector('#top-pagination .live');
   const newBtn = document.querySelector('#top-pagination .new');
   const topBtn = document.querySelector('#top-pagination .top');
@@ -122,8 +120,6 @@ function roundedTs(s) {
   }
 }
 
-const simplexUsersGroup = 'SimpleX users group';
-
 function entrySortPriority(entry) {
   return entry.displayName === simplexUsersGroup
     ? Number.MAX_VALUE
@@ -262,7 +258,7 @@ function displayEntries(entries) {
       imgLinkElement.title = `Join ${displayName}`;
 
       const imgElement = document.createElement('img');
-      imgElement.src = imageFile ? directoryDataURL + imageFile : '/img/group.svg';
+      imgElement.src = imageFile ? simplexDirectoryDataURL + imageFile : '/img/group.svg';
       imgElement.alt = displayName;
       imgElement.addEventListener('error', () => imgElement.src = '/img/group.svg');
       imgLinkElement.appendChild(imgElement);
@@ -412,34 +408,6 @@ function targetBlank(uri) {
   return isCurrentSite(uri) ? '' : ' target="_blank"'
 }
 
-const simplexAddressRegexp = /^simplex:\/([a-z]+)#(.+)/i;
-
-const simplexShortLinkTypes = ["a", "c", "g", "i", "r"];
-
-function platformSimplexUri(uri) {
-  if (isMobile.any()) return uri;
-  const res = uri.match(simplexAddressRegexp);
-  if (!res || !Array.isArray(res) || res.length < 3) return uri;
-  const linkType = res[1];
-  const fragment = res[2];
-  if (simplexShortLinkTypes.includes(linkType)) {
-    const queryIndex = fragment.indexOf('?');
-    if (queryIndex === -1) return uri;
-    const hashPart = fragment.substring(0, queryIndex);
-    const queryStr = fragment.substring(queryIndex + 1);
-    const params = new URLSearchParams(queryStr);
-    const host = params.get('h');
-    if (!host) return uri;
-    params.delete('h');
-    let newFragment = hashPart;
-    const remainingParams = params.toString();
-    if (remainingParams) newFragment += '?' + remainingParams;
-    return `https://${host}:/${linkType}#${newFragment}`;
-  } else {
-    return `https://simplex.chat/${linkType}#${fragment}`;
-  }
-}
-
 function renderMarkdown(fts) {
   let html = '';
   for (const ft of fts) {
@@ -509,3 +477,37 @@ function renderMarkdown(fts) {
   return html;
 }
 })();
+
+const simplexDirectoryDataURL = 'https://directory.simplex.chat/data/';
+
+// const simplexDirectoryDataURL = 'http://localhost:8080/directory-data/';
+
+const simplexUsersGroup = 'SimpleX users group';
+
+const simplexAddressRegexp = /^simplex:\/([a-z]+)#(.+)/i;
+
+const simplexShortLinkTypes = ["a", "c", "g", "i", "r"];
+
+function platformSimplexUri(uri) {
+  if (isMobile.any()) return uri;
+  const res = uri.match(simplexAddressRegexp);
+  if (!res || !Array.isArray(res) || res.length < 3) return uri;
+  const linkType = res[1];
+  const fragment = res[2];
+  if (simplexShortLinkTypes.includes(linkType)) {
+    const queryIndex = fragment.indexOf('?');
+    if (queryIndex === -1) return uri;
+    const hashPart = fragment.substring(0, queryIndex);
+    const queryStr = fragment.substring(queryIndex + 1);
+    const params = new URLSearchParams(queryStr);
+    const host = params.get('h');
+    if (!host) return uri;
+    params.delete('h');
+    let newFragment = hashPart;
+    const remainingParams = params.toString();
+    if (remainingParams) newFragment += '?' + remainingParams;
+    return `https://${host}:/${linkType}#${newFragment}`;
+  } else {
+    return `https://simplex.chat/${linkType}#${fragment}`;
+  }
+}