mkfain
f3b95157dc
Replaces 7 (donor) and 12 (activist) sequential prose Cards with a small typed block kit that the page dispatches on. Each guide drops roughly 40-50% of body text and trades walls of paragraphs for scannable visual blocks. helpContent.ts: - Replace GuideSection with a GuideBlock discriminated union (tldr, steps, modeComparison, callout, optionGrid, prose). - Rewrite the Donor Guide as 6 blocks: TLDR, 3-step flow, Fast vs. Private comparison, on-chain visibility warning, donate-privately OptionGrid, consumer-apps callout. - Rewrite the Activist Guide as 8 blocks: TLDR, mode comparison (centerpiece), state-actor warning, Private Mode tradeoffs callout, 2-step move-funds flow, cash-out OptionGrid (now includes Bitrefill for direct gift-card spending), avoid-tumblers callout, brief prose on donation history visibility. - Voice shifts to direct second-person across both guides. New components in src/components/guide/: - InlineModeBadge - pill that visually distinguishes Fast (primary tint) and Private (indigo tint). - GuideTLDR - hero-adjacent two-column summary with a lede and 2-3 checkmark next-actions. - GuideSteps - numbered vertical step list. - CalloutCard - tinted (info/warning/danger/success) icon callouts. - ModeComparisonTable - 3-column grid on desktop; collapses to two stacked tinted cards on mobile (no sideways scroll). Audience flag switches between donor and activist row copy. - OptionGrid + inline OptionCard - 2-up grid of compact tiles with chips and optional external link. - GuideProse - small escape hatch. - index.ts barrel. Pages: - DonorGuidePage.tsx and ActivistGuidePage.tsx now just fetch their block array and dispatch each block to the right component via a small switch. - Body width tightened from max-w-3xl to max-w-2xl for line length; block spacing increased from space-y-4 to space-y-6. Deleted: - src/components/GuideSectionCard.tsx (no remaining consumers). renderInlineMarkup, GuideHero, and the FAQ data shape are unchanged.
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { renderInlineMarkup } from '@/lib/helpMarkup';
|
|
import type { GuideStepsBlock } from '@/lib/helpContent';
|
|
|
|
/**
|
|
* Numbered vertical flow of short steps. Each step gets a primary-tinted
|
|
* circle on the left with its index, then title + body to the right.
|
|
*
|
|
* Visual goal: replace 3\u20134 paragraphs of "first X, then Y" prose with a
|
|
* scannable list that can be read in seconds.
|
|
*/
|
|
export function GuideSteps({ block }: { block: GuideStepsBlock }) {
|
|
return (
|
|
<section>
|
|
<h2 className="text-lg font-bold tracking-tight mb-4">{block.heading}</h2>
|
|
<ol className="space-y-4">
|
|
{block.steps.map((step, i) => (
|
|
<li key={i} className="flex gap-4">
|
|
<span
|
|
aria-hidden="true"
|
|
className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary font-semibold text-sm"
|
|
>
|
|
{i + 1}
|
|
</span>
|
|
<div className="flex-1 min-w-0 pt-0.5">
|
|
<p className="font-semibold text-foreground leading-snug">
|
|
{renderInlineMarkup(step.title)}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground leading-relaxed mt-1">
|
|
{renderInlineMarkup(step.body)}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</section>
|
|
);
|
|
}
|