Holden/4 footer

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1735849997797
+	}
+}

.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

app/components/footer.tsx

@@ -0,0 +1,95 @@
+/*  footer.tsx
+*
+*   This file contains the footer component for the JumboCode website. The 
+*   footer contains links to the main pages of the website, as well as contact 
+*   information and social media links.
+* 
+*   Created by Holden Kittelberger on 1/2/2025
+*
+*/
+
+/* TODO: Add actual links to the pages once completed */
+/* array of all the pages/links that are used, each title is a new column */
+const LINKS = [
+    {
+        title: "JumboCode",
+        items: [
+            { name: "Home", url: "/" },
+            { name: "About", url: "/" },
+            { name: "Our Work", url: "/" },
+        ],
+    },
+    {
+        title: "Students",
+        items: [
+            { name: "Applications", url: "/" },
+            { name: "Testimonials", url: "/" },
+            { name: "FAQs", url: "/" },
+        ],
+    },
+    {
+        title: "Non-profits",
+        items: [
+            { name: "Work with us", url: "/" },
+            { name: "Testimonials", url: "/" },
+            { name: "FAQs", url: "/" },
+        ],
+    },
+];
+
+/* All the links associated with the media icons */
+const SOCIAL_LINKS = [
+    { href: "https://www.facebook.com/JumboCode/", src: "social icons/fb.png", alt: "Facebook" },
+    { href: "https://www.linkedin.com/company/tuftsjumbocode/posts/?feedView=all", src: "social icons/LinkedIn.png", alt: "LinkedIn" },
+    { href: "https://www.instagram.com/jumbocode/?hl=en", src: "social icons/Insta.png", alt: "Instagram" },
+    { href: "https://github.com/JumboCode", src: "social icons/Git.png", alt: "GitHub" },
+];
+
+/* Used to update the copyright date (lol do we even have that?) */
+const currentYear = new Date().getFullYear();
+
+/*  Footer
+*   returns the footer component
+*   takes no input
+*/
+export default function Footer() {
+  return (
+    <footer className="relative w-full bg-background text-white border-t-2 border-subtext">
+    <div className="mx-auto w-full max-w-7xl px-20">
+        <div className="flex flex-col md:flex-row justify-between mt-10 gap-5 md:gap-20">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-5 md:gap-20">
+                {LINKS.map(({ title, items }) => (
+                <ul key={title} className="space-y-2">
+                    <div className="font-bold mb-1">
+                        {title}
+                    </div>
+                {items.map(({ name, url }) => (
+                    <li key={name}>
+                    <a href={url}>
+                    <div className="text-subtext hover:opacity-50 transition-opacity duration-200">{name}</div>
+                    </a>
+                    </li>
+                ))}
+                </ul>
+                ))}
+            </div>
+            <div className="md:ml-auto">
+                <h4 className="font-bold hover:opacity-50 transition-opacity duration-200" id="email-header"><a href="mailto:[email protected]" target="_blank">[email protected]</a></h4>
+                <div className="flex mt-3 space-x-6">
+                    {SOCIAL_LINKS.map(({ href, src, alt }) => (
+                    <a key={alt} href={href} target="_blank" className="flex-shrink-0 hover:opacity-50 transition-opacity duration-200">
+                        <img src={src} alt={alt} className="w-8 h-8" />
+                    </a>
+                    ))}
+                </div>
+            </div>
+        </div>
+        <div className="mt-10 py-10">
+          <div className = "text-subtext">
+            &copy; {currentYear} JumboCode
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

app/page.tsx

@@ -1,31 +1,36 @@
 import Button from "@/app/components/button";
 import { EnvelopeIcon } from "@heroicons/react/24/outline";
+import Footer from "@/app/components/footer";
 
 export default function Home() {
   return (
-    <div className="p-4 space-y-4 bg-black">
-      <Button
-        text="Email Us"
-        route="/testing"
-        variant="primary"
-        icon={EnvelopeIcon}
-      />
+    <div>
+      <div className="p-4 space-y-4 bg-black">
+        <Button
+          text="Email Us"
+          route="/testing"
+          variant="primary"
+          icon={EnvelopeIcon}
+        />
 
-      <Button
-        text="Email Us"
-        route="/testing"
-        variant="secondary"
-        icon={EnvelopeIcon}
-      />
+        <Button
+          text="Email Us"
+          route="/testing"
+          variant="secondary"
+          icon={EnvelopeIcon}
+        />
 
-      <Button
-        text="Email Us"
-        route="/testing"
-        variant="ghost"
-        icon={EnvelopeIcon}
-      />
+        <Button
+          text="Email Us"
+          route="/testing"
+          variant="ghost"
+          icon={EnvelopeIcon}
+        />
 
-      <Button text="Email Us" route="/testing" variant="primary" />
+        <Button text="Email Us" route="/testing" variant="primary" />
+
+      </div>
+      <Footer/>
     </div>
   );
 }

tailwind.config.ts

@@ -11,6 +11,8 @@ const config: Config = {
       colors: {
         gray: colors.slate,
         brand: "#32C89E",
+        background: "#171719",
+        subtext: "#A1A1A1"
       },
     },
   },