Adding a new block that shows which platforms are under development, and in the future, when users click on the interactive elements of the block, they will be directed to marketplaces or download the applications to their computer.

index.html

@@ -1530,6 +1530,7 @@
                                 React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Pay-per-session via WebLN")
                             ])
                         ]),
+
                         // Wallet Logos Section
                         React.createElement('div', {
                             key: 'wallet-logos-section',
@@ -1867,6 +1868,8 @@
                         ]),
                         React.createElement(UniqueFeatureSlider, { key: 'unique-features-slider' }),
 
+                        React.createElement(DownloadApps, { key: 'download-apps' }),
+
                         React.createElement(ComparisonTable, { key: 'comparison-table' }),    
                         
                         React.createElement(Roadmap, { key: 'roadmap' }),
@@ -3519,7 +3522,8 @@
             loadReactComponent('./src/components/ui/PasswordModal.jsx', 'PasswordModal'), 
             loadReactComponent('./src/components/ui/SessionTypeSelector.jsx', 'SessionTypeSelector'), 
             loadReactComponent('./src/components/ui/LightningPayment.jsx', 'LightningPayment'), 
-            loadReactComponent('./src/components/ui/PaymentModal.jsx', 'PaymentModal') 
+            loadReactComponent('./src/components/ui/PaymentModal.jsx', 'PaymentModal'), 
+            loadReactComponent('./src/components/ui/DownloadApps.jsx', 'DownloadApps') 
         ]);
 
 if (typeof initializeApp === 'function') {

src/components/ui/DownloadApps.jsx

@@ -0,0 +1,90 @@
+const DownloadApps = () => {
+    const apps = [
+        { id: 'web', name: 'Web App', subtitle: 'Browser Version', icon: 'fas fa-globe', platform: 'Web', isActive: true, url: 'https://securebitchat.github.io/securebit-chat/', color: 'green' },
+        { id: 'windows', name: 'Windows', subtitle: 'Desktop App', icon: 'fab fa-windows', platform: 'Desktop', isActive: false, url: '#', color: 'blue' },
+        { id: 'macos', name: 'macOS', subtitle: 'Desktop App', icon: 'fab fa-apple', platform: 'Desktop', isActive: false, url: '#', color: 'gray' },
+        { id: 'linux', name: 'Linux', subtitle: 'Desktop App', icon: 'fab fa-linux', platform: 'Desktop', isActive: false, url: '#', color: 'orange' },
+        { id: 'ios', name: 'iOS', subtitle: 'iPhone & iPad', icon: 'fab fa-apple', platform: 'Mobile', isActive: false, url: 'https://apps.apple.com/app/securebit-chat/', color: 'blue' },
+        { id: 'android', name: 'Android', subtitle: 'Google Play', icon: 'fab fa-android', platform: 'Mobile', isActive: false, url: 'https://play.google.com/store/apps/details?id=com.securebit.chat', color: 'green' }
+    ];
+
+    const handleDownload = (app) => {
+        if (app.isActive) window.open(app.url, '_blank');
+    };
+
+    const desktopApps = apps.filter(a => a.platform !== 'Mobile');
+    const mobileApps = apps.filter(a => a.platform === 'Mobile');
+
+    // Размер карточки
+    const cardSize = "w-28 h-28"; // квадратные
+
+    return React.createElement('div', { className: "mt-20 px-6" }, [
+        // Header
+        React.createElement('div', { key: 'header', className: "text-center max-w-3xl mx-auto mb-12" }, [
+            React.createElement('h3', { key: 'title', className: "text-3xl font-bold text-primary mb-3" }, 'Download SecureBit.chat'),
+            React.createElement('p', { key: 'subtitle', className: "text-secondary text-lg mb-5" }, 'Stay secure on every device. Choose your platform and start chatting privately.')
+        ]),
+
+        // Верхний ряд: Desktop + Web (скрыт на мобильных)
+        React.createElement('div', { key: 'desktop-row', className: "hidden sm:flex justify-center flex-wrap gap-6 mb-6" },
+            desktopApps.map(app =>
+                React.createElement('div', {
+                    key: app.id,
+                    className: `group relative ${cardSize} rounded-2xl overflow-hidden card-minimal cursor-pointer`
+                }, [
+                    React.createElement('i', {
+                        key: 'bg-icon',
+                        className: `${app.icon} absolute text-[3rem] text-white/10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-all duration-500 group-hover:scale-105`
+                    }),
+                    React.createElement('div', {
+                        key: 'overlay',
+                        className: "absolute inset-0 bg-black/30 backdrop-blur-md flex flex-col items-center justify-center text-center opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+                    }, [
+                        React.createElement('h4', { key: 'name', className: `text-sm font-semibold text-primary mb-1` }, app.name),
+                        React.createElement('p', { key: 'subtitle', className: `text-xs text-secondary mb-2` }, app.subtitle),
+                        app.isActive ?
+                            React.createElement('button', {
+                                key: 'btn',
+                                onClick: () => handleDownload(app),
+                                className: `px-2 py-1 rounded-xl bg-emerald-500 text-black font-medium hover:bg-emerald-600 transition-colors text-xs`
+                            }, app.id === "web" ? "Launch" : "Download")
+                            :
+                            React.createElement('span', { key: 'coming', className: "text-gray-400 font-medium text-xs" }, "Coming Soon")
+                    ])
+                ])
+            )
+        ),
+
+        // Нижний ряд: Mobile (всегда центрированы)
+        React.createElement('div', { key: 'mobile-row', className: "flex justify-center gap-6" },
+            mobileApps.map(app =>
+                React.createElement('div', {
+                    key: app.id,
+                    className: `group relative ${cardSize} rounded-2xl overflow-hidden card-minimal cursor-pointer`
+                }, [
+                    React.createElement('i', {
+                        key: 'bg-icon',
+                        className: `${app.icon} absolute text-[3rem] text-white/10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-all duration-500 group-hover:scale-105`
+                    }),
+                    React.createElement('div', {
+                        key: 'overlay',
+                        className: "absolute inset-0 bg-black/30 backdrop-blur-md flex flex-col items-center justify-center text-center opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+                    }, [
+                        React.createElement('h4', { key: 'name', className: `text-sm font-semibold text-primary mb-1` }, app.name),
+                        React.createElement('p', { key: 'subtitle', className: `text-xs text-secondary mb-2` }, app.subtitle),
+                        app.isActive ?
+                            React.createElement('button', {
+                                key: 'btn',
+                                onClick: () => handleDownload(app),
+                                className: `px-2 py-1 rounded-xl bg-emerald-500 text-black font-medium hover:bg-emerald-600 transition-colors text-xs`
+                            }, "Download")
+                            :
+                            React.createElement('span', { key: 'coming', className: "text-gray-400 font-medium text-xs" }, "Coming Soon")
+                    ])
+                ])
+            )
+        )
+    ]);
+};
+
+window.DownloadApps = DownloadApps;