Clients

import {
  ClaudeAI,
  Cursor,
  Github,
  GoogleGemini,
  Grok,
  OpenAI,
  Replicate,
  Vercel,
} from "@designali/logos"

export function Logos01() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-20">
      <div className="z-10">
        <h1 className="mb-10 px-20 text-center text-sm font-medium text-muted-foreground">
          Trusted by the world’s most creative companies.
        </h1>
        <div className="mx-auto max-w-md">
          <div className="flex flex-wrap items-center justify-center gap-12 px-10">
            <OpenAI size={40} />
            <ClaudeAI size={40} />
            <Replicate size={40} />
            <Cursor size={40} />
            <GoogleGemini size={40} />
            <Github size={40} />
            <Grok size={40} />
            <Vercel size={40} />
          </div>
        </div>
      </div>
      <div
        className="absolute inset-0 z-0"
        style={{
          background:
            "linear-gradient(to bottom, var(--background) 0%, var(--background) 55%, rgba(255,255,255,0) 100%), radial-gradient(ellipse at 50% 110%, var(--primary) 0%, var(--background) 70%)",
          opacity: 0.7,
        }}
      >
        <div
          style={{
            WebkitMaskImage:
              "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%)",
            backgroundImage:
              "linear-gradient(var(--primary) 1px, transparent 1px), linear-gradient(90deg, var(--primary) 1px, transparent 1px)",
            backgroundSize: "80px 80px",
            bottom: "0",
            height: "55%",
            left: "0",
            maskImage:
              "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%)",
            pointerEvents: "none",
            position: "absolute",
            width: "100%",
          }}
        />
      </div>
    </div>
  )
}

import {
  ClaudeAIWordmark,
  CursorWordmark,
  GithubWordmark,
  GoogleGeminiWordmark,
  GoogleWordmark,
  GrokWordmark,
  OpenAIWordmark,
  ReplicateWordmark,
} from "@designali/logos"

export function Logos02() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-20">
      <h1 className="mb-10 px-20 text-center text-sm font-medium text-muted-foreground">
        Trusted by the world’s most creative companies.
      </h1>
      <div className="mx-auto max-w-2xl px-6">
        <div className="flex flex-wrap items-center justify-center gap-x-12">
          <OpenAIWordmark size={100} />
          <ClaudeAIWordmark size={100} />
          <ReplicateWordmark size={100} />
          <CursorWordmark size={100} />
          <GoogleGeminiWordmark size={90} />
          <GithubWordmark size={90} />
          <GrokWordmark size={100} />
          <GoogleWordmark size={100} />
        </div>
      </div>
    </div>
  )
}

import {
  ClaudeAIWordmark,
  CursorWordmark,
  GithubWordmark,
  GoogleGeminiWordmark,
  GoogleWordmark,
  GrokWordmark,
  OpenAIWordmark,
  ReplicateWordmark,
} from "@designali/logos"

import { Marquee } from "@/components/ui/marquee"

export function Logos03() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-20">
      <h1 className="mb-10 px-20 text-center text-sm font-medium text-muted-foreground">
        Trusted by the world’s most creative companies.
      </h1>
      <div className="mx-auto flex h-full w-full max-w-4xl items-center justify-center overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [mask-size:100%_100%] [mask-repeat:no-repeat] px-6">
        <div>
          <Marquee gap={"70px"}>
            <OpenAIWordmark size={100} />
            <ClaudeAIWordmark size={100} />
            <ReplicateWordmark size={100} />
            <CursorWordmark size={100} />
            <GoogleGeminiWordmark size={90} />
            <GithubWordmark size={90} />
            <GrokWordmark size={100} />
            <GoogleWordmark className="mr-16" size={100} />
          </Marquee>
        </div>
      </div>
    </div>
  )
}

import {
  ClaudeAI,
  Cursor,
  Github,
  GoogleGemini,
  GoogleWordmark,
  Grok,
  OpenAI,
  PerplexityAI,
  Replicate,
  Resend,
  Suno,
  YouTube,
} from "@designali/logos"

export function Logos04() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-20">
      <h1 className="mb-10 px-20 text-center text-sm font-medium text-muted-foreground">
        Trusted by the world’s most creative companies.
      </h1>
      <div className="mx-auto max-w-5xl px-6">
        <div className="mx-auto grid grid-cols-2 border p-2 sm:grid-cols-4 lg:grid-cols-6">
          {[
            <OpenAI key="openai" size={40} />,
            <ClaudeAI key="claude" size={40} />,
            <Replicate key="replicate" size={40} />,
            <Cursor key="cursor" size={40} />,
            <GoogleGemini key="gemini" size={40} />,
            <Github key="github" size={40} />,
            <Grok key="grok" size={40} />,
            <GoogleWordmark key="google" size={40} />,
            <Suno key="suno" size={40} />,
            <Resend key="resend" size={40} />,
            <YouTube key="youtube" size={40} />,
            <PerplexityAI key="perp" size={40} />,
          ].map((Logo, i) => (
            <div
              key={i}
              className="flex h-30 w-30 items-center justify-center border md:h-40 md:w-40"
            >
              {Logo}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

import {
  ClaudeAIWordmark,
  CursorWordmark,
  GithubWordmark,
  GoogleGeminiWordmark,
  GoogleWordmark,
  GrokWordmark,
  OpenAIWordmark,
  PerplexityAIWordmark,
  ReplicateWordmark,
  ResendWordmark,
  SunoWordmark,
  YouTubeWordmark,
} from "@designali/logos"

export function Logos04() {
  return (
    <div className="relative flex min-h-screen flex-col items-center justify-center py-20">
      <div className="z-10 mx-auto flex max-w-6xl flex-col justify-center px-6">
        <h1 className="mb-10 px-20 text-center text-sm font-medium text-muted-foreground">
          Trusted by the world’s most creative companies.
        </h1>
        <div className="mx-auto grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
          {[
            <OpenAIWordmark key="openai" size={80} />,
            <ClaudeAIWordmark key="claude" size={80} />,
            <ReplicateWordmark key="replicate" size={80} />,
            <CursorWordmark key="cursor" size={80} />,
            <GoogleGeminiWordmark key="gemini" size={80} />,
            <GithubWordmark key="github" size={80} />,
            <GrokWordmark key="grok" size={80} />,
            <GoogleWordmark key="google" size={80} />,
            <SunoWordmark key="suno" size={80} />,
            <ResendWordmark key="resend" size={80} />,
            <YouTubeWordmark key="youtube" size={80} />,
            <PerplexityAIWordmark key="perp" size={80} />,
          ].map((Logo, i) => (
            <div
              key={i}
              className="bg-code flex h-20 w-30 items-center justify-center md:h-24 md:w-40"
            >
              {Logo}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}