Layout Changes

Small tweaks to the layout

src/features/auth/components/auth-header.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { ArrowLeft, Scissors } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+/**
+ * The shared (auth) layout's top-left slot — the business logo by default,
+ * or a back button to the welcome screen on Sign In and Register, the two
+ * auth pages reached directly from Welcome's own buttons (so "back" has an
+ * obvious, single destination there). forgot-password/verify are reached
+ * from elsewhere in the auth flow instead, where a logo reads better than
+ * an ambiguous "back". A small Client Component rather than making the
+ * whole layout client-side, since `usePathname()` is the only piece that
+ * needs the browser.
+ */
+export function AuthHeader({ logoUrl }: { logoUrl: string | null }) {
+  const pathname = usePathname();
+
+  if (pathname === "/register" || pathname === "/sign-in") {
+    return (
+      <Link
+        href="/"
+        aria-label="Back to welcome"
+        className="mb-8 flex h-12 w-12 items-center justify-center rounded-full border border-line text-ink hover:bg-white"
+      >
+        <ArrowLeft className="h-6 w-6" aria-hidden="true" />
+      </Link>
+    );
+  }
+
+  return (
+    <div className="mx-auto mb-8 flex items-center justify-center text-3xl text-white">
+      {logoUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element -- external, business-supplied URL.
+        <img src={logoUrl} alt="" className="h-40 w-40 object-cover" />
+      ) : (
+        <Scissors className="h-7 w-7" aria-hidden="true" />
+      )}
+    </div>
+  );
+}