Marco
d48a00973d
- Checkout: the 4 step cards' border-border and CheckoutSteps' connector lines/upcoming-circle borders were nearly the same luminance as the page's own bg-bg-base background, barely visible. Darker (#c4b8a0), scoped to just these spots rather than the shared border-border token. - Hero.tsx: fixes a mistake from the last Tablet pass — moving the CTA/ subtitle/icon/social-proof size overrides from lg: to md: (to match the grid breakpoint move) actually removed their smaller sizing from the whole Tablet range, recreating the exact 3-line-wrap problem the lg: exception used to prevent. Reverted those specific overrides back to lg: (grid structure stays at md:), and added a smaller heading size (text-h1) below lg: too — text-display's 44px floor doesn't fit the ~283-320px Tablet column any better than the CTA did. - About.tsx: the quote/divider/bio row and its divider orientation also pushed from md: to lg: — still too tight for the Tablet column even after the text/photo ratio swap from the previous pass.
65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
const STEP_LABELS = ["Warenkorb", "Adresse", "Zahlung", "Abschluss"];
|
|
|
|
type StepState = "done" | "active" | "upcoming";
|
|
|
|
function StepCircle({ state, number }: { state: StepState; number: number }) {
|
|
if (state === "done") {
|
|
return (
|
|
<div className="flex size-9 items-center justify-center rounded-full bg-brand text-text-primary">
|
|
<svg viewBox="0 0 20 20" className="size-4" fill="none" aria-hidden="true">
|
|
<path d="m4 10 4 4 8-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
if (state === "active") {
|
|
return (
|
|
<div className="flex size-9 items-center justify-center rounded-full bg-brand font-bold text-body-sm text-bg-white">
|
|
{number}
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
// border-[#c4b8a0], not the shared border-border (#e5e0d8) — nearly the
|
|
// same luminance as the page's own bg-bg-base (#f8f5f1), barely visible
|
|
// (fixed 2026-07-24, feedback: "die Striche bei den Nummern-Steps sind
|
|
// zu hell"). Same color as the connector line below and the checkout
|
|
// step cards' own border fix, for consistency.
|
|
<div className="flex size-9 items-center justify-center rounded-full border border-[#c4b8a0] font-bold text-body-sm text-text-muted">
|
|
{number}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Shared by /checkout (mid-flow, one step active) and /bestellbestaetigung
|
|
// (every step done — `current` past the last step number makes every
|
|
// stepNum < current true, so passing STEP_LABELS.length + 1 there marks
|
|
// the whole bar complete without a separate "all done" branch).
|
|
export function CheckoutSteps({ current }: { current: number }) {
|
|
return (
|
|
<div className="flex items-center w-full max-w-[50rem]">
|
|
{STEP_LABELS.map((label, i) => {
|
|
const stepNum = i + 1;
|
|
const state: StepState = stepNum < current ? "done" : stepNum === current ? "active" : "upcoming";
|
|
return (
|
|
<div key={label} className="flex items-center flex-1 last:flex-initial">
|
|
<div className="flex flex-col items-center gap-0 shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<StepCircle state={state} number={stepNum} />
|
|
<span
|
|
className={`hidden sm:block text-body-sm whitespace-nowrap ${
|
|
state === "upcoming" ? "text-text-muted" : "font-semibold text-text-primary"
|
|
}`}
|
|
>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{i < STEP_LABELS.length - 1 && <div className="h-px bg-[#c4b8a0] flex-1 mx-4 min-w-4" />}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|