);
}
/* ================================================================
Expired-trial panel — a successful sign-in with nothing to see.
Replaces the form so the account holder is routed to the team
rather than dropped at a dead end.
================================================================ */
function ExpiredPanel() {
return (
Your free trial has ended
Talk to our team about full access to Capital Economics research, data and forecasts.
}>
Talk to our team about full access
);
}
/* ================================================================
Sign-in card — the reason the page exists. `state` drives the
six designed states: default | error | failed | reset | expired
| loading. When live (autofocus on), it validates on blur, lets
Enter submit from either field, and enters the loading state on
submit.
================================================================ */
function SignInCard({ state = "default", autofocus = false, elevated = false }) {
const [email, setEmail] = React.useState(state === "error" ? "trader@" : "");
const [pw, setPw] = React.useState("");
const [show, setShow] = React.useState(false);
const [emailErr, setEmailErr] = React.useState(state === "error" ? "Enter a valid business email address." : "");
const [failed, setFailed] = React.useState(state === "failed");
const [loading, setLoading] = React.useState(state === "loading");
const [trouble, setTrouble] = React.useState(false);
const [touched, setTouched] = React.useState(false);
const validateEmail = () => {
if (!email.trim()) { setEmailErr("Enter your business email address."); return false; }
if (!EMAIL_RE.test(email.trim())) { setEmailErr("Enter a valid business email address."); return false; }
setEmailErr(""); return true;
};
const onSubmit = (e) => {
e.preventDefault();
setTouched(true);
setFailed(false);
if (!validateEmail()) return;
setLoading(true);
setTimeout(() => setLoading(false), 1600);
};
const isExpired = state === "expired";
return (
{isExpired ? : (
<>
Sign in
Access your Capital Economics account.
{state === "reset" && (
Password updated. Sign in with your new password.
)}
{failed && (
We could not sign you in. Check your email address and password and try again.
);
}
/* ================================================================
Trial block — the secondary path. Retired all "register" and
"get access" wording; this leads to the trial and says so.
`layout`: "band" (Variant A, full-width lighter band) or
"column" (Variant B, low-contrast right column).
================================================================ */
const TRIAL_TICKS = [
"Explore our insight now",
"Start immediately",
"Access up to 10 published articles",
"Trusted by leading investors",
];
function TrialBlock({ layout = "band" }) {
const column = layout === "column";
return (
Don't have an account?
Experience the Capital Economics platform
Try the platform trusted by the world's leading financial institutions and governments. Explore how independent analysis, forecasts and economist expertise can support your team make smart decisions. No commitment or payment details required.
{TRIAL_TICKS.map((t) => (
{t}
))}
}>
Start free trial
Free. 10 articles. No card required.
);
}
/* ================================================================
Variant A — stacked single column. Sign-in card centred on a
light neutral; the trial block sits in a visually lighter
full-width band beneath, separated by a rule so it reads as a
different question. Same order on desktop and mobile.
================================================================ */
function VariantA({ live = false }) {
return (
);
}
/* ================================================================
Variant B — asymmetric two column (desktop). Sign-in ~60% left
with visual dominance; trial ~40% right, lower contrast, no
coloured fill competing with the primary CTA. A hairline divider
keeps the two questions distinct. Collapses to Variant A's
stacking order below 900px (handled by the .lg-vb-grid rule).
================================================================ */
function VariantB() {
return (
);
}
/* ---- responsive rule: Variant B collapses to stacked below 900px ---- */
(function injectVBResponsive() {
if (typeof document === "undefined" || document.getElementById("lg-vb-css")) return;
const el = document.createElement("style");
el.id = "lg-vb-css";
el.textContent = `@media (max-width: 900px){ .lg-vb-grid { grid-template-columns: 1fr !important; gap: 40px !important; } .lg-vb-trial { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--border-subtle); padding-top: 40px !important; } }`;
document.head.appendChild(el);
})();
/* ================================================================
State artboard — a sign-in card on the light page surface so the
six states can be reviewed in isolation.
================================================================ */
function StateFrame({ state }) {
return (