75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
interface LogoItem {
|
|
name: string;
|
|
color: string;
|
|
}
|
|
|
|
export const AI_TOOLS: LogoItem[] = [
|
|
{ name: "ChatGPT", color: "bg-green-400" },
|
|
{ name: "Claude", color: "bg-purple-400" },
|
|
{ name: "Gemini", color: "bg-blue-400" },
|
|
{ name: "n8n", color: "bg-orange-400" },
|
|
{ name: "Make", color: "bg-violet-400" },
|
|
{ name: "Zapier", color: "bg-yellow-400" },
|
|
{ name: "LangChain", color: "bg-emerald-400" },
|
|
{ name: "OpenAI", color: "bg-cyan-400" },
|
|
];
|
|
|
|
export const PLATFORMS: LogoItem[] = [
|
|
{ name: "HubSpot", color: "bg-orange-400" },
|
|
{ name: "Salesforce", color: "bg-sky-400" },
|
|
{ name: "Monday", color: "bg-red-400" },
|
|
{ name: "Notion", color: "bg-gray-300" },
|
|
{ name: "Sheets", color: "bg-green-400" },
|
|
{ name: "Slack", color: "bg-purple-400" },
|
|
{ name: "Airtable", color: "bg-cyan-400" },
|
|
{ name: "Jira", color: "bg-blue-400" },
|
|
];
|
|
|
|
function LogoBadge({ name, color }: LogoItem) {
|
|
return (
|
|
<div className="flex-shrink-0 h-14 px-6 rounded-full border border-gray-700/50 bg-gray-800/70 backdrop-blur-sm flex items-center gap-3">
|
|
<div className={`w-2.5 h-2.5 rounded-full ${color}`} />
|
|
<span className="text-gray-200 font-medium text-sm whitespace-nowrap">{name}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function LogoCarousel({
|
|
title,
|
|
subtitle,
|
|
logos,
|
|
reverse = false,
|
|
}: {
|
|
title: string;
|
|
subtitle: string;
|
|
logos: LogoItem[];
|
|
reverse?: boolean;
|
|
}) {
|
|
const doubled = [...logos, ...logos];
|
|
|
|
return (
|
|
<section className="py-14 overflow-hidden bg-gray-950">
|
|
<div className="max-w-5xl mx-auto text-center mb-8 px-4">
|
|
<h3 className="text-xl font-semibold text-white mb-1">{title}</h3>
|
|
<p className="text-gray-500 text-sm">{subtitle}</p>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-gray-950 via-gray-950/70 to-transparent z-10 pointer-events-none" />
|
|
<div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-gray-950 via-gray-950/70 to-transparent z-10 pointer-events-none" />
|
|
<div
|
|
className="flex gap-4 w-max"
|
|
style={{
|
|
animation: `${reverse ? "carousel-right" : "carousel-left"} 40s linear infinite`,
|
|
}}
|
|
>
|
|
{doubled.map((logo, i) => (
|
|
<LogoBadge key={i} name={logo.name} color={logo.color} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|