MohFarawati
59094eba85
Reduce the "interchangeable cards" monotony flagged in Phase 0 and apply the warm-premium type scale. - SectionHeading: use the type scale (eyebrow via .eyebrow with brand tint, text-h2 title, body-lg description). Propagates to every home section. - CapabilitiesSection: cleaner cards with a brand-tinted icon tile, type-scale title/body, soft elevation (drops the AppCard wrapper). - ProcessSection: reworked into an editorial numbered timeline (large translucent brand numerals, top rule, no boxes) so it no longer looks identical to Capabilities. Verified: eslint clean, no new type errors, tailwind generates the utilities.
46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import { Bot, Database, Globe, ServerCog } from "lucide-react";
|
|
|
|
import { SectionHeading } from "./section-heading";
|
|
import type { CapabilitiesSectionCopy } from "./types";
|
|
|
|
type CapabilitiesSectionProps = {
|
|
copy: CapabilitiesSectionCopy;
|
|
};
|
|
|
|
const capabilityIcons = [Globe, Database, ServerCog, Bot];
|
|
|
|
export function CapabilitiesSection({ copy }: CapabilitiesSectionProps) {
|
|
return (
|
|
<section className="space-y-8">
|
|
<SectionHeading
|
|
eyebrow={copy.eyebrow}
|
|
title={copy.title}
|
|
description={copy.description}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">
|
|
{copy.items.map((item, index) => {
|
|
const Icon = capabilityIcons[index] ?? Globe;
|
|
|
|
return (
|
|
<div
|
|
key={item.title}
|
|
className="group flex h-full flex-col gap-5 rounded-surface border border-border bg-surface-1 p-6 shadow-card transition duration-300 ease-out hover:-translate-y-1 hover:shadow-panel"
|
|
>
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-nested bg-brand-primary/10 text-brand-primary transition-transform duration-300 group-hover:-translate-y-0.5">
|
|
<Icon className="h-5 w-5" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h3 className="text-title font-semibold text-foreground">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-small leading-relaxed text-muted-foreground">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|