From 8c7a79783ac3bccfba2854c60c421e1407211a81 Mon Sep 17 00:00:00 2001
From: Ayro Escobar <ayro.escobar@gmail.com>
Date: Mon, 22 Jun 2026 16:29:22 -0500
Subject: [PATCH] feat(footer): cover shader bg at any resolution and boost
 text legibility

---
 app/components/footer/Footer.tsx       | 67 +++++++++++++++++++-------
 app/components/footer/FooterReveal.tsx | 31 ++++++------
 2 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/app/components/footer/Footer.tsx b/app/components/footer/Footer.tsx
index 15c366c..4a1642f 100644
--- a/app/components/footer/Footer.tsx
+++ b/app/components/footer/Footer.tsx
@@ -1,14 +1,19 @@
 "use client";
 
-import Link from "next/link";
 import { forwardRef, type ComponentPropsWithoutRef } from "react";
 import BrandShaderBackground from "@/app/components/background/BrandShaderBackground";
 
-const links = [
-  { label: "Instagram", href: "#" },
-  { label: "Twitter", href: "#" },
-  { label: "Discord", href: "#" },
-  { label: "LinkedIn", href: "#" },
+type FooterLink = {
+  label: string;
+  href: string;
+};
+
+const links: FooterLink[] = [
+  { label: "Instagram", href: "https://www.instagram.com/hackutd/" },
+  { label: "Twitter", href: "https://x.com/hackutd" },
+  { label: "LinkedIn", href: "https://www.linkedin.com/company/hackutd/" },
+  { label: "TikTok", href: "https://www.tiktok.com/@hackutd" },
+  { label: "GitHub", href: "https://github.com/hackutd" },
 ];
 
 type FooterProps = ComponentPropsWithoutRef<"footer">;
@@ -20,6 +25,8 @@ const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
   { className, ...props },
   ref,
 ) {
+  const year = new Date().getFullYear();
+
   return (
     <footer
       ref={ref}
@@ -28,14 +35,17 @@ const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
         className ? null : "relative",
         footerBaseClassName,
         className,
-      ].filter(Boolean).join(" ")}
+      ]
+        .filter(Boolean)
+        .join(" ")}
     >
       <div
         aria-hidden="true"
-        className="pointer-events-none absolute inset-x-0 bottom-0 h-[52%] overflow-hidden opacity-95 md:inset-y-0 md:left-1/2 md:right-0 md:h-auto"
+        className="pointer-events-none absolute inset-0 overflow-hidden opacity-95 [container-type:size]"
       >
         <BrandShaderBackground
