highland_games_website/app/studio/page.tsx

import Image from "next/image";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Studio",
  description:
    "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&apos;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>

      {/* 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>

        <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 ? (
                    <Image
                      src={m.photo}
                      alt={m.name}
                      width={128}
                      height={128}
                      className="h-full w-full object-cover"
                    />
                  ) : (
                    <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"
                      />
                    </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>
          ))}
        </div>
      </section>
    </div>
  );
}