feat: footer

package.json

@@ -24,6 +24,8 @@
     "posthog-js": "^1.161.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-fast-marquee": "^1.6.5",
+    "react-icons": "^5.3.0",
     "vaul": "^0.9.4",
     "zod": "^3.23.8"
   },

src/components/TeamMarquee.tsx

@@ -0,0 +1,92 @@
+import Image from "next/image";
+import Marquee from "react-fast-marquee";
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from "@headlessui/react";
+import { type Dispatch, type SetStateAction, useEffect, useState } from "react";
+import type { StaticImport } from "next/dist/shared/lib/get-img-props";
+
+const placeholderImage = "https://placehold.co/80";
+
+type Profile = {
+  name: string;
+  image: string | StaticImport;
+  quote: string;
+};
+
+const TeamPFP = ({
+  key,
+  profile,
+  setPlaying,
+}: {
+  key: number;
+  profile: Profile;
+  setPlaying: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const [isShowing, setIsShowing] = useState(false);
+
+  useEffect(() => {
+    setPlaying(!isShowing);
+  }, [isShowing, setPlaying]);
+
+  return (
+    <Popover key={key}>
+      {/* We need a popover button to control the open state for some reason */}
+      <PopoverButton
+        disabled
+        as="div"
+        className="mx-4 focus:outline-none"
+        onMouseEnter={() => setIsShowing(true)}
+        onMouseLeave={() => setIsShowing(false)}
+      >
+        <Image
+          src={profile.image}
+          alt={profile.name}
+          width={80}
+          height={80}
+          className="rounded-full"
+        />
+      </PopoverButton>
+      <Transition show={isShowing}>
+        <PopoverPanel
+          static
+          className="absolute z-10 rounded bg-white p-2 shadow-lg transition duration-200 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 data-[closed]:delay-100"
+          portal
+          transition
+          anchor={{
+            to: "bottom",
+            gap: 4,
+          }}
+          onMouseEnter={() => setIsShowing(true)}
+          onMouseLeave={() => setIsShowing(false)}
+        >
+          {profile.quote}
+        </PopoverPanel>
+      </Transition>
+    </Popover>
+  );
+};
+
+const TeamMarquee = () => {
+  // make pfp array 40 placeholder pfps
+  const profileArray = Array.from({ length: 40 }, (_, index) => ({
+    name: `PFP ${index + 1}`,
+    image: placeholderImage + `?text=${index + 1}`,
+    quote: "This is a quote from team member " + (index + 1),
+  }));
+
+  const [playing, setPlaying] = useState(true);
+
+  return (
+    <Marquee className="py-8" play={playing} pauseOnHover>
+      {profileArray.map((profile, index) => (
+        <TeamPFP key={index} profile={profile} setPlaying={setPlaying} />
+      ))}
+    </Marquee>
+  );
+};
+
+export default TeamMarquee;

src/sections/Footer.tsx

@@ -1,22 +1,58 @@
 import React from "react";
 import Image from "next/image";
+import snowman from "~/assets/footer/snowman.png";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { SiInstagram, SiLinkedin, SiDevpost, SiTiktok } from "react-icons/si";
+
+const TeamMarquee = dynamic(() => import("~/components/TeamMarquee"), {
+  ssr: false,
+});
 
 const Footer = () => {
   return (
-    <footer className="grid min-h-screen grid-cols-1 grid-rows-1 bg-red-500">
-      <div className="grid-col relative col-start-1 row-start-1 overflow-clip object-cover p-16">
-        <Image
-          src={"/footer_low.png"}
-          alt={"Footer Blob Image"}
-          objectFit="cover"
-          width={1920}
-          height={1080}
-        />
-      </div>
-      <div className="z-10 col-start-1 row-start-1">
-        <p>HELLO</p>
-      </div>
-    </footer>
+    <>
+      <div className="h-28 bg-gradient-to-b from-white to-[#efdeff]" />
+      <footer className="mx-auto flex flex-col items-center bg-[#efdeff]">
+        <Image src={snowman} alt="Snowman footer image" />
+        <p className="text-md pb-4 text-center lg:text-2xl">
+          Made with ♥ from the DeltaHacks Team
+        </p>
+        {/* <TeamMarquee /> */}
+        <div className="mt-20 flex w-full max-w-screen-lg flex-col items-center gap-3 pb-4 text-lg lg:flex-row lg:gap-8 lg:border-t lg:border-black lg:py-10 lg:text-xl">
+          <div className="flex flex-row gap-1 pb-4 text-white lg:hidden">
+            <Link href="https://www.instagram.com/deltahacks/">
+              <SiInstagram className="size-8" />
+            </Link>
+            <Link href="https://www.linkedin.com/company/deltahacks/">
+              <SiLinkedin className="size-8" />
+            </Link>
+            <Link href="https://devpost.com/hackathons?order_by=deadline&organization=DeltaHacks">
+              <SiDevpost className="size-8" />
+            </Link>
+            <Link href="https://www.tiktok.com/@deltahacks">
+              <SiTiktok className="size-8" />
+            </Link>
+          </div>
+          <Link
+            href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf"
+            className="hover:underline"
+          >
+            Code of Conduct
+          </Link>
+          <Link href="https://mlh.io/privacy" className="hover:underline">
+            Privacy Policy
+          </Link>
+          {/* <Link
+          href="https://github.com/DeltaHacks/deltahacks-website-2024"
+          className="hover:underline"
+        >
+          Travel Guidelines
+        </Link> */}
+          <p className="flex-1 lg:text-right">@ Copyright 2024 DeltaHacks</p>
+        </div>
+      </footer>
+    </>
   );
 };