A two-column content grid section that pairs an image with a heading, body copy, and an optional call-to-action button per column, with a subtle scroll-reveal animation.
import { Content07, type Content07Props } from "@/components/ui/content-07";
const values = {
title: "Two ways to move faster",
description:
"Pair a strong visual with clear copy and an optional action — side by side.",
variant: "standard",
animation: "subtle",
items: [
{
title: "Design",
content:
"Clean, accessible components that make your product feel modern and easy to use.",
media: {
src: "https://cdn.21st.dev/assets/mirror/72/72baf1d11f337161e880e290ad4348ab0701efa6f039efcdd95d2b1a91a0be9a.jpg",
alt: "alt image",
},
cta: {
ctaEnabled: true,
text: "Learn more",
link: "",
variant: "outline",
},
},
{
title: "Developer Experience",
content:
"Built with TypeScript, clear APIs, and documentation that gets you shipping faster.",
media: {
src: "https://cdn.21st.dev/assets/mirror/8c/8cad1d81dc7bc99ad4bdd6def35fc3fb82eb1f20b11aea2fcf4457ab94752578.jpg",
alt: "alt image",
},
cta: {
ctaEnabled: true,
text: "Get started",
link: "",
variant: "outline",
},
},
],
} satisfies Content07Props;
export default function Content07Demo() {
return (
<Content07
title={values.title}
description={values.description}
items={values.items}
variant={values.variant}
animation={values.animation}
/>
);
}