HackDavis · winzamark123 · Nov 18, 2024 · Nov 17, 2024 · Nov 17, 2024 · Nov 17, 2024
diff --git a/app/(api)/_actions/placeholder.ts b/app/(api)/_actions/placeholder.ts
@@ -1 +1 @@
-// empty file
+// empty file
diff --git a/app/(api)/_data/placeholder.json b/app/(api)/_data/placeholder.json
@@ -1 +1 @@
-{}
+{}
diff --git a/app/(api)/_utils/placeholder.ts b/app/(api)/_utils/placeholder.ts
@@ -1 +1 @@
-// empty file
+// empty file
diff --git a/app/(api)/api/placeholder.ts b/app/(api)/api/placeholder.ts
@@ -1 +1 @@
-// empty file
+// empty file
diff --git a/app/(pages)/(about-us)/about-us/page.tsx b/app/(pages)/(about-us)/about-us/page.tsx
@@ -1,7 +1,3 @@
-export default function AboutUs(){
-    return(
-        <div>
-            Halo this is the about us page!
-        </div>
-    )
-}
+export default function AboutUs() {
+  return <div>Halo this is the about us page!</div>;
+}
diff --git a/app/(pages)/_components/Footer/Footer.module.scss b/app/(pages)/_components/Footer/Footer.module.scss
@@ -0,0 +1,203 @@
+$footer-color: rgba(18, 38, 55, 1);
+$brand-icon-color: white;
+
+// css styling for the desktop view
+.container {
+    width: 100%;
+    min-height: 240px;
+    display: flex;
+    flex-direction: row;
+    background: $footer-color;
+    align-items: center;
+    justify-content: space-evenly;
+    padding-top: 30px;
+    padding-bottom: 20px;
+    gap: 10px;
+
+    .hackdavisLogo {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 23.48px;
+
+        .hdLogoWhite {
+            height: 72px;
+            width: 72px;
+        }
+     }
+}
+
+    .socialContent {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        width: 27vw;
+        align-items: center;
+
+        .brandIcons {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            max-width: 420px;
+            padding-top: 10px;
+
+            .singleIcon { // used for most of the brand icons
+                max-width: 30px;
+                width: 59%;
+                color:$brand-icon-color;
+            }
+            .mediumIcon { // used for most of the brand icons
+                max-width: 40px;
+                width: 59%;
+                color:$brand-icon-color;
+            }
+            .discordIcon { // used for most of the brand icons
+                max-width: 40px;
+                width: 59%;
+                color:$brand-icon-color;
+            }
+
+            .fbIcon { // fb icon is larger than the rest so it needs smaller size
+                max-width: 17px;
+                width: 7%;
+                color:$brand-icon-color;
+            }
+        }
+
+        .copyright {
+            font-family: 'Metropolis';
+            color:white;
+            font-size: 14px;
+        }
+    }
+    .arrowToTop {
+        display: flex;
+        flex-direction: row;
+        color:white;
+        gap: 8px;
+        align-items: center;
+        cursor: pointer;
+        transition: transform 0.2s ease-in-out;
+
+        &:hover{
+            transform: scale(1.1);
+        }
+
+        .backToTopText {
+            font-size: 16px;
+            font-family: 'Metropolis';
+            font-family: 'Metropolis';
+        }
+    }
+
+
+@media (max-width: 870px) {
+    // css styling for mobile view
+.container {
+    position: relative;
+    width: 100%;
+    min-height: 188px;
+    display: flex;
+    flex-direction: column;
+    background: $footer-color;
+    align-items: center;
+    justify-content: space-around;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    gap: 19.54px;
+
+    .hackdavisLogo {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 23.48px;
+        margin-top: 30px;
+
+        .hdLogoWhite {
+            height: 72px;
+            width: 72px;
+        }
+        .hdMottoWhite {
+            height: 55px;
+            width: 176px;
+        }
+
+    }
+
+    .socialContent {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        width: 50vw;
+        align-items: center;
+
+        .brandIcons {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+            align-items: center;
+            width: 100%;
+            max-width: 420px;
+            padding-top: 10px;
+
+            .singleIcon { // used for most of the brand icons
+                max-width: 30px;
+                width: 8%;
+                color:$brand-icon-color;
+
+            }
+
+            .mediumIcon { // used for most of the brand icons
+                max-width: 40px;
+                width: 11%;
+                color:$brand-icon-color;
+            }
+            .discordIcon { // used for most of the brand icons
+                max-width: 40px;
+                width: 11%;
+                color:$brand-icon-color;
+            }
+
+            .fbIcon { // fb icon is larger than the rest so it needs smaller size
+                max-width: 17px;
+                width: 5%;
+                color:$brand-icon-color;
+            }
+        }
+
+        .copyright {
+            font-family: 'Metropolis';
+            color:white;
+            font-size: 8px;
+        }
+    }
+
+    .arrowToTop {
+        position: absolute;
+        top: 18px;
+        right: 31px;
+        display: flex;
+        flex-direction: row;
+        color:white;
+        gap: 8px;
+        align-items: center;
+        cursor: pointer;
+        transition: transform 0.2s ease-in-out;
+        font-size: 1px;
+        margin-top: 2%;
+
+        margin-top: 2%;
+
+
+        &:hover{
+            transform: scale(1.1);
+        }
+
+        .backToTopText {
+            font-size: 12px;
+        }
+    }
+}
+}
diff --git a/app/(pages)/_components/Footer/Footer.tsx b/app/(pages)/_components/Footer/Footer.tsx
@@ -1,7 +1,105 @@
-export default function Footer(){
-    return (
-        <div className="text-center bg-slate-300">
-            halo! Edit this footer in app/(pages)/_components/Footer/Footer.tsx
+'use client';
+import styles from './Footer.module.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import {
+  faMedium,
+  faFacebookF,
+  faTwitter,
+  faInstagram,
+  faDiscord,
+} from '@fortawesome/free-brands-svg-icons';
+import Image from 'next/image';
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false;
+
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+};
+
+export default function Footer() {
+  return (
+    <footer className={styles.container}>
+      <div className={styles.hackdavisLogo}>
+        <Image
+          src="/Footer/hdLogoWhite.svg"
+          alt="hackdavis Logo"
+          width={92.5}
+          height={92.7}
+          className={styles.hdLogoWhite}
+        />
+        <Image
+          src="/Footer/hdLogoMottoUpdated.svg"
+          alt="hackdavis name and motto"
+          width={226}
+          height={71.55}
+          className={styles.hdMottoWhite}
+        />
+      </div>
+      <div className={styles.socialContent}>
+        <div className={styles.brandIcons}>
+          <a className={styles.singleIcon} href="mailto:[email protected]">
+            <FontAwesomeIcon icon={faEnvelope} />
+          </a>
+          <a
+            className={styles.mediumIcon}
+            href="https://medium.com/@HackDavis"
+            target="#"
+            rel="noopener noreferrer"
+            aria-label="@HackDavis on Medium"
+          >
+            <FontAwesomeIcon icon={faMedium} />
+          </a>
+          <a
+            className={styles.fbIcon}
+            href="https://www.facebook.com/HackDavis"
+            target="#"
+            rel="noopener noreferrer"
+            aria-label="HackDavis on Facebook"
+          >
+            <FontAwesomeIcon icon={faFacebookF} />
+          </a>
+          <a
+            className={styles.singleIcon}
+            href="https://twitter.com/hack_davis"
+            target="#"
+            rel="noopener noreferrer"
+            aria-label="@hack_davis on Twitter"
+          >
+            <FontAwesomeIcon icon={faTwitter} />
+          </a>
+          <a
+            className={styles.singleIcon}
+            href="https://www.instagram.com/hackdavis"
+            target="#"
+            rel="noopener noreferrer"
+            aria-label="@hackdavis on Instagram"
+          >
+            <FontAwesomeIcon icon={faInstagram} />
+          </a>
+          <a
+            className={styles.discordIcon}
+            href="https://discord.gg/wc6QQEc"
+            target="#"
+            rel="noopener noreferrer"
+            aria-label="HackDavis Discord server"
+          >
+            <FontAwesomeIcon icon={faDiscord} />
+          </a>
         </div>
-    )
-}
+        <p className={styles.copyright}>
+          &copy; 2024 HackDavis • Made with ☕️ & 💛 in Davis
+        </p>
+      </div>
+      <div className={styles.arrowToTop} onClick={scrollToTop}>
+        <p className={styles.backToTopText}>BACK TO TOP</p>
+        <Image
+          src="/Footer/arrowUp.svg"
+          alt="arrow up"
+          width={24}
+          height={24}
+        />
+      </div>
+    </footer>
+  );
+}