Logos

1"use client";23import { cn } from "@/lib/utils";45type Logos01Props = {6  className?: string;7};89const LOGOS = [10  { src: "/assets/icons/logos/slack.svg", alt: "Slack" },11  { src: "/assets/icons/logos/notion.svg", alt: "Notion" },12  { src: "/assets/icons/logos/linear.svg", alt: "Linear" },13  { src: "/assets/icons/logos/github.svg", alt: "GitHub" },14  { src: "/assets/icons/logos/figma.svg", alt: "Figma" },15  { src: "/assets/icons/logos/stripe.svg", alt: "Stripe" },16] as const;1718export function Logos01({ className }: Logos01Props) {19  return (20    <section className={cn("@container w-full bg-background", className)}>21      <div className="mx-auto flex w-full max-w-3xl flex-col items-center gap-5 px-4 py-10 @[32rem]:gap-6 @[32rem]:px-6 @[32rem]:py-12">22        <p className="text-xs tracking-wide text-muted-foreground">23          Trusted by teams everywhere24        </p>25        <ul className="flex flex-nowrap items-center justify-center gap-x-4 @[32rem]:gap-x-8">26          {LOGOS.map((logo) => (27            <li key={logo.src} className="flex items-center">28              <img29                src={logo.src}30                alt={logo.alt}31                className="h-4 w-auto object-contain opacity-70 brightness-0 @[32rem]:h-6 dark:invert"32              />33            </li>34          ))}35        </ul>36      </div>37    </section>38  );39}

1"use client";23import { cn } from "@/lib/utils";45type Logos02Props = {6  className?: string;7};89const LOGOS = [10  "slack",11  "notion",12  "linear",13  "github",14  "figma",15  "stripe",16  "intercom",17  "airtable",18  "hubspot",19  "asana",20] as const;2122export function Logos02({ className }: Logos02Props) {23  const track = [...LOGOS, ...LOGOS, ...LOGOS];2425  return (26    <section className={cn("w-full overflow-hidden bg-background", className)}>27      <style>{`28        @keyframes logos-02-scroll {29          from { transform: translateX(0); }30          to { transform: translateX(-33.333%); }31        }32      `}</style>33      <div className="flex w-full flex-col gap-5 py-10">34        <p className="px-6 text-left text-xs tracking-wide text-muted-foreground">35          Trusted by companies everywhere36        </p>37        <div className="w-full overflow-hidden" aria-hidden="true">38          <div39            className="flex w-max items-center"40            style={{ animation: "logos-02-scroll 28s linear infinite" }}41          >42            {track.map((name, i) => (43              <img44                key={`${name}-${i}`}45                src={`/assets/icons/logos/${name}.svg`}46                alt=""47                className="mr-10 h-5 w-auto shrink-0 object-contain opacity-70 brightness-0 sm:mr-12 sm:h-6 dark:invert"48              />49            ))}50          </div>51        </div>52      </div>53    </section>54  );55}

1"use client";23import { cn } from "@/lib/utils";45type Logos03Props = {6  className?: string;7};89const LOGOS = [10  { src: "/assets/icons/logos/slack.svg", alt: "Slack" },11  { src: "/assets/icons/logos/notion.svg", alt: "Notion" },12  { src: "/assets/icons/logos/linear.svg", alt: "Linear" },13  { src: "/assets/icons/logos/github.svg", alt: "GitHub" },14  { src: "/assets/icons/logos/figma.svg", alt: "Figma" },15  { src: "/assets/icons/logos/stripe.svg", alt: "Stripe" },16  { src: "/assets/icons/logos/intercom.svg", alt: "Intercom" },17  { src: "/assets/icons/logos/airtable.svg", alt: "Airtable" },18  { src: "/assets/icons/logos/hubspot.svg", alt: "HubSpot" },19  { src: "/assets/icons/logos/asana.svg", alt: "Asana" },20  { src: "/assets/icons/logos/dropbox.svg", alt: "Dropbox" },21  { src: "/assets/icons/logos/snowflake.svg", alt: "Snowflake" },22] as const;2324export function Logos03({ className }: Logos03Props) {25  return (26    <section className={cn("@container w-full bg-background", className)}>27      <div className="mx-auto flex w-full max-w-3xl flex-col items-center gap-6 px-4 py-10 @[32rem]:px-6 @[32rem]:py-12">28        <p className="text-xs tracking-wide text-muted-foreground">29          Trusted by companies everywhere30        </p>31        <ul className="grid w-full grid-cols-3 gap-x-6 gap-y-8 @[28rem]:grid-cols-4 @[40rem]:grid-cols-6">32          {LOGOS.map((logo) => (33            <li key={logo.src} className="flex items-center justify-center">34              <img35                src={logo.src}36                alt={logo.alt}37                className="h-5 w-auto object-contain opacity-70 brightness-0 @[32rem]:h-6 dark:invert"38              />39            </li>40          ))}41        </ul>42      </div>43    </section>44  );45}