feat: add Pure Buttons to the Fall 2026 sponsor board (#340)

app/(pre-dashboard)/(entry)/forgot/page.tsx

@@ -1,86 +1,109 @@
 'use client';
 
 import { Button } from '@/app/ui/button';
-import Image from 'next/image';
-
 import { Forgot } from '../../../lib/actions';
-
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-
 import { useState } from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 
 export default function SignupPage() {
   const SignUpSchema = z.object({
-    email: z.string().email(),
+    email: z.string().email('Please enter a valid email address'),
   });
 
   type SignUp = z.infer<typeof SignUpSchema>;
 
   const {
     register,
     handleSubmit,
-    reset,
     formState: { errors },
   } = useForm<SignUp>({ resolver: zodResolver(SignUpSchema) });
 
   const [message, setMessage] = useState('');
   const [buttonDisabled, setButtonDisabled] = useState(false);
+  const router = useRouter();
 
   const onSubmit = async (data: SignUp) => {
     setButtonDisabled(true);
+    setMessage('');
+
     const resp = await Forgot(data.email);
     setMessage(resp);
     setTimeout(() => {
-      // wait 1 minutes between requests
       setButtonDisabled(false);
     }, 60000);
   };
 
   return (
-    <main className="flex h-screen w-screen items-center justify-center">
-      <form
-        onSubmit={handleSubmit(onSubmit)}
-        className="rounded-xl bg-gradient-to-b from-[var(--bg-color)] to-[var(--bg-color2)] p-20"
-      >
-        <div className="w-full">
-          {
-            <p className="mt-2 text-xs italic text-[var(--mainText-color)]">
+    <main className="relative flex min-h-screen w-full items-center justify-center overflow-hidden px-4 py-8 sm:px-6 lg:px-8">
+      <header className="absolute inset-x-0 top-0 z-20 flex justify-center pt-4 sm:pt-6">
+        <button
+          type="button"
+          onClick={() => router.push('/')}
+          className="brand-float pointer-events-auto flex items-center justify-center transition-transform duration-200 hover:scale-105"
+          aria-label="Go to HackRU home"
+        >
+          <Image
+            src="/landing/F2026/hackru-logo-f26.png"
+            alt="HackRU logo"
+            width={220}
+            height={220}
+            className="h-20 w-20 object-contain drop-shadow-[0_8px_22px_rgba(0,0,0,0.35)] sm:h-24 sm:w-24 lg:h-28 lg:w-28"
+          />
+        </button>
+      </header>
+
+      <div className="mt-20 w-full max-w-xl rounded-[28px] border border-slate-700/80 bg-slate-950/80 p-5 shadow-[0_24px_80px_rgba(2,6,23,0.8)] backdrop-blur-xl sm:mt-24 sm:p-8 lg:p-10">
+        <div className="mb-6 text-center sm:text-left">
+          <p className="mb-2 text-xs font-semibold uppercase tracking-[0.28em] text-sky-300">
+            Reset password
+          </p>
+          <h1 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+            Forgot your password?
+          </h1>
+        </div>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          {message && (
+            <p className="rounded-xl border border-sky-500/30 bg-sky-500/10 px-3 py-2 text-sm text-sky-100">
               {message}
             </p>
-          }
+          )}
+
           <div>
             <label
-              className="mb-3 mt-5 block text-xs font-medium text-[var(--mainText-color)] "
+              className="mb-2 block text-sm font-medium text-slate-200"
               htmlFor="email"
             >
               Email
             </label>
-            <div className="relative">
-              <input
-                {...register('email')}
-                className="peer mb-4 block w-96 rounded-md border border-[var(--border-color)]  py-[9px] pl-4 text-sm outline-2 placeholder:text-[var(--placeholder-color)] "
-                id="email"
-                type="email"
-                name="email"
-                placeholder="Enter your email address"
-                required
-              />
-              {errors.email && (
-                <p className="mt-2 text-xs italic  text-[var(--error-color)]">
-                  {errors.email?.message}
-                </p>
-              )}
-            </div>
+            <input
+              {...register('email')}
+              aria-invalid={!!errors.email}
+              autoComplete="email"
+              className="w-full rounded-xl border border-slate-700 bg-slate-900/80 px-4 py-3 text-sm text-white placeholder:text-slate-400 focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-500/30"
+              id="email"
+              type="email"
+              name="email"
+              placeholder="Enter your email address"
+            />
+            {errors.email && (
+              <p className="mt-2 text-xs italic text-rose-200">
+                {errors.email?.message}
+              </p>
+            )}
           </div>
-        </div>
-        <Button type="submit" disabled={buttonDisabled}>
-          {buttonDisabled
-            ? 'Please wait 1 minute between requests!'
-            : 'Send reset link'}
-        </Button>
-      </form>
+
+          <Button type="submit" className="w-full" disabled={buttonDisabled}>
+            {buttonDisabled
+              ? 'Please wait 1 minute between requests'
+              : 'Send reset link'}
+          </Button>
+        </form>
+      </div>
     </main>
   );
 }

app/(pre-dashboard)/(entry)/layout.tsx

@@ -3,27 +3,27 @@ import { inter } from '@/app/ui/fonts';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <>
-      <main
-        className={`h-fit w-fit bg-off_white-100 ${inter.className}`}
-        style={
-          {
-            '--bg-color': '#FFFFFF',
-            '--bg-color2': '#e5e7eb',
-            '--mainText-color': '#172335',
-            '--border-color': '#453148',
-            '--placeholder-color': '#6b7280',
-            '--error-color': '#ef4444',
-            '--success-color': '#ef4444',
-            '--hover-color': '#141719',
-            backgroundImage: 'url("/backgrounds/hero.jpg")',
-          } as React.CSSProperties
-        }
-      >
+    <main
+      className={`relative min-h-screen w-full overflow-hidden ${inter.className}`}
+      style={
+        {
+          '--bg-color': '#081420',
+          '--bg-color2': '#102233',
+          '--mainText-color': '#e2e8f0',
+          '--border-color': 'rgba(148, 163, 184, 0.35)',
+          '--placeholder-color': '#94a3b8',
+          '--error-color': '#fda4af',
+          '--success-color': '#86efac',
+          '--hover-color': '#7dd3fc',
+          background:
+            'linear-gradient(135deg, #020817 0%, #0b1120 35%, #111827 100%)',
+        } as React.CSSProperties
+      }
+    >
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(56,189,248,0.12),transparent_32%)]" />
+      <div className="relative z-10 flex min-h-screen w-full items-center justify-center">
         {children}
-
-        <div id="entry-radial" className="absolute top-0 -z-10 h-full w-full" />
-      </main>
-    </>
+      </div>
+    </main>
   );
 }