2024 Footer and small homepage fix (#267)

* Add footer to homepage and replace facebook with tiktok

* fix mobile homepage star background

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

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:[email protected]" 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:[email protected]" 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;
+export default Footer;

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;

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;

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>
 	);
 };

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;