From b55c193bff82b49f9369165928bb6554a18dfff4 Mon Sep 17 00:00:00 2001
From: Mathew <mathew.simon2004@gmail.com>
Date: Wed, 1 Jul 2026 20:54:48 +0200
Subject: [PATCH] Redesign de la page studio avec cards arrondies

- Renomme "THE CLIMBERS" en "THE TEAM"
- Cards valeurs et team en boxes arrondis (rounded-3xl/2rem)
- Avatars circulaires avec ring accent au hover

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/studio/page.tsx | 144 +++++++++++++++++++++++++-------------------
 1 file changed, 81 insertions(+), 63 deletions(-)

diff --git a/app/studio/page.tsx b/app/studio/page.tsx
index 28173f1..b0accbb 100644
--- a/app/studio/page.tsx
+++ b/app/studio/page.tsx
@@ -7,6 +7,24 @@ export const metadata: Metadata = {
     "Highland Games Studio is a two-person indie team crafting survival adventures.",
 };
 
+const values = [
+  {
+    index: "01",
+    title: "CRAFT",
+    body: "Every system, asset and line of dialogue is touched by hand. No shortcuts on what matters.",
+  },
+  {
+    index: "02",
+    title: "SURVIVE",
+    body: "We love the genre. The tension between scarcity and discovery is at the core of every game we make.",
+  },
+  {
+    index: "03",
+    title: "WONDER",
+    body: "A summit isn't the end of the climb — it's the start of a new world. We design for that feeling.",
+  },
+];
+
 const team = [
   {
     name: "Founder One",
@@ -25,6 +43,7 @@ const team = [
 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
@@ -42,80 +61,79 @@ export default function StudioPage() {
         </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>
+      {/* VALUES */}
+      <section className="max-w-4xl mx-auto mt-24 grid md:grid-cols-3 gap-6">
+        {values.map((v) => (
+          <div
+            key={v.index}
+            className="group relative rounded-3xl border border-border bg-surface/60 p-8 transition-all duration-300 hover:-translate-y-1 hover:border-accent/60 hover:bg-surface"
+          >
+            <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl border border-border bg-surface-elevated font-display text-sm tracking-[0.2em] text-accent transition-colors duration-300 group-hover:border-accent/50">
+              {v.index}
+            </div>
+            <h3 className="font-display text-2xl tracking-wider mb-3">
+              {v.title}
+            </h3>
+            <p className="text-sm text-foreground-muted leading-relaxed">
+              {v.body}
+            </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>
+      <section className="max-w-4xl 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 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 overflow-hidden">
-                {m.photo ? (
-                  <Image
-                    src={m.photo}
-                    alt={m.name}
-                    width={80}
-                    height={80}
-                    className="w-full h-full object-cover"
-                  />
-                ) : (
-                  <Image
-                    src="/image/Studio/Logo Flat.png"
-                    alt=""
-                    width={40}
-                    height={28}
-                    className="opacity-40"
-                  />
-                )}
+            <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-1">
+
+              <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">
+              <p className="text-sm text-foreground-muted leading-relaxed max-w-xs">
                 {m.bio}
               </p>
             </div>