From 8e6cd7d0a159e08283f02d05f0cf6a1b058cf019 Mon Sep 17 00:00:00 2001
From: divyabshurajput <divyanshurajput709@gmail.com>
Date: Thu, 5 Sep 2024 09:53:10 +0530
Subject: [PATCH] add soem 3d effects  in the footer it looks so simple now
 having some 3d effects

---
 docs/gsoc/contribution-guide.md    |  2 +-
 src/theme/Footer/FooterWrapper.css | 49 ++++++++++++++++++++++++++++++
 src/theme/Footer/index.js          | 39 ++++++++++++++++++++++--
 3 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 src/theme/Footer/FooterWrapper.css

diff --git a/docs/gsoc/contribution-guide.md b/docs/gsoc/contribution-guide.md
index a1a02f131..2057773bd 100644
--- a/docs/gsoc/contribution-guide.md
+++ b/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
 
diff --git a/src/theme/Footer/FooterWrapper.css b/src/theme/Footer/FooterWrapper.css
new file mode 100644
index 000000000..80de9fcef
--- /dev/null
+++ b/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;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/theme/Footer/index.js b/src/theme/Footer/index.js
index ef40e88e3..ff0a40d27 100644
--- a/src/theme/Footer/index.js
+++ b/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>
   );
 }