From 3bfc1c5c4bebc2db4b369a7ce0e3a48428f13c6d Mon Sep 17 00:00:00 2001
From: robbond <rob@rdbsolutions.co.uk>
Date: Wed, 9 Sep 2026 14:04:08 +0100
Subject: [PATCH] feat(confidence-engine): add first-time product framing

---
 app/login/page.jsx        | 31 ++++++++++++++++++++++++++++++-
 components/login-form.jsx | 15 +++++++++++----
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/app/login/page.jsx b/app/login/page.jsx
index acec4ef..2a96247 100644
--- a/app/login/page.jsx
+++ b/app/login/page.jsx
@@ -1,5 +1,34 @@
 import LoginForm from "@/components/login-form";
 
 export default function LoginPage() {
-  return <LoginForm />;
+  return (
+    <main className="mx-auto flex min-h-[calc(100vh-57px)] max-w-[1200px] items-start gap-12 px-6 py-16 lg:flex-row">
+      <section className="flex-1 space-y-8 pr-0 lg:pr-8">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-teal-700">Confidence Engine</h1>
+        </div>
+
+        <div className="space-y-4 text-base leading-relaxed text-gray-700">
+          <h2 className="text-xl font-semibold tracking-tight text-gray-900">Get clearer about what{'\''}s really going on.</h2>
+          <p>Confidence Engine helps you work through situations that feel uncertain, complicated or difficult to act on.</p>
+          <p>Describe the situation in your own words. Confidence Engine will help reconstruct what is known, what may be happening, and what is still unclear — then let you decide what to explore further.</p>
+          <p className="text-gray-600">It doesn{'\''}t try to make the decision for you. The aim is to help you reach a clearer understanding so you can decide what to do with more confidence.</p>
+        </div>
+
+        <section className="space-y-4">
+          <h2 className="text-sm font-semibold uppercase tracking-[.18em] text-teal-700/70">How it works</h2>
+          <ol className="space-y-3 text-base leading-relaxed text-gray-700">
+            <li><strong>1. Describe your situation</strong><br/><span className="text-gray-600">As much or as little as you currently know.</span></li>
+            <li><strong>2. Explore what{'\''}s unclear</strong><br/><span className="text-gray-600">Answer the questions that feel useful; skip the ones that don{'\''}t.</span></li>
+            <li><strong>3. Build your Current Understanding</strong><br/><span className="text-gray-600">Your picture of the situation develops as you learn more.</span></li>
+            <li><strong>4. Stop when you have enough</strong><br/><span className="text-gray-600">You don{'\''}t have to answer everything. Your investigation is saved so you can return later.</span></li>
+          </ol>
+        </section>
+
+        <p className="text-sm italic text-gray-500">Try it with something real.<br/>A decision you{'\''}re unsure about. A problem that doesn{'\''}t quite make sense. A situation where you feel you may be missing something.</p>
+      </section>
+
+      <LoginForm />
+    </main>
+  );
 }
\ No newline at end of file
diff --git a/components/login-form.jsx b/components/login-form.jsx
index ddc94cf..5104dbd 100644
--- a/components/login-form.jsx
+++ b/components/login-form.jsx
@@ -25,8 +25,8 @@ export default function LoginForm() {
   }
 
   return (
-    <main className="mx-auto flex min-h-[calc(100vh-57px)] max-w-[640px] items-center px-6 py-16">
-      <section className="w-full rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 py-9 shadow-sm">
+    <section className="w-full shrink-0 space-y-6 lg:w-[420px] lg:pt-6">
+      <div className="rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 py-9 shadow-sm">
         <p className="mb-3 text-[11px] font-bold uppercase tracking-[.18em] text-teal-700/70">Welcome</p>
         <h1 className="text-3xl font-bold tracking-tight">Confidence Engine</h1>
         <p className="mt-3 text-sm leading-relaxed text-gray-600">Enter your email and we will send you a secure link to continue.</p>
@@ -39,7 +39,14 @@ export default function LoginForm() {
         </form>
         {status === "sent" && <p className="mt-5 text-sm text-green-700" role="status">Check your email for your magic link.</p>}
         {error && <p className="mt-5 text-sm text-red-700" role="alert">{error}</p>}
-      </section>
-    </main>
+      </div>
+
+      <div className="pt-3 space-y-3">
+        <p className="text-sm font-medium text-gray-700">Sign in to continue</p>
+        <p className="text-sm leading-relaxed text-gray-600">Enter your email and we{'\''}ll send you a secure sign-in link.</p>
+      </div>
+
+      <p className="text-xs text-gray-500">Your investigations are private to your account and saved so you can return to them later.</p>
+    </section>
   );
 }
\ No newline at end of file