From 7d5339d193e5ace93c7a88cfb86971ff55b9ce41 Mon Sep 17 00:00:00 2001
From: Albert Wang <alberw5@uci.edu>
Date: Fri, 24 May 2024 04:31:25 -0700
Subject: [PATCH] 2024 Footer and small homepage fix (#267)

* Add footer to homepage and replace facebook with tiktok

* fix mobile homepage star background
---
 index.html                                |  4 +++
 src/app/components/footer/Footer.jsx      | 40 ++++++++++++++---------
 src/app/components/footer/Footer.scss     |  5 ++-
 src/app/components/partners/Partners.scss |  2 +-
 src/app/views/home/Home.jsx               |  2 ++
 src/app/views/home/Home.scss              |  4 +++
 6 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 8e5daf1..306f502 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,10 @@
 			crossorigin="anonymous"
 		/>
 		<title>VenusHacks 2024</title>
+		<script
+			src="https://kit.fontawesome.com/897430639f.js"
+			crossorigin="anonymous"
+		></script>
 		<!-- Start Single Page Apps for GitHub Pages -->
 		<script type="text/javascript">
 			// Single Page Apps for GitHub Pages
diff --git a/src/app/components/footer/Footer.jsx b/src/app/components/footer/Footer.jsx
index 81b1ad7..e012715 100644
--- a/src/app/components/footer/Footer.jsx
+++ b/src/app/components/footer/Footer.jsx
@@ -1,20 +1,28 @@
-import React from 'react';
-import './Footer.scss';
+import React from "react";
+import "./Footer.scss";
 
 function Footer() {
-    return (
-        <footer id="footer">
-            <a href="mailto:contact@venushacks.com" target="_top">
-                <i className="fa fa-envelope"></i>
-            </a>
-            <a href="https://www.facebook.com/venushacksUCI/" target="_blank" rel="noopener noreferrer">
-                <i className="fa fa-facebook"></i>
-            </a>
-            <a href="https://www.instagram.com/venushacksuci" target="_blank" rel="noopener noreferrer">
-                <i className="fa fa-instagram"></i>
-            </a>
-        </footer>
-    )
+	return (
+		<footer id="footer">
+			<a href="mailto:venushacks.uci@gmail.com" target="_top">
+				<i className="fa fa-envelope"></i>
+			</a>
+			<a
+				href="https://www.tiktok.com/@venushacksuci?_t=8mcE7XPT13b&_r=1"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<i className="fa-brands fa-tiktok"></i>
+			</a>
+			<a
+				href="https://www.instagram.com/venushacksuci"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<i className="fa-brands fa-instagram"></i>
+			</a>
+		</footer>
+	);
 }
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/src/app/components/footer/Footer.scss b/src/app/components/footer/Footer.scss
index d35b37b..c394e4c 100644
--- a/src/app/components/footer/Footer.scss
+++ b/src/app/components/footer/Footer.scss
@@ -1,10 +1,9 @@
-@import "../../../globals/vh-styles.scss";
+@import "src/globals/vh-styles.scss";
 
 #footer {
 	width: 100vw;
 	height: 125px;
-	background-color: #382a77;
-
+	background-color: $darkPurple;
 	font-size: 35px;
 	display: flex;
 	justify-content: center;
diff --git a/src/app/components/partners/Partners.scss b/src/app/components/partners/Partners.scss
index 8bbbf4e..6c1a7eb 100644
--- a/src/app/components/partners/Partners.scss
+++ b/src/app/components/partners/Partners.scss
@@ -16,7 +16,7 @@
 		flex-wrap: wrap;
 		justify-content: center;
 		align-items: center;
-		margin: 0px 60px;
+		margin: 0px 60px 50px 60px;
 		padding: 0px 20px;
 		border-radius: 20px;
 		color: #4767b1;
diff --git a/src/app/views/home/Home.jsx b/src/app/views/home/Home.jsx
index 4e09c2e..a464670 100644
--- a/src/app/views/home/Home.jsx
+++ b/src/app/views/home/Home.jsx
@@ -1,6 +1,7 @@
 import FAQs from "src/app/components/faqs/FAQs";
 import Sponsors from "src/app/components/sponsors/Sponsors";
 import Partners from "src/app/components/partners/Partners";
+import { Footer } from "src/app/components";
 
 import vh_title from "/assets/images/titles/venushacks.svg";
 import about_title from "/assets/images/titles/vh-about.svg";
@@ -92,6 +93,7 @@ const Home = () => {
 			</section>
 			<Sponsors />
 			<Partners />
+			<Footer />
 		</div>
 	);
 };
diff --git a/src/app/views/home/Home.scss b/src/app/views/home/Home.scss
index 979d9e8..be2c1ad 100644
--- a/src/app/views/home/Home.scss
+++ b/src/app/views/home/Home.scss
@@ -18,6 +18,10 @@ body {
 	text-align: center;
 	min-height: 100vh;
 
+	@media screen and (max-width: $break-small) {
+		background-size: contain;
+	}
+
 	section {
 		.section-title {
 			max-width: 100vw;