yslootahrobotics/.claude/skills/premium-frontend-designer/snippets/CertificateGallery.tsx

"use client";

/**
 * 4-image certificate gallery — each tile links to a PDF in a new tab.
 *
 * Expected data shape:
 *   export type CertPage = {
 *     src: string;       // /images/certifications/page.jpg
 *     alt: string;
 *     title: string;     // ISCC Certificate 2025
 *     page: string;      // Page 1 · Annex
 *     document: string;  // ISCC Certificate
 *     href: string;      // /documents/certifications/iscc.pdf  OR  upstream URL
 *   };
 *   export const certificatePages: CertPage[] = [ ... ];
 */
import Image from "next/image";
import { ArrowUpRight, FileText } from "lucide-react";
import { motion, type Variants } from "framer-motion";

export type CertPage = {
  src: string;
  alt: string;
  title: string;
  page: string;
  document: string;
  href: string;
};

const grid: Variants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.08, delayChildren: 0.15 } },
};
const cell: Variants = {
  hidden: { opacity: 0, y: 24, filter: "blur(6px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
  },
};

export function CertificateGallery({ pages }: { pages: CertPage[] }) {
  return (
    <motion.div
      variants={grid}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, amount: 0.1 }}
      className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4 lg:gap-6"
    >
      {pages.map((p) => (
        <motion.div key={p.src} variants={cell}>
          <CertCard {...p} />
        </motion.div>
      ))}
    </motion.div>
  );
}

function CertCard({ src, alt, title, page, document, href }: CertPage) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={`${title} — ${page}. Opens PDF in a new tab.`}
      className="group relative isolate flex h-full flex-col overflow-hidden rounded-2xl border border-bone/10 bg-graphite/40 backdrop-blur-sm transition-all duration-500 hover:-translate-y-1 hover:border-gold/35 hover:bg-graphite/60 focus:outline-none focus-visible:border-gold/60 focus-visible:ring-2 focus-visible:ring-gold/40"
    >
      <div className="relative aspect-[3/4] w-full overflow-hidden bg-obsidian">
        <Image
          src={src}
          alt={alt}
          fill
          sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
          className="object-cover object-top transition-transform duration-[1200ms] ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-[1.04]"
        />
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-obsidian/70 via-obsidian/20 to-transparent"
        />
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-obsidian/80 via-obsidian/30 to-transparent"
        />
        <span className="absolute left-3 top-3 inline-flex items-center gap-2 rounded-full border border-gold/30 bg-obsidian/70 px-3 py-1 font-mono text-[10px] uppercase tracking-[0.22em] text-gold-light backdrop-blur">
          <span className="size-1 rounded-full bg-gold-light shadow-[0_0_8px_rgba(242,194,91,0.8)]" />
          {page}
        </span>
        <span className="absolute right-3 top-3 grid size-9 place-items-center rounded-full border border-bone/20 bg-obsidian/70 text-mist backdrop-blur transition-all duration-500 group-hover:-translate-y-0.5 group-hover:border-gold/50 group-hover:text-gold-light">
          <ArrowUpRight className="size-4" />
        </span>
        <div
          aria-hidden
          className="pointer-events-none absolute -bottom-16 -right-16 size-48 rounded-full opacity-0 blur-3xl transition-opacity duration-700 group-hover:opacity-100"
          style={{
            background:
              "radial-gradient(circle, rgba(212,164,55,0.32), transparent 70%)",
          }}
        />
        <span
          aria-hidden
          className="pointer-events-none absolute inset-0 rounded-t-2xl border border-transparent transition-colors duration-500 group-hover:border-gold/40"
        />
      </div>
      <div className="relative flex flex-col gap-2 p-5 md:p-6">
        <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-gold-light">
          {document}
        </span>
        <h4 className="font-display text-lg text-bone text-balance transition-colors duration-500 group-hover:text-gold-light md:text-xl">
          {title}
        </h4>
        <div className="mt-1 inline-flex items-center gap-2 text-xs text-mist">
          <FileText className="size-3.5 text-gold-light" />
          <span>Open PDF</span>
        </div>
      </div>
      <span
        aria-hidden
        className="pointer-events-none absolute bottom-0 left-0 h-px w-0 bg-gradient-to-r from-gold via-gold-light to-transparent transition-all duration-700 group-hover:w-full"
      />
    </a>
  );
}