From 9e08b32cde301f0aa0738f8f17f584f6e8d5dd1f Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Fri, 12 Dec 2025 15:14:57 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(hero):=20add=20tr?=
 =?UTF-8?q?ansparency=20to=20project=20spotlight=20background?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProjectSpotlight/ProjectSpotlight.tsx       | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx b/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx
index e31aebb..2f96a20 100644
--- a/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx
+++ b/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx
@@ -30,8 +30,8 @@ const Description = (props: Props) => {
             justifyContent: 'center',
 
             position: 'absolute',
-            bgcolor: 'background.default',
-            opacity: 0.9,
+            backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)',
+            backdropFilter: 'blur(8px)',
             bottom: '0',
 
             borderTopStyle: 'solid',
@@ -56,8 +56,9 @@ const Description = (props: Props) => {
           sx={theme => ({
             display: 'flex',
             position: 'absolute',
-            bgcolor: 'background.default',
-            opacity: 0.9,
+
+            backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)',
+            backdropFilter: 'blur(8px)',
             top: '0',
             ml: 'auto',
             borderBottomWidth: theme.spacing(0.5),
@@ -85,8 +86,8 @@ const Description = (props: Props) => {
             height: '102%',
             width: '28em',
             position: 'absolute',
-            bgcolor: 'background.default',
-            opacity: 0.9,
+            backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)',
+            backdropFilter: 'blur(8px)',
             right: '0',
             borderLeftWidth: theme.spacing(0.5),
             // borderLeftWidth: '0.35em',
@@ -107,8 +108,8 @@ const Description = (props: Props) => {
             height: '102%',
             width: '28em',
             position: 'absolute',
-            bgcolor: 'background.default',
-            opacity: 0.9,
+            backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)',
+            backdropFilter: 'blur(8px)',
             left: '0',
             borderRightWidth: theme.spacing(0.5),
             // borderLeftWidth: '0.35em',