Merge pull request #50 from HackAtUCI/setup/footer

Setup/footer addition

.env

@@ -1 +1 @@
-PYTHONPATH=apps/api/src
+PYTHONPATH=apps/api/src

apps/site/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import water from "@/assets/backgrounds/water.jpg";
+import Footer from "@/lib/components/Footer/Footer";
 import "./globals.css";
 
 import { Layout } from "@/components/dom/Layout";
@@ -25,6 +26,7 @@ export default function RootLayout({
 			>
 				{/* reference: https://github.com/pmndrs/react-three-next */}
 				<Layout>{children}</Layout>
+				<Footer />
 			</body>
 		</html>
 	);

apps/site/src/lib/components/Footer/Footer.module.scss

@@ -0,0 +1,7 @@
+.footer {
+	color: white;
+	background-color: #432810;
+	border-top-left-radius: 500rem 20rem;
+	border-top-right-radius: 500rem 20rem;
+	padding-bottom: 20px;
+}

apps/site/src/lib/components/Footer/Footer.tsx

@@ -0,0 +1,64 @@
+import hack from "@/assets/logos/hack.svg";
+import mail from "@/assets/logos/mail.svg";
+import facebook from "@/assets/logos/facebook.svg";
+import instagram from "@/assets/logos/instagram.svg";
+import Image from "next/image";
+
+import styles from "./Footer.module.scss";
+
+const imageArray = [
+	{
+		"logo": hack,
+		"alt": "Hack Logo that links to Hack at UCI's website",
+		"link": "https://hack.ics.uci.edu"
+	},
+	{
+		"logo": mail,
+		"alt": "Email that directs to [email protected]",
+		"link": "mailto:[email protected]"
+	},
+	{
+		"logo": facebook,
+		"alt": "Facebook logo that links to Hack at UCI's facebook",
+		"link": "https://www.facebook.com/groups/HackAtUCI/"
+	},
+	{
+		"logo": instagram,
+		"alt": "Instagram logo that links to Hack at UCI's instagram",
+		"link": "https://www.instagram.com/hackatuci/"
+	},
+]
+
+const Footer = () => {
+
+	return (
+	<footer className={`${styles.footer} flex flex-col items-center`}>
+		<div className='flex flex-row footer-logos items-center gap-10 mt-12 max-[340px]:mt-5'>
+			{imageArray.map((item, index) => {
+				return(
+					<a key={`footer-logo-${index}`} href={item.link} target="_blank" rel="noopener noreferrer">
+						<Image
+							src={item.logo}
+							width="35"
+							alt={item.alt}
+						/>
+					</a>
+				)
+
+			})}
+		</div>
+		<div className="flex flex-row gap-1 items-center mt-2 max-[600px]:flex-col max-[210px]:gap-0 max-[210px]:mt-0">
+			<div className="flex flex-row gap-1 items-center max-[210px]:flex-col max-[210px]:gap-0">
+				<p className="m-0">Made with</p>
+				<svg className=" fill-white" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>
+				<p className="m-0">in Irvine, CA <span className="max-[600px]:hidden">•</span></p>
+			</div>
+
+			<p className="m-0 flex gap-1 whitespace-nowrap max-[340px]:flex-col max-[340px]:items-center">Learn more about the <a href="https://hack.ics.uci.edu" target="_blank" rel="noopener noreferrer"><span style={{"color" : "#FBA80A"}}>Hack @ UCI Team</span></a></p>
+		</div>
+
+	</footer>
+	);
+};
+
+export default Footer;

apps/site/tailwind.config.ts

@@ -5,6 +5,7 @@ const config: Config = {
 		"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+		"./src/lib/**/*.{js,ts,jsx,tsx,mdx}",
 	],
 	theme: {
 		extend: {