add soem 3d effects in the footer it looks so simple now having some …

…3d effects

docs/gsoc/contribution-guide.md

@@ -28,7 +28,7 @@ You can read more about the format of the program and its goals [here](https://g
 
 We at Keploy are excited to announce that Keploy is among the first few mentoring organizations from India 🇮🇳 this year! If you are a student looking to participate in GSoC, Keploy offers several projects for you to choose from.
 
-Keploy is looking for motivated students who are passionate about open source software and interested in gaining valuable experience in the field. We welcome students from all over the world with diverse backgrounds and skill sets to participate.
+Keploy is looking for motivated students who are passionate about open source software students from all over the world with diverse backgrounds ane and interested in gaining valuable experience in the field. We welcomd skill sets to participate.
 
 ## How to Get Started
 

src/theme/Footer/FooterWrapper.css

@@ -0,0 +1,49 @@
+.footer-3d-effect {
+    width: 100%; /* Full width */
+    height: auto; /* Ensures the footer scales dynamically */
+    perspective: 1000px; /* Added perspective to enable 3D effect */
+    transition: transform 0.3s ease-out; /* Smooth transition for hover */
+    background: linear-gradient(145deg, #1f1f1f, #2e2e2e);
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); /* Shadow for depth */
+    padding: 40px 0; /* Space to ensure content is visible */
+    position: relative;
+    z-index: 1;
+    overflow: hidden; /* Prevents any overflow during animations */
+  }
+
+  .footer-3d-effect::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0px 0px 20px rgba(255, 255, 255, 0.2); /* Light inner shadow for depth */
+    transform: translateZ(-50px); /* Pushed deeper for the 3D effect */
+    transition: transform 0.5s ease-in-out;
+  }
+
+  .footer-3d-effect:hover::before {
+    transform: translateZ(0); /* Brings the inner shadow forward on hover */
+  }
+
+  .footer-3d-effect:hover {
+    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.8); /* Bigger shadow on hover */
+    transform: scale(1.03); /* Slight scale for a 3D pop effect */
+  }
+
+  /* Ensure the footer text or elements inside the footer don't get affected */
+  .footer-3d-effect > * {
+    transform: translateZ(0); /* Prevent child elements from inheriting 3D effects */
+  }
+
+  /* Mobile/Tablet responsiveness */
+  @media (max-width: 768px) {
+    .footer-3d-effect {
+      transform: none; /* Disable 3D effect for smaller screens */
+      perspective: none;
+      box-shadow: none;
+    }
+  }
+

src/theme/Footer/index.js

@@ -1,10 +1,43 @@
-import React from "react";
+// import React from "react";
+// import Footer from "@theme-original/Footer";
+
+// export default function FooterWrapper(props) {
+//   return (
+//     <>
+//       <Footer {...props} />
+//     </>
+//   );
+// }
+import React, { useState } from "react";
 import Footer from "@theme-original/Footer";
+import './FooterWrapper.css'; // Import the enhanced CSS
 
 export default function FooterWrapper(props) {
+  const [tilt, setTilt] = useState({ rotateX: 0, rotateY: 0 });
+
+  // Mouse move handler for creating dynamic 3D tilt
+  const handleMouseMove = (e) => {
+    const { clientX, clientY, currentTarget } = e;
+    const { width, height, left, top } = currentTarget.getBoundingClientRect();
+    const xVal = (clientX - left) / width;
+    const yVal = (clientY - top) / height;
+
+    const rotateX = (yVal - 0.5) * 20; // Increase tilt for better 3D effect
+    const rotateY = (xVal - 0.5) * -20; // Increase tilt for better visibility
+
+    setTilt({ rotateX, rotateY });
+  };
+
   return (
-    <>
+    <div
+      className="footer-3d-effect"
+      style={{
+        transform: `rotateX(${tilt.rotateX}deg) rotateY(${tilt.rotateY}deg) scale(1.02)`,
+      }}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={() => setTilt({ rotateX: 0, rotateY: 0 })} // Reset on mouse leave
+    >
       <Footer {...props} />
-    </>
+    </div>
   );
 }