116 lines
4.1 KiB
TypeScript
116 lines
4.1 KiB
TypeScript
import Image from "next/image";
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Studio",
|
|
description:
|
|
"Highland Games Studio is a two-person indie team crafting survival adventures.",
|
|
};
|
|
|
|
const team = [
|
|
{
|
|
name: "Founder One",
|
|
role: "Co-founder · Programming · Design",
|
|
bio: "Builds the systems, gameplay loops and tools that bring our worlds to life.",
|
|
},
|
|
{
|
|
name: "Founder Two",
|
|
role: "Co-founder · Art · Design",
|
|
bio: "Shapes the visual identity, environments and feel of every Highland Games world.",
|
|
},
|
|
];
|
|
|
|
export default function StudioPage() {
|
|
return (
|
|
<div className="pt-32 pb-24 px-6 lg:px-10">
|
|
<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 of two friends
|
|
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>
|
|
|
|
{/* MISSION */}
|
|
<section className="max-w-4xl mx-auto mt-24 grid md:grid-cols-3 gap-8">
|
|
<div className="border border-border p-8">
|
|
<p className="font-display text-xs tracking-[0.3em] text-accent mb-4">
|
|
01
|
|
</p>
|
|
<h3 className="font-display text-2xl tracking-wider mb-3">
|
|
CRAFT
|
|
</h3>
|
|
<p className="text-sm text-foreground-muted leading-relaxed">
|
|
Every system, asset and line of dialogue is touched by hand. No
|
|
shortcuts on what matters.
|
|
</p>
|
|
</div>
|
|
<div className="border border-border p-8">
|
|
<p className="font-display text-xs tracking-[0.3em] text-accent mb-4">
|
|
02
|
|
</p>
|
|
<h3 className="font-display text-2xl tracking-wider mb-3">
|
|
SURVIVE
|
|
</h3>
|
|
<p className="text-sm text-foreground-muted leading-relaxed">
|
|
We love the genre. The tension between scarcity and discovery is at
|
|
the core of every game we make.
|
|
</p>
|
|
</div>
|
|
<div className="border border-border p-8">
|
|
<p className="font-display text-xs tracking-[0.3em] text-accent mb-4">
|
|
03
|
|
</p>
|
|
<h3 className="font-display text-2xl tracking-wider mb-3">
|
|
WONDER
|
|
</h3>
|
|
<p className="text-sm text-foreground-muted leading-relaxed">
|
|
A summit isn't the end of the climb — it's the start of a
|
|
new world. We design for that feeling.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* TEAM */}
|
|
<section className="max-w-4xl mx-auto mt-24">
|
|
<h2 className="font-display text-3xl sm:text-4xl tracking-wider mb-12">
|
|
THE CLIMBERS
|
|
</h2>
|
|
<div className="grid sm:grid-cols-2 gap-8">
|
|
{team.map((m) => (
|
|
<div key={m.name} className="border border-border p-8 bg-surface">
|
|
<div className="w-20 h-20 bg-surface-elevated border border-border flex items-center justify-center mb-6">
|
|
<Image
|
|
src="/image/Studio/Logo Flat.png"
|
|
alt=""
|
|
width={40}
|
|
height={28}
|
|
className="opacity-40"
|
|
/>
|
|
</div>
|
|
<h3 className="font-display text-2xl tracking-wider mb-1">
|
|
{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">
|
|
{m.bio}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|