footer

uclaacm · Aug 27, 2023 · 922ae0b · 922ae0b
1 parent ffcb771
commit 922ae0b
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 80 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,42 +1,49 @@
 import styles from "@/styles/Footer.module.scss";
 import Link from "next/link";
-import Image from "next/image";
 
 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 TropicalImage from "./TropicalImage";
 
 export default function Footer() {
   return (
-    <footer>
-      <div className={styles.footer}>
-        <div className={styles.vertCenter}>
-          <div className={styles.top}>
-            {/* Socials */}
-            <Link href="https://discord.com/invite/j9dgf2q" target="_blank">
-              <Image src={DiscordLogo} alt="Discord Redirect" />
-            </Link>
-            <Link href="https://www.instagram.com/uclacyber" target="_blank">
-              <Image src={InstagramLogo} alt="Instagram Redirect" />
-            </Link>
-            <Link
-              href="https://www.facebook.com/groups/uclacyber"
-              target="blank"
-            >
-              <Image src={FacebookLogo} alt="Facebook Redirect" />
-            </Link>
-            <Link href="mailto:[email protected]" target="blank">
-              <Image src={MailLogo} alt="Mail Redirect" />
-            </Link>
-          </div>
-
-          <div className={styles.bottom}>
-            {/* Copyright */}
-            <p className={styles.footerText}>© ACM Cyber 2023</p>
-          </div>
+    <footer className={styles.footer}>
+      <div className={styles.socials}>
+        {/* Socials */}
+        <p>Find us on Social Media</p>
+        <div className={styles.socialsList}>
+          <Link href="https://discord.com/invite/j9dgf2q" target="_blank">
+            <TropicalImage img={DiscordLogo} alt="Discord Redirect" />
+          </Link>
+          <Link href="https://www.instagram.com/uclacyber" target="_blank">
+            <TropicalImage img={InstagramLogo} alt="Instagram Redirect" />
+          </Link>
+          <Link
+            href="https://www.facebook.com/groups/uclacyber"
+            target="_blank"
+          >
+            <TropicalImage img={FacebookLogo} alt="Facebook Redirect" />
+          </Link>
+          <Link href="mailto:[email protected]" target="_blank">
+            <TropicalImage img={MailLogo} alt="Mail Redirect" />
+          </Link>
         </div>
       </div>
+
+      <div className={styles.legal}>
+        {/* Email & Copyright */}
+        <a href="mailto:[email protected]">uclacyber@gmail.com</a>
+        <p>© ACM Cyber 2023</p>
+      </div>
+
+      <div className={styles.joinUsOrElse}>
+        {/* Join Us! */}
+        <a href="https://tinyurl.com/acmcybernewsletter">
+          Join our Mailing List!
+        </a>
+      </div>
     </footer>
   );
 }
diff --git a/styles/Footer.module.scss b/styles/Footer.module.scss
@@ -1,70 +1,83 @@
-footer {
-  .footer {
-    // position: relative;
-    // left: 0;
-    // bottom: 0;
+footer.footer {
+  display: flex;
+  min-height: 200px;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10%;
+  padding-bottom: 1rem;
+  background-color: var(--cyber-gold);
+  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 14pt;
 
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 1rem;
-    justify-content: center;
+  .socials {
+    margin: 1rem 0px;
 
-    width: 100%;
-    background-color: #ddddd4;
-    color: #000000;
-    padding: 3rem 0;
-    font-family: Poppins;
+    p {
+      text-transform: uppercase;
+      text-align: center;
+      margin-bottom: 0.5rem;
+    }
 
-    .center {
+    .socialsList {
       display: flex;
+      justify-content: center;
+      align-content: center;
       flex-direction: row;
-      align-items: center;
-    }
+      gap: 10px;
 
-    button {
-      position: absolute;
-      top: 33%;
-      width: auto;
-      height: auto;
-      font-size: 18px;
-      background: #2c2f36;
-      border-radius: 10px;
-      color: #ddddd4;
-      text-align: center;
-      right: 5%;
-      padding: 1%;
-    }
+      a {
+        width: 40px;
+        height: 40px;
 
-    img {
-      height: auto;
-    }
+        &:first-of-type {
+          // the discord logo is not square
+          margin-right: 10px;
+        }
 
-    p {
-      margin-left: 20px;
-      margin-right: 20px;
-    }
+        div {
+          transform: scale(40%);
+          transform-origin: 0% 0%;
+          background: var(--soul-dark);
+          object-fit: contain;
 
-    a:hover {
-      text-decoration: underline;
+          &:hover {
+            filter: brightness(1820%);
+          }
+        }
+      }
     }
+  }
 
-    .footerText {
-      font-size: 1.25rem;
-    }
+  .legal {
+    margin: 1rem 0px;
+    text-align: center;
+  }
 
-    .vertCenter {
-      display: flex;
-      flex-direction: column;
-    }
+  .joinUsOrElse {
+    display: block;
+    margin: 1rem 0px;
+    padding: 0.2rem;
+    border: 0.5rem solid var(--flag-pink);
+    border-radius: 0.5rem;
+    color: white;
+    background-color: var(--flag-pink);
+    cursor: pointer;
+    text-transform: uppercase;
 
-    .top {
-      display: flex;
-      gap: 1rem;
+    &::after {
+      content: "";
+      display: block;
+      width: 0%;
+      height: 2px;
+      background-color: white;
+      transition: width 100ms linear;
     }
 
-    .bottom {
-      text-align: center;
+    &:hover::after {
+      width: 100%;
     }
   }
 }
diff --git a/styles/globals.scss b/styles/globals.scss
@@ -51,7 +51,7 @@ a {
 
 .page {
   background: var(--soul-dark);
-  min-height: calc(100vh - 80px - 182px);
+  min-height: calc(100vh - 80px - 200px);
   color: white;
 
   .content {