Mike/Kordant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Michael Freno
2026-05-25 16:31:39 -04:00
parent bec8cbf269
commit e6b07ddf1d
9 changed files with 695 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
web/src/components/landing/HowItWorksSection.tsx
View File

@@ -13,16 +13,25 @@ interface Step {
function EnrollIcon() {
return (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-white"
>
<path
d="M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S6 21.523 6 16 10.477 6 16 6zm-1 3v5H9v2h6v5h2v-5h6v-2h-6V9h-2z"
fill="currentColor"
d="M12 4a4 4 0 100 8 4 4 0 000-8zM6 21v-2a4 4 0 014-4h4a4 4 0 014 4v2"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
<path
d="M17 8l2 2 4-4"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);
@@ -31,16 +40,31 @@ function EnrollIcon() {
function MonitorIcon() {
return (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-white"
>
<path
d="M4 8v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2H6a2 2 0 00-2 2zm2 0h20v12H6V8zm-4 4h4v2H4v-2zm16 0h4v2h-4v-2z"
fill="currentColor"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
stroke="currentColor"
stroke-width="1.5"
/>
<path
d="M12 8v4l3 3"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M3 12h3m15 0h3M12 3v3m0 15v3"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
opacity="0.5"
/>
</svg>
);
@@ -49,17 +73,30 @@ function MonitorIcon() {
function AlertIcon() {
return (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-white"
>
<path
d="M16 2L4 8v10c0 7.4 5.1 14.1 12 16 6.9-1.9 12-8.6 12-16V8L16 2zm0 2.8L26 9.5v8.5c0 6.1-4.2 11.7-10 13.4C10.2 29.7 6 24.1 6 18V9.5L16 4.8zM15 10v2h2v-2h-2zm0 4v6h2v-6h-2z"
d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 22a2 2 0 01-2-2h4a2 2 0 01-2 2z"
fill="currentColor"
/>
<path
d="M12 11v3m0-6v1"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
);
}
@@ -88,41 +125,43 @@ const steps: Step[] = [
},
];
interface StepItemProps {
interface StepBlockProps {
step: Step;
index: number;
}
function StepItem(props: StepItemProps) {
function StepBlock(props: StepBlockProps) {
const isEven = props.index % 2 === 0;
const Icon = props.step.icon;
return (
<div
class={cn(
"flex items-center gap-8 md:gap-16",
isEven ? "md:flex-row" : "md:flex-row-reverse",
"flex gap-8 md:flex-row flex-col",
isEven ? "" : "md:flex-row-reverse",
)}
>
<div class={cn("flex-shrink-0", isEven ? "" : "md:order-last")}>
<div class="w-16 h-16 rounded-full gradient-primary shadow-glow-primary flex items-center justify-center">
<Icon />
<div class="flex-1">
<div class="flex items-start gap-5">
<div class="w-14 h-14 rounded-full gradient-primary shadow-glow-primary flex items-center justify-center shrink-0">
<Icon />
</div>
<div>
<div class="inline-flex items-center gap-2 mb-1.5">
<span class="text-sm font-semibold text-[var(--color-brand-primary)]">
Step {props.step.number}
</span>
</div>
<h3 class="text-xl md:text-2xl font-bold text-[var(--color-text-primary)] mb-2">
{props.step.title}
</h3>
<p class="text-base text-[var(--color-text-secondary)] leading-relaxed">
{props.step.description}
</p>
</div>
</div>
</div>
<div class={cn("flex-1", isEven ? "" : "md:text-right")}>
<div class="inline-flex items-center gap-2 mb-2">
<span class="text-sm font-semibold text-[var(--color-brand-primary)]">
Step {props.step.number}
</span>
</div>
<h3 class="text-2xl md:text-3xl font-bold text-[var(--color-text-primary)] mb-3">
{props.step.title}
</h3>
<p class="text-lg text-[var(--color-text-secondary)] leading-relaxed max-w-lg">
{props.step.description}
</p>
</div>
<div class="flex-1 hidden md:block" />
</div>
);
}
@@ -135,7 +174,7 @@ export default function HowItWorksSection(props: HowItWorksSectionProps) {
return (
<section
id="how-it-works"
class={cn("bg-dot-grid py-20 md:py-28 scroll-mt-16", props.class)}
class={cn("py-20 md:py-28 scroll-mt-16", props.class)}
>
<PageContainer py="py-8">
<div class="text-center mb-16">
@@ -149,7 +188,7 @@ export default function HowItWorksSection(props: HowItWorksSectionProps) {
<div class="flex flex-col gap-12 md:gap-16">
<For each={steps}>
{(step, index) => <StepItem step={step} index={index()} />}
{(step, index) => <StepBlock step={step} index={index()} />}
</For>
</div>
</PageContainer>