Enhancement: Added Framer Motion animations and interactive mouse poi…

client/package.json

@@ -9,11 +9,13 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.11.0",
+    "framer-motion": "^12.23.26",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.526.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
+    "react-intersection-observer": "^10.0.0",
     "react-router-dom": "^7.6.3",
     "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"

client/src/App.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import "./components/styles.css";
 import { Routes, Route } from "react-router-dom";
+import { AnimatePresence } from "framer-motion";
 import HomePage from "./pages/HomePage";
 import PharmacyPage from "./pages/PharmacyPage";
 import LabsPage from "./pages/LabsPage";
@@ -13,14 +14,53 @@ import EmergencyPanel from "./components/EmergencyPanel";
 import ForgotPassword from "./pages/ForgotPassword";
 import ProtectedRoute from "./components/ProtectedRoute";
 import AdminDashboardPage from "./pages/AdminDashboardPage";
-import MedicineListing from "./pages/Medicine"; // <-- import the medicine page
+import MedicineListing from "./pages/Medicine";
+import CustomCursor from "./components/CustomCursor";
+
+// Check if device supports hover (non-touch devices)
+const useIsTouchDevice = () => {
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+
+  useEffect(() => {
+    const checkTouchDevice = () => {
+      setIsTouchDevice(
+        'ontouchstart' in window || 
+        navigator.maxTouchPoints > 0 || 
+        navigator.msMaxTouchPoints > 0
+      );
+    };
+
+    checkTouchDevice();
+    window.addEventListener('resize', checkTouchDevice);
+    return () => window.removeEventListener('resize', checkTouchDevice);
+  }, []);
+
+  return isTouchDevice;
+};
 
 function App() {
   const [darkMode, setDarkMode] = useState(false);
   const [isEmergencyOpen, setIsEmergencyOpen] = useState(false);
+  const isTouchDevice = useIsTouchDevice();
+  const location = window.location;
 
   useEffect(() => {
     document.body.classList.toggle("dark-mode", darkMode);
+
+    // Add smooth scrolling for anchor links
+    const smoothScroll = (e) => {
+      const targetId = e.target.getAttribute('href');
+      if (targetId && targetId.startsWith('#')) {
+        e.preventDefault();
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+          targetElement.scrollIntoView({ behavior: 'smooth' });
+        }
+      }
+    };
+
+    document.addEventListener('click', smoothScroll);
+    return () => document.removeEventListener('click', smoothScroll);
   }, [darkMode]);
 
   const toggleEmergencyPanel = () => {
@@ -29,26 +69,29 @@ function App() {
 
   return (
     <>
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="register" element={<Register />} />
-        <Route path="/services/pharmacy" element={<PharmacyPage />} />
-        <Route path="/services/pharmacy/medicines" element={<MedicineListing />} /> {/* new route */}
-        <Route path="/services/labs-diagnostics" element={<LabsPage />} />
-        <Route path="/services/checkup" element={<CheckupPage />} />
-        <Route path="/services/surgery" element={<SurgeryPage />} />
-        <Route path="/forgot-password" element={<ForgotPassword />} />
-        <Route
-          path="/admin"
-          element={
-            <ProtectedRoute adminOnly={true}>
-              <AdminDashboardPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
+      {!isTouchDevice && <CustomCursor />}
+      <AnimatePresence mode="wait">
+        <Routes location={location} key={location.pathname}>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="register" element={<Register />} />
+          <Route path="/services/pharmacy" element={<PharmacyPage />} />
+          <Route path="/services/pharmacy/medicines" element={<MedicineListing />} />
+          <Route path="/services/labs-diagnostics" element={<LabsPage />} />
+          <Route path="/services/checkup" element={<CheckupPage />} />
+          <Route path="/services/surgery" element={<SurgeryPage />} />
+          <Route path="/forgot-password" element={<ForgotPassword />} />
+          <Route
+            path="/admin"
+            element={
+              <ProtectedRoute adminOnly={true}>
+                <AdminDashboardPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </AnimatePresence>
 
       {/* Fixed Emergency Button */}
       <button
@@ -61,7 +104,7 @@ function App() {
 
       <EmergencyPanel
         isOpen={isEmergencyOpen}
-        onClose={() => setIsEmergencyOpen(false)}
+        onClose={toggleEmergencyPanel}
       />
     </>
   );

client/src/components/CustomCursor.js

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import styles from './CustomCursor.module.css';
+
+const CustomCursor = () => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+  const [isClicked, setIsClicked] = useState(false);
+
+  useEffect(() => {
+    const mouseMove = (e) => {
+      setPosition({ x: e.clientX, y: e.clientY });
+
+      // Check if hovering over interactive elements
+      const target = e.target;
+      const isInteractive = 
+        target.tagName === 'A' || 
+        target.tagName === 'BUTTON' ||
+        target.closest('button') ||
+        target.closest('a') ||
+        target.getAttribute('role') === 'button' ||
+        target.hasAttribute('data-hover-effect');
+
+      setIsHovered(isInteractive);
+    };
+
+    const mouseDown = () => setIsClicked(true);
+    const mouseUp = () => setIsClicked(false);
+
+    document.addEventListener('mousemove', mouseMove);
+    document.addEventListener('mousedown', mouseDown);
+    document.addEventListener('mouseup', mouseUp);
+
+    // Add hover effect to all interactive elements
+    const interactiveElements = document.querySelectorAll(
+      'a, button, [role="button"], [data-hover-effect]'
+    );
+
+    interactiveElements.forEach(el => {
+      el.setAttribute('data-hover-effect', 'true');
+    });
+
+    return () => {
+      document.removeEventListener('mousemove', mouseMove);
+      document.removeEventListener('mousedown', mouseDown);
+      document.removeEventListener('mouseup', mouseUp);
+    };
+  }, []);
+
+  return (
+    <motion.div
+      className={`${styles.cursor} ${isHovered ? styles.hovered : ''} ${isClicked ? styles.clicked : ''}`}
+      animate={{
+        x: position.x - 10,
+        y: position.y - 10,
+        scale: isHovered ? 2 : 1,
+        opacity: isHovered ? 0.5 : 1
+      }}
+      transition={{
+        type: 'spring',
+        damping: 20,
+        stiffness: 300,
+        mass: 0.5
+      }}
+    >
+      <motion.div 
+        className={styles.cursorInner}
+        animate={{
+          scale: isHovered ? 0.5 : 1,
+          opacity: isHovered ? 0.8 : 0.6
+        }}
+      />
+    </motion.div>
+  );
+};
+
+export default CustomCursor;

client/src/components/CustomCursor.module.css

@@ -0,0 +1,57 @@
+.cursor {
+  position: fixed;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 9999;
+  background-color: transparent;
+  border: 2px solid #4f46e5;
+  transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease;
+  transform: translate(-50%, -50%);
+  will-change: transform;
+  mix-blend-mode: difference;
+}
+
+.cursorInner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #4f46e5;
+  opacity: 0.6;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.hovered {
+  transform: translate(-50%, -50%) scale(1.5);
+  border-color: #7c3aed;
+}
+
+.hovered .cursorInner {
+  transform: scale(0.5);
+  background-color: #7c3aed;
+  opacity: 0.8;
+}
+
+.clicked {
+  transform: translate(-50%, -50%) scale(0.8);
+}
+
+.clicked .cursorInner {
+  transform: scale(1.2);
+}
+
+/* Hide cursor when not needed */
+@media (pointer: coarse) {
+  .cursor {
+    display: none;
+  }
+}
+
+/* Hide cursor on touch devices */
+@media (hover: none) {
+  .cursor {
+    display: none;
+  }
+}