Merge pull request #34 from csesoc/CW2-12-add-animations

[CW2-12] Underline and button animations

Author: derekxu04

Diff for: frontend/src/components/Background.tsx

@@ -3,7 +3,7 @@ import Spline from '@splinetool/react-spline';
 const Background = () => {
   return (
     <Spline
-      className="absolute "
+      className="absolute"
       scene="https://prod.spline.design/thPGkOvNXu8XjGlk/scene.splinecode"
     />
   );

Diff for: frontend/src/components/Event/index.tsx

@@ -11,7 +11,7 @@ const Event = () => {
           listings, check out the CSESoc Discord or our Facebook page!
         </p>
         <a href="events">
-                <button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[60%] xl:h-12 h-10">
+                <button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[60%] xl:h-12 h-10 hover-animate">
                   See all events
                 </button>
               </a>

Diff for: frontend/src/components/Landing/index.tsx

@@ -20,7 +20,13 @@ const Landing = () => {
             <p>{'<h2>'}</p>
             <h2 className="font-bold 2xl:text-3xl text-xl">
               We are the principal representative body for{' '}
-              <span className="text-[#3977F9]">UNSW computing</span> students.
+              <a href="https://www.unsw.edu.au/engineering/our-schools/computer-science-and-engineering"
+                 target = "_blank"
+                 className="text-[#3977F9] relative after:bg-current after:absolute after:h-1 after:w-0 after:bottom-0 after:left-0 hover:after:w-full after:duration-200"
+              >
+                UNSW computing
+              </a>
+              {' '}students.
             </h2>
             <p>{'</h2>'}</p>
           </div>

Diff for: frontend/src/components/Sponsors/index.tsx

@@ -28,7 +28,7 @@ const Sponsors = () => {
               <h2 className="text-4xl font-black">Our sponsors</h2>
               <p className="xl:my-10 my-3 text-lg">Check out our very cool sponsors.</p>
               <a href="sponsors">
-                <button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10">
+                <button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10 hover-animate">
                   View our sponsors
                 </button>
               </a>

Diff for: frontend/src/styles/globals.css

@@ -27,5 +27,5 @@ body {
 }
 
 .hover-animate:hover {
-  transform: scale(1.01);
+  transform: scale(1.03);
 }