Cinematic Logo Cloud

import { CinematicLogoCloud } from "@/components/ui/cinematic-logo-cloud";

const clients = [
  { name: "OpenAI", text: true, className: "text-xl font-semibold" },
  {
    name: "hello patient",
    text: true,
    className: "text-lg font-medium lowercase",
  },
  { name: "granola", text: true, className: "text-lg font-medium" },
  { name: "character.ai", text: true, className: "text-lg font-medium" },
  {
    name: "ORACLE",
    text: true,
    className: "text-lg font-bold tracking-wide text-red-600 dark:text-red-500",
  },
  {
    name: "PORTOLA",
    text: true,
    className: "text-lg font-semibold tracking-wide",
  },
  { name: "Accel", text: true, className: "text-xl font-semibold" },
  { name: "Bloomberg", text: true, className: "text-lg font-bold" },
  {
    name: "FORBES",
    text: true,
    className: "text-lg font-bold font-serif tracking-wide",
  },
  { name: "SoftBank", text: true, className: "text-lg font-semibold" },
  { name: "WIRED", text: true, className: "text-lg font-black tracking-tight" },
  { name: "hulu", text: true, className: "text-xl font-bold" },
  { name: "YouTube", text: true, className: "text-lg font-semibold" },
  {
    name: "NETFLIX",
    text: true,
    className: "text-lg font-bold tracking-widest",
  },
];

export default function Default() {
  return (
    <div className="flex min-h-[400px] w-full items-center bg-background text-foreground">
      <CinematicLogoCloud clients={clients} />
    </div>
  );
}