105 lines
4.1 KiB
React
105 lines
4.1 KiB
React
import LoginForm from "@/components/login-form";
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<main className="mx-auto 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>
|
|
|
|
<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>
|
|
|
|
<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 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>
|
|
</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>
|
|
);
|
|
}
|