export function UserFlow()

in src/components/Sections/UserFlow.tsx [27:65]
39 lines of code
2 McCabe index (conditional complexity)

export function UserFlow() {
  return (
    <div className="hidden flex-col relative items-center
      xl:flex">
      <span
        className="section-title text-center mt-[72px] mb-6"
      >User Flow</span>
      <div className="flex mb-[72px]">
        <Card
          icon={<UF1 width={40} height={40} />}
          text="Set up DevLake"
        >
          <InlineLink link="https://devlake.apache.org/docs/GettingStarted/DockerComposeSetup">Install DevLake</InlineLink> via Docker Compose, Kubernetes, Helm or Temporal.
        </Card>
        <Arrow />
        <Card
          icon={<UF2 width={40} height={40} />}
          text="Collect Data"
        >
          Select, transform and set up a schedule for the data you wish to sync from your prefered data sources in the <InlineLink link="https://devlake.apache.org/docs/Configuration/Tutorial">Config UI</InlineLink>.
        </Card>
        <Arrow />
        <Card
          icon={<UF3 width={40} height={40} />}
          text="View Dashboards"
        >
          <InlineLink link="https://devlake.apache.org/livedemo/EngineeringLeads/DORA/">View pre-built dashboards</InlineLink> of a variety of use cases and learn engineering insights from the <InlineLink link="https://devlake.apache.org/docs/Metrics">metrics</InlineLink>.
        </Card>
        <Arrow />
        <Card
          icon={<UF4 width={40} height={40} />}
          text="Customize Metrics"
        >
          <InlineLink link="https://devlake.apache.org/docs/Configuration/Dashboards/GrafanaUserGuide#customizing-a-dashboard">Customize</InlineLink> your own metrics or dashboards with SQL to extend your usage of DevLake.
        </Card>
      </div>
    </div>
  )
}