Template
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import Image from 'next/image';
|
|
|
|
import { Marquee } from '@/components/ui/marquee';
|
|
|
|
const customerLogos = [
|
|
{
|
|
name: 'Next.js',
|
|
src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/nextjs-logo.svg',
|
|
width: 394,
|
|
height: 80,
|
|
},
|
|
{
|
|
name: 'OpenAI',
|
|
src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/openai-logo.svg',
|
|
width: 512,
|
|
height: 126,
|
|
},
|
|
{
|
|
name: 'Stripe',
|
|
src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/stripe-logo.svg',
|
|
width: 73,
|
|
height: 31,
|
|
},
|
|
{
|
|
name: 'Vercel',
|
|
src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/vercel-logo.svg',
|
|
width: 2048,
|
|
height: 407,
|
|
},
|
|
{
|
|
name: 'Supabase',
|
|
src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/supabase-logo.svg',
|
|
width: 581,
|
|
height: 113,
|
|
},
|
|
{
|
|
name: 'Anthropic',
|
|
src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/anthropic-logo.svg',
|
|
width: 579,
|
|
height: 65,
|
|
},
|
|
{
|
|
name: 'Tailwind CSS',
|
|
src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/tailwindcss-logo.svg',
|
|
width: 665,
|
|
height: 82,
|
|
},
|
|
{
|
|
name: 'Linear',
|
|
src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/linear-logo.svg',
|
|
width: 122,
|
|
height: 31,
|
|
},
|
|
];
|
|
|
|
export function LogoCloud() {
|
|
return (
|
|
<section className="border-y border-white/10 bg-white/[0.02]">
|
|
<div className="mx-auto max-w-6xl px-6 py-12">
|
|
<p className="text-center text-xs font-medium uppercase tracking-[0.2em] text-white/40">
|
|
Trusted by fast-moving teams shipping to millions
|
|
</p>
|
|
<div className="relative mt-8 overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]">
|
|
<Marquee pauseOnHover className="[--duration:40s] [--gap:4rem]">
|
|
{customerLogos.map((logo) => (
|
|
<div
|
|
key={logo.name}
|
|
className="group flex h-12 items-center justify-center px-2"
|
|
>
|
|
<Image
|
|
src={logo.src}
|
|
alt={`${logo.name} logo`}
|
|
width={logo.width}
|
|
height={logo.height}
|
|
unoptimized
|
|
className="h-7 w-[120px] max-w-full object-contain opacity-40 brightness-0 invert transition-opacity duration-200 group-hover:opacity-80"
|
|
/>
|
|
</div>
|
|
))}
|
|
</Marquee>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|