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"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card27 } from "@/components/beste/component/card27";
<Card27
src="https://images.unsplash.com/photo-1485955900006-10f4d324d411?q=80&w=400&auto=format&fit=crop"
title="Night Shippers"
meta="312 members"
byName="Deniz"
href="#"
/>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 |
Customer satisfaction
vs last quarter
A minimal stat card with a bold value, label, and optional trend delta for metrics rows.
EngineeringHow we cut landing page build time from days to hours by treating sections as installable units.
An article card with cover image, category chip, excerpt, and author row for blog and news grids.
Deniz Arslan
Creative Director
Leads brand systems for venture backed startups. Previously at North & Co.
View profileA team member card with a grayscale portrait that gains color on hover while a bio drawer slides up.
We rebuilt our marketing site in a weekend. The blocks are clean, accessible, and the code reads like we wrote it ourselves.
A testimonial card with star rating, quote, and author row for reviews and social proof sections.
A photo stack card whose tucked prints fan out on hover for albums, galleries, and case studies.
Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.
Learn moreA feature card with an icon tile and a cursor tracking spotlight for landing page feature grids.
