twotalesanimation
ef0c2ef78e
- Project cards stack credits under title on small screens - Fluid headings on /work and project pages; next-project banner wraps - Footer, back, award and nav links padded to ~44px touch targets - theRender.Fish marked as in-house project Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
52 lines
2.5 KiB
TypeScript
52 lines
2.5 KiB
TypeScript
import Link from "next/link";
|
|
import Laurel from "./Laurel";
|
|
import PlayReel from "./PlayReel";
|
|
import Reveal from "./Reveal";
|
|
import type { Award } from "@/content/site";
|
|
|
|
// Full-bleed award callout over a still from the nominated work.
|
|
export default function AwardBand({ award }: { award: Award }) {
|
|
return (
|
|
<section className="relative overflow-hidden border-y border-line">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={award.image} alt="" className="absolute inset-0 h-full w-full object-cover object-[70%_40%] opacity-60" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-ink via-ink/75 to-transparent" />
|
|
<div className="relative mx-auto grid max-w-7xl items-center gap-12 px-5 py-20 md:grid-cols-[auto_1fr] md:gap-16 md:px-8 md:py-28">
|
|
<Reveal>
|
|
<div className="relative mx-auto flex h-52 w-52 items-center justify-center text-accent md:h-64 md:w-64">
|
|
<Laurel className="absolute inset-0 h-full w-full" />
|
|
<div className="text-center">
|
|
<p className="font-mono text-[10px] tracking-[0.3em] text-muted uppercase">{award.edition}</p>
|
|
<p className="mt-1 font-display text-4xl font-light tracking-[0.15em] text-fg md:text-5xl">{award.body}</p>
|
|
<p className="mt-1 font-mono text-[10px] tracking-[0.3em] uppercase">{award.result}</p>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
<Reveal delay={120}>
|
|
<p className="font-mono text-xs tracking-[0.3em] text-accent uppercase">
|
|
{award.result} · {award.year}
|
|
</p>
|
|
<h2 className="mt-5 font-display text-4xl leading-tight font-thin uppercase md:text-6xl">
|
|
{award.category}
|
|
</h2>
|
|
<p className="mt-6 max-w-xl text-base leading-relaxed text-muted md:text-lg">
|
|
Our creature and simulation work on <span className="text-fg">{award.title}</span> was nominated at the{" "}
|
|
{award.longName}.
|
|
</p>
|
|
<div className="mt-10 flex flex-wrap items-center gap-6">
|
|
{award.reel && <PlayReel src={award.reel} poster={award.image} label="Watch the breakdown" />}
|
|
{award.project && (
|
|
<Link
|
|
href={`/work/${award.project}/`}
|
|
className="py-3.5 font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
|
|
>
|
|
See the project →
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|