A page section that pairs a portrait image with two flanking columns of numbered step cards to explain a product process or workflow.
import { Feature02, type Feature02Props } from "@/components/ui/feature-02";
export const values = {
title: "Turning Your Product Vision into Interface, Simply.",
description:
"Building with Flexnative is a seamless, guided experience designed to make shipping polished UI effortless and fast.",
image:
"https://cdn.21st.dev/assets/mirror/ec/ec1fd6b232ec3a724f6d650612eef1fe3c8a9de3fb130dbde446685fba08ad8a.jpg",
imageAlt:
"A hand holding a phone showing a product dashboard, with a laptop and monitor displaying UI mockups in the background",
steps: [
{
number: "01",
title: "Explore the Library",
description:
"Browse hundreds of production-ready blocks across every section type.",
},
{
number: "02",
title: "Customize & Theme",
description:
"Swap presets, tokens, and copy to match your brand in minutes.",
},
{
number: "03",
title: "Compose Your Pages",
description:
"Drag blocks into the editor and arrange them into full layouts.",
},
{
number: "04",
title: "Ship to Production",
description: "Copy the code or install via CLI, ready to deploy today.",
},
],
animation: "subtle",
} satisfies Feature02Props;
export default function Feature02Example() {
return <Feature02 {...values} />;
}