updated some design parts

Frontend/eslint.config.js

@@ -32,6 +32,7 @@ export default [
       'react-refresh/only-export-components': [
         'warn',
         { allowConstantExport: true },
+        { noUnusedVars: true },
       ],
     },
   },

Frontend/src/components/Footer.jsx

@@ -22,12 +22,12 @@ const Footer = () => {
   ];
 
   return (
-    <footer className="bg-secondary text-light">
+    <footer className="bg-secondary text-light font-montserrat">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           <div className="space-y-4">
             <h3 className="text-xl font-bold text-accent">Health Nest</h3>
-            <p className="text-sm">
+            <p className="text-[1rem]">
               Revolutionizing healthcare management with cutting-edge technology and compassionate care.
             </p>
             <div className="flex space-x-4">
@@ -44,13 +44,13 @@ const Footer = () => {
               ))}
             </div>
           </div>
-          <div className="md:col-span-2">
+          <div className="md:col-span-2 my-auto ml-8">
             <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
               {footerLinks.map((link, index) => (
-                <motion.div key={index} whileHover={{ x: 5 }}>
+                <motion.div key={index} whileHover={{ y: -3 }}>
                   <Link
                     to={link.to}
-                    className="text-light hover:text-accent transition-colors duration-300 text-sm"
+                    className="flex items-center text-light hover:text-accent transition-colors duration-300 text-[0.95rem]"
                   >
                     {link.title}
                   </Link>

Frontend/src/components/Home.jsx

@@ -52,10 +52,11 @@ const Home = () => {
                         {features.map((feature, index) => (
                             <motion.div 
                                 key={index} 
-                                className="bg-white p-6 rounded-3xl shadow-lg text-center"
+                                className="bg-white p-6 rounded-3xl shadow-lg text-center feature-card"
                                 initial={{ opacity: 0, y: 20 }}
                                 animate={{ opacity: 1, y: 0 }}
-                                transition={{ duration: 0.5, delay: index * 0.1 }}
+                                transition={{ duration: 0.5, delay: index* 0.01}}
+                                whileHover={{ y: -10 }}
                             >
                                 <feature.icon className="text-4xl sm:text-5xl text-accent mb-4 mx-auto" />
                                 <h3 className="text-lg sm:text-xl font-semibold mb-2 text-primary">{feature.title}</h3>
@@ -74,10 +75,10 @@ const Home = () => {
                             <img src="https://images.unsplash.com/photo-1551076805-e1869033e561?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Modern Hospital" className="rounded-3xl shadow-lg" />
                         </div>
                         <div className="md:w-1/2 md:pl-8">
-                            <p className="text-gray-600 mb-4">
+                            <p className="text-gray-600 mb-4 text-[1.1rem] font-montserrat ">
                                 Health Nest is a cutting-edge healthcare management system designed to streamline medical processes and enhance patient care. Our platform integrates advanced technology with medical expertise to provide a seamless experience for both healthcare providers and patients.
                             </p>
-                            <p className="text-gray-600 mb-4">
+                            <p className="text-gray-600 mb-4 text-[1.1rem] font-montserrat">
                                 With Health Nest, you can easily manage appointments, access medical records, and communicate with your healthcare team. We're committed to improving healthcare accessibility and efficiency, ensuring that you receive the best possible care.
                             </p>
                             <motion.button 

Frontend/src/index.css

@@ -1,3 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/*custom css*/
+@layer utilities {
+    .feature-card:hover {
+      box-shadow: rgba(240, 198, 46, 0.4) 5px 5px, 
+                  rgba(237, 204, 57, 0.3) 10px 10px, 
+                  rgba(248, 212, 50, 0.385) 15px 15px;
+
+    }
+  }

Frontend/tailwind.config.js

@@ -11,6 +11,9 @@ export default {
         'light': '#F6F6F6',
         'accent': '#FFCB74',
       },
+      fontFamily: {
+        montserrat: ['Montserrat', 'sans-serif'],
+      },
     },
   },
   plugins: [],