From 964bb58e47ca0ae9fd7609ecc13606db36d32394 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Thu, 13 Nov 2025 11:00:27 +0100
Subject: [PATCH] [mirotalksfu] - improve landing support US

---
 app/src/Server.js       |  2 +-
 package-lock.json       |  4 ++--
 package.json            |  2 +-
 public/css/landing.css  | 53 +++++++++++++++++++++++++++++++++--------
 public/js/Brand.js      |  2 +-
 public/js/Room.js       |  4 ++--
 public/js/RoomClient.js |  2 +-
 7 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/app/src/Server.js b/app/src/Server.js
index 5d48aab8..97251203 100644
--- a/app/src/Server.js
+++ b/app/src/Server.js
@@ -64,7 +64,7 @@ dev dependencies: {
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 2.0.10
+ * @version 2.0.11
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index f8071cb0..b8251a31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalksfu",
-    "version": "2.0.10",
+    "version": "2.0.11",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalksfu",
-            "version": "2.0.10",
+            "version": "2.0.11",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@aws-sdk/client-s3": "^3.930.0",
diff --git a/package.json b/package.json
index 3086a55d..4b019ef7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "2.0.10",
+    "version": "2.0.11",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
diff --git a/public/css/landing.css b/public/css/landing.css
index e46df868..f91d6c3a 100644
--- a/public/css/landing.css
+++ b/public/css/landing.css
@@ -2459,22 +2459,53 @@ main {
     flex-direction: column;
     align-items: center;
     padding: 28px 20px;
-    background-color: #15181d !important;
-    background: linear-gradient(135deg, #15181d 0%, #1a1d23 50%, #15181d 100%) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    border-radius: 12px;
+    background-color: #1a1d23 !important;
+    background-image: linear-gradient(135deg, #1a1d23 0%, #1f2228 50%, #1a1d23 100%) !important;
+    border: 2px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 20px;
     text-decoration: none;
     color: #8a94a7 !important;
-    transition: all 0.3s ease;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     min-height: 160px;
+    position: relative;
+    overflow: hidden;
+    box-shadow:
+        0 4px 20px rgba(0, 0, 0, 0.6),
+        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+}
+
+.support-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+}
+
+.support-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+    transition: left 0.6s ease;
+}
+
+.support-card:hover::before {
+    left: 100%;
 }
 
 .support-card:hover {
-    background-color: #1a1d23 !important;
-    background: linear-gradient(135deg, #1a1d23 0%, #1d2026 50%, #1a1d23 100%) !important;
-    border-color: rgba(255, 255, 255, 0.2) !important;
-    transform: translateY(-4px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
+    transform: translateY(-4px) !important;
+    border-color: rgba(255, 255, 255, 0.15) !important;
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.8),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
+    background-image: linear-gradient(135deg, #1f2228 0%, #24272d 50%, #1f2228 100%) !important;
 }
 
 .support-card-icon svg {
@@ -2491,6 +2522,8 @@ main {
     background: rgba(255, 255, 255, 0.08) !important;
     border-radius: 50%;
     transition: all 0.3s ease;
+    position: relative;
+    z-index: 1;
 }
 
 .support-card:hover .support-card-icon {
diff --git a/public/js/Brand.js b/public/js/Brand.js
index bed0c0c4..fe04082a 100644
--- a/public/js/Brand.js
+++ b/public/js/Brand.js
@@ -79,7 +79,7 @@ let BRAND = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: '<strong>WebRTC SFU v2.0.10</strong>',
+        title: '<strong>WebRTC SFU v2.0.11</strong>',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/Room.js b/public/js/Room.js
index 0c437a3e..f494640f 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 2.0.10
+ * @version 2.0.11
  *
  */
 
@@ -5765,7 +5765,7 @@ function showAbout() {
         position: 'center',
         imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
         customClass: { image: 'img-about' },
-        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v2.0.10',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v2.0.11',
         html: `
             <br />
             <div id="about">
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index 95779441..afc5f523 100644
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 2.0.10
+ * @version 2.0.11
  *
  */