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>
38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Filmography from "@/components/Filmography";
|
|
import ProjectCard from "@/components/ProjectCard";
|
|
import Reveal from "@/components/Reveal";
|
|
import SectionLabel from "@/components/SectionLabel";
|
|
import { projects } from "@/content/site";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Work",
|
|
description: "Selected visual effects work by Two Tales VFX across series, film, commercials and animation.",
|
|
};
|
|
|
|
export default function WorkPage() {
|
|
return (
|
|
<div className="mx-auto max-w-7xl px-5 pt-36 pb-24 md:px-8 md:pt-48 md:pb-36">
|
|
<SectionLabel index="—">Work</SectionLabel>
|
|
<h1 className="font-display text-[clamp(2.75rem,15vw,8rem)] leading-[0.9] font-thin uppercase">
|
|
Selected <span className="font-light">work</span>
|
|
</h1>
|
|
<section id="filmography" className="mt-20">
|
|
<SectionLabel index="—">Filmography</SectionLabel>
|
|
<Filmography />
|
|
</section>
|
|
|
|
<section id="projects" className="mt-32 border-t border-line pt-20 md:mt-44">
|
|
<SectionLabel index="—">Projects</SectionLabel>
|
|
<div className="grid gap-x-8 gap-y-16 md:grid-cols-2">
|
|
{projects.map((p, i) => (
|
|
<Reveal key={p.slug} delay={(i % 2) * 120}>
|
|
<ProjectCard project={p} />
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|