"use client" import { useState } from "react" import { Badge } from "@/app/_components/ui/badge" import { Building2, Briefcase, Building, Landmark, Store, Factory, Warehouse, Hotel, LucideIcon } from "lucide-react" export interface LogoItem { name: string icon: LucideIcon } export interface LogosCloudProps { variant?: "default" | "grayscale" | "marquee" badgeText?: string title?: string logos?: LogoItem[] } export const defaultLogos: LogoItem[] = [ { name: "TechCorp", icon: Building2 }, { name: "InnovateInc", icon: Briefcase }, { name: "BuildCo", icon: Building }, { name: "FinanceHub", icon: Landmark }, { name: "RetailMax", icon: Store }, { name: "ManufactPro", icon: Factory }, { name: "LogisticsPlus", icon: Warehouse }, { name: "Hospitality Group", icon: Hotel }, ] /** * LogosCloud - Logo cloud for trust/social proof * * @description * A section displaying client or partner logos in a cloud layout. * Supports default, grayscale, and marquee scrolling variants. * * @usage * ```tsx * import { LogosCloud } from "@/components/blocks/logos-cloud" * * * ``` * * @dependencies * - lucide-react (for icons) * - @/components/ui/badge * * @props * - variant: "default" | "grayscale" | "marquee" - Logo display style * - badgeText: string - Badge text * - title: string - Section title * - logos: LogoItem[] - Array of logo items * * @category Logos * @tags marketing, trust, social-proof */ export function LogosCloud({ variant = "default", badgeText = "Trusted by industry leaders", title = "Powering the world's best teams", logos = defaultLogos, }: LogosCloudProps) { const [isHovered, setIsHovered] = useState(false) return (

{badgeText}

{title}

{variant === "marquee" ? (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{[...logos, ...logos].map((logo, index) => (

{logo.name}

))}

) : (

{logos.map((logo) => (

{logo.name}

))}

)}

) }

Logo Cloud

Installation

Preview

Powering the world's best teams

Usage

Dependencies