The new landing page is live!
Already? That was two days of work at most
Blocks. It is all blocks.
A chat conversation card with message bubbles and a typing indicator for testimonials and support sections.
The import and the props worth knowing about, in one place.
import { Card22 } from "@/components/beste/component/card22";
<Card22
name="Selin Aksoy"
status="online"
src="/avatars/selin.jpg"
messages={[
{ from: "them", text: "The new landing page is live!" },
{ from: "me", text: "Already? That was two days at most" },
]}
typing // show the bouncing typing indicator
/>
<Card22
messages={[
{ from: "them", text: "Can you send the invoice?" },
{ from: "me", text: "Done, check your inbox" },
]}
tone="emerald" // your bubbles: "primary" (default) | "emerald" | "dark"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
The new landing page is live!
Already? That was two days of work at most
Blocks. It is all blocks.
import { Card22 } from "@/components/beste/component/card22";
<Card22
name="Selin Aksoy"
status="online"
src="https://i.pravatar.cc/64?img=26"
messages={[{"from":"them","text":"The new landing page is live!"},{"from":"me","text":"Already? That was two days of work at most"},{"from":"them","text":"Blocks. It is all blocks."}]}
typing
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Contact name in the header |
status | string | — | Muted status line under the name (e.g. "online") |
src | string | — | Contact avatar URL |
messages* | Card22Message[] | — | The conversation, in order |
typing | boolean | — | Show a typing indicator bubble at the end |
tone | "primary" | "emerald" | "dark" | — | Color of your own bubbles |
className | string | — | Additional classes merged onto the root |
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.
Ready when you are
Copy your first block in under a minute. No account needed.
A call to action card with eyebrow, title, description, and buttons for section endings and banners.
A new themed set of sections lands every month, with free updates forever.
Learn moreA featured callout card wrapped in an orbiting gradient border beam for highlights and announcements.
Wish you were here. The water is unreal and the studio ideas keep coming.
With love, Selin
Alacati, TR
The Beste team
A postcard back with a serif message, dashed stamp, postmark, and address lines for personal storytelling sections.
Orbit One
$189
A product card with a full bleed photo, overlaid name and price, and a floating pill button.
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.