Add small hover animations to homepage elements

src/Pages/Home/Home.css

@@ -62,4 +62,13 @@
 }
 .fade-in-img.show {
  opacity: 1;
-}  
+}  
+
+/* ✅ NEW: subtle hover grow animation */
+.hover-grow {
+  transition: transform 0.15s ease;
+}
+
+.hover-grow:hover {
+  transform: scale(1.05);
+}

src/Pages/Home/Home.js

@@ -46,52 +46,58 @@ const Home = () => {
             href={part}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-blue-400 underline"
+            className="text-blue-400 underline hover-grow"
           >
             {part}
           </a>
         );
       }
-
       return <span key={index}>{part}</span>;
     });
   }
 
   return (
-    <div className='flex flex-col min-h-[calc(100vh-86px)] z-[-200] bg-gradient-to-r from-gray-800 to-gray-600'>
-      <div className = "flex flex-col items-center justify-center my-4">
-        <p className={`fade-scale-in text-white${showMessage ? ' show' : ''}`}>
-          {message}
+    <div className="flex flex-col min-h-[calc(100vh-86px)] z-[-200] bg-gradient-to-r from-gray-800 to-gray-600">
+      <div className="flex flex-col items-center justify-center my-4">
+        <p className={`fade-scale-in text-white hover-grow${showMessage ? ' show' : ''}`}>
+          {renderMessageWithLinks(message)}
         </p>
       </div>
+
       <div className="flex flex-col flex-wrap items-center justify-center flex-1 h-full my-4 md:flex-row xl:my-0">
         <div className="flex flex-col items-center justify-center w-full p-4 overflow-y-hidden xl:w-2/5">
           <div className="flex flex-col mb-8 xl:ml-10">
             <h1
-              className={`slide-in-top my-4 text-3xl font-bold text-center text-white opacity-75 md:text-5xl xl:text-left${showAll ? ' show' : ''}`}>
+              className={`slide-in-top hover-grow my-4 text-3xl font-bold text-center text-white opacity-75 md:text-5xl xl:text-left${showAll ? ' show' : ''}`}>
               The Software and Computer Engineering Society
             </h1>
+
             <h3
-              className={`slide-in-right text-base text-gray-400 text-center xl:text-left md:text-2xl${showAll ? ' show' : ''}`}>
+              className={`slide-in-right hover-grow text-base text-gray-400 text-center xl:text-left md:text-2xl${showAll ? ' show' : ''}`}>
               SJSU's Largest Engineering Club
             </h3>
           </div>
-          <div
-            className={`slide-in-bottom flex justify-center space-x-3 slide-in-bottom${showAll ? ' show' : ''}`}>
+
+          <div className={`slide-in-bottom flex justify-center space-x-3${showAll ? ' show' : ''}`}>
             <a href="/about" rel="nofollow noreferrer" target="_blank">
-              <button className="btn btn-outline text-lg text-blue-400 hover:bg-blue-700 hover:!text-white">Learn More</button>
+              <button className="btn btn-outline text-lg text-blue-400 hover:bg-blue-700 hover:!text-white hover-grow">
+                Learn More
+              </button>
             </a>
+
             <a href="/register">
-              <button className="btn btn-outline text-lg btn-accent hover:!text-white">Join Us!</button>
+              <button className="btn btn-outline text-lg btn-accent hover:!text-white hover-grow">
+                Join Us!
+              </button>
             </a>
           </div>
         </div>
 
-
         <div className={`fade-in-img w-full h-full p-12 overflow-hidden xl:w-3/5${showAll ? ' show' : ''}`}>
           <img
-            className="w-full mx-auto transform md:w-4/5 rounded-xl"
+            className="w-full mx-auto md:w-4/5 rounded-xl hover-grow"
             src="https://raw.githubusercontent.com/thebeninator/Clark/refs/heads/add_comp_homepage/public/images/compressed2.jpg"
+            alt="SCE"
           />
         </div>
       </div>