ui: dark + monochrome + clean centered IAM signin
Login was a split-pane marketing layout with a salmon-pink sign-in
button, light-gray panel, testimonial photo + quote, and 'Trusted by
teams at' sponsor wall. None of that is wanted on a Hanzo property.
Now:
* Solid black full-screen background, no testimonial panel, no
sponsor logos.
* Centered logo + 'Welcome to Hanzo Dataroom' headline + tagline.
* Monochrome white-on-black 'Sign in with Hanzo' button (bg-white,
text-black). No red.
* Terms/Privacy links in zinc-300 underline, body in zinc-400/500.
* <html class='dark'> on the root layout — dark is the default theme.
* Favicon swapped to a Hanzo-H mark across all favicon sizes.
The IAM redirect itself is unchanged — signIn('hanzo-iam') still
hands off to NEXT_PUBLIC_IAM_PROVIDER_NAME via NextAuth, so 'Sign in
with Hanzo' is now the only UI surface and IAM owns everything past
the redirect.
This commit is contained in:
Hanzo AI
@@ -6,7 +6,6 @@ import { useParams } from "next/navigation";
|
||||
import { signIn } from "next-auth/react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { LogoCloud } from "@/components/shared/logo-cloud";
|
||||
|
||||
const APP_NAME =
|
||||
process.env.NEXT_PUBLIC_APP_NAME || "Hanzo Dataroom";
|
||||
@@ -19,118 +18,57 @@ export default function Login() {
|
||||
const { next } = useParams as { next?: string };
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full flex-wrap">
|
||||
{/* Left part */}
|
||||
<div className="flex w-full justify-center bg-gray-50 md:w-1/2 lg:w-1/2">
|
||||
<div
|
||||
className="absolute inset-x-0 top-10 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<div className="z-10 mx-5 mt-[calc(1vh)] h-fit w-full max-w-md overflow-hidden rounded-lg sm:mx-0 sm:mt-[calc(2vh)] md:mt-[calc(3vh)]">
|
||||
<div className="items-left flex flex-col space-y-3 px-4 py-6 pt-8 sm:px-12">
|
||||
<Link href="/" target="_blank">
|
||||
<img
|
||||
src="/_static/hanzo-dataroom-logo.svg"
|
||||
alt={`${APP_NAME} Logo`}
|
||||
className="md:mb-48s -mt-8 mb-36 h-7 w-auto self-start sm:mb-32"
|
||||
/>
|
||||
</Link>
|
||||
<Link href="/">
|
||||
<span className="text-balance text-3xl font-semibold text-gray-900">
|
||||
Welcome to {APP_NAME}
|
||||
</span>
|
||||
</Link>
|
||||
<h3 className="text-balance text-sm text-gray-800">
|
||||
Share documents. Not attachments.
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 px-4 pt-8 sm:px-12">
|
||||
<Button
|
||||
onClick={() => {
|
||||
signIn("hanzo-iam", {
|
||||
...(next && next.length > 0 ? { callbackUrl: next } : {}),
|
||||
});
|
||||
}}
|
||||
className="flex w-full items-center justify-center space-x-2 border border-red-500 bg-red-500 font-normal text-white hover:bg-red-600"
|
||||
>
|
||||
<span>
|
||||
Sign in with{" "}
|
||||
<span className="font-bold">{IAM_PROVIDER_NAME}</span>
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-10 w-full max-w-md px-4 text-xs text-muted-foreground sm:px-12">
|
||||
By clicking continue, you acknowledge that you have read and agree
|
||||
to {APP_NAME}'s{" "}
|
||||
<a
|
||||
href={`${MARKETING_URL}/terms`}
|
||||
target="_blank"
|
||||
className="underline"
|
||||
>
|
||||
Terms of Service
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a
|
||||
href={`${MARKETING_URL}/privacy`}
|
||||
target="_blank"
|
||||
className="underline"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative hidden w-full justify-center overflow-hidden bg-black md:flex md:w-1/2 lg:w-1/2">
|
||||
<div className="relative m-0 flex h-full min-h-[700px] w-full p-0">
|
||||
<div
|
||||
className="relative flex h-full w-full flex-col justify-between"
|
||||
id="features"
|
||||
<main className="flex min-h-screen w-full items-center justify-center bg-black px-6 text-white">
|
||||
<div className="w-full max-w-sm">
|
||||
<Link href="/" className="mb-12 block">
|
||||
<img
|
||||
src="/_static/hanzo-dataroom-logo-light.svg"
|
||||
alt={`${APP_NAME} Logo`}
|
||||
className="h-7 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<h1 className="text-balance text-3xl font-semibold text-white">
|
||||
Welcome to {APP_NAME}
|
||||
</h1>
|
||||
<p className="mt-2 text-balance text-sm text-zinc-400">
|
||||
Share documents. Not attachments.
|
||||
</p>
|
||||
|
||||
<Button
|
||||
onClick={() =>
|
||||
signIn("hanzo-iam", {
|
||||
...(next && next.length > 0 ? { callbackUrl: next } : {}),
|
||||
})
|
||||
}
|
||||
className="mt-8 flex w-full items-center justify-center bg-white font-normal text-black hover:bg-zinc-200"
|
||||
>
|
||||
<span>
|
||||
Sign in with <span className="font-bold">{IAM_PROVIDER_NAME}</span>
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
<p className="mt-8 text-xs text-zinc-500">
|
||||
By clicking continue, you acknowledge that you have read and agree to{" "}
|
||||
{APP_NAME}'s{" "}
|
||||
<a
|
||||
href={`${MARKETING_URL}/terms`}
|
||||
target="_blank"
|
||||
className="text-zinc-300 underline hover:text-white"
|
||||
>
|
||||
{/* Testimonial top 2/3 */}
|
||||
<div
|
||||
className="flex w-full flex-col items-center justify-center"
|
||||
style={{ height: "66.6666%" }}
|
||||
>
|
||||
{/* Image container */}
|
||||
<div className="mb-4 h-64 w-80">
|
||||
<img
|
||||
className="h-full w-full rounded-2xl object-cover shadow-2xl"
|
||||
src="/_static/testimonials/backtrace.jpeg"
|
||||
alt="Backtrace Capital"
|
||||
/>
|
||||
</div>
|
||||
{/* Text content */}
|
||||
<div className="max-w-xl text-center">
|
||||
<blockquote className="text-balance font-normal leading-8 text-white sm:text-xl sm:leading-9">
|
||||
<p>
|
||||
"We raised our €30M Fund with {APP_NAME}. Love
|
||||
the customization, security and ease of use."
|
||||
</p>
|
||||
</blockquote>
|
||||
<figcaption className="mt-4">
|
||||
<div className="text-balance font-normal text-white">
|
||||
Michael Münnix
|
||||
</div>
|
||||
<div className="text-balance font-light text-gray-400">
|
||||
Partner, Backtrace Capital
|
||||
</div>
|
||||
</figcaption>
|
||||
</div>
|
||||
</div>
|
||||
{/* White block with logos bottom 1/3, full width/height */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 flex w-full flex-col items-center justify-center bg-white"
|
||||
style={{ height: "33.3333%" }}
|
||||
>
|
||||
<div className="mb-4 max-w-xl text-balance text-center font-semibold text-gray-900">
|
||||
Trusted by teams at
|
||||
</div>
|
||||
<LogoCloud />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Terms of Service
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a
|
||||
href={`${MARKETING_URL}/privacy`}
|
||||
target="_blank"
|
||||
className="text-zinc-300 underline hover:text-white"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
+1
-1
@@ -47,7 +47,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="en" className="dark">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 279 KiB |
Reference in New Issue
Block a user