style: adding shadow to the footer in css

No0ne003 · May 22, 2024 · 7cb9342 · 7cb9342
1 parent 0112cf0
commit 7cb9342
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/index.css b/src/index.css
@@ -94,6 +94,21 @@
     background-size: 24px 24px;
   }
 
+  .footer-shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    /* Ensures shadow covers the entire footer */
+    background-image: linear-gradient(to top,
+        rgba(255, 0, 0, 0),
+        theme(colors.gray.900));
+    /* Creates the red gradient shadow */
+    z-index: -1;
+    /* Place the shadow behind the footer content */
+  }
+
   /* loading*/
   .loader {
     width: 80px;

diff --git a/src/layouts/Footer.jsx b/src/layouts/Footer.jsx
@@ -15,6 +15,7 @@ const Footer = memo(function Footer({ setCursorVariant }) {
       className="relative mt-20 w-full min-h-[220px]"
       style={{ clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)" }}
     >
+      <div className="footer-shadow" />
       <div className="relative h-[calc(100vh+220px)] -top-[100vh]">
         <div className="h-[220px] sticky top-[calc(100vh-220px)]">
           <Content setCursorVariant={setCursorVariant} />