Merge pull request #6450 from RAJVEER42/ui-hover-enhancements

Enhance UI hover effects for navbar, footer links, and CTA button

Author: compwron

app/views/static/index.html.erb

@@ -41,9 +41,9 @@
 
           <div class="flex" id="myNavbar">
             <div class="flex text-white space-x-4 md:space-x-10 text-md lg:text-2xl items-center">
-              <a class="hidden md:block" href="#about">About</a>
-              <a class="hidden md:block" href="#testimonials">Testimonials</a>
-              <a class="hidden md:block" href="#contact">Contact</a>
+              <a class="hidden md:block hover:underline hover:decoration-blue-300 hover:opacity-90 focus:underline focus:decoration-blue-300" href="#about">About</a>
+              <a class="hidden md:block hover:underline hover:decoration-blue-300 hover:opacity-90 focus:underline focus:decoration-blue-300" href="#testimonials">Testimonials</a>
+              <a class="hidden md:block hover:underline hover:decoration-blue-300 hover:opacity-90 focus:underline focus:decoration-blue-300" href="#contact">Contact</a>
               <a href="<%= new_user_session_path %>">
                 <button
                   class="flex flex-row items-center w-full px-4 py-2 bg-green-800 hover:bg-green-700 rounded-2xl text-md">
@@ -78,8 +78,8 @@
         <h2 class="text-4xl text-gray-700">The Casa Volunteer Tracking app removes the <br> complexity from your day
         </h2>
         <p class="mt-1 text-gray-600">and lets you spend time helping those who need it.</p>
-        <a href="mailto:casa@rubyforgood?Subject=CasaVolunteerTracking%20Interest"><button type="button"
-            class="text-lg bg-green-800 text-white px-3 py-2 rounded-2xl mt-5">Get In Touch</button></a>
+        <a href="mailto:casa@rubyforgood.org?Subject=CasaVolunteerTracking%20Interest"><button type="button"
+            class="will-change-transform text-lg bg-green-800 text-white px-3 py-2 rounded-2xl mt-5 hover:bg-green-700 hover:-translate-y-0.5 hover:scale-x-110 transition-transform duration-200 ease-linear">Get In Touch</button></a>
       </div>
     </div>
 
@@ -201,7 +201,7 @@
         <div class="text-center">
           <h2 class="text-4xl">Want to use the CASA Volunteer Tracking App?</h2>
           <br><br>
-          <p>Have questions? Email us at <a class="text-green-400"
+          <p>Have questions? Email us at <a class="text-green-400 hover:underline transition duration-100 hover:text-green-300"
               href="mailto:casa@rubyforgood.org?Subject=CASA%20Interest" target="_top">casa@rubyforgood.org</a></p>
         </div>
       </div>
@@ -217,9 +217,9 @@
         <div class="w-full sm:w-1/2">
           <strong class="text-gray-700">The CASA Volunteer Tracking app was lovingly built by:</strong>
           <br>
-          <a class="text-blue-800" href="http://rubyforgood.org/">Ruby for Good</a>
+          <a class="text-blue-800 hover:underline transition duration-100 " href="http://rubyforgood.org/">Ruby for Good</a>
           <br><br>
-          <a class="text-gray-700" href="https://storyset.com/data">Data illustrations by Storyset</a>
+          <a class="text-gray-700 hover:underline transition duration-100 " href="https://storyset.com/data">Data illustrations by Storyset</a>
         </div>
       </div>
     </div>