121 lines
6.0 KiB
TypeScript
121 lines
6.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { getPartners } from "@/app/actions";
|
|
import { motion } from "framer-motion";
|
|
import DynamicLogo from "./DynamicLogo";
|
|
import Link from "next/link";
|
|
|
|
export default function Partners() {
|
|
const [partners, setPartners] = useState<any[]>([]);
|
|
|
|
useEffect(() => {
|
|
async function fetchPartners() {
|
|
const data = await getPartners();
|
|
setPartners(data || []);
|
|
}
|
|
fetchPartners();
|
|
}, []);
|
|
|
|
if (partners.length === 0) return null;
|
|
|
|
return (
|
|
<section className="border-y border-black/10 bg-[#f5f5f0] overflow-hidden">
|
|
<div className="max-w-7xl mx-auto px-6 md:px-12 flex items-stretch min-h-[100px] md:min-h-[140px]">
|
|
{/* Left Label Section */}
|
|
<motion.div
|
|
initial={{ x: -20, opacity: 0 }}
|
|
whileInView={{ x: 0, opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
className="flex items-center gap-4 py-6 md:py-8 pr-8 border-r border-black/10 shrink-0"
|
|
>
|
|
<span className="text-[9px] md:text-[10px] tracking-[0.2em] uppercase text-black/30 font-bold">Partners</span>
|
|
</motion.div>
|
|
|
|
{/* Partners List Section */}
|
|
<div className="flex-1 flex items-center pl-4 md:pl-8 pr-4 md:pr-8 overflow-hidden">
|
|
<div className="flex flex-nowrap items-center justify-start w-full gap-4 md:gap-10">
|
|
{partners.slice(0, 5).map((partner, index) => {
|
|
const content = (
|
|
<motion.div
|
|
initial={{ y: 10, opacity: 0 }}
|
|
whileInView={{ y: 0, opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.1 + 0.5 }}
|
|
className="relative flex items-center justify-center group"
|
|
>
|
|
{partner.logo ? (
|
|
<div className="relative h-[60px] md:h-[75px] w-[90px] md:w-[130px] 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%]"
|
|
>
|
|
{/* Normal State */}
|
|
<div className="h-1/2 w-full flex items-center justify-center opacity-70">
|
|
<DynamicLogo
|
|
src={partner.logo}
|
|
color="black"
|
|
width="100%"
|
|
height="100%"
|
|
size="220%"
|
|
/>
|
|
</div>
|
|
{/* Hover State */}
|
|
<div className="h-1/2 w-full flex items-center justify-center">
|
|
<DynamicLogo
|
|
src={partner.logo}
|
|
color="#ff5c00" // primary color
|
|
width="100%"
|
|
height="100%"
|
|
size="220%"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
) : (
|
|
<span className="text-[14px] md:text-[18px] tracking-tight font-medium text-black/30 whitespace-nowrap">
|
|
{partner.name}
|
|
</span>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
|
|
if (partner.project_slug) {
|
|
return (
|
|
<Link key={index} href={`/works/${partner.project_slug}`}>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return <div key={index}>{content}</div>;
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right CTA Section */}
|
|
<motion.div
|
|
initial={{ x: 20, opacity: 0 }}
|
|
whileInView={{ x: 0, opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
className="flex items-center py-6 md:py-8 pl-8 border-l border-black/10 shrink-0"
|
|
>
|
|
<a
|
|
href="/partners"
|
|
className="text-[10px] md:text-[11px] tracking-[0.1em] font-bold uppercase text-black hover:text-primary transition-colors flex items-center gap-2 group"
|
|
>
|
|
Hepsini Gör
|
|
<motion.span
|
|
animate={{ x: [0, 5, 0] }}
|
|
transition={{ repeat: Infinity, duration: 2 }}
|
|
>
|
|
→
|
|
</motion.span>
|
|
</a>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|