mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

refactor(home): unify section headings, differentiate capabilities and process

Browse Source 
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.
This commit is contained in:
MohFarawati
2026-07-14 22:37:09 +02:00
parent dd72f013d4
commit 59094eba85
3 changed files with 29 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/home/capabilities-section.tsx
+12 -17
View File
@@ -1,6 +1,5 @@
import { Bot, Database, Globe, ServerCog } from "lucide-react";
import { AppCard } from "@/components/ui/app-card";
import { SectionHeading } from "./section-heading";
import type { CapabilitiesSectionCopy } from "./types";
@@ -19,29 +18,25 @@ export function CapabilitiesSection({ copy }: CapabilitiesSectionProps) {
description={copy.description}
/>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4 xl:gap-6">
<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 (
<AppCard
<div
key={item.title}
layer="single"
interactive
className="group border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:shadow-panel"
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-full flex-col gap-5 p-6">
<div className="flex h-11 w-11 items-center justify-center rounded-nested border border-border/70 bg-background text-foreground transition-transform duration-300 group-hover:-translate-y-0.5">
<Icon className="h-5 w-5" />
</div>
<div className="space-y-3">
<h3 className="text-xl font-semibold tracking-[-0.04em] text-foreground">
{item.title}
</h3>
<p className="text-sm leading-7 text-muted-foreground">{item.description}</p>
</div>
<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>
</AppCard>
<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>