Integrations 9

"use client"

import Link from "next/link"

import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"

type IntegrationItem = {
  label: string
  icon: React.ComponentType<React.HTMLAttributes<SVGElement>>
}

type IntegrationLayer = {
  label: string
  description: string
  rotation: number
  integrations: IntegrationItem[]
}

const layers: IntegrationLayer[] = [
  {
    label: "Create",
    description: "From a spark to a plan",
    rotation: -6,
    integrations: [
      { label: "OpenAI", icon: Icons.OpenAI },
      { label: "Gemini", icon: Icons.Gemini },
      { label: "Anthropic", icon: Icons.Anthropic },
    ],
  },
  {
    label: "Build",
    description: "Turn your ideas into work",
    rotation: 0,
    integrations: [
      { label: "Cursor", icon: Icons.Cursor },
      { label: "VS Code", icon: Icons.VisualStudioCode },
      { label: "React", icon: Icons.React },
    ],
  },
  {
    label: "Ship",
    description: "Put something great out there",
    rotation: 6,
    integrations: [
      { label: "GitHub", icon: Icons.GitHub },
      { label: "Next.js", icon: Icons.Nextjs },
      { label: "v0", icon: Icons.V0 },
    ],
  },
]

export function Integration() {
  return (
    <section
      aria-label="Integrations"
      className="@container mx-auto w-full max-w-6xl px-6 py-16 lg:py-24"
    >
      <div className="grid items-center gap-10 @3xl:grid-cols-2 @3xl:gap-12">
        <header className="flex max-w-md flex-col items-start gap-5">
          <p className="text-sm font-medium text-muted-foreground">
            From start to shipped
          </p>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
            Every layer.
            <br />
            Working together.
          </h1>
          <p className="text-base text-pretty text-muted-foreground">
            Your workflow has more than one chapter. Connect the tools that help
            you write each one.
          </p>
          <FancyButton
            size="lg"
            render={<Link href="#workflow-layers" role="link" />}
          >
            Connect every layer
          </FancyButton>
        </header>
        <ul
          id="workflow-layers"
          aria-label="Connected workflow"
          className="flex min-w-0 scroll-mt-8 flex-col gap-5 py-4 sm:gap-6 sm:px-4"
        >
          {layers.map(({ label, description, rotation, integrations }) => (
            <li
              key={label}
              style={{ transform: `rotate(${rotation}deg)` }}
              className="grid grid-cols-[1fr_auto] items-center gap-3 rounded-3xl bg-card p-4 shadow-elevated-md sm:rounded-4xl sm:p-6"
            >
              <div className="flex min-w-0 flex-col gap-3">
                <h2 className="text-lg font-semibold sm:text-2xl">{label}</h2>
                <p className="text-sm text-muted-foreground">{description}</p>
              </div>
              <ul className="flex shrink-0 items-center gap-2 sm:gap-4">
                {integrations.map(({ label, icon: Icon }) => (
                  <li key={label}>
                    <Icon className="size-7 sm:size-10" aria-hidden="true" />
                    <span className="sr-only">{label}</span>
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </div>
    </section>
  )
}