Merge pull request Anjaliavv51#189 from thejatingupta7/main

Adding mouse depth effect animation Anjaliavv51#170

src/components/AboutUs-section/AboutUs.jsx

@@ -1,18 +1,59 @@
+import { useState } from "react";
 import rentBoardImg from "../.././assets/Images/rent-board.png";
 import "./AboutUs-section.css";
 import Lottie from "lottie-react";
 import rent from "./rent.json";
 
 const AboutUs = () => {
+  const [gradientStyle, setGradientStyle] = useState({});
+
+  // Function to handle mouse movement and update gradient
+  const handleMouseMove = (e) => {
+    const { offsetX, offsetY, target } = e.nativeEvent;
+    const { clientWidth, clientHeight } = target;
+
+    // Calculate percentage position of the mouse within the card
+    const xPercent = (offsetX / clientWidth) * 100;
+    const yPercent = (offsetY / clientHeight) * 100;
+
+    // Set radial gradient color based on mouse position
+    setGradientStyle({
+      background: `radial-gradient(circle at ${xPercent}% ${yPercent}%, #FFB74D, #FFAB91, #FFF9C4)`,
+    });
+  };
+
+  // Reset gradient when mouse leaves the section
+  const handleMouseLeave = () => {
+    setGradientStyle({
+      background: "#EBB4B6", // Default background color (soft mint)
+    });
+  };
+
   return (
     <div className="aboutUs-section">
       <div id="AboutUs"></div>
-      <span className="text-3xl md:text-4xl font-semibold text-[#312F2F] text-center pt-10">About Us</span>
-      <div className=" row flex flex-col justify-center items-center lg:flex-row m-[5%] bg-gradient-to-b lg:bg-gradient-to-r from-primaryGreen to-customRed rounded-3xl">
-        <Lottie className="rent-board-img text-primaryGreen w-[80%] lg:w-[50%]" animationData={rent} loop={true} />
-        <div className=" w-full lg:w-[50%] p-[5%] ">
-          <p className="paragraph text-justify text-textWhite leading-6 md:leading-8">
-            Rentalog is a web application that makes it easy for landlords to
+      <span className="text-3xl md:text-4xl font-semibold text-[#312F2F] text-center pt-10">
+        About Us
+      </span>
+      <div
+        className="row flex flex-col justify-center items-center lg:flex-row m-[5%] rounded-3xl transition-all duration-500 ease-in-out transform hover:scale-105"
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          ...gradientStyle,
+          background: gradientStyle.background
+            ? gradientStyle.background
+            : "#D1F2EB", // Default background color
+        }}
+      >
+        <Lottie
+          className="rent-board-img text-primaryGreen w-[80%] lg:w-[50%]"
+          animationData={rent}
+          loop={true}
+        />
+        <div className="w-full lg:w-[50%] p-[5%]">
+          <p className="paragraph text-justify text-[#312F2F] leading-6 md:leading-8 ">
+          Rentalog is a web application that makes it easy for landlords to
             manage their rental properties. With Rentalog, landlords can keep
             track of important information about their renters, including their
             names, addresses, and rental payment history. This information is
@@ -31,7 +72,6 @@ const AboutUs = () => {
             smoothly.
           </p>
         </div>
-
       </div>
     </div>
   );

src/components/Services-section/ServicesCard.jsx

@@ -1,18 +1,41 @@
+import { useState } from "react";
 import PropTypes from "prop-types";
+
 const ServicesCard = (props) => {
+  const [gradientStyle, setGradientStyle] = useState({});
+
+  // Function to calculate the gradient based on mouse position
+  const handleMouseMove = (e) => {
+    const { offsetX, offsetY, target } = e.nativeEvent;
+    const { clientWidth, clientHeight } = target;
+
+    // Calculate percentage position of the mouse within the card
+    const xPercent = (offsetX / clientWidth) * 100;
+    const yPercent = (offsetY / clientHeight) * 100;
+
+    // Set the background gradient based on mouse position
+    setGradientStyle({
+      background: `radial-gradient(circle at ${xPercent}% ${yPercent}%, #ff7e5f, #feb47b)`,
+    });
+  };
+
+  // Reset the gradient when the mouse leaves the card
+  const handleMouseLeave = () => {
+    setGradientStyle({});
+  };
+
   return (
     <div
       className={
         props.bgColor +
-        " rounded-xl cursor-pointer hover:scale-105 hover:shadow-lg transition duration-300"
+        " rounded-xl cursor-pointer hover:scale-105 hover:shadow-lg transition duration-300 relative"
       }
+      style={gradientStyle}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
     >
       <div className="flex gap-4 p-8 ">
-        <img
-          className="w-10 h-10 mt-1.5"
-          src={props.icon}
-          alt={props.alt}
-        ></img>
+        <img className="w-10 h-10 mt-1.5" src={props.icon} alt={props.alt} />
         <h1 className="text-[#312F2F] font-bold md:text-2xl text-xl">
           {props.title}
         </h1>
@@ -21,11 +44,13 @@ const ServicesCard = (props) => {
     </div>
   );
 };
+
 ServicesCard.propTypes = {
   bgColor: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   alt: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
 };
+
 export default ServicesCard;