(Feat) Init WebSite

2026-06-22 23:03:02 +02:00
commit ea71039071
51 changed files with 11995 additions and 0 deletions
@@ -0,0 +1,115 @@
+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&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>
+
+      {/* 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&apos;t the end of the climb — it&apos;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>
+  );
+}