Add real studio content: Festo F1 film, filmography, service stills

From the Dec 2024 company profile: Pretoria location, founding year, service
list with stills, and 14 film/series credits with posters. Festo F1 spot
transcoded for web (cropped letterbox, 14 MB, faststart).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# source media (web versions live in public/)
+content/*.mp4
+content/*.pdf

app/page.tsx

@@ -1,15 +1,15 @@
-import Link from "next/link";
+import Filmography from "@/components/Filmography";
 import Hero from "@/components/Hero";
 import ProjectCard from "@/components/ProjectCard";
 import Reveal from "@/components/Reveal";
 import SectionLabel from "@/components/SectionLabel";
-import { projects, services, site, stats } from "@/content/site";
+import { filmography, projects, services, site, stats, studioStills } from "@/content/site";
 
 const pipeline = [
   { step: "Breakdown", body: "Script and plate breakdowns, bids and a shot list everyone agrees on." },
-  { step: "Build", body: "Assets, environments and lookdev, approved in context, not in isolation." },
+  { step: "Build", body: "Assets, creatures and environments, approved in context, not in isolation." },
   { step: "Shot", body: "Artists work in tracked versions, reviewed daily on our own review platform." },
-  { step: "QC", body: "Every EXR is checked automatically for frame range, NaNs, dead pixels and colour space before a human signs off." },
+  { step: "QC", body: "Renders are checked automatically for frame range, bad pixels and colour space before a human signs off." },
   { step: "Deliver", body: "Spec-correct, frame-accurate deliveries with full shot metadata." },
 ];
 
@@ -28,42 +28,66 @@ export default function Home() {
             </Reveal>
           ))}
         </div>
-        <div className="mt-20 flex justify-center">
-          <Link
-            href="/work/"
-            className="border border-white/25 px-8 py-4 font-mono text-xs tracking-[0.2em] uppercase transition-colors hover:border-accent hover:text-accent"
-          >
-            All projects →
-          </Link>
+      </section>
+
+      {/* Filmography */}
+      <section id="filmography" className="border-t border-line">
+        <div className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
+          <SectionLabel index="02">Filmography</SectionLabel>
+          <div className="mb-14 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
+            <Reveal>
+              <h2 className="max-w-3xl font-display text-4xl leading-tight font-thin uppercase md:text-6xl">
+                {filmography.length} titles. <span className="font-light">Seen</span> across the world.
+              </h2>
+            </Reveal>
+            <p className="max-w-sm text-sm leading-relaxed text-muted">
+              Visual effects for features and series from South Africa and Nigeria, released in cinemas and on
+              Netflix, Prime Video and M-Net.
+            </p>
+          </div>
+          <Filmography />
         </div>
       </section>
 
       {/* Services */}
       <section id="services" className="border-t border-line bg-ink-2">
         <div className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
-          <SectionLabel index="02">Services</SectionLabel>
+          <SectionLabel index="03">Services</SectionLabel>
           <Reveal>
             <h2 className="max-w-4xl font-display text-4xl leading-tight font-thin uppercase md:text-6xl">
-              From first breakdown to final <span className="text-accent">delivery</span>.
+              From photoreal <span className="text-accent">VFX</span> to stylised animation.
             </h2>
           </Reveal>
-          <div className="mt-16 grid border-t border-l border-line sm:grid-cols-2 lg:grid-cols-3">
-            {services.map((s, i) => (
-              <Reveal key={s.code} delay={(i % 3) * 100} className="border-r border-b border-line">
-                <div className="group h-full p-8 transition-colors hover:bg-white/[0.02] md:p-10">
-                  <span className="font-mono text-xs text-accent">{s.code}</span>
-                  <h3 className="mt-6 font-display text-2xl font-light tracking-wide uppercase">{s.title}</h3>
-                  <p className="mt-4 text-sm leading-relaxed text-muted">{s.body}</p>
-                </div>
-              </Reveal>
-            ))}
-          </div>
+          {services.map((g) => (
+            <div key={g.group} className="mt-16">
+              <h3 className="mb-6 font-mono text-xs tracking-[0.3em] text-accent uppercase">{g.group}</h3>
+              <div className="grid grid-cols-2 gap-px bg-line md:grid-cols-3 [&>*:last-child:nth-child(odd)]:col-span-2 md:[&>*:last-child:nth-child(odd)]:col-span-1">
+                {g.items.map((s, i) => (
+                  <Reveal key={s.title} delay={(i % 3) * 80} className="bg-ink-2">
+                    <div className="group relative aspect-[16/9] overflow-hidden md:aspect-[2.2/1]">
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      <img
+                        src={s.image}
+                        alt=""
+                        loading="lazy"
+                        className="h-full w-full object-cover opacity-70 transition duration-700 ease-out group-hover:scale-105 group-hover:opacity-100"
+                      />
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/10 to-transparent" />
+                      <p className="absolute bottom-3 left-4 font-display text-base font-light tracking-[0.08em] uppercase md:bottom-5 md:left-5 md:text-xl">
+                        {s.title}
+                      </p>
+                    </div>
+                  </Reveal>
+                ))}
+              </div>
+            </div>
+          ))}
         </div>
       </section>
 
       {/* Studio / pipeline */}
       <section id="studio" className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
