From 90c44d63b7a00a708591c6d17d22b554f40b03bb Mon Sep 17 00:00:00 2001
From: roanster007 <rohan.gudimetla07@gmail.com>
Date: Tue, 18 Jun 2024 21:36:54 +0530
Subject: [PATCH] css: Update css of landing page images to show fading effect.

This commit adds the css class - "message-screenshot" and
"message-starred" to the "landing_page" to exhibit fading
effect.
---
 web/styles/portico/landing_page.css | 31 ++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/web/styles/portico/landing_page.css b/web/styles/portico/landing_page.css
index f339ab179b..f48f0883a5 100644
--- a/web/styles/portico/landing_page.css
+++ b/web/styles/portico/landing_page.css
@@ -2265,7 +2265,8 @@ button {
         }
     }
 
-    .feature-image {
+    .feature-image,
+    .message-screenshot {
         & img,
         div.quote {
             width: 400px;
@@ -2284,6 +2285,34 @@ button {
         }
     }
 
+    .message-screenshot {
+        position: relative;
+
+        img {
+            display: block;
+            mask-image: linear-gradient(
+                to right,
+                hsl(0deg 0% 0%) 75%,
+                transparent 100%
+            );
+        }
+        margin-bottom: 10px;
+    }
+
+    /* message-starred is used when the message screenshot captured using
+    the script "generate-user-message-screenshot" contains starred message.
+    This is done to reduce the fading effect on the image caused by
+    ".message-screenshot" class so that the star is visible. */
+    .message-starred {
+        img {
+            mask-image: linear-gradient(
+                to right,
+                hsl(0deg 0% 0%) 95%,
+                transparent 100%
+            );
+        }
+    }
+
     .feature-icon {
         & img,
         div.quote {