Move filmography above selected work on home and work pages
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
twotalesanimation
+105
-40
@@ -3,14 +3,36 @@ import Hero from "@/components/Hero";
|
||||
import ProjectCard from "@/components/ProjectCard";
|
||||
import Reveal from "@/components/Reveal";
|
||||
import SectionLabel from "@/components/SectionLabel";
|
||||
import { filmography, projects, services, site, stats, studioStills } 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, 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: "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." },
|
||||
{
|
||||
step: "Breakdown",
|
||||
body: "Script and plate breakdowns, bids and a shot list everyone agrees on.",
|
||||
},
|
||||
{
|
||||
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: "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.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
@@ -18,52 +40,67 @@ export default function Home() {
|
||||
<>
|
||||
<Hero />
|
||||
|
||||
{/* Selected work */}
|
||||
<section id="work" className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
|
||||
<SectionLabel index="01">Selected work</SectionLabel>
|
||||
<div className="grid gap-x-8 gap-y-16 md:grid-cols-2">
|
||||
{projects.slice(0, 4).map((p, i) => (
|
||||
<Reveal key={p.slug} delay={(i % 2) * 120} className={i % 2 === 1 ? "md:mt-24" : ""}>
|
||||
<ProjectCard project={p} />
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Filmography */}
|
||||
<section id="filmography" className="border-t border-line">
|
||||
<section id="filmography">
|
||||
<div className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
|
||||
<SectionLabel index="02">Filmography</SectionLabel>
|
||||
<SectionLabel index="01">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.
|
||||
{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, M-Net and kykNET.
|
||||
Visual effects for features and series from South Africa and
|
||||
Nigeria, released in cinemas and on Netflix, Prime Video, M-Net
|
||||
and kykNET.
|
||||
</p>
|
||||
</div>
|
||||
<Filmography />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Selected work */}
|
||||
<section id="work" 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">Selected work</SectionLabel>
|
||||
<div className="grid gap-x-8 gap-y-16 md:grid-cols-2">
|
||||
{projects.slice(0, 4).map((p, i) => (
|
||||
<Reveal
|
||||
key={p.slug}
|
||||
delay={(i % 2) * 120}
|
||||
className={i % 2 === 1 ? "md:mt-24" : ""}
|
||||
>
|
||||
<ProjectCard project={p} />
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</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="03">Services</SectionLabel>
|
||||
<Reveal>
|
||||
<h2 className="max-w-4xl font-display text-4xl leading-tight font-thin uppercase md:text-6xl">
|
||||
From photoreal <span className="text-accent">VFX</span> to stylised animation.
|
||||
From photoreal <span className="text-accent">VFX</span> to
|
||||
stylised animation.
|
||||
</h2>
|
||||
</Reveal>
|
||||
{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>
|
||||
<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">
|
||||
<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
|
||||
@@ -86,7 +123,10 @@ export default function Home() {
|
||||
</section>
|
||||
|
||||
{/* Studio / pipeline */}
|
||||
<section id="studio" className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
|
||||
<section
|
||||
id="studio"
|
||||
className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36"
|
||||
>
|
||||
<SectionLabel index="04">Studio</SectionLabel>
|
||||
<div className="grid gap-16 lg:grid-cols-2">
|
||||
<Reveal>
|
||||
@@ -96,19 +136,27 @@ export default function Home() {
|
||||
</h2>
|
||||
<div className="mt-8 space-y-5 text-base leading-relaxed text-muted md:text-lg">
|
||||
<p>
|
||||
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
|
||||
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'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.
|
||||
We'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" />
|
||||
<img
|
||||
key={src}
|
||||
src={src}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
className="aspect-[2.39/1] w-full object-cover"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
@@ -118,10 +166,16 @@ export default function Home() {
|
||||
<li className="relative pb-10 pl-10 last:pb-0">
|
||||
<span className="absolute top-1.5 -left-[5px] h-[9px] w-[9px] rotate-45 bg-accent" />
|
||||
<div className="flex items-baseline gap-4">
|
||||
<span className="font-mono text-xs text-muted">{String(i + 1).padStart(2, "0")}</span>
|
||||
<h3 className="font-display text-xl font-light tracking-[0.15em] uppercase">{p.step}</h3>
|
||||
<span className="font-mono text-xs text-muted">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<h3 className="font-display text-xl font-light tracking-[0.15em] uppercase">
|
||||
{p.step}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted">{p.body}</p>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted">
|
||||
{p.body}
|
||||
</p>
|
||||
</li>
|
||||
</Reveal>
|
||||
))}
|
||||
@@ -130,16 +184,26 @@ export default function Home() {
|
||||
|
||||
<div className="mt-24 grid grid-cols-2 border-t border-line md:grid-cols-4">
|
||||
{stats.map((s) => (
|
||||
<div key={s.label} className="border-b border-line py-10 pr-6 md:border-b-0">
|
||||
<p className="font-display text-5xl font-thin md:text-6xl">{s.value}</p>
|
||||
<p className="mt-3 font-mono text-[11px] tracking-[0.2em] text-muted uppercase">{s.label}</p>
|
||||
<div
|
||||
key={s.label}
|
||||
className="border-b border-line py-10 pr-6 md:border-b-0"
|
||||
>
|
||||
<p className="font-display text-5xl font-thin md:text-6xl">
|
||||
{s.value}
|
||||
</p>
|
||||
<p className="mt-3 font-mono text-[11px] tracking-[0.2em] text-muted uppercase">
|
||||
{s.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact */}
|
||||
<section id="contact" className="relative overflow-hidden border-t border-line">
|
||||
<section
|
||||
id="contact"
|
||||
className="relative overflow-hidden border-t border-line"
|
||||
>
|
||||
<div
|
||||
className="pointer-events-none absolute -bottom-1/2 left-1/2 h-[80vmax] w-[80vmax] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgb(232_87_42/0.14),transparent_60%)]"
|
||||
aria-hidden="true"
|
||||
@@ -155,7 +219,8 @@ export default function Home() {
|
||||
to tell?
|
||||
</h2>
|
||||
<p className="mx-auto mt-8 max-w-lg text-muted md:text-lg">
|
||||
Send us a script, a breakdown or just an idea. We'll come back with a plan and a bid.
|
||||
Send us a script, a breakdown or just an idea. We'll come
|
||||
back with a plan and a bid.
|
||||
</p>
|
||||
<a
|
||||
href={`mailto:${site.email}?subject=New%20project%20enquiry`}
|
||||
|
||||
+12
-9
@@ -17,18 +17,21 @@ export default function WorkPage() {
|
||||
<h1 className="font-display text-6xl leading-[0.9] font-thin uppercase md:text-9xl">
|
||||
Selected <span className="font-light">work</span>
|
||||
</h1>
|
||||
<div className="mt-20 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 id="filmography" className="mt-32 border-t border-line pt-20 md:mt-44">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
+1
-1
@@ -23,8 +23,8 @@ export const site = {
|
||||
};
|
||||
|
||||
export const nav = [
|
||||
{ label: "Work", href: "/work/" },
|
||||
{ label: "Filmography", href: "/#filmography" },
|
||||
{ label: "Work", href: "/work/" },
|
||||
{ label: "Services", href: "/#services" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user