37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Services — deliberately broken editorial grid. Six services on a 6-column
|
|
* grid; the first two cards span 3 (breaking the safe 2-col-per-card rhythm),
|
|
* the rest span 2. Serif index numerals, spectrum top-line on hover.
|
|
*/
|
|
|
|
import Reveal from "./Reveal";
|
|
import { services } from "../content";
|
|
|
|
export default function Services() {
|
|
return (
|
|
<section id="services" className="services" aria-label="Services">
|
|
<div className="wrap">
|
|
<Reveal>
|
|
<p className="kicker">What we do</p>
|
|
<h2 className="section__title">How we grow your business.</h2>
|
|
</Reveal>
|
|
|
|
<Reveal className="services__grid" stagger={0.08}>
|
|
{services.map((s, i) => (
|
|
<article
|
|
className={`service hoverable${i < 2 ? " service--wide" : ""}`}
|
|
key={s.id}
|
|
data-cursor="more"
|
|
>
|
|
<span className="service__index">0{i + 1}</span>
|
|
<h3 className="service__name">{s.name}</h3>
|
|
<p className="service__desc">{s.desc}</p>
|
|
</article>
|
|
))}
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|