"use client"

import * as React from "react"
import { Sparkles } from "lucide-react"

import { cn } from "@/lib/utils"

type Logo = { name: string; src: string; segment: Segment }
type Segment = "Dev tools" | "Productivity" | "AI" | "Fintech"

const logos: Logo[] = [
  { name: "Vercel", src: "https://blockus.lndevui.com/logos/vercel-wordmark.svg", segment: "Dev tools" },
  { name: "GitHub", src: "https://blockus.lndevui.com/logos/github-wordmark.svg", segment: "Dev tools" },
  { name: "Supabase", src: "https://blockus.lndevui.com/logos/supabase-wordmark.svg", segment: "Dev tools" },
  { name: "Linear", src: "https://blockus.lndevui.com/logos/linear-wordmark.svg", segment: "Productivity" },
  { name: "Notion", src: "https://blockus.lndevui.com/logos/notion-wordmark.svg", segment: "Productivity" },
  { name: "Asana", src: "https://blockus.lndevui.com/logos/asana-wordmark.svg", segment: "Productivity" },
  { name: "OpenAI", src: "https://blockus.lndevui.com/logos/openai-wordmark.svg", segment: "AI" },
  { name: "Anthropic", src: "https://blockus.lndevui.com/logos/anthropic-wordmark.svg", segment: "AI" },
  { name: "Figma", src: "https://blockus.lndevui.com/logos/figma.svg", segment: "AI" },
  { name: "Stripe", src: "https://blockus.lndevui.com/logos/stripe.svg", segment: "Fintech" },
  { name: "Tailwind", src: "https://blockus.lndevui.com/logos/tailwindcss-wordmark.svg", segment: "Dev tools" },
  { name: "Discord", src: "https://blockus.lndevui.com/logos/discord-wordmark.svg", segment: "Productivity" },
]

const tabs: { id: Segment | "All"; label: string }[] = [
  { id: "All", label: "All" },
  { id: "Dev tools", label: "Dev tools" },
  { id: "Productivity", label: "Productivity" },
  { id: "AI", label: "AI" },
  { id: "Fintech", label: "Fintech" },
]

export default function LogoCloud09() {
  const [tab, setTab] = React.useState<Segment | "All">("All")
  const visible = tab === "All" ? logos : logos.filter((l) => l.segment === tab)

  return (
    <section className="bg-background py-20 sm:py-28">
      <div className="mx-auto max-w-6xl px-6 sm:px-10">
        <div className="flex flex-col items-center gap-3 text-center">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm shadow-black/5">
            <Sparkles className="size-3 text-amber-500" />
            Loved by builders
          </span>
          <h2
            className="text-balance font-semibold tracking-tight text-foreground"
            style={{
              fontSize: "clamp(1.85rem, 4vw, 2.75rem)",
              letterSpacing: "-0.03em",
              lineHeight: 1.08,
            }}
          >
            Twelve teams. Four segments. One catalog.
          </h2>
        </div>

        <div className="mt-9 flex flex-wrap items-center justify-center gap-1">
          {tabs.map((t) => (
            <button
              key={t.id}
              type="button"
              onClick={() => setTab(t.id)}
              className={cn(
                "rounded-full px-3 py-1.5 text-xs font-medium transition-colors",
                t.id === tab
                  ? "bg-foreground text-background"
                  : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
              )}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div className="mt-9 flex flex-wrap items-center justify-center gap-2 sm:gap-3">
          {visible.map((logo) => (
            <div
              key={logo.name}
              className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 transition-colors hover:bg-muted/40"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={logo.src}
                alt={logo.name}
                className="h-4 w-auto opacity-80 grayscale dark:invert"
              />
              <span className="text-xs font-medium text-foreground">
                {logo.name}
              </span>
              <span className="text-[10px] uppercase tracking-widest text-muted-foreground">
                · {logo.segment}
              </span>
            </div>
          ))}
        </div>

        <p className="mt-8 text-center text-xs text-muted-foreground">
          Showing{" "}
          <span className="font-medium text-foreground">{visible.length}</span>{" "}
          of {logos.length} customers
          {tab !== "All" && (
            <>
              {" "}
              in <span className="font-medium text-foreground">{tab}</span>
            </>
          )}
          .
        </p>
      </div>
    </section>
  )
}
Logo cloud

Product

More

Legal
