A responsive image grid where clicking an item expands it and reveals its description while dimming the rest.
import Content05, { type Content05Props } from "@/components/ui/content-05";
export const values = {
title: "Our process",
description: "From idea to launch—click each phase to see how we work.",
dimUnfocused: false,
descriptionOnFocus: true,
items: [
{
image:
"https://cdn.21st.dev/assets/mirror/c5/c5b25f1bcdcb1cd78e38fa45773876052356e1066ca19c62dc308e715ba6e525.jpg",
title: "Discovery",
description:
"We start by understanding your goals, your users, and the constraints you face.",
defaultFocus: true,
},
{
image:
"https://cdn.21st.dev/assets/mirror/66/66ddb7b55e717cbf16599a304081adeb5d28f047463ef4834eaeae889a9abac0.jpg",
title: "Design",
description:
"Clean interfaces and clear flows that people love to use every day.",
},
{
image:
"https://cdn.21st.dev/assets/mirror/ee/ee99ba8a8d613120b8e4bcc37492965884bbcea01849508ec73c2d84f5f9da4a.jpg",
title: "Build",
description:
"Solid, accessible code that scales with your product and your team.",
},
{
image:
"https://cdn.21st.dev/assets/mirror/43/439b8336941b93434200147fd06ec23f5f096ba878de28dbeb5d5d96f1caed59.jpg",
title: "Test",
description:
"We validate everything with real users before launch, so nothing is left to chance.",
},
{
image:
"https://cdn.21st.dev/assets/mirror/a3/a312baee36bae88b9f7700efd09f8899789c59b6ab98c59b5dd0347ce9606ae0.jpg",
title: "Launch",
description:
"Go live with confidence, with support and iteration when you need it.",
},
],
} satisfies Content05Props;
export default function Content05Example() {
return (
<Content05
title={values.title}
description={values.description}
dimUnfocused={values.dimUnfocused}
descriptionOnFocus={values.descriptionOnFocus}
items={values.items}
/>
);
}