59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useTranslations } from "next-intl";
|
|
import { certs } from "@/lib/demoData";
|
|
import { Award } from "lucide-react";
|
|
|
|
export function CertCard({ c, i }: { c: (typeof certs)[0]; i: number }) {
|
|
const t = useTranslations();
|
|
|
|
return (
|
|
<motion.article
|
|
initial={{ opacity: 0, y: 28 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.55, delay: i * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className="group flex flex-col rounded-2xl overflow-hidden p-5 bg-[#161514] border border-white/5 hover:border-red-600/20 transition-colors duration-300 w-full"
|
|
>
|
|
{/* Right: meta + actions */}
|
|
<div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
|
|
<div className="space-y-2">
|
|
{/* Badge row */}
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<div className="flex items-center gap-1.5">
|
|
<Award size={11} className="text-red-600 shrink-0" />
|
|
<span className="text-[10px] font-black uppercase tracking-widest text-red-600">
|
|
{t("about.certificatePage.card.badge")}
|
|
</span>
|
|
</div>
|
|
<span className="text-[10px] font-bold uppercase tracking-wider text-white/20 border border-white/10 px-2 py-0.5 rounded-full">
|
|
{c.category}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="font-bold text-sm md:text-base text-white leading-snug">
|
|
{c.title}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Divider ── */}
|
|
<div className="mx-4 h-px bg-white/5 my-5" />
|
|
|
|
{/* Collapsible document list */}
|
|
<div className="overflow-hidden">
|
|
<ul className="flex flex-col gap-2.5">
|
|
{c.documents.map((doc, di) => (
|
|
<li key={di} className="flex items-start gap-2.5">
|
|
<span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-600/60" />
|
|
<p className="text-xs text-gray-400 leading-relaxed">{doc}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</motion.article>
|
|
);
|
|
}
|