first commit
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import type { Locale } from "@/i18n-config";
|
||||
|
||||
const expo = [0.16, 1, 0.3, 1] as [number, number, number, number];
|
||||
|
||||
export default function PartnersClient({
|
||||
lang,
|
||||
dict,
|
||||
initialPartners,
|
||||
}: {
|
||||
lang: Locale;
|
||||
dict: any;
|
||||
initialPartners?: any[];
|
||||
}) {
|
||||
const partners = initialPartners && initialPartners.length > 0 ? initialPartners : (dict.partners.items as any[]);
|
||||
|
||||
return (
|
||||
<div className="bg-[#F4F0E8] text-[#0A0A0A] font-body min-h-screen">
|
||||
<Header lang={lang} dict={dict.nav} />
|
||||
|
||||
<main className="pt-32 pb-24 px-6 max-w-7xl mx-auto">
|
||||
{/* Title Header Block */}
|
||||
<div className="border-b border-[#C8C2B8] pb-12 mb-16">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-3 h-3 bg-[#FFE600]" />
|
||||
<span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">
|
||||
{dict.partners.badge}
|
||||
</span>
|
||||
</div>
|
||||
<motion.h1
|
||||
className="font-display font-black text-5xl sm:text-6xl lg:text-8xl uppercase leading-[0.85] tracking-tight"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: expo }}
|
||||
>
|
||||
{dict.partners.title}
|
||||
</motion.h1>
|
||||
<p className="text-[#6A6460] mt-6 text-lg max-w-3xl font-light">
|
||||
{dict.partners.desc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Dynamic partners brutalist card grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-[#C8C2B8] border border-[#C8C2B8]">
|
||||
{partners.map((partner, idx) => (
|
||||
<motion.div
|
||||
key={partner.name}
|
||||
className="group bg-[#F4F0E8] p-8 relative overflow-hidden transition-all duration-300 flex flex-col h-full cursor-default"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: idx * 0.08 }}
|
||||
whileHover={{ backgroundColor: "#EDE8E0" }}
|
||||
>
|
||||
{/* Monogram Badge */}
|
||||
<div className="w-14 h-14 mb-8 border border-[#C8C2B8] group-hover:border-[#0A0A0A] group-hover:bg-[#0A0A0A] group-hover:text-[#FFE600] transition-all flex items-center justify-center font-display font-black text-sm text-[#8A8480] bg-[#F4F0E8] select-none">
|
||||
{partner.mono}
|
||||
</div>
|
||||
|
||||
{/* Title & Tag */}
|
||||
<h3 className="font-display font-black text-xl uppercase text-[#0A0A0A] mb-1">
|
||||
{partner.name}
|
||||
</h3>
|
||||
<p className="font-mono text-[9px] tracking-[0.2em] uppercase text-[#FF4500] mb-5 font-bold">
|
||||
{partner.tag}
|
||||
</p>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-[#7A7470] text-[13px] leading-relaxed mb-8 flex-grow">
|
||||
{partner.desc}
|
||||
</p>
|
||||
|
||||
{/* Establishment Year details bar */}
|
||||
<div className="pt-4 border-t border-[#C8C2B8] flex justify-between items-center mt-auto">
|
||||
<span className="font-mono text-[9px] text-[#A0998E]">PARTNERSHIP</span>
|
||||
<span className="font-mono text-[9px] text-[#0A0A0A] font-bold">[ EST. {partner.year} ]</span>
|
||||
</div>
|
||||
|
||||
{/* Interactive bottom corner ribbon */}
|
||||
<div className="absolute bottom-0 right-0 w-0 h-0 group-hover:w-8 group-hover:h-8 bg-[#FFE600] transition-all duration-300" />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer lang={lang} dict={dict} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user