HackDavis · phlangiee · Jan 29, 2026 · Jan 29, 2026 · Jan 29, 2026 · Jan 29, 2026
diff --git a/app/(pages)/_globals/styles/globals.scss b/app/(pages)/_globals/styles/globals.scss
@@ -50,7 +50,7 @@
   /* About Us Text Colors */
   --text-dark: #123041;
   --text-extra-dark: #0E2535;
-  --text-black: #000000
+  --text-black: #000000;
   --text-white: #FFFFFF;
   --text-purple: #BE5BA8;
 

diff --git a/app/(pages)/about-us/page.tsx b/app/(pages)/about-us/page.tsx
@@ -4,8 +4,6 @@ import Header from '@components/Header/Header';
 export default function AboutUs() {
   return (
     <div className="relative">
-      <Header />
-      <Hero />
     </div>
   );
 }
diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx
@@ -4,6 +4,7 @@ import metadataJSON from '@app/(pages)/_globals/metadata.json';
 import fonts from './_globals/fonts';
 import Header from './_components/Header/Header';
 import Footer from '@app/(pages)/_components/Footer/Footer';
+import AboutUs from './about-us/page';
 
 export const metadata: Metadata = metadataJSON;
 
@@ -17,6 +18,7 @@ export default function RootLayout({
       <body className={`${fonts} antialiased`}>
         <Header />
         {children}
+        <AboutUs />
         <Footer />
       </body>
     </html>

diff --git a/app/(pages)/registration/Donors/Donors.tsx b/app/(pages)/registration/Donors/Donors.tsx
@@ -0,0 +1,66 @@
+import { LuHeart } from 'react-icons/lu';
+
+function DonorRow({
+  rowNames,
+  rowNum,
+}: {
+  rowNames: string[];
+  rowNum: number;
+}) {
+  return (
+    <div className="flex flex-row inline-flex overflow-hidden justify-center items-center">
+      <div
+        className={
+          'flex flex-row inline-flex gap-[2vw] hover:[animation-play-state:paused] whitespace-nowrap ' +
+          (rowNum === 1 ? 'animate-slide-row1' : 'animate-slide-row2')
+        }
+      >
+        {[...rowNames, ...rowNames, ...rowNames].map((name, i) => (
+          <div
+            key={`${i}-${name}`}
+            className="glass-pill flex items-center justify-center !p-[1vw] !px-[2.5vw]"
+          >
+            <p className="cursor-default text-[1vw] text-white font-metropolis uppercase font-medium">
+              {name}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function Donors() {
+  const row1_names = [
+    'Pranav Lal',
+    'Anonymous',
+    'Pranav Lal',
+    'Anonymous',
+    'Pranav Lal',
+    'Anonymous',
+    'Pranav Lal',
+    'Anonymous',
+  ];
+
+  const row2_names = [
+    'Alex Marasigan',
+    'Also ALEX Marasigan',
+    'Also Also ALEX Marasigan',
+    'Also Also Also ALEX Marasigan',
+    'Also Also Also Also ALEX Marasigan',
+    'Also Also Also Also Also ALEX Marasigan',
+  ];
+
+  return (
+    <div className="bg-darkpurple py-[3vw] gap-[2vw] flex flex-col">
+      <div className="flex flex-row items-center justify-center gap-[1.5vw]">
+        <p className="text-[3vw] text-white flex justify-center items-center font-inter font-semibold">
+          And a special thanks to our donors!
+        </p>
+        <LuHeart className="text-white text-[3vw]" />
+      </div>
+      <DonorRow rowNames={row1_names} rowNum={1} />
+      {/* <DonorRow rowNames={row2_names} rowNum={2} />*/}
+    </div>
+  );
+}
diff --git a/app/(pages)/registration/Sponsers/Sponsers.tsx b/app/(pages)/registration/Sponsers/Sponsers.tsx
@@ -0,0 +1,180 @@
+'use client';
+
+import Image from 'next/image';
+
+function SponsorElement({
+  src,
+  url,
+  alt,
+}: {
+  src?: string;
+  url?: string;
+  alt?: string;
+}) {
+  return (
+    <div
+      className={`relative flex-shrink-0 bg-[#612D72] rounded-[2vw] w-[30vw] h-[20vw] flex items-center justify-center`}
+    >
+      <div className="absolute inset-[10%]">
+        <a
+          href={url ? url : '#'}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="w-full h-full"
+        >
+          <Image
+            src={src ? src : '/Images/sponsers/abbottlogo.png'} // default image?
+            alt={alt ? alt : 'Unknown sponsor logo'}
+            fill
+            className="object-contain"
+          />
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function SponserRow({
+  rowImages,
+  rowNum,
+}: {
+  rowImages: { id: string; src?: string; url?: string; alt?: string }[];
+  rowNum: number;
+}) {
+  return (
+    <div className="flex flex-row inline-flex overflow-hidden justify-center">
+      <div
+        className={
+          'flex flex-row inline-flex gap-[2vw] hover:[animation-play-state:paused] ' +
+          (rowNum === 1
+            ? 'animate-slide-row1'
+            : rowNum === 2
+            ? 'animate-slide-row2'
+            : 'animate-slide-row3')
+        }
+      >
+        {[...rowImages, ...rowImages, ...rowImages].map((image, i) => (
+          <SponsorElement key={`${image.id}-${i}`} {...image} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function Sponsers() {
+  const row1_images = [
+    {
+      id: 'abbott',
+      src: '/Images/sponsers/abbottlogo.png',
+      url: 'https://www.youtube.com/',
+      alt: 'frog',
+    },
+    {
+      id: 'nike',
+      src: '/Images/sponsers/nikelogo.png',
+      url: 'https://www.innersloth.com/games/among-us/',
+      alt: 'ucdavis congrats',
+    },
+    {
+      id: 'abbott1',
+      src: '/Images/sponsers/abbottlogo.png',
+      url: 'https://www.innersloth.com/games/among-us/',
+      alt: 'frog',
+    },
+  ];
+
+  const row2_images = [
+    {
+      id: 'abbott',
+      src: '/Images/sponsers/abbottlogo.png',
+      url: 'https://www.youtube.com/',
+      alt: 'frog',
+    },
+    {
+      id: 'nike',
+      src: '/Images/sponsers/nikelogo.png',
+      url: 'https://www.innersloth.com/games/among-us/',
+      alt: 'ucdavis congrats',
+    },
+    {
+      id: 'abbott1',
+      src: '/Images/sponsers/abbottlogo.png',
+      url: 'https://www.innersloth.com/games/among-us/',
+      alt: 'frog',
+    },
+    {
+      id: 'nike2',
+      src: '/Images/sponsers/nikelogo.png',
+      url: 'https://www.youtube.com/',
+      alt: 'ucdavis congrats',
+    },
+    {
+      id: 'nike3',
+      src: '/Images/sponsers/nikelogo.png',
+      url: 'https://www.youtube.com/',
+      alt: 'ucdavis congrats',
+    },
+  ];
+
+  const row3_images = [
+    {
+      id: 'abbott',
+      src: '/Images/sponsers/abbottlogo.png',
+      url: 'https://www.youtube.com/',
+      alt: 'frog',
+    },
+    {
+      id: 'nike',
+      src: '/Images/sponsers/nikelogo.png',
+      url: 'https://www.innersloth.com/games/among-us/',
+      alt: 'ucdavis congrats',
+    },
+    {
+      id: 'abbott1',
+      src: '/Images/sponsers/abbottlogo.png',
+      url: 'https://www.innersloth.com/games/among-us/',
+      alt: 'frog',
+    },
+    {
+      id: 'nike2',
+      src: '/Images/sponsers/nikelogo.png',
+      url: 'https://www.youtube.com/',
+      alt: 'ucdavis congrats',
+    },
+    {
+      id: 'nike3',
+      src: '/Images/sponsers/nikelogo.png',
+      url: 'https://www.youtube.com/',
+      alt: 'ucdavis congrats',
+    },
+  ];
+
+  return (
+    <div className="relative bg-darkpurple">
+      <div className="bg-transparent md:bg-[#3F1959] py-[2vw] gap-[2vw] flex flex-col">
+        <SponserRow rowImages={row1_images} rowNum={1} />
+        <SponserRow rowImages={row2_images} rowNum={2} />
+        <SponserRow rowImages={row3_images} rowNum={3} />
+      </div>
+
+      <div className="hidden md:flex pointer-events-none absolute inset-y-0 left-0 w-[100vw] h-[95vw] translate-y-[-5vw] translate-x-[-1vw] z-10">
+        <Image
+          src="/Images/sponsers/leftcloud.png"
+          alt="Purple cloud wrapping around the left side of the sponsors"
+          fill
+          className="object-contain object-left"
+          priority
+        />
+      </div>
+
+      <div className="hidden md:flex pointer-events-none absolute inset-y-0 right-0 w-[100vw] h-[95vw] translate-y-[-20.9vw] z-10">
+        <Image
+          src="/Images/sponsers/rightcloud.png"
+          alt="Purple cloud wrapping around the right side of the sponsors"
+          fill
+          className="object-contain object-right"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/public/Images/sponsers/abbottlogo.png b/public/Images/sponsers/abbottlogo.png
diff --git a/public/Images/sponsers/leftcloud.png b/public/Images/sponsers/leftcloud.png
diff --git a/public/Images/sponsers/nikelogo.png b/public/Images/sponsers/nikelogo.png
diff --git a/public/Images/sponsers/rightcloud.png b/public/Images/sponsers/rightcloud.png
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,60 +1,79 @@
-import type { Config } from "tailwindcss";
-import plugin from "tailwindcss/plugin";
+import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
 
 export default {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
+      fontFamily: {
+        inter: ['var(--font-inter)', 'arial'],
+        montserrat: ['var(--font-montserrat)', 'arial'],
+        jakarta: ['var(--font-jakarta)', 'arial'],
+      },
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+        darkpurple: 'var(--background-dark-purple)',
       },
       keyframes: {
-        "float-bob": {
-          "0%, 100%": { transform: "translateY(0)" },
-          "50%": { transform: "translateY(-20px)" },
+        'float-bob': {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-20px)' },
+        },
+        'move-right': {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(33.333333333%)' },
+        },
+        'move-left': {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(-33.333333333%)' },
         },
       },
       animation: {
-        "float-bob": "float-bob 3s ease-in-out infinite",
+        'slide-row1': 'move-right 15s linear infinite',
+        'slide-row2': 'move-left 13s linear infinite',
+        'slide-row3': 'move-right 16s linear infinite',
+        'float-bob': 'float-bob 3s ease-in-out infinite',
+        'slide-right': 'slide-right 20s linear forwards',
+        'slide-left': 'slide-left 20s linear forwards',
       },
     },
   },
   plugins: [
     plugin(({ addUtilities }) => {
       addUtilities({
-        ".glass-pill": {
-          display: "inline-flex",
-          alignItems: "center",
-          gap: "2%",
-          height: "10%",
-          padding: "2% 3% 2.5%",
-          borderRadius: "99em",
-          backgroundColor: "rgba(255, 255, 255, 0.2)",
-          backdropFilter: "blur(10px)",
-          WebkitBackdropFilter: "blur(10px)",
+        '.glass-pill': {
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '2%',
+          height: '10%',
+          padding: '2% 3% 2.5%',
+          borderRadius: '99em',
+          backgroundColor: 'rgba(255, 255, 255, 0.2)',
+          backdropFilter: 'blur(10px)',
+          WebkitBackdropFilter: 'blur(10px)',
           boxShadow:
-            "inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.7px 2.8px 0px -2.1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -1.7px -1.7px 0px -2.1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -2.6px -7px 1px -6.2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 8%), transparent)",
+            'inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.7px 2.8px 0px -2.1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -1.7px -1.7px 0px -2.1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -2.6px -7px 1px -6.2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 8%), transparent)',
         },
-        ".glass-bubble": {
-          display: "inline-flex",
-          alignItems: "center",
-          gap: "2%",
-          height: "10%",
-          padding: "2% 3% 2.5%",
-          borderRadius: "99em",
-          "--bubble-x": "50%",
-          "--bubble-y": "50%",
-          "--bubble-c1": "rgba(255, 255, 255, 0.35)",
-          "--bubble-c2": "rgba(255, 255, 255, 0.12)",
+        '.glass-bubble': {
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '2%',
+          height: '10%',
+          padding: '2% 3% 2.5%',
+          borderRadius: '99em',
+          '--bubble-x': '50%',
+          '--bubble-y': '50%',
+          '--bubble-c1': 'rgba(255, 255, 255, 0.35)',
+          '--bubble-c2': 'rgba(255, 255, 255, 0.12)',
           background:
-            "radial-gradient(circle at var(--bubble-x) var(--bubble-y), var(--bubble-c1) 0%, var(--bubble-c2) 70%)",
-          backdropFilter: "blur(10px)",
-          WebkitBackdropFilter: "blur(10px)",
+            'radial-gradient(circle at var(--bubble-x) var(--bubble-y), var(--bubble-c1) 0%, var(--bubble-c2) 70%)',
+          backdropFilter: 'blur(10px)',
+          WebkitBackdropFilter: 'blur(10px)',
         },
       });
     }),