From 7d80d5a938397ed1d28e1c22bc5eb316867c218b Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Thu, 14 May 2026 14:18:02 -0700
Subject: [PATCH] design(auth): apply new marketing site styling to sign in
 page

---
 vibn-frontend/app/auth/page.tsx               |  23 ++-
 .../app/components/NextAuthComponent.tsx      | 151 ++++++++++++++----
 2 files changed, 141 insertions(+), 33 deletions(-)

diff --git a/vibn-frontend/app/auth/page.tsx b/vibn-frontend/app/auth/page.tsx
index b0c9e84..82f1377 100644
--- a/vibn-frontend/app/auth/page.tsx
+++ b/vibn-frontend/app/auth/page.tsx
@@ -5,8 +5,15 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, Suspense } from "react";
 import NextAuthComponent from "@/app/components/NextAuthComponent";
 
+import "../../styles/new-site.css";
+
 function deriveWorkspace(email: string): string {
-  return email.split("@")[0].toLowerCase().replace(/[^a-z0-9]+/g, "-") + "-account";
+  return (
+    email
+      .split("@")[0]
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-") + "-account"
+  );
 }
 
 function AuthPageInner() {
@@ -32,7 +39,19 @@ function AuthPageInner() {
     );
   }
 
-  return <NextAuthComponent />;
+  return (
+    <div
+      className="new-site-wrapper"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "100vh",
+      }}
+    >
+      <NextAuthComponent />
+    </div>
+  );
 }
 
 export default function AuthPage() {
diff --git a/vibn-frontend/app/components/NextAuthComponent.tsx b/vibn-frontend/app/components/NextAuthComponent.tsx
index e230c9f..3da4ee8 100644
--- a/vibn-frontend/app/components/NextAuthComponent.tsx
+++ b/vibn-frontend/app/components/NextAuthComponent.tsx
@@ -146,36 +146,103 @@ function NextAuthForm() {
       </div>
 
       {/* Card */}
-      <div
-        className="card"
-        style={{
-          padding: "40px 32px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "24px",
-        }}
-      >
-        <div style={{ textAlign: "center" }}>
-          <h1
+      <div className="auth-card card">
+        <style>{`
+          .auth-card {
+            position: relative;
+            z-index: 2;
+            width: 100%; max-width: 440px;
+            padding: 36px clamp(24px, 4vw, 40px) 32px;
+            background: linear-gradient(180deg, oklch(0.20 0.009 60 / 0.85), oklch(0.17 0.008 60 / 0.85));
+            border: 1px solid var(--hairline);
+            border-radius: 22px;
+            backdrop-filter: blur(20px);
+            box-shadow:
+              0 30px 80px -20px oklch(0 0 0 / 0.7),
+              0 0 80px -30px var(--accent-glow);
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .auth-card::before {
+            content: "";
+            position: absolute; left: 0; right: 0; top: 0; height: 1px;
+            background: linear-gradient(90deg, transparent, var(--accent), transparent);
+            opacity: .6;
+          }
+          .auth-eye {
+            display: inline-flex; align-items: center; gap: 8px;
+            font-family: var(--font-mono);
+            font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
+            color: var(--fg-mute);
+          }
+          .auth-eye::before {
+            content: ""; width: 5px; height: 5px; border-radius: 50%;
+            background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
+          }
+          .auth-title {
+            margin-top: 14px;
+            font-size: clamp(26px, 3.4vw, 34px);
+            font-weight: 500;
+            letter-spacing: -0.022em;
+            line-height: 1.1;
+            text-wrap: balance;
+          }
+          .auth-title em {
+            font-style: normal;
+            color: var(--accent);
+            text-shadow: 0 0 30px var(--accent-glow);
+          }
+          .auth-sub {
+            margin-top: 10px;
+            color: var(--fg-mute);
+            font-size: 14.5px;
+            line-height: 1.5;
+            text-wrap: balance;
+          }
+        `}</style>
+        {/* Glows */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            overflow: "hidden",
+            pointerEvents: "none",
+            borderRadius: "inherit",
+          }}
+        >
+          <div
             style={{
-              fontSize: "24px",
-              fontWeight: 600,
-              letterSpacing: "-0.02em",
-              color: "var(--fg)",
-              marginBottom: "8px",
+              position: "absolute",
+              top: "-20%",
+              left: "-10%",
+              width: "50%",
+              height: "50%",
+              background: "var(--accent)",
+              filter: "blur(80px)",
+              opacity: 0.15,
             }}
-          >
-            {title}
+          />
+          <div
+            style={{
+              position: "absolute",
+              bottom: "-20%",
+              right: "-10%",
+              width: "50%",
+              height: "50%",
+              background: "oklch(0.65 0.20 18)",
+              filter: "blur(80px)",
+              opacity: 0.15,
+            }}
+          />
+        </div>
+
+        <div style={{ position: "relative", zIndex: 2 }}>
+          <div className="auth-eye">Welcome back</div>
+          <h1 className="auth-title">
+            Sign in and <em>keep building</em>.
           </h1>
-          <p
-            style={{
-              fontSize: "15px",
-              color: "var(--fg-dim)",
-              lineHeight: 1.5,
-            }}
-          >
-            {subtitle}
-          </p>
+          <p className="auth-sub">{subtitle}</p>
         </div>
 
         {errorHint && (
@@ -197,13 +264,35 @@ function NextAuthForm() {
 
         <button
           type="button"
-          className="btn btn-ghost"
+          className="auth-btn-ghost"
           style={{
-            width: "100%",
+            display: "inline-flex",
+            alignItems: "center",
             justifyContent: "center",
-            height: "48px",
+            gap: "10px",
+            height: "50px",
+            padding: "0 22px",
+            borderRadius: "999px",
+            fontWeight: 500,
             fontSize: "15px",
-            gap: "12px",
+            transition:
+              "transform .12s, box-shadow .2s, background .2s, color .15s",
+            whiteSpace: "nowrap",
+            width: "100%",
+            background: "oklch(0.20 0.009 60 / 0.6)",
+            border: "1px solid var(--hairline)",
+            color: "var(--fg-dim)",
+            cursor: "pointer",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = "var(--fg)";
+            e.currentTarget.style.borderColor = "var(--hairline-2)";
+            e.currentTarget.style.background = "oklch(0.22 0.010 60 / 0.8)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = "var(--fg-dim)";
+            e.currentTarget.style.borderColor = "var(--hairline)";
+            e.currentTarget.style.background = "oklch(0.20 0.009 60 / 0.6)";
           }}
           onClick={handleGoogleSignIn}
           disabled={isLoading}