"use client"; import React from "react"; import Image from "next/image"; import Link from "next/link"; import { motion } from "framer-motion"; export interface LogoItem { src: string; alt: string; href?: string; width?: number; height?: number; className?: string; } export interface TrustedClientsShowcaseProps { logos?: LogoItem[]; defaultHeight?: number; defaultWidth?: number; } export const TrustedClientsShowcase: React.FC = ({ logos = [ { src: "/slack.svg", alt: "Slack Logo", href: "https://slack.com", width: 46, height: 24, }, { src: "/amazon.svg", alt: "Amazon Logo", href: "https://amazon.com", width: 100, height: 24, }, { src: "https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg", alt: "GitHub Logo", href: "https://github.com", width: 54, height: 24, }, { src: "/playstation.svg", alt: "PlayStation Logo", href: "https://playstation.com", width: 64, height: 24, }, { src: "/ibm.svg", alt: "IBM Logo", href: "https://ibm.com", width: 80, height: 24, }, { src: "/ebay.svg", alt: "Ebay Logo", href: "https://ebay.com", width: 80, height: 24, }, { src: "/meta.svg", alt: "Meta Logo", href: "https://meta.com", width: 60, height: 24, }, { src: "/adobe.svg", alt: "Adobe Logo", href: "https://adobe.com", width: 46, height: 10, }, ], defaultHeight = 24, defaultWidth = 60, }) => { const containerVariants = { hidden: {}, visible: { transition: { staggerChildren: 0.1, }, }, }; const itemVariants = { hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, type: "spring", bounce: 0.3 }, }, }; return (

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

))}

); };

Prop	Type	Default	Description
`title`	`string`	`"Trusted by industry leaders"`	Main heading text
`clients`	`Client[]`	`defaultClients`	Array of client objects

Prop	Type	Description
`name`	`string`	Client company name
`logo`	`string`	Client logo image URL

Trusted Clients Showcase

Installation

Props

Client Interface