-        <SectionLabel index="03">Studio</SectionLabel>
+        <SectionLabel index="04">Studio</SectionLabel>
         <div className="grid gap-16 lg:grid-cols-2">
           <Reveal>
             <h2 className="font-display text-4xl leading-tight font-thin uppercase md:text-6xl">
@@ -72,16 +96,23 @@ export default function Home() {
             </h2>
             <div className="mt-8 space-y-5 text-base leading-relaxed text-muted md:text-lg">
               <p>
-                Two Tales started in {site.founded} as an animation studio. A decade later we&apos;re a visual
-                effects house that still thinks like animators: every frame is performance, every shot is story.
+                Founded in {site.founded} in Pretoria as Two Tales Animation, we bring stories to life with
+                creativity, technology and a passion for visual storytelling, from photoreal creatures and
+                simulations to stylised character animation.
               </p>
               <p>
-                We&apos;re small on purpose. Senior artists, direct lines to supervisors, and an in-house pipeline
-                (review, shot tracking and automated QC) that lets a tight team deliver like a big one.
+                We&apos;re small on purpose: senior artists, direct lines to supervisors, and an in-house pipeline
+                for review, shot tracking and automated QC that lets a tight team deliver like a big one.
               </p>
             </div>
+            <div className="mt-10 grid grid-cols-2 gap-2">
+              {studioStills.map((src) => (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img key={src} src={src} alt="" loading="lazy" className="aspect-[2.39/1] w-full object-cover" />
+              ))}
+            </div>
           </Reveal>
-          <ol className="relative border-l border-line">
+          <ol className="relative self-start border-l border-line">
             {pipeline.map((p, i) => (
               <Reveal key={p.step} delay={i * 80}>
                 <li className="relative pb-10 pl-10 last:pb-0">
@@ -114,7 +145,7 @@ export default function Home() {
           aria-hidden="true"
         />
         <div className="relative mx-auto max-w-7xl px-5 py-28 text-center md:px-8 md:py-44">
-          <SectionLabel index="04" className="justify-center">
+          <SectionLabel index="05" className="justify-center">
             Contact
           </SectionLabel>
           <Reveal>
@@ -128,7 +159,7 @@ export default function Home() {
             </p>
             <a
               href={`mailto:${site.email}?subject=New%20project%20enquiry`}
-              className="mt-12 inline-block border-b border-accent pb-2 font-display text-2xl font-light tracking-wider break-all transition-colors hover:text-accent md:text-4xl"
+              className="mt-12 inline-block border-b border-accent pb-2 font-display text-xl font-light tracking-wider break-all transition-colors hover:text-accent md:text-4xl"
             >
               {site.email}
             </a>

app/work/[slug]/page.tsx

@@ -17,7 +17,7 @@ export async function generateMetadata({ params }: PageProps<"/work/[slug]">): P
   return { title: project.title, description: project.summary };
 }
 
-function Video({ src, title }: { src: string; title: string }) {
+function Video({ src, title, poster }: { src: string; title: string; poster?: string }) {
   if (/vimeo\.com|youtube\.com|youtu\.be/.test(src)) {
     return (
       <iframe
@@ -29,7 +29,7 @@ function Video({ src, title }: { src: string; title: string }) {
       />
     );
   }
-  return <video src={src} className="aspect-video w-full bg-black" controls playsInline />;
+  return <video src={src} poster={poster} className="w-full bg-black" controls playsInline preload="metadata" />;
 }
 
 export default async function ProjectPage({ params }: PageProps<"/work/[slug]">) {
@@ -43,7 +43,6 @@ export default async function ProjectPage({ params }: PageProps<"/work/[slug]">)
     { k: "Client", v: project.client },
     { k: "Year", v: String(project.year) },
     { k: "Type", v: project.category },
-    ...(project.shots ? [{ k: "Shots", v: String(project.shots) }] : []),
   ];
 
   return (
@@ -59,9 +58,18 @@ export default async function ProjectPage({ params }: PageProps<"/work/[slug]">)
       </div>
 
       <div className="mx-auto mt-12 max-w-7xl px-5 md:px-8">
-        {project.video ? <Video src={project.video} title={project.title} /> : <Frame project={project} priority />}
+        {project.video ? <Video src={project.video} title={project.title} poster={project.image} /> : <Frame project={project} priority />}
       </div>
 
+      {project.gallery && (
+        <div className="mx-auto mt-2 grid max-w-7xl gap-2 px-5 md:grid-cols-2 md:px-8">
+          {project.gallery.map((src) => (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img key={src} src={src} alt={`${project.title} still`} loading="lazy" className="w-full" />
+          ))}
+        </div>
+      )}
+
       <div className="mx-auto grid max-w-7xl gap-12 px-5 py-20 md:grid-cols-[1fr_2fr] md:px-8 md:py-28">
         <dl className="grid grid-cols-2 gap-6 self-start md:grid-cols-1">
           {meta.map((m) => (

app/work/page.tsx

@@ -1,4 +1,5 @@
 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";
@@ -23,6 +24,11 @@ export default function WorkPage() {
           </Reveal>
         ))}
       </div>
+
+      <section id="filmography" className="mt-32 border-t border-line pt-20 md:mt-44">
+        <SectionLabel index="—">Filmography</SectionLabel>
+        <Filmography />
+      </section>
     </div>
   );
 }

components/Filmography.tsx

@@ -0,0 +1,38 @@
+import Reveal from "./Reveal";
+import { filmography } from "@/content/site";
+
+export default function Filmography() {
+  return (
+    <ul className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 lg:gap-x-5">
+      {filmography.map((c, i) => (
+        <li key={c.slug}>
+          <Reveal delay={(i % 7) * 60}>
+            <figure className="group">
+              <div className="relative aspect-[2/3] overflow-hidden bg-ink-2 ring-1 ring-line">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={c.poster}
+                  alt={`${c.title} poster`}
+                  loading="lazy"
+                  className="h-full w-full object-cover grayscale-[35%] transition duration-700 ease-out group-hover:scale-[1.04] group-hover:grayscale-0"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+                {c.network && (
+                  <span className="absolute top-2 left-2 bg-black/70 px-1.5 py-0.5 font-mono text-[9px] tracking-[0.2em] text-fg uppercase backdrop-blur-sm">
+                    {c.network}
+                  </span>
+                )}
+              </div>
+              <figcaption className="mt-3">
+                <p className="text-sm leading-snug">{c.title}</p>
+                <p className="mt-1 font-mono text-[10px] tracking-[0.2em] text-muted uppercase">
+                  {c.year} · {c.format}
+                </p>
+              </figcaption>
+            </figure>
+          </Reveal>
+        </li>
+      ))}
+    </ul>
+  );
+}

components/Frame.tsx

@@ -22,16 +22,15 @@ export default function Frame({ project, priority = false }: { project: Project;
               radial-gradient(ellipse 50% 60% at 20% 30%, hsl(${(h + 40) % 360} 60% 30% / .5), transparent 70%),
               linear-gradient(180deg, hsl(${h} 25% 9%), hsl(${h} 30% 4%))`,
           }}
-        >
-          <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-black/70 to-transparent" />
-        </div>
+        />
       )}
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-black/50 to-transparent" />
       <div className="pointer-events-none absolute inset-[6%] border border-white/10" />
-      <div className="pointer-events-none absolute top-3 left-4 font-mono text-[10px] tracking-widest text-white/50 uppercase">
+      <div className="pointer-events-none absolute top-3 left-4 font-mono text-[10px] tracking-widest text-white/60 uppercase">
         {project.category} · {project.year}
       </div>
-      <div className="pointer-events-none absolute top-3 right-4 font-mono text-[10px] tracking-widest text-white/50">
-        {project.shots ? `${project.shots} SHOTS` : "2.39:1"}
+      <div className="pointer-events-none absolute top-3 right-4 font-mono text-[10px] tracking-widest text-white/60 uppercase">
+        {project.video ? "▶ Film" : "Still"}
       </div>
     </div>
   );

components/Header.tsx

@@ -29,7 +29,7 @@ export default function Header() {
       <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-5 md:h-20 md:px-8">
         <Link href="/" className="flex items-center gap-3" onClick={() => setOpen(false)}>
           <Fox className="h-7 w-7 text-fg md:h-8 md:w-8" />
-          <span className="font-display text-base font-light tracking-[0.3em] uppercase md:text-lg">
+          <span className="font-display text-sm font-light tracking-[0.22em] whitespace-nowrap uppercase md:text-lg md:tracking-[0.3em]">
             Two Tales <span className="text-accent">VFX</span>
           </span>
         </Link>

components/ProjectCard.tsx

@@ -13,7 +13,7 @@ export default function ProjectCard({ project }: { project: Project }) {
           </h3>
           <p className="mt-1 text-sm text-muted">{project.client}</p>
         </div>
-        <p className="shrink-0 pt-2 text-right font-mono text-[11px] tracking-widest text-muted uppercase">
+        <p className="max-w-[45%] pt-2 text-right font-mono text-[11px] tracking-widest text-muted uppercase">
           {project.credits.slice(0, 2).join(" / ")}
         </p>
       </div>

content/site.ts

@@ -1,19 +1,20 @@
-// All editable site copy lives here. Anything marked TODO is placeholder
-// content that should be replaced with real studio information before launch.
+// All editable site copy lives here. Facts come from the Dec 2024 company
+// profile (content/TT_Company_profile.pdf). Items marked TODO need confirming.
 
 export const site = {
   name: "Two Tales VFX",
   shortName: "TTVFX",
   url: "https://ttvfx.com",
-  founded: 2015,
+  // TODO: company profile says founded 2014; the logo lockup says "Est. 2015".
+  founded: 2014,
   tagline: "Invisible work. Unforgettable frames.",
   description:
-    "Two Tales VFX is an independent visual effects studio crafting compositing, CG and finishing for series, film and commercials.",
-  // TODO: confirm the public contact address and location.
-  email: "hello@ttvfx.com",
-  location: "South Africa",
-  // Optional showreel. Drop an MP4 at public/reel.mp4 (and a poster frame at
-  // public/reel-poster.jpg) and set this to "/reel.mp4" to play it in the hero.
+    "Two Tales VFX is a 3D animation and visual effects studio in Pretoria, South Africa, crafting VFX for film, series and commercials for clients across the globe.",
+  // TODO: switch to an @ttvfx.com address once the domain's mail is set up.
+  email: "chris@twotalesanimation.com",
+  location: "Pretoria, South Africa",
+  // Optional studio showreel for the home hero: drop public/reel.mp4 and set
+  // this to "/reel.mp4" (and reelPoster to a still).
   reel: null as string | null,
   reelPoster: null as string | null,
   socials: [
@@ -23,49 +24,80 @@ export const site = {
 
 export const nav = [
   { label: "Work", href: "/work/" },
+  { label: "Filmography", href: "/#filmography" },
   { label: "Services", href: "/#services" },
-  { label: "Studio", href: "/#studio" },
   { label: "Contact", href: "/#contact" },
 ];
 
-export const services = [
+export type Service = { title: string; image: string };
+
+export const services: { group: string; items: Service[] }[] = [
   {
-    code: "01",
-    title: "Compositing",
-    body: "Plate-driven, photoreal integration. Keying, set extensions, CG integration, sky replacements and the hundreds of invisible fixes that hold a cut together.",
+    group: "Visual Effects",
+    items: [
+      { title: "Creature Effects", image: "/capabilities/creature.jpg" },
+      { title: "Set Extensions", image: "/capabilities/set-extension.jpg" },
+      { title: "Volume Simulations", image: "/capabilities/volume-sim.jpg" },
+      { title: "Fluid Simulations", image: "/capabilities/fluid-sim.jpg" },
+      { title: "Screen Replacements", image: "/capabilities/screen-replacement.jpg" },
+      { title: "Clean Up & Removals", image: "/capabilities/cleanup.jpg" },
+      { title: "Compositing", image: "/capabilities/compositing.jpg" },
+      { title: "Green Screen", image: "/capabilities/green-screen.jpg" },
+      { title: "Gun Effects", image: "/capabilities/gun-fx.jpg" },
+    ],
   },
   {
-    code: "02",
-    title: "CG & Environments",
-    body: "Assets, look development, lighting and rendering, from hero props to full digital environments built to sit inside live-action photography.",
-  },
-  {
-    code: "03",
-    title: "Paint, Roto & Cleanup",
-    body: "Rig and wire removal, beauty work, logo replacement and precise roto. Tracked, QC'd and delivered to spec.",
-  },
-  {
-    code: "04",
-    title: "Animation",
-    body: "Character and motion work rooted in a decade of animation production as Two Tales Animation.",
-  },
-  {
-    code: "05",
-    title: "Supervision",
-    body: "On-set and remote VFX supervision, bidding and breakdowns, so problems are solved before the camera rolls.",
-  },
-  {
-    code: "06",
-    title: "Pipeline & Delivery",
-    body: "In-house review, tracking and automated QC tooling. ACES colour-managed EXR workflows and frame-accurate, spec-checked deliveries.",
+    group: "3D Animation",
+    items: [
+      { title: "Character Creation", image: "/capabilities/character-creation.jpg" },
+      { title: "Character Animation", image: "/capabilities/character-animation.jpg" },
+      { title: "Product Visualisation", image: "/capabilities/product-viz.jpg" },
+    ],
   },
 ];
 
+// Stills used in the studio section collage.
+export const studioStills = [
+  "/capabilities/explosion.jpg",
+  "/capabilities/penguins.jpg",
+  "/capabilities/shark.jpg",
+  "/capabilities/penguin-box.jpg",
+];
+
+export type Credit = {
+  slug: string;
+  title: string;
+  year: number;
+  format: "Feature" | "Series";
+  network?: string;
+  poster: string;
+};
+
+// Selected film & series credits, newest first.
+export const filmography: Credit[] = [
+  { slug: "som-van-twee", title: "Som van Twee", year: 2024, format: "Feature", poster: "/film/som-van-twee.jpg" },
+  { slug: "oloture-the-journey", title: "Òlòtūré: The Journey", year: 2024, format: "Series", network: "Netflix", poster: "/film/oloture-the-journey.jpg" },
+  { slug: "funmilayo-ransome-kuti", title: "Funmilayo Ransome-Kuti", year: 2024, format: "Feature", poster: "/film/funmilayo-ransome-kuti.jpg" },
+  { slug: "summertide", title: "Summertide", year: 2024, format: "Series", network: "M-Net", poster: "/film/summertide.jpg" },
+  { slug: "war-wrath-and-revenge", title: "WAR: Wrath and Revenge", year: 2023, format: "Series", network: "Netflix", poster: "/film/war-wrath-and-revenge.jpg" },
+  { slug: "little-big-mouth", title: "Little Big Mouth", year: 2021, format: "Feature", network: "Netflix", poster: "/film/little-big-mouth.jpg" },
+  { slug: "vergeet-my-nie", title: "Vergeet My Nie", year: 2020, format: "Feature", poster: "/film/vergeet-my-nie.jpg" },
+  { slug: "toorbos", title: "Toorbos", year: 2019, format: "Feature", poster: "/film/toorbos.jpg" },
+  { slug: "fiela-se-kind", title: "Fiela se Kind", year: 2019, format: "Feature", poster: "/film/fiela-se-kind.jpg" },
+  { slug: "ander-mens", title: "Ander Mens", year: 2019, format: "Feature", poster: "/film/ander-mens.jpg" },
+  { slug: "ellen", title: "Ellen: The Ellen Pakkies Story", year: 2018, format: "Feature", poster: "/film/ellen.jpg" },
+  { slug: "stroomop", title: "Stroomop", year: 2018, format: "Feature", poster: "/film/stroomop.jpg" },
+  { slug: "vir-die-voels", title: "Vir die Voëls", year: 2016, format: "Feature", poster: "/film/vir-die-voels.jpg" },
+  { slug: "modder-en-bloed", title: "Modder en Bloed", year: 2016, format: "Feature", poster: "/film/modder-en-bloed.jpg" },
+];
+
+const yearsActive = new Date().getFullYear() - site.founded;
+
 export const stats = [
-  { value: `${new Date().getFullYear() - 2015}+`, label: "Years in production" },
-  { value: "ACES", label: "Colour-managed pipeline" },
-  { value: "EXR", label: "Frame-accurate delivery" },
-  { value: "QC", label: "Automated shot checks" },
+  { value: `${yearsActive}+`, label: "Years in production" },
+  { value: String(filmography.length), label: "Film & series credits" },
+  { value: String(filmography.filter((c) => c.network === "Netflix").length), label: "Netflix titles" },
+  { value: "PTA", label: "Pretoria, South Africa" },
 ];
 
 export type Project = {
@@ -75,64 +107,43 @@ export type Project = {
   year: number;
   category: string;
   summary: string;
-  // Path under /public, e.g. "/work/my-show.jpg". If missing, a generated
-  // gradient frame is shown instead.
+  // Still under /public used for cards and as the video poster.
   image?: string;
-  // Optional MP4 under /public, or an external Vimeo/YouTube embed URL.
+  // MP4 under /public, or a Vimeo/YouTube embed URL.
   video?: string;
+  gallery?: string[];
   credits: string[];
-  shots?: number;
-  // Accent hue (0-360) used for the generated placeholder frame.
+  // Accent hue (0-360) for the generated frame shown when there is no image.
   hue: number;
 };
 
-// TODO: replace these placeholders with real projects (client approval permitting).
 export const projects: Project[] = [
   {
-    slug: "project-one",
-    title: "Episodic Drama",
-    client: "Placeholder Network",
+    slug: "festo-f1",
+    title: "Festo F1",
+    client: "Festo",
+    // TODO: confirm year (Festo's centenary campaign; file dated March 2026).
     year: 2026,
-    category: "Series",
-    summary:
-      "Placeholder: a full season of invisible effects: set extensions, screen replacements, period cleanup and digital weather across every episode.",
-    credits: ["Compositing", "Set Extension", "Cleanup"],
-    shots: 420,
-    hue: 22,
-  },
-  {
-    slug: "project-two",
-    title: "Feature Film",
-    client: "Placeholder Pictures",
-    year: 2025,
-    category: "Film",
-    summary:
-      "Placeholder: CG environments and hero compositing for a feature, including a fully digital third act location.",
-    credits: ["CG Environments", "Lighting", "Compositing"],
-    shots: 180,
-    hue: 205,
-  },
-  {
-    slug: "project-three",
-    title: "Automotive Spot",
-    client: "Placeholder Agency",
-    year: 2025,
     category: "Commercial",
     summary:
-      "Placeholder: a CG car integrated into live-action plates with full reflections, road replacement and beauty finishing.",
-    credits: ["CG", "Lookdev", "Compositing"],
-    shots: 24,
-    hue: 350,
+      "A fully CG Formula 1 spot celebrating 100 years of Festo, “Automation for a world in motion”. It runs from a moody studio reveal of the car, through a glitch-driven race sequence, to the podium.",
+    image: "/work/festo-f1/still-2.jpg",
+    video: "/work/festo-f1/festo-f1.mp4",
+    gallery: ["/work/festo-f1/still-13.jpg", "/work/festo-f1/still-46.jpg"],
+    credits: ["Full CG", "Vehicle Lookdev", "Character Animation", "Lighting", "Compositing"],
+    hue: 200,
   },
   {
-    slug: "project-four",
-    title: "Animated Short",
-    client: "Two Tales Animation",
+    slug: "clere-radiance",
+    title: "Clere Radiance",
+    client: "Clere",
+    // TODO: confirm year.
     year: 2024,
-    category: "Animation",
+    category: "Product Visualisation",
     summary:
-      "Placeholder: a stylised animated short produced end to end, from design through animation, lighting and final grade.",
-    credits: ["Animation", "Lighting", "Compositing"],
-    hue: 140,
+      "Photoreal CG product visualisation for Clere’s Radiance Night Re-Newer.",
+    image: "/capabilities/product-viz.jpg",
+    credits: ["Product Visualisation", "Lookdev", "Lighting"],
+    hue: 330,
   },
 ];