ZacharyZhang-NY
32e521beae
- runtimes: bordered "supported runtimes" strip, text-based for consistency (Reicon brand coverage is partial); all eight runtimes preserved - how-it-works: centered heading + clean numbered stepper for the seven-step first-run flow; drop the framer-motion terminal demo - faq: adaline accordion (grid-rows expand, Reicon plus icon); all answers preserved, including the platform-support-derived ones - move all three into components/sections and remove the old flat components
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import { Container } from "../ui/container";
|
|
import { Reveal } from "../ui/reveal";
|
|
import { SectionHeading } from "../ui/section-heading";
|
|
import { landingHowItWorksNarrative } from "../../lib/product-narrative";
|
|
|
|
const steps = landingHowItWorksNarrative.steps;
|
|
|
|
export function HowItWorks() {
|
|
return (
|
|
<section id="how-it-works" className="scroll-mt-20 bg-[var(--bg-subtle)] py-20 md:py-28">
|
|
<Container>
|
|
<Reveal>
|
|
<SectionHeading
|
|
eyebrow="How it works"
|
|
title={landingHowItWorksNarrative.heading}
|
|
align="center"
|
|
className="mx-auto"
|
|
/>
|
|
</Reveal>
|
|
|
|
<Reveal delay={80} className="mx-auto mt-14 max-w-2xl">
|
|
<div className="relative">
|
|
<div className="absolute bottom-3 left-5 top-3 w-px bg-[var(--border)]" aria-hidden="true" />
|
|
<ol className="space-y-8">
|
|
{steps.map((step) => (
|
|
<li key={step.number} className="relative flex gap-5">
|
|
<span className="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--accent)] text-sm font-medium text-[var(--text-on-accent)]">
|
|
{step.number}
|
|
</span>
|
|
<div className="pt-1.5">
|
|
<h3 className="text-base font-medium tracking-tight text-[var(--text)]">{step.title}</h3>
|
|
<p className="mt-1 leading-relaxed text-[var(--muted)]">{step.description}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</Reveal>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|