EngineeringShipping faster with a component registry
How we cut landing page build time from days to hours by treating sections as installable units.
A compact community card with thumbnail, member count, and organizer row for directories and group lists.
The import and the props worth knowing about, in one place.
import { Card27 } from "@/components/beste/component/card27";
// The whole card becomes a link when href is set.
<Card27
src="/groups/night-shippers.jpg"
title="Night Shippers"
meta="312 members"
byName="Deniz"
href="/groups/night-shippers"
/>
<Card27
src="/groups/design-club.jpg"
title="Design Club"
meta="94 members"
byName="Elif"
bySrc="/avatars/elif.jpg" // or omit for the gradient dot
tone="violet" // dot: "peach" (default) | "violet" | "emerald"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover | The card lifts and the image scales inside its frame; `motion-reduce` turns the movement off. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Square thumbnail URL |
title* | string | — | Community or group name |
meta | string | — | Muted meta line (e.g. "312 members") |
byName | string | — | Organizer name in the bottom row |
bySrc | string | — | Organizer avatar URL; falls back to a gradient dot |
href | string | — | If set, the whole card links to this href |
tone | "peach" | "violet" | "emerald" | — | Gradient dot color when there is no organizer avatar |
className | string | — | Additional classes merged onto the root |
EngineeringHow we cut landing page build time from days to hours by treating sections as installable units.