Focus Grid Content

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}
    />
  );
}