From fdceb5176b4dec7607ae09c10c22370f5f9b00f2 Mon Sep 17 00:00:00 2001
From: Daffa Abhipraya <daffaabhiprayaputra@gmail.com>
Date: Wed, 19 Aug 2026 12:28:54 +0700
Subject: [PATCH 1/2] feat: redesign sign-in page

---
 apps/web/app/signin/page.tsx              | 108 +++++++++++++++++++---
 apps/web/components/MarkaLogo.tsx         |   6 +-
 apps/web/components/signin/SignInForm.tsx |  12 +--
 3 files changed, 107 insertions(+), 19 deletions(-)

diff --git a/apps/web/app/signin/page.tsx b/apps/web/app/signin/page.tsx
index f2fe6cc8c..e5fb6bc3c 100644
--- a/apps/web/app/signin/page.tsx
+++ b/apps/web/app/signin/page.tsx
@@ -1,6 +1,8 @@
 import { redirect } from "next/dist/client/components/navigation";
+import Image from "next/image";
 import MarkaLogo from "@/components/MarkaLogo";
 import SignInForm from "@/components/signin/SignInForm";
+import { MARKA } from "@/lib/brand";
 import { getServerAuthSession } from "@/server/auth";
 
 export default async function SignInPage() {
@@ -10,17 +12,101 @@ export default async function SignInPage() {
   }
 
   return (
-    <div className="bg-linear-to-b from-sidebar/70 relative flex min-h-svh items-center justify-center overflow-hidden via-background to-background px-4 py-10 sm:px-6">
-      <div
-        aria-hidden
-        className="bg-radial from-primary/12 pointer-events-none absolute inset-x-0 top-0 h-80 to-transparent blur-3xl"
-      />
-      <div className="relative w-full max-w-md space-y-6">
-        <div className="flex items-center justify-center">
-          <MarkaLogo height={72} />
+    <main className="grid min-h-svh bg-background lg:grid-cols-[minmax(0,1.05fr)_minmax(28rem,0.95fr)]">
+      <section className="relative hidden overflow-hidden bg-primary text-primary-foreground lg:flex lg:flex-col lg:justify-between lg:p-12 xl:p-16">
+        <svg
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 h-full w-full opacity-[0.12]"
+          fill="none"
+          preserveAspectRatio="xMidYMid slice"
+          viewBox="0 0 800 900"
+        >
+          <path
+            d="M-40 130H840M-40 290H840M-40 450H840M-40 610H840M-40 770H840"
+            stroke="currentColor"
+          />
+          <path
+            d="M120 -40V940M280 -40V940M440 -40V940M600 -40V940M760 -40V940"
+            stroke="currentColor"
+          />
+          <circle
+            cx="600"
+            cy="210"
+            r="142"
+            stroke="currentColor"
+            strokeWidth="2"
+          />
+          <circle
+            cx="600"
+            cy="210"
+            r="88"
+            stroke="currentColor"
+            strokeWidth="2"
+          />
+          <circle
+            cx="600"
+            cy="210"
+            r="34"
+            stroke="currentColor"
+            strokeWidth="2"
+          />
+          <path
+            d="M458 210H742M600 68V352"
+            stroke="currentColor"
+            strokeWidth="2"
+          />
+        </svg>
+
+        <div className="relative flex items-center">
+          <Image
+            src={MARKA.wordmark.white}
+            alt={MARKA.name}
+            width={510}
+            height={135}
+            priority
+            style={{ height: 42, width: "auto" }}
+            className="dark:hidden"
+          />
+          <Image
+            src={MARKA.wordmark.navy}
+            alt=""
+            width={510}
+            height={135}
+            priority
+            style={{ height: 42, width: "auto" }}
+            className="hidden dark:block"
+          />
+        </div>
+
+        <div className="relative max-w-lg pb-4 xl:pb-8">
+          <p className="mb-5 text-sm font-medium text-primary-foreground/65">
+            Your personal library
+          </p>
+          <h1 className="max-w-md text-balance text-4xl font-semibold leading-[1.08] tracking-[-0.035em] xl:text-5xl">
+            Keep the things worth finding.
+          </h1>
+          <p className="mt-6 max-w-md text-base leading-7 text-primary-foreground/70">
+            Save links, notes, images, and pages in one private place, then get
+            back to them when you need them.
+          </p>
+        </div>
+
+        <p className="relative text-xs text-primary-foreground/45">
+          Self-hosted. Built for your collection.
+        </p>
+      </section>
+
+      <section className="flex min-h-svh flex-col items-center justify-center px-5 py-8 sm:px-8 lg:px-12">
+        <div className="w-full max-w-md space-y-8">
+          <div className="flex justify-center lg:hidden">
+            <MarkaLogo height={44} />
+          </div>
+          <SignInForm />
+          <p className="text-center text-xs text-muted-foreground">
+            Private by design, ready when you are.
+          </p>
         </div>
-        <SignInForm />
-      </div>
-    </div>
+      </section>
+    </main>
   );
 }
