social + call to action changes rev 1

changes:
- an actually useful call to action (the second button actually links to /join but having a Join Us button feels too weird)
- removed the mailing list icon and replaced it with linkedin
- changed the other mailing list button to a github pages button

components/Footer.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import DiscordLogo from "@/public/images/discord.svg";
 import InstagramLogo from "@/public/images/instagram.svg";
 import FacebookLogo from "@/public/images/facebook.svg";
-import MailLogo from "@/public/images/newsletter.svg";
+import LinkedinLogo from "@/public/images/linkedin.svg";
 import TropicalImage from "./TropicalImage";
 
 export default function Footer() {
@@ -26,8 +26,11 @@ export default function Footer() {
           >
             <TropicalImage img={FacebookLogo} alt="Facebook Redirect" />
           </Link>
-          <Link href="mailto:[email protected]" target="_blank">
-            <TropicalImage img={MailLogo} alt="Mail Redirect" />
+          <Link
+            href="https://www.linkedin.com/company/uclacyber"
+            target="_blank"
+          >
+            <TropicalImage img={LinkedinLogo} alt="LinkedIn Redirect" />
           </Link>
         </div>
       </div>
@@ -38,10 +41,10 @@ export default function Footer() {
         <p>© ACM Cyber 2024</p>
       </div>
 
-      <div className={styles.joinUsOrElse}>
+      <div className={styles.githubPages}>
         {/* Join Us! */}
-        <a href="https://tinyurl.com/acmcybernewsletter">
-          Join our Mailing List!
+        <a href="https://github.com/uclaacm/acmcyber.com">
+          Powered by Github Pages
         </a>
       </div>
     </footer>

pages/index.tsx

@@ -1,15 +1,12 @@
 import Link from "next/link";
 import styles from "styles/Home.module.scss";
+import joinStyles from "@/styles/Join.module.scss";
 import CyberSeo from "@/components/CyberSeo";
 import CyberWordmark from "@/components/CyberWordmark";
-import DiscordLogo from "@/public/images/discord.svg";
 import Flag from "@/public/images/flag.svg";
 import Boba from "@/public/images/boba.svg";
-import InstagramLogo from "@/public/images/instagram.svg";
-import LinkedinLogo from "@/public/images/linkedin.svg";
 import TestTube from "@/public/images/test-tube.svg";
 import CyberLogoInverted from "@/public/images/cyber-logo-light-inverted.png";
-import TropicalImage from "@/components/TropicalImage";
 
 export default function HomePage() {
   return (
@@ -74,15 +71,14 @@ export default function HomePage() {
             Ready to start <em>your</em> cybersecurity journey?
           </h1>
           <div className={styles.socials}>
-            <a href="https://discord.com/invite/j9dgf2q">
-              <TropicalImage img={DiscordLogo} alt="Discord logo" />
-            </a>
-            <a href="https://www.instagram.com/uclacyber">
-              <TropicalImage img={InstagramLogo} alt="Instagram logo" />
-            </a>
-            <a href="https://www.linkedin.com/company/uclacyber">
-              <TropicalImage img={LinkedinLogo} alt="Linkedin Logo" />
-            </a>
+            <button className={joinStyles.membershipForm}>
+              <Link href="https://discord.com/invite/j9dgf2q">
+                Join our Discord!
+              </Link>
+            </button>
+            <button className={joinStyles.membershipForm}>
+              <Link href="/join">Fill out the Membership Form!</Link>
+            </button>
           </div>
         </div>
       </div>

styles/Footer.module.scss

@@ -56,7 +56,7 @@ footer.footer {
     text-align: center;
   }
 
-  .joinUsOrElse {
+  .githubPages {
     display: block;
     margin: 1rem 0px;
     padding: 0.2rem;

styles/Home.module.scss

@@ -307,12 +307,8 @@ h1.motto {
     width: 100%;
     gap: 40px;
 
-    div {
-      width: 60px;
-      height: 60px;
-      transform: scale(80%);
-      object-fit: contain;
-      background: var(--cyber-gold);
+    button {
+      margin: 0;
     }
   }
 }