Deux courbes partagées dans lib/motion.ts, pour que le CSS et Framer aient le même feeling, et quatre primitives que Tailwind ne sait pas exprimer : reflet de bouton, halo qui suit le curseur, soulignement qui se dessine, secousse d'erreur. Nouveaux composants : Stagger (les collections se distribuent une par une), Spotlight (trouve son parent tout seul, donc les cartes restent des composants serveur), ScrollProgress, BackToTop, Parallax, Spinner, CheckMark. Reveal accepte maintenant une direction. Côté rendu : le trait de nav glisse d'un onglet à l'autre, les cartes se soulèvent, le hero réagit au scroll, les piliers entrent en zig-zag, la lightbox glisse dans le sens demandé et les formulaires répondent. prefers-reduced-motion est respecté partout : Framer coupe via useReducedMotion, le CSS via la media query déjà en place. Le commit embarque aussi la réorganisation des composants par domaine qui était en cours dans l'arbre de travail — les deux étaient trop imbriquées pour être séparées proprement. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
+68
-87
@@ -1,5 +1,13 @@
|
||||
import Image from "next/image";
|
||||
import type { Metadata } from "next";
|
||||
import { PageHeader } from "../components/ui/PageHeader";
|
||||
import { Section } from "../components/ui/Section";
|
||||
import { SectionHeading } from "../components/ui/SectionHeading";
|
||||
import { ButtonLink } from "../components/ui/ButtonLink";
|
||||
import { Logo } from "../components/ui/Logo";
|
||||
import { Spotlight } from "../components/ui/Spotlight";
|
||||
import { Stagger, StaggerItem } from "../components/ui/Stagger";
|
||||
import { TEAM } from "@/lib/studio";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Studio",
|
||||
@@ -7,107 +15,80 @@ export const metadata: Metadata = {
|
||||
"Highland Games Studio is a small indie team crafting survival adventures.",
|
||||
};
|
||||
|
||||
const team = [
|
||||
{
|
||||
name: "Mathew Simon",
|
||||
role: "CEO · Developer",
|
||||
bio: "Builds the systems, gameplay loops and tools that bring our worlds to life.",
|
||||
photo: "/image/Studio/Teams/CEO_Dev.jpg",
|
||||
},
|
||||
{
|
||||
name: "Kevin Tostivin",
|
||||
role: "3D Artist · Art Director",
|
||||
bio: "Shapes the visual identity, environments and overall look of every Highland Games world.",
|
||||
photo: null,
|
||||
},
|
||||
{
|
||||
name: "Axel",
|
||||
role: "3D Animator",
|
||||
bio: "Brings characters and creatures to life, giving motion and feel to everything on screen.",
|
||||
photo: null,
|
||||
},
|
||||
];
|
||||
|
||||
export default function StudioPage() {
|
||||
return (
|
||||
<div className="pt-32 pb-24 px-6 lg:px-10">
|
||||
{/* HERO */}
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
|
||||
— THE STUDIO
|
||||
</p>
|
||||
<h1 className="font-display text-5xl sm:text-6xl lg:text-7xl tracking-wider leading-[0.95] mb-8">
|
||||
A SMALL TEAM,
|
||||
<br />
|
||||
BIG HORIZONS.
|
||||
</h1>
|
||||
<p className="text-lg text-foreground-muted leading-relaxed max-w-2xl">
|
||||
Highland Games Studio is an independent game studio building survival
|
||||
worlds we'd want to lose ourselves in. We believe small teams can
|
||||
craft big experiences, where every detail is made by someone who
|
||||
cares.
|
||||
</p>
|
||||
</div>
|
||||
<>
|
||||
<PageHeader
|
||||
eyebrow="THE STUDIO"
|
||||
width="narrow"
|
||||
title={
|
||||
<>
|
||||
A SMALL TEAM,
|
||||
<br />
|
||||
BIG HORIZONS.
|
||||
</>
|
||||
}
|
||||
lead="Highland Games Studio is an independent game studio building survival worlds we'd want to lose ourselves in. We believe small teams can craft big experiences, where every detail is made by someone who cares."
|
||||
/>
|
||||
|
||||
{/* TEAM */}
|
||||
<section className="max-w-5xl mx-auto mt-28">
|
||||
<div className="mb-12 text-center">
|
||||
<p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
|
||||
— THE PEOPLE
|
||||
</p>
|
||||
<h2 className="font-display text-4xl sm:text-5xl tracking-wider">
|
||||
THE TEAM
|
||||
</h2>
|
||||
</div>
|
||||
<Section divider>
|
||||
<SectionHeading eyebrow="THE PEOPLE" title="THE TEAM" align="center" />
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{team.map((m) => (
|
||||
<div
|
||||
key={m.name}
|
||||
className="group relative flex flex-col items-center rounded-[2rem] border border-border bg-surface/60 px-8 py-10 text-center transition-all duration-300 hover:-translate-y-1 hover:border-accent/60 hover:bg-surface"
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div className="relative mb-6">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute -inset-1 rounded-full bg-gradient-to-b from-accent/40 to-transparent opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-100"
|
||||
/>
|
||||
<div className="relative h-32 w-32 overflow-hidden rounded-full border border-border bg-surface-elevated ring-2 ring-transparent transition-all duration-300 group-hover:ring-accent/40">
|
||||
{m.photo ? (
|
||||
<Stagger
|
||||
as="ul"
|
||||
step={0.1}
|
||||
className="mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{TEAM.map((member) => (
|
||||
<StaggerItem as="li" key={member.name}>
|
||||
<article className="group relative flex h-full flex-col items-center overflow-hidden border border-border bg-surface px-8 py-10 text-center transition duration-300 ease-out hover:-translate-y-1 hover:border-accent/60 hover:shadow-[0_24px_50px_-30px_rgba(0,0,0,0.9)]">
|
||||
<div className="relative mb-6 h-32 w-32 overflow-hidden rounded-full border border-border bg-surface-elevated transition-colors duration-300 group-hover:border-accent/50">
|
||||
{member.photo ? (
|
||||
<Image
|
||||
src={m.photo}
|
||||
alt={m.name}
|
||||
width={128}
|
||||
height={128}
|
||||
className="h-full w-full object-cover"
|
||||
src={member.photo}
|
||||
alt={member.name}
|
||||
fill
|
||||
sizes="128px"
|
||||
className="object-cover transition-transform duration-700 ease-out group-hover:scale-110"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Image
|
||||
src="/image/Studio/Logo Flat.png"
|
||||
alt=""
|
||||
width={56}
|
||||
height={40}
|
||||
className="opacity-30"
|
||||
<Logo
|
||||
width={64}
|
||||
className="opacity-25 transition-opacity duration-500 group-hover:opacity-40"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-display text-2xl tracking-wider mb-2">
|
||||
{m.name}
|
||||
</h3>
|
||||
<p className="text-xs tracking-widest text-accent mb-4 uppercase">
|
||||
{m.role}
|
||||
</p>
|
||||
<p className="text-sm text-foreground-muted leading-relaxed max-w-xs">
|
||||
{m.bio}
|
||||
</p>
|
||||
</div>
|
||||
<h3 className="mb-2 font-display text-2xl tracking-wider transition-colors duration-300 group-hover:text-accent">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="mb-4 text-xs uppercase tracking-widest text-accent">
|
||||
{member.role}
|
||||
</p>
|
||||
<p className="text-sm leading-relaxed text-foreground-muted">
|
||||
{member.bio}
|
||||
</p>
|
||||
|
||||
<Spotlight />
|
||||
</article>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</Stagger>
|
||||
</Section>
|
||||
|
||||
<Section divider width="narrow">
|
||||
<SectionHeading
|
||||
eyebrow="WORK WITH US"
|
||||
title="LET'S TALK"
|
||||
lead="Press, publishing, or simply curious about what we're building. The door is open."
|
||||
align="center"
|
||||
/>
|
||||
<div className="mt-10 flex justify-center">
|
||||
<ButtonLink href="/contact">GET IN TOUCH</ButtonLink>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user