36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import LoopCarousel from '@/components/ui/LoopCarousel';
|
|
|
|
export default function ClientLogosSection() {
|
|
return (
|
|
<div data-webild-section="client-logos" id="client-logos">
|
|
<section className="w-full py-16 bg-background border-t border-black/5 dark:border-white/5">
|
|
<div className="w-content-width mx-auto flex flex-col items-center">
|
|
<p className="text-sm font-medium text-accent mb-10 uppercase tracking-widest text-center">
|
|
Proudly serving top restaurants & cafes
|
|
</p>
|
|
<div className="w-full overflow-hidden" style={{ maskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)', WebkitMaskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)' }}>
|
|
<LoopCarousel>
|
|
<div className="flex items-center gap-16 md:gap-24 px-8">
|
|
{[
|
|
"The French Laundry",
|
|
"Balthazar",
|
|
"Tartine Bakery",
|
|
"Blue Hill",
|
|
"Le Bernardin",
|
|
"Eleven Madison Park",
|
|
"Alinea",
|
|
"Per Se"
|
|
].map((partner, i) => (
|
|
<span key={i} className="text-xl md:text-2xl font-bold text-foreground/30 whitespace-nowrap hover:text-foreground/80 transition-colors duration-300">
|
|
{partner}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</LoopCarousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
} |