93 lines
4.8 KiB
TypeScript
93 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import DynamicLogo from "./DynamicLogo";
|
|
import Link from "next/link";
|
|
|
|
interface Partner {
|
|
id: number;
|
|
name: string;
|
|
logo?: string;
|
|
url?: string;
|
|
project_slug?: string;
|
|
}
|
|
|
|
export default function PartnersList({ partners }: { partners: Partner[] }) {
|
|
return (
|
|
<section className="py-24 px-6 md:px-12">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 border-t border-l border-black/10">
|
|
{partners.map((partner, index) => {
|
|
const card = (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.05 }}
|
|
className="p-4 md:p-8 border-r border-b border-black/10 flex items-center justify-center transition-all group relative bg-white/10 overflow-hidden cursor-pointer"
|
|
>
|
|
<div className="relative h-[140px] md:h-[180px] w-full overflow-hidden">
|
|
<motion.div
|
|
whileHover={{ y: "-50%" }}
|
|
transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
|
|
className="flex flex-col items-center h-[200%]"
|
|
>
|
|
{/* First state */}
|
|
<div className="h-1/2 w-full flex items-center justify-center opacity-70 group-hover:opacity-100 transition-all">
|
|
{partner.logo ? (
|
|
<DynamicLogo
|
|
src={partner.logo}
|
|
color="black"
|
|
width="100%"
|
|
height="100%"
|
|
size="140%"
|
|
/>
|
|
) : (
|
|
<span className="editorial-headline text-xl md:text-2xl text-black uppercase">
|
|
{partner.name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Second state (Slot effect) */}
|
|
<div className="h-1/2 w-full flex items-center justify-center">
|
|
{partner.logo ? (
|
|
<DynamicLogo
|
|
src={partner.logo}
|
|
color="#ff5c00" // primary color
|
|
width="100%"
|
|
height="100%"
|
|
size="140%"
|
|
/>
|
|
) : (
|
|
<span className="editorial-headline text-xl md:text-2xl text-primary uppercase">
|
|
{partner.name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Subtle diagonal hover effect */}
|
|
<div className="absolute top-0 right-0 w-8 h-8 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
|
|
<div className="absolute top-0 right-0 w-px h-12 bg-black/5 rotate-[-45deg] origin-top-right" />
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
|
|
if (partner.project_slug) {
|
|
return (
|
|
<Link key={partner.id} href={`/works/${partner.project_slug}`} className="block">
|
|
{card}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return <div key={partner.id}>{card}</div>;
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|