Merge pull request #123 from Varchasavkr/main

#122 issue enhanced interactivity added

backend/package.json

@@ -11,6 +11,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "backend": "file:",
     "bcrypt": "^5.1.1",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",

package.json

@@ -21,6 +21,7 @@
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "concurrently": "^9.0.1",
+    "eventmint": "file:",
     "framer-motion": "^11.11.1",
     "lucide-react": "^0.447.0",
     "react": "^18.3.1",

src/components/Header.js

@@ -3,7 +3,7 @@
 // Header.js
 import React from "react"; // Add this line
 import NavBar from "./NavBar";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate,useLocation } from "react-router-dom";
 
 import "../assets/styles/Header.css";
 import { useSelector, useDispatch } from "react-redux";

src/components/ImageSlider.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
 import image1 from '../assets/images/download1.png';
 import image2 from '../assets/images/download2.png';
 import image3 from '../assets/images/download3.png';
@@ -7,6 +8,53 @@ import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '../assets/styles/ImageSlider.css'; // Create this file for custom styles
 
+const ImageWithCursorEffect = ({ imageSrc, altText }) => {
+  const [transform, setTransform] = useState({ rotateX: 0, rotateY: 0 });
+
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const xPos = (e.clientX - rect.left) / rect.width - 0.5; // -0.5 to 0.5 range
+    const yPos = (e.clientY - rect.top) / rect.height - 0.5;
+
+    setTransform({
+      rotateX: yPos * 20, // Tilt on the Y axis
+      rotateY: -xPos * 20, // Tilt on the X axis (negate to match cursor movement)
+    });
+  };
+
+  const handleMouseLeave = () => {
+    setTransform({ rotateX: 0, rotateY: 0 }); // Reset the tilt when cursor leaves
+  };
+
+  return (
+    <motion.div
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        display: 'inline-block',
+        perspective: '1000px', // Perspective gives the 3D effect
+      }}
+    >
+      <motion.img
+        src={imageSrc}
+        alt={altText}
+        style={{
+          maxWidth: '1250px',
+          boxShadow: '0',
+          marginRight: '90px',
+        }}
+        initial={{ scale: 1, rotateX: 0, rotateY: 0 }}
+        animate={{
+          rotateX: transform.rotateX,
+          rotateY: transform.rotateY,
+        }}
+        transition={{ type: 'spring', stiffness: 200, damping: 15 }}
+        whileHover={{ scale: 1.05 }} // Slightly scale up on hover
+      />
+    </motion.div>
+  );
+};
+
 const ImageSlider = () => {
   const settings = {
     dots: true,
@@ -16,21 +64,19 @@ const ImageSlider = () => {
     slidesToScroll: 1,
     autoplay: true,
     autoplaySpeed: 3000,
-
   };
 
   return (
     <div className="slider-container">
       <Slider {...settings}>
         <div>
-
-          <img src={image1} alt="Image 1" />
+          <ImageWithCursorEffect imageSrc={image1} altText="Image 1" />
         </div>
         <div>
-          <img src={image2} alt="Image 2" />
+          <ImageWithCursorEffect imageSrc={image2} altText="Image 2" />
         </div>
         <div>
-          <img src={image3} alt="Image 3" />
+          <ImageWithCursorEffect imageSrc={image3} altText="Image 3" />
         </div>
       </Slider>
     </div>