diff --git a/apps/web/components/MarkaLogo.tsx b/apps/web/components/MarkaLogo.tsx
index ad02a5952..766f8055d 100644
--- a/apps/web/components/MarkaLogo.tsx
+++ b/apps/web/components/MarkaLogo.tsx
@@ -3,12 +3,14 @@ import Image from "next/image";
 import { MARKA } from "@/lib/brand";
 
 export default function MarkaLogo({ height }: { height: number }) {
+  const width = Math.round((height * 510) / 135);
+
   return (
     <span className="flex items-center">
       <Image
         src={MARKA.wordmark.navy}
         alt={MARKA.name}
-        width={510}
+        width={width}
         height={height}
         style={{ height, width: "auto" }}
         className="dark:hidden"
@@ -17,7 +19,7 @@ export default function MarkaLogo({ height }: { height: number }) {
         src={MARKA.wordmark.white}
         alt=""
         aria-hidden="true"
-        width={510}
+        width={width}
         height={height}
         style={{ height, width: "auto" }}
         className="hidden dark:block"
diff --git a/apps/web/components/signin/SignInForm.tsx b/apps/web/components/signin/SignInForm.tsx
index 9f5080f4f..457a55348 100644
--- a/apps/web/components/signin/SignInForm.tsx
+++ b/apps/web/components/signin/SignInForm.tsx
@@ -32,16 +32,16 @@ export default async function SignInForm() {
       {providerValues && providerValues.length > 0 && (
         <OAuthAutoRedirect oauthProviderId={providerValues[0].id} />
       )}
-      <Card className="w-full rounded-2xl border-border/70 bg-card/95 shadow-xl backdrop-blur">
-        <CardHeader className="space-y-2 px-5 pb-3 pt-6 text-center sm:px-7 sm:pt-7">
-          <CardTitle className="text-2xl font-semibold tracking-tight">
+      <Card className="w-full rounded-xl border-border/80 bg-card shadow-sm">
+        <CardHeader className="space-y-2 px-5 pb-4 pt-6 sm:px-8 sm:pt-8">
+          <CardTitle className="text-2xl font-semibold tracking-[-0.025em]">
             Welcome back
           </CardTitle>
-          <CardDescription>
+          <CardDescription className="text-left leading-6">
             Sign in to continue to {MARKA.name}.
           </CardDescription>
         </CardHeader>
-        <CardContent className="space-y-5 px-5 pb-6 sm:px-7 sm:pb-7">
+        <CardContent className="space-y-5 px-5 pb-6 sm:px-8 sm:pb-8">
           {serverConfig.demoMode && (
             <Alert>
               <Info className="h-4 w-4" />
@@ -61,7 +61,7 @@ export default async function SignInForm() {
             <>
               <div className="flex w-full items-center gap-3">
                 <div className="flex-1 border-t border-border" />
-                <span className="bg-card px-1 text-xs font-medium text-muted-foreground">
+                <span className="bg-card px-2 text-xs font-medium text-muted-foreground">
                   Or continue with
                 </span>
                 <div className="flex-1 border-t border-border" />

From 6874a0bf088033186a227e8e589199cdad272d98 Mon Sep 17 00:00:00 2001
From: Daffa Abhipraya <daffaabhiprayaputra@gmail.com>
Date: Wed, 19 Aug 2026 12:54:09 +0700
Subject: [PATCH 2/2] fix: translate sign-in copy

---
 apps/web/app/signin/page.tsx                  | 14 ++++++++------
 apps/web/lib/i18n/locales/en/translation.json |  7 +++++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/signin/page.tsx b/apps/web/app/signin/page.tsx
index e5fb6bc3c..9c42e6ac0 100644
--- a/apps/web/app/signin/page.tsx
+++ b/apps/web/app/signin/page.tsx
@@ -3,10 +3,13 @@ import Image from "next/image";
 import MarkaLogo from "@/components/MarkaLogo";
 import SignInForm from "@/components/signin/SignInForm";
 import { MARKA } from "@/lib/brand";
+import { useTranslation } from "@/lib/i18n/server";
 import { getServerAuthSession } from "@/server/auth";
 
 export default async function SignInPage() {
   const session = await getServerAuthSession();
+  // oxlint-disable-next-line rules-of-hooks
+  const { t } = await useTranslation();
   if (session) {
     redirect("/");
   }
@@ -80,19 +83,18 @@ export default async function SignInPage() {
 
         <div className="relative max-w-lg pb-4 xl:pb-8">
           <p className="mb-5 text-sm font-medium text-primary-foreground/65">
-            Your personal library
+            {t("signin.eyebrow")}
           </p>
           <h1 className="max-w-md text-balance text-4xl font-semibold leading-[1.08] tracking-[-0.035em] xl:text-5xl">
-            Keep the things worth finding.
+            {t("signin.title")}
           </h1>
           <p className="mt-6 max-w-md text-base leading-7 text-primary-foreground/70">
-            Save links, notes, images, and pages in one private place, then get
-            back to them when you need them.
+            {t("signin.description")}
           </p>
         </div>
 
         <p className="relative text-xs text-primary-foreground/45">
-          Self-hosted. Built for your collection.
+          {t("signin.footer")}
         </p>
       </section>
 
@@ -103,7 +105,7 @@ export default async function SignInPage() {
           </div>
           <SignInForm />
           <p className="text-center text-xs text-muted-foreground">
-            Private by design, ready when you are.
+            {t("signin.privacy_note")}
           </p>
         </div>
       </section>
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 15f836569..e3efb0ae4 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -45,6 +45,13 @@
     "bookmarks": "Bookmarks",
     "storage": "Storage"
   },
+  "signin": {
+    "eyebrow": "Your personal library",
+    "title": "Keep the things worth finding.",
+    "description": "Save links, notes, images, and pages in one private place, then get back to them when you need them.",
+    "footer": "Self-hosted. Built for your collection.",
+    "privacy_note": "Private by design, ready when you are."
+  },
   "layouts": {
     "masonry": "Masonry",
     "grid": "Grid",