From 8f7f40cb44866e8378b1ae86bf9ca1971c5f03fa Mon Sep 17 00:00:00 2001
From: amank <amankedlaya7@gmail.com>
Date: Fri, 16 Jan 2026 16:32:00 -0800
Subject: [PATCH 1/5] Add small hover animations to homepage elements

---
 src/Pages/Home/Home.css | 74 ++++++++++++++++++++++++-----------------
 src/Pages/Home/Home.js  | 42 +++++++++++++----------
 2 files changed, 67 insertions(+), 49 deletions(-)

diff --git a/src/Pages/Home/Home.css b/src/Pages/Home/Home.css
index 8de76444c..41320c60c 100644
--- a/src/Pages/Home/Home.css
+++ b/src/Pages/Home/Home.css
@@ -1,65 +1,77 @@
 /* Hide scrollbar for WebKit (Chrome, Safari) */
 *::-webkit-scrollbar {
- display: none;
+  display: none;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
 * {
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 /* Fade-in effect with scale for p */
 .fade-scale-in {
- opacity: 0;
- transform: scale(0.5);
- transition: opacity 0.5s 1s, transform 0.5s 1s; /* dur 0.5s, delay 1s */
+  opacity: 0;
+  transform: scale(0.5);
+  transition: opacity 0.5s 1s, transform 0.5s 1s;
 }
-  
+
 .fade-scale-in.show {
- opacity: 1;
- transform: scale(1);
+  opacity: 1;
+  transform: scale(1);
 }
 
-/* Fade-in effect with scale for h1 */
+/* Fade-in effect for h1 */
 .slide-in-top {
- opacity: 0;
- transform: translateY(-75px);
- transition: opacity 1.5s, transform 1.5s;
+  opacity: 0;
+  transform: translateY(-75px);
+  transition: opacity 1.5s, transform 1.5s;
 }
 
 .slide-in-top.show {
- opacity: 1;
- transform: translateY(0);
+  opacity: 1;
+  transform: translateY(0);
 }
 
-/* Fade-in effect with scale for h3 */
+/* Fade-in effect for h3 */
 .slide-in-right {
- opacity: 0;
- transform: translateX(100px);
- transition: opacity 1s 0.5s, transform 1s 0.5s;
+  opacity: 0;
+  transform: translateX(100px);
+  transition: opacity 1s 0.5s, transform 1s 0.5s;
 }
+
 .slide-in-right.show {
- opacity: 1;
- transform: translateX(0);
+  opacity: 1;
+  transform: translateX(0);
 }
 
-/* Fade-in effect with scale for div */
+/* Fade-in effect for div */
 .slide-in-bottom {
- opacity: 0;
- transform: translateY(100px);
- transition: opacity 0.5s 1.5s, transform 0.5s 1.5s;
+  opacity: 0;
+  transform: translateY(100px);
+  transition: opacity 0.5s 1.5s, transform 0.5s 1.5s;
 }
+
 .slide-in-bottom.show {
- opacity: 1;
- transform: translateY(0);
+  opacity: 1;
+  transform: translateY(0);
 }
 
 /* Fade-in effect for images */
 .fade-in-img {
- opacity: 0;
- transition: opacity 1.5s 0.5s; /* duration 1.5s, delay 0.5s */
+  opacity: 0;
+  transition: opacity 1.5s 0.5s;
 }
+
 .fade-in-img.show {
- opacity: 1;
-}  
\ No newline at end of file
+  opacity: 1;
+}
+
+/* ✅ NEW: subtle hover grow animation */
+.hover-grow {
+  transition: transform 0.15s ease;
+}
+
+.hover-grow:hover {
+  transform: scale(1.05);
+}
diff --git a/src/Pages/Home/Home.js b/src/Pages/Home/Home.js
index 53b42e00d..17d991bb9 100755
--- a/src/Pages/Home/Home.js
+++ b/src/Pages/Home/Home.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import Footer from '../../Components/Footer/Footer.js';
 import './Home.css';
 
@@ -9,6 +9,7 @@ const Home = () => {
   const [message, setMessage] = useState('');
   const [showMessage, setShowMessage] = useState(false);
   const [showAll, setShowAll] = useState(false);
+
   async function getMessage() {
     try {
       const messageData = await getAd();
@@ -35,9 +36,8 @@ const Home = () => {
   }
 
   function renderMessageWithLinks(message) {
-    if (!message) {
-      return null;
-    }
+    if (!message) return null;
+
     return message.split(/(https?:\/\/[^\s]+)/g).map((part, index) => {
       if (isValidUrl(part)) {
         return (
@@ -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>

From a2014c3351ace1c78c0c59b540d9c45fd77424ab Mon Sep 17 00:00:00 2001
From: evan <evanuxd@gmail.com>
Date: Sat, 17 Jan 2026 09:30:00 -0800
Subject: [PATCH 2/5] reduce diff size

---
 src/Pages/Home/Home.css | 66 ++++++++++++++++++++---------------------
 src/Pages/Home/Home.js  |  2 +-
 2 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/Pages/Home/Home.css b/src/Pages/Home/Home.css
index 41320c60c..43ceeec2f 100644
--- a/src/Pages/Home/Home.css
+++ b/src/Pages/Home/Home.css
@@ -1,71 +1,69 @@
+
 /* Hide scrollbar for WebKit (Chrome, Safari) */
 *::-webkit-scrollbar {
-  display: none;
+ display: none;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
 * {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
 }
 
 /* Fade-in effect with scale for p */
 .fade-scale-in {
-  opacity: 0;
-  transform: scale(0.5);
-  transition: opacity 0.5s 1s, transform 0.5s 1s;
+ opacity: 0;
+ transform: scale(0.5);
+ transition: opacity 0.5s 1s, transform 0.5s 1s; /* dur 0.5s, delay 1s */
 }
-
+  
 .fade-scale-in.show {
-  opacity: 1;
-  transform: scale(1);
+ opacity: 1;
+ transform: scale(1);
 }
 
-/* Fade-in effect for h1 */
+/* Fade-in effect with scale for h1 */
 .slide-in-top {
-  opacity: 0;
-  transform: translateY(-75px);
-  transition: opacity 1.5s, transform 1.5s;
+ opacity: 0;
+ transform: translateY(-75px);
+ transition: opacity 1.5s, transform 1.5s;
 }
 
 .slide-in-top.show {
-  opacity: 1;
-  transform: translateY(0);
+ opacity: 1;
+ transform: translateY(0);
 }
 
-/* Fade-in effect for h3 */
+/* Fade-in effect with scale for h3 */
 .slide-in-right {
-  opacity: 0;
-  transform: translateX(100px);
-  transition: opacity 1s 0.5s, transform 1s 0.5s;
+ opacity: 0;
+ transform: translateX(100px);
+ transition: opacity 1s 0.5s, transform 1s 0.5s;
 }
-
 .slide-in-right.show {
-  opacity: 1;
-  transform: translateX(0);
+ opacity: 1;
+ transform: translateX(0);
 }
 
-/* Fade-in effect for div */
+/* Fade-in effect with scale for div */
 .slide-in-bottom {
-  opacity: 0;
-  transform: translateY(100px);
-  transition: opacity 0.5s 1.5s, transform 0.5s 1.5s;
+ opacity: 0;
+ transform: translateY(100px);
+ transition: opacity 0.5s 1.5s, transform 0.5s 1.5s;
 }
-
 .slide-in-bottom.show {
-  opacity: 1;
-  transform: translateY(0);
+ opacity: 1;
+ transform: translateY(0);
 }
 
 /* Fade-in effect for images */
 .fade-in-img {
-  opacity: 0;
-  transition: opacity 1.5s 0.5s;
+ opacity: 0;
+ transition: opacity 1.5s 0.5s; /* duration 1.5s, delay 0.5s */
 }
-
 .fade-in-img.show {
-  opacity: 1;
-}
+ opacity: 1;
+}  
 
 /* ✅ NEW: subtle hover grow animation */
 .hover-grow {
diff --git a/src/Pages/Home/Home.js b/src/Pages/Home/Home.js
index 17d991bb9..5f583af04 100755
--- a/src/Pages/Home/Home.js
+++ b/src/Pages/Home/Home.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState} from 'react';
 import Footer from '../../Components/Footer/Footer.js';
 import './Home.css';
 

From dbf1aaae0e154f7f5d514deb8a368a84c45ae4f9 Mon Sep 17 00:00:00 2001
From: evan <evanuxd@gmail.com>
Date: Sat, 17 Jan 2026 09:30:25 -0800
Subject: [PATCH 3/5] 1 line less in css

---
 src/Pages/Home/Home.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Pages/Home/Home.css b/src/Pages/Home/Home.css
index 43ceeec2f..adf460771 100644
--- a/src/Pages/Home/Home.css
+++ b/src/Pages/Home/Home.css
@@ -1,4 +1,3 @@
-
 /* Hide scrollbar for WebKit (Chrome, Safari) */
 *::-webkit-scrollbar {
  display: none;

From d05552009bf3aa2b37e0e22dcb8332b8aa881735 Mon Sep 17 00:00:00 2001
From: evan <evanuxd@gmail.com>
Date: Sat, 17 Jan 2026 09:31:17 -0800
Subject: [PATCH 4/5] less lines in home js

---
 src/Pages/Home/Home.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Pages/Home/Home.js b/src/Pages/Home/Home.js
index 5f583af04..86d6b62ad 100755
--- a/src/Pages/Home/Home.js
+++ b/src/Pages/Home/Home.js
@@ -9,7 +9,6 @@ const Home = () => {
   const [message, setMessage] = useState('');
   const [showMessage, setShowMessage] = useState(false);
   const [showAll, setShowAll] = useState(false);
-
   async function getMessage() {
     try {
       const messageData = await getAd();
@@ -36,7 +35,9 @@ const Home = () => {
   }
 
   function renderMessageWithLinks(message) {
-    if (!message) return null;
+    if (!message) {
+      return null;
+    }
 
     return message.split(/(https?:\/\/[^\s]+)/g).map((part, index) => {
       if (isValidUrl(part)) {

From 5f51a8a92a71a3d616ca24cb92946584e0aabfba Mon Sep 17 00:00:00 2001
From: evan <evanuxd@gmail.com>
Date: Sat, 17 Jan 2026 09:33:37 -0800
Subject: [PATCH 5/5] even less lines in home js

---
 src/Pages/Home/Home.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Pages/Home/Home.js b/src/Pages/Home/Home.js
index 86d6b62ad..814da2363 100755
--- a/src/Pages/Home/Home.js
+++ b/src/Pages/Home/Home.js
@@ -38,7 +38,6 @@ const Home = () => {
     if (!message) {
       return null;
     }
-
     return message.split(/(https?:\/\/[^\s]+)/g).map((part, index) => {
       if (isValidUrl(part)) {
         return (