-          className="scale-[1.35] md:scale-[1.5]"
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 scale-[1.5]"
+          style={{ width: "max(100cqw, 100cqh)", height: "max(100cqw, 100cqh)" }}
           shaderProps={{
             cDistance: 5.4,
             cameraZoom: 15,
@@ -47,31 +57,52 @@ const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
 
       <div className="relative z-10 flex min-h-[376px] flex-col justify-between gap-10 sm:min-h-[336px] md:min-h-[216px] md:flex-row md:items-end md:justify-between md:gap-8">
         <div className="md:pb-1">
-          <p className="font-serif text-[2.875rem] font-light leading-none tracking-normal text-[#070d1a] sm:text-[3.625rem] md:text-[4.25rem] lg:text-[5.125rem]">
+          <p className="font-serif text-[2.875rem] font-light leading-none tracking-normal text-white sm:text-[3.625rem] md:text-[4.25rem] lg:text-[5.125rem] [text-shadow:0_2px_20px_rgba(0,0,0,0.55),0_1px_3px_rgba(0,0,0,0.45)]">
             HackUTD
           </p>
-          <p className="mt-4 font-serif text-[1.375rem] font-light italic leading-none text-[#070d1a]/60 sm:mt-5 sm:text-[1.625rem] md:text-[1.875rem] lg:text-[2rem]">
+          <p className="mt-4 font-serif text-[1.375rem] font-light italic leading-none text-white sm:mt-5 sm:text-[1.625rem] md:text-[1.875rem] lg:text-[2rem] [text-shadow:0_2px_16px_rgba(0,0,0,0.55),0_1px_2px_rgba(0,0,0,0.45)]">
             Happy Hacking
           </p>
-          <p className="mt-5 text-[0.6875rem] font-light uppercase tracking-normal text-[#070d1a]/35 sm:mt-7 sm:text-xs">
-            MADE WITH &lt;3
+          <p className="mt-5 text-[0.6875rem] font-light uppercase tracking-[0.08em] text-white/90 sm:mt-7 sm:text-xs [text-shadow:0_1px_8px_rgba(0,0,0,0.5)]">
+            &copy; {year} HackUTD by{" "}
+            <a
+              href="https://acmutd.co/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline decoration-white/40 underline-offset-2 transition-colors hover:text-white"
+            >
+              ACM UTD
+            </a>{" "}
+            &middot; Made with &lt;3
           </p>
         </div>
 
         <div className="flex flex-col gap-7 pb-1 sm:items-end md:max-w-[46vw] md:gap-8">
-          <p className="text-[0.6875rem] font-light uppercase tracking-normal text-white/95 sm:text-xs">
+          <p className="text-[0.6875rem] font-light uppercase tracking-[0.08em] text-white sm:text-xs [text-shadow:0_1px_8px_rgba(0,0,0,0.5)]">
             CONNECT
           </p>
-          <nav className="grid grid-cols-2 gap-x-10 gap-y-4 sm:flex sm:flex-wrap sm:justify-end sm:gap-x-10 sm:gap-y-3 md:gap-x-8 lg:gap-x-12 xl:gap-x-14">
+          <nav
+            aria-label="HackUTD social links"
+            className="grid grid-cols-2 gap-x-10 gap-y-4 sm:flex sm:flex-wrap sm:justify-end sm:gap-x-10 sm:gap-y-3 md:gap-x-8 lg:gap-x-12 xl:gap-x-14"
+          >
             {links.map((link) => (
-              <Link
+              <a
                 key={link.label}
                 href={link.href}
-                className="text-[0.6875rem] font-light uppercase tracking-normal text-white/85 transition-colors hover:text-white sm:text-xs"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={`HackUTD on ${link.label}`}
+                className="text-[0.75rem] font-light uppercase tracking-[0.08em] text-white transition-colors hover:text-white sm:text-xs [text-shadow:0_1px_8px_rgba(0,0,0,0.5)]"
               >
                 {link.label}
-              </Link>
+              </a>
             ))}
+            <a
+              href="mailto:hello@hackutd.co"
+              className="text-[0.75rem] font-light uppercase tracking-[0.08em] text-white transition-colors hover:text-white sm:text-xs [text-shadow:0_1px_8px_rgba(0,0,0,0.5)]"
+            >
+              Contact
+            </a>
           </nav>
         </div>
       </div>
diff --git a/app/components/footer/FooterReveal.tsx b/app/components/footer/FooterReveal.tsx
index 9b1650f..fb2f6e0 100644
--- a/app/components/footer/FooterReveal.tsx
+++ b/app/components/footer/FooterReveal.tsx
@@ -10,9 +10,6 @@ import Footer from "./Footer";
 
 configureScrollTrigger();
 
-const revealSpacerClassName =
-  "pointer-events-none h-[calc(440px+12vh)] sm:h-[calc(400px+12vh)] md:h-[calc(280px+10vh)]";
-
 function setFooterInteractivity(footer: HTMLElement, isInteractive: boolean) {
   footer.inert = !isInteractive;
 
@@ -37,17 +34,18 @@ export default function FooterReveal() {
         return;
       }
 
-      gsap.set(footer, {
-        autoAlpha: 0,
-      });
+      const syncSpacerHeight = () => {
+        reveal.style.height = `${footer.offsetHeight}px`;
+      };
+
+      syncSpacerHeight();
+
+      gsap.set(footer, { autoAlpha: 0 });
 
       let isFooterVisible = false;
       let isFooterInteractive = false;
 
-      const updateFooterState = (
-        isVisible: boolean,
-        isInteractive: boolean,
-      ) => {
+      const updateFooterState = (isVisible: boolean, isInteractive: boolean) => {
         if (isFooterVisible !== isVisible) {
           isFooterVisible = isVisible;
           gsap.set(footer, { autoAlpha: isVisible ? 1 : 0 });
@@ -83,7 +81,14 @@ export default function FooterReveal() {
         onLeaveBack: () => updateFooterState(false, false),
       });
 
+      const resizeObserver = new ResizeObserver(() => {
+        syncSpacerHeight();
+        ScrollTrigger.refresh();
+      });
+      resizeObserver.observe(footer);
+
       return () => {
+        resizeObserver.disconnect();
         trigger.kill();
       };
     },
@@ -96,11 +101,7 @@ export default function FooterReveal() {
 
   return (
     <>
-      <div
-        ref={revealRef}
-        aria-hidden="true"
-        className={revealSpacerClassName}
-      />
+      <div ref={revealRef} aria-hidden="true" className="pointer-events-none" />
       <Footer
         ref={footerRef}
         aria-hidden="true"