style: make the footer shadow in taiwlind instead of css

No0ne003 · May 22, 2024 · c5fd5fe · c5fd5fe
1 parent 1ea491a
commit c5fd5fe
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 19 deletions.
diff --git a/src/index.css b/src/index.css
@@ -94,21 +94,6 @@
     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
@@ -12,10 +12,10 @@ const socialLinks = [
 const Footer = memo(function Footer({ setCursorVariant }) {
   return (
     <footer
-      className="relative mt-20 w-full min-h-[220px]"
+      className="relative mt-20 w-full min-h-[220px] border-border/60 border-t-[1px]"
       style={{ clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)" }}
     >
-      <div className="footer-shadow" />
+      <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-black/25 to-transparent z-[-1]" />
       <div className="relative h-[calc(100vh+220px)] -top-[100vh]">
         <div className="h-[220px] sticky top-[calc(100vh-220px)]">
           <Content setCursorVariant={setCursorVariant} />
@@ -27,14 +27,14 @@ const Footer = memo(function Footer({ setCursorVariant }) {
 
 const Content = ({ setCursorVariant }) => {
   return (
-    <div className="relative bg-secondary/40 overflow-hidden py-8 px-12 w-full h-full flex flex-col items-center gap-3 border-border/50 border-2">
+    <div className="relative bg-secondary/40 overflow-hidden py-8 px-12 w-full h-full flex flex-col items-center gap-3 ">
       <p className="self-start text-4xl sm:text-7xl max-w-full md:max-w-8xl font-bold text-gray-500/60">
         Awesome React js Projects
       </p>
 
       <div className="flex flex-col gap-3 justify-end h-full w-full">
         <div className="flex justify-center w-full gap-1 text-xs sm:text-sm">
-          <p>Made with &lt;3 by No0ne</p>
+          <p>Made with &lt;3 by No0ne003</p>
           <p className="text-gray-400 text-sm leading-5">
             | &copy; {new Date().getFullYear()} No0ne003.
           </p>