Data-driven strategies
Every campaign is backed by analytics and market research. Performance is tracked in real time so the budget always lands where it should.
We combine data-driven strategies with creative excellence to help brands achieve measurable growth in the digital landscape.
Every campaign is backed by analytics and market research. Performance is tracked in real time so the budget always lands where it should.
Certified specialists in SEO, PPC, social, and content. Each account gets a dedicated lead who understands the business goals end to end.
From search to social, campaigns run as a single integrated plan. The brand voice stays consistent everywhere your audience shows up.
We measure quality leads and conversions, not just traffic. The performance bar is set against revenue impact from day one.
Centered headline, four feature tiles in a 2x2 grid, and a CTA. Each tile leads with a large Lucide icon and a short description.
Centered headline and description above a fixed two-column grid of icon-led feature tiles, closed by a row of CTA buttons. There is no badge prop, so the header is copy-only.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/feature4"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature4"This installs the block to components/beste/block/feature4.tsx and the shadcn/ui button component it depends on.
The installed file exports feature4Demo alongside the block: the exact props behind the preview above. Spread it to get a working two-by-two feature grid in one line.
import { Feature4, feature4Demo } from "@/components/beste/block/feature4";
export default function Page() {
return <Feature4 {...feature4Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { BarChart3, Rocket, Target, Users } from "lucide-react";
import { Feature4 } from "@/components/beste/block/feature4";
export default function Page() {
return (
<Feature4
heading="Why teams pick our agency"
description="We combine data-driven strategy with creative execution."
features={[
{ icon: BarChart3, title: "Data-driven strategies", description: "Every campaign is backed by analytics." },
{ icon: Users, title: "Expert team and support", description: "A dedicated lead for every account." },
{ icon: Rocket, title: "Multi-channel approach", description: "One integrated plan across channels." },
{ icon: Target, title: "Results-focused campaigns", description: "Measured against revenue impact." },
]}
buttons={[{ label: "Get started today", href: "/contact" }]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | – | Section heading; there is no badge prop on this block |
description | string | – | Section intro text |
features | FeatureItem[] | [] | Icon-led tiles in the 2x2 grid |
buttons | ButtonItem[] | [] | CTA buttons below the grid |
className | string | – | Extra classes for the outer <section> |
type FeatureItem = {
icon?: LucideIcon;
title: string;
description: string;
};
type ButtonItem = {
label: string;
href?: string;
variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};badge prop at all on this block, so the header is limited to heading and description, unlike most other feature blocks in this set.md:grid-cols-2 regardless of item count, but with an unusually wide horizontal gap (md:gap-x-32) that visually separates the two columns instead of reading as a tight grid.size-8 with mb-6 spacing, noticeably larger and more spaced than feature3/feature5's size-6 icons, giving each tile a bigger visual anchor.features and buttons are gated independently by their own .length > 0 checks, so either can be supplied without the other.