robbond/confidence-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(confidence-engine): refine landing page layout

Browse Source
This commit is contained in:
robbond
2026-09-09 16:33:06 +01:00
parent b93aad9667
commit 6974b710de
1 changed files with 77 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/login/page.jsx
+77 -17
View File
@@ -4,41 +4,101 @@ export default function LoginPage() {
return (
<main className="mx-auto min-h-[calc(100vh-57px)] max-w-[1200px] px-6 py-16">
<div className="mx-auto flex flex-col gap-y-8 md:grid md:grid-cols-[minmax(0,1fr)_420px] md:gap-x-8 md:items-start">
{/* Left column wrapper — contents on mobile for flex ordering, block on desktop as one grid cell */}
<div className="contents md:block">
<section>
<h1 className="text-3xl font-bold tracking-tight text-teal-700">Confidence Engine</h1>
<h1 className="text-3xl font-bold tracking-tight text-teal-700">
Confidence Engine
</h1>
<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>
<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>
<section className="space-y-4 mt-8 md:mt-0">
<h2 className="text-sm font-semibold uppercase tracking-[.18em] text-teal-700/70">How it works</h2>
<section className="space-y-4 mt-8 md:mt-8">
<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>
<li className="grid grid-cols-[1.5rem_1fr]">
<span className="font-bold">1.</span>
<div>
<strong>Describe your situation</strong>
<br />
<span className="text-gray-600">
As much or as little as you currently know.
</span>
</div>
</li>
<li className="grid grid-cols-[1.5rem_1fr]">
<span className="font-bold">2.</span>
<div>
<strong>Explore what{"'"}s unclear</strong>
<br />
<span className="text-gray-600">
Answer the questions that feel useful; skip the ones that
don{"'"}t.
</span>
</div>
</li>
<li className="grid grid-cols-[1.5rem_1fr]">
<span className="font-bold">3.</span>
<div>
<strong>Build your Current Understanding</strong>
<br />
<span className="text-gray-600">
Your picture of the situation develops as you learn more.
</span>
</div>
</li>
<li className="grid grid-cols-[1.5rem_1fr]">
<span className="font-bold">4.</span>
<div>
<strong>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>
</div>
</li>
</ol>
<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>
<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>
</div>
{/* Right column — login card, explicitly positioned to top-right on desktop */}
<section className="md:col-start-2 md:row-start-1">
<LoginForm />
</section>
</div>
</main>
);
}
}