From 4697260dcc7da199f112612920ed29fa414f1208 Mon Sep 17 00:00:00 2001
From: Miran <miranfirdausi027@gmail.com>
Date: Tue, 24 Dec 2024 09:15:20 +0530
Subject: [PATCH] feat: add tilt effect

---
 package.json                   |  1 +
 src/pages/Contact/index.jsx    | 87 ++++++++++++++++----------------
 src/pages/Teams/TeamMember.jsx | 91 ++++++++++++++++++----------------
 3 files changed, 95 insertions(+), 84 deletions(-)

diff --git a/package.json b/package.json
index eed8ed7..2e7c89a 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.5",
+    "react-parallax-tilt": "^1.7.268",
     "react-router-dom": "^6.22.1",
     "react-toastify": "^10.0.4",
     "vite": "^5.1.0"
diff --git a/src/pages/Contact/index.jsx b/src/pages/Contact/index.jsx
index 7a5719c..bec560d 100644
--- a/src/pages/Contact/index.jsx
+++ b/src/pages/Contact/index.jsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import Tilt from "react-parallax-tilt";
 import PageTransition from "@/components/PageTransition";
 
 function Contact() {
@@ -55,49 +56,51 @@ function Contact() {
             Contact Us
           </span>
         </div>
-        <div className="mx-8 md:mx-10 mt-8">
-          <form onSubmit={onSubmit}>
-            <div className="m-auto flex flex-col p-8 bg-background-elevation rounded-lg shadow-lg px-8 md:px-12 py-8 max-w-2xl">
-              <span className=" text-secondary-light uppercase tracking-widest m-auto mb-3">
-                Drop us a message
-              </span>
-              <input
-                type="hidden"
-                name="subject"
-                value="New message from Codex Website"
-              />
-              <input
-                type="text"
-                name="name"
-                placeholder="Name"
-                className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
-                required
-              />
-              <input
-                type="email"
-                name="email"
-                placeholder="Email"
-                className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
-                required
-              />
-              <textarea
-                placeholder="Enter your message..."
-                name="message"
-                rows="4"
-                className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
-                required
-              />
-              <div className=" flex justify-center md:justify-end mt-4">
-                <button
-                  type="submit"
-                  className="bg-transparent rounded-full border-2 border-secondary-light px-8 py-2 text-secondary-light cursor-pointer"
-                >
-                  send
-                </button>
+        <Tilt tiltEnable tiltMaxAngleX={2} tiltMaxAngleY={5}>
+          <div className="mx-8 md:mx-10 mt-8 overflow-hidden">
+            <form onSubmit={onSubmit}>
+              <div className="m-auto flex flex-col p-8 bg-background-elevation rounded-lg shadow-lg px-8 md:px-12 py-8 max-w-2xl">
+                <span className=" text-secondary-light uppercase tracking-widest m-auto mb-3">
+                  Drop us a message
+                </span>
+                <input
+                  type="hidden"
+                  name="subject"
+                  value="New message from Codex Website"
+                />
+                <input
+                  type="text"
+                  name="name"
+                  placeholder="Name"
+                  className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
+                  required
+                />
+                <input
+                  type="email"
+                  name="email"
+                  placeholder="Email"
+                  className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
+                  required
+                />
+                <textarea
+                  placeholder="Enter your message..."
+                  name="message"
+                  rows="4"
+                  className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
+                  required
+                />
+                <div className=" flex justify-center md:justify-end mt-4">
+                  <button
+                    type="submit"
+                    className="bg-transparent rounded-full border-2 border-secondary-light px-8 py-2 text-secondary-light cursor-pointer"
+                  >
+                    send
+                  </button>
+                </div>
               </div>
-            </div>
-          </form>
-        </div>
+            </form>
+          </div>
+        </Tilt>
       </div>
     </PageTransition>
   );
diff --git a/src/pages/Teams/TeamMember.jsx b/src/pages/Teams/TeamMember.jsx
index 43a0356..3ab103b 100644
--- a/src/pages/Teams/TeamMember.jsx
+++ b/src/pages/Teams/TeamMember.jsx
@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
+import Tilt from "react-parallax-tilt";
 import LinkedInIcon from "@/assets/images/Teams/linkedin.svg";
 import GithubIcon from "@/assets/images/Teams/github.svg";
 import InstagramIcon from "@/assets/images/Teams/instagram.svg";
@@ -27,50 +28,56 @@ function TeamMember({ member }) {
   const image = images[id];
 
   return (
-    <div className="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-105 duration-200 hover:drop-shadow-2xl drop-shadow-background cursor-pointer bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 align-middle max-w-[350px]">
-      <div className="py-12 border-8xl border-4 h-full border-secondary-light bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl overflow-hidden p-3 align-middle">
-        <img
-          src={image}
-          alt={name}
-          className="w-32 h-32 rounded-full mx-auto object-cover"
-        />
-        <h2 className="text-xl mt-8 font-poppins font-thin text-center tracking-wide text-text-light">
-          {name}
-        </h2>
-        <p className="text-sm mt-2 font-poppins text-center font-semibold tracking-wide text-text-light">
-          {position}
-        </p>
-        <p className="text-sm font-poppins my-4 text-center text-wrap text-secondary-light">
-          {description}
-        </p>
-        <div className="flex justify-center space-x-4">
-          <Link
-            to={linkedin}
-            target="_blank"
-            rel="noreferrer"
-            className="text-white font-sans"
-          >
-            <img src={LinkedInIcon} alt="Linkedin" className="w-10 h-10 p-2" />
-          </Link>
-          <Link
-            to={github}
-            target="_blank"
-            rel="noreferrer"
-            className="text-white font-sans"
-          >
-            <img src={GithubIcon} alt="Github" className="w-10 h-10 p-2" />
-          </Link>
-          <Link
-            to={instagram}
-            target="_blank"
-            rel="noreferrer"
-            className="text-white font-sans"
-          >
-            <img src={InstagramIcon} alt="GitHub" className="w-10 h-10 p-2" />
-          </Link>
+    <Tilt glareEnable glareBorderRadius="1.875rem">
+      <div className="transition ease-in-out delay-150 duration-200 hover:drop-shadow-2xl drop-shadow-background cursor-pointer bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 align-middle max-w-[350px]">
+        <div className="py-12 border-8xl border-4 h-full border-secondary-light bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl overflow-hidden p-3 align-middle">
+          <img
+            src={image}
+            alt={name}
+            className="w-32 h-32 rounded-full mx-auto object-cover"
+          />
+          <h2 className="text-xl mt-8 font-poppins font-thin text-center tracking-wide text-text-light">
+            {name}
+          </h2>
+          <p className="text-sm mt-2 font-poppins text-center font-semibold tracking-wide text-text-light">
+            {position}
+          </p>
+          <p className="text-sm font-poppins my-4 text-center text-wrap text-secondary-light">
+            {description}
+          </p>
+          <div className="flex justify-center space-x-4">
+            <Link
+              to={linkedin}
+              target="_blank"
+              rel="noreferrer"
+              className="text-white font-sans"
+            >
+              <img
+                src={LinkedInIcon}
+                alt="Linkedin"
+                className="w-10 h-10 p-2"
+              />
+            </Link>
+            <Link
+              to={github}
+              target="_blank"
+              rel="noreferrer"
+              className="text-white font-sans"
+            >
+              <img src={GithubIcon} alt="Github" className="w-10 h-10 p-2" />
+            </Link>
+            <Link
+              to={instagram}
+              target="_blank"
+              rel="noreferrer"
+              className="text-white font-sans"
+            >
+              <img src={InstagramIcon} alt="GitHub" className="w-10 h-10 p-2" />
+            </Link>
+          </div>
         </div>
       </div>
-    </div>
+    </Tilt>
   );
 }