Header of signup page fixed

Author: AdityaGoyal1999

frontend/app/signup/page.tsx

@@ -182,31 +182,24 @@ function SignUpPageFallback() {
 export default function SignUpPage() {
   return (
     <div className="flex min-h-screen flex-col bg-background text-foreground">
-      <Header
-        trailing={
-          <Link
-            href="/"
-            className="text-sm font-semibold text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Back to home
-          </Link>
-        }
-      />
-      <main className="flex flex-1 flex-col items-center justify-center px-6 pb-12 pt-6 sm:px-10 lg:px-12">
-        <div className="w-full max-w-[400px] space-y-8">
-          <Suspense fallback={<SignUpPageFallback />}>
-            <AuthForm />
-          </Suspense>
-
-          {/* Footer */}
-          {/* <footer className="flex justify-center gap-4 text-center text-sm text-muted-foreground">
-            <Link href="#" className="hover:text-foreground">
-              Terms
-            </Link>
-            <Link href="#" className="hover:text-foreground">
-              Privacy Policy
+      {/* Same shell as landing (`app/page.tsx`): padded `main` so the header gets `py-8` top space */}
+      <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-6 py-8 sm:px-10 lg:px-12">
+        <Header
+          trailing={
+            <Link
+              href="/"
+              className="text-sm font-semibold text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Back to home
             </Link>
-          </footer> */}
+          }
+        />
+        <div className="flex min-h-0 flex-1 flex-col items-center justify-center pb-12 pt-4">
+          <div className="w-full max-w-[400px] space-y-8">
+            <Suspense fallback={<SignUpPageFallback />}>
+              <AuthForm />
+            </Suspense>
+          </div>
         </div>
       </main>
     </div>

frontend/components/Header.tsx

@@ -6,22 +6,21 @@ type HeaderProps = {
   trailing?: ReactNode;
 };
 
+/** Same row layout as `HomeHeader`; wrap in a `main` with `px-6 py-8 sm:px-10 lg:px-12` like the landing page. */
 export function Header({ trailing }: HeaderProps) {
   return (
-    <header className="w-full border-b border-border pb-6">
-      <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 sm:px-10 lg:px-12">
-        <Link href="/" className="text-2xl font-semibold tracking-tight text-foreground">
-          What to read AI
+    <header className="flex w-full items-center justify-between border-b border-border pb-6">
+      <Link href="/" className="text-2xl font-semibold tracking-tight text-foreground">
+        What to read AI
+      </Link>
+      {trailing ?? (
+        <Link
+          href="/signup"
+          className="rounded-full border border-foreground px-5 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-foreground hover:text-background"
+        >
+          Sign Up
         </Link>
-        {trailing ?? (
-          <Link
-            href="/signup"
-            className="rounded-full border border-foreground px-5 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-foreground hover:text-background"
-          >
-            Sign Up
-          </Link>
-        )}
-      </div>
+      )}
     </header>
   );
 }