Implement footer component with layout styling (#2)

* implement footer component with layout styling; use placeholder react logo * apply consistent formatting --------- Co-authored-by: Darin <[email protected]>
NUWildHacks · Nov 15, 2024 · 41b48aa · 41b48aa
1 parent 992fc92
commit 41b48aa
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -1 +1,20 @@
 @use "../../shared/colors";
+
+#footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#footer img {
+  width: 10%;
+}
+
+#footer-socials {
+  display: flex;
+  flex-direction: row;
+  column-gap: 2.5rem;
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,10 +1,21 @@
 import React from "react";
+import reactLogo from "../../assets/react.svg";
 import "./Footer.scss";
 
 interface IFooter {}
 
 export const Footer: React.FC<IFooter> = () => {
-  return <div>some words</div>;
+  return (
+    <div id="footer">
+      <img src={reactLogo} alt="Placeholder" />
+      <h2>WildHacks 2025</h2>
+      <div id="footer-socials">
+        <a href="https://www.instagram.com/wildhacks/">Instagram</a>
+        <a href="https://www.linkedin.com/company/wildhacks/">LinkedIn</a>
+        <a href="mailto:[email protected]">Email</a>
+      </div>
+    </div>
+  );
 };
 
 export default Footer;