Updated Footer (#156)

* first draft of footer - needs to change links * got rid of background colour * first draft of footer - needs to change links * got rid of background colour * merged with main and added footer to page.tsx * unbolded "made with" text * added "500" to layout.tsx for weights and changed text weight to 500 * changed icons to official, commented out devpost button and added links to other buttons * added discord logo in replacement of facebook, changed apply and home links * changed icons, changed about us link and added "600" as a weight * changed logo names, changed discord icon, made files prettier * deleted unused icons, cleaned up code, removed unused components and imports * put assets still in use back
HackAtUCI · Oct 5, 2024 · b0b9c0e · b0b9c0e
1 parent 2f9f05e
commit b0b9c0e
Show file tree

Hide file tree

Showing 14 changed files with 7,449 additions and 5,527 deletions.
diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx
@@ -1,7 +1,6 @@
 export const revalidate = 60;
 
 import Landing from "./sections/Landing";
-import Intro from "./sections/Intro";
 import GetInvolved from "./sections/GetInvolved";
 import Sponsors from "./sections/Sponsors";
 import FAQ from "./sections/FAQ";

diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 };
 
 const fredoka = Fredoka({
-	weight: ["400", "600", "700"],
+	weight: ["400", "500", "600", "700"],
 	subsets: ["latin"],
 	variable: "--next-font-fredoka",
 });
@@ -32,7 +32,7 @@ export default function RootLayout({
 			<body className="background">
 				{/* <NavBar /> */}
 				<main>{children}</main>
-				{/* <Footer /> */}
+				<Footer />
 			</body>
 		</html>
 	);

diff --git a/apps/site/src/assets/icons/Facebook-Logo-Primary-min.svg b/apps/site/src/assets/icons/Facebook-Logo-Primary-min.svg
diff --git a/apps/site/src/assets/icons/TikTok-Social-Icon-Circle-White.svg b/apps/site/src/assets/icons/TikTok-Social-Icon-Circle-White.svg
diff --git a/apps/site/src/assets/icons/discord.svg b/apps/site/src/assets/icons/discord.svg
diff --git a/apps/site/src/assets/icons/email.svg b/apps/site/src/assets/icons/email.svg
diff --git a/apps/site/src/assets/icons/hack-logo.svg b/apps/site/src/assets/icons/hack-logo.svg
diff --git a/apps/site/src/assets/icons/hack.svg b/apps/site/src/assets/icons/hack.svg
diff --git a/apps/site/src/assets/icons/instagram.svg b/apps/site/src/assets/icons/instagram.svg
diff --git a/apps/site/src/assets/icons/mail_icon.svg b/apps/site/src/assets/icons/mail_icon.svg
diff --git a/apps/site/src/assets/icons/tiktok.svg b/apps/site/src/assets/icons/tiktok.svg
diff --git a/apps/site/src/components/Footer/Footer.module.scss b/apps/site/src/components/Footer/Footer.module.scss
@@ -1,28 +1,106 @@
 .footer {
-	padding-bottom: 7vw;
+	padding: 2vw 4vw 2vw 4vw;
+}
+.left_footer {
+	text-align: left;
+}
+
+.left_footer_text {
+	color: white;
+	margin-right: 10px;
+	margin-left: 5px;
+	text-decoration: none;
+	font-weight: 500;
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.button {
+	background-color: white;
+	border: none;
+	color: hsl(189, 100%, 38%);
+	padding: 8px 30px;
+	text-align: center;
+	text-decoration: none;
+	display: inline-block;
+	font-size: 16px;
+	margin: 0.5vw;
+	border-radius: 8px;
+	font-weight: 500;
+
+	&:hover {
+		transform: scale(1.025);
+		filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
+	}
+}
+
+.right_footer {
+	text-align: right;
+}
+
+#box {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
 }
 
 .text {
 	font-size: 1.5rem;
-	font-weight: bold;
-	color: black;
+	font-weight: 500;
+	color: white;
 	text-align: center;
 	margin-bottom: 0;
 }
 
 .socials {
-	background-color: white;
-	margin: 15px;
+	margin-right: 13px;
 	padding: 5px;
 	border-radius: 10px;
-	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));
+	object-fit: contain;
 	transform: scale(0.95);
 	transition:
 		transform,
 		filter 0.25s;
+
+	&:hover {
+		transform: scale(1.025);
+		filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
+	}
 }
 
-.socials:hover {
-	transform: scale(1.025);
-	filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
+@media only screen and (max-width: 600px) {
+	.buttons {
+		text-align: center;
+		display: block;
+		margin: auto;
+		flex-wrap: nowrap;
+	}
+
+	#box {
+		justify-content: center;
+		text-align: center;
+	}
+
+	.button {
+		margin-top: 0.7rem;
+	}
+
+	.socials {
+		margin-left: 15px;
+		margin-right: 15px;
+		margin-bottom: 10px;
+		margin-top: 10px;
+		padding: 0;
+	}
+
+	.text {
+		font-size: 1rem;
+		margin-top: 1.5rem;
+	}
+
+	.left_footer {
+		text-align: center;
+	}
 }
diff --git a/apps/site/src/components/Footer/Footer.tsx b/apps/site/src/components/Footer/Footer.tsx
@@ -1,36 +1,41 @@
 "use client";
 
 import Image from "next/image";
+import Link from "next/link";
+import clsx from "clsx";
 
 import styles from "./Footer.module.scss";
 
-import Mail from "@/assets/icons/email.svg";
-import Facebook from "@/assets/icons/Facebook-Logo-Primary-min.svg";
-import Instagram from "@/assets/icons/instagram.png";
-import Hack from "@/assets/icons/hack-logo.svg";
-import TikTok from "@/assets/icons/TikTok-Social-Icon-Circle-White.svg";
+import Mail from "@/assets/icons/mail_icon.svg";
+import Discord from "@/assets/icons/discord.svg";
+import Instagram from "@/assets/icons/instagram.svg";
+import Hack from "@/assets/icons/hack.svg";
+import TikTok from "@/assets/icons/tiktok.svg";
 
 type Social = {
 	icon: any;
 	link: string;
 	alt: string;
 };
 
-const SOCIALS: Social[] = [
+const LEFT_SOCIALS: Social[] = [
 	{
 		icon: Hack,
 		link: "https://hack.ics.uci.edu/",
 		alt: "Hack at UCI logo that links to Hack at UCI's club website",
 	},
+];
+
+const RIGHT_SOCIALS: Social[] = [
 	{
 		icon: Mail,
 		link: "mailto:[email protected]",
 		alt: "Mail icon that creates an email with Hack at UCI as sender",
 	},
 	{
-		icon: Facebook,
-		link: "https://www.facebook.com/UCI.Hack/",
-		alt: "Facebook logo that links to Hack at UCI's Facebook",
+		icon: Discord,
+		link: "https://discord.com/invite/pvkGxq2AWM",
+		alt: "Discord logo that links to Hack at UCI's Discord server",
 	},
 	{
 		icon: Instagram,
@@ -47,20 +52,60 @@ const SOCIALS: Social[] = [
 export default function Footer() {
 	return (
 		<footer className={styles.footer}>
-			<p className={styles.text}>Made with &lt;3 in Irvine, CA - Hack @ UCI</p>
-			<div className="text-center">
-				{SOCIALS.map(({ icon, link, alt }) => (
+			<div className={clsx(styles.left_footer, styles.hack_icon)}>
+				{LEFT_SOCIALS.map(({ icon, link, alt }) => (
 					<a key={link} href={link} target="_blank">
 						<Image
 							src={icon.src}
 							alt={alt}
-							width={45}
-							height={45}
+							width={55}
+							height={55}
 							className={styles.socials}
 						/>
 					</a>
 				))}
 			</div>
+			<div className={styles.buttons}>
+				<div id={styles.box}>
+					<div className={clsx(styles.left_footer, styles.links)}>
+						<Link href="/" className={styles.left_footer_text}>
+							Home
+						</Link>
+						{/* <Link
+							href="https://zothacks-2023.devpost.com/"
+							className={styles.left_footer_text}
+							target="_blank"
+						>
+							Devpost
+						</Link> */}
+						<Link
+							href="https://hack.ics.uci.edu/"
+							className={styles.left_footer_text}
+							target="_blank"
+						>
+							About Us
+						</Link>
+					</div>
+					<div className={styles.right_footer}>
+						{RIGHT_SOCIALS.map(({ icon, link, alt }) => (
+							<a key={link} href={link} target="_blank">
+								<Image
+									src={icon.src}
+									alt={alt}
+									width={40}
+									height={40}
+									className={styles.socials}
+								/>
+							</a>
+						))}
+					</div>
+				</div>
+
+				<a href="/apply" className={styles.button} target="_blank">
+					Apply Now
+				</a>
+			</div>
+			<p className={styles.text}>Made with 👋 in Irvine, CA - Hack at UCI</p>
 		</footer>
 	);
 }