From c2135bbb5d167fa1f9d06a772c8838ac5c166436 Mon Sep 17 00:00:00 2001
From: Thibault Pouch <thibault.pouch@epitech.eu>
Date: Thu, 12 Mar 2026 11:30:51 +0100
Subject: [PATCH] feat: implement fallback team members and enhance StudioPage
 layout with team information

---
 nest-front/src/pages/public/StudioPage.tsx | 94 +++++++++++++++++++---
 1 file changed, 83 insertions(+), 11 deletions(-)

diff --git a/nest-front/src/pages/public/StudioPage.tsx b/nest-front/src/pages/public/StudioPage.tsx
index 55afe61..3bd4031 100644
--- a/nest-front/src/pages/public/StudioPage.tsx
+++ b/nest-front/src/pages/public/StudioPage.tsx
@@ -1,15 +1,52 @@
-import { useEffect, useState } from 'react';
-import { teamApi } from '../../utils/api';
 import type { TeamMember } from '../../types';
 
-export default function StudioPage() {
-  const [members, setMembers] = useState<TeamMember[]>([]);
+const FALLBACK_MEMBERS: TeamMember[] = [
+  {
+    id: 'studio-1',
+    name: 'Thibault Pouch',
+    role: 'Game Dev • Lore / CI-CD',
+    bio: 'Works on game dev, game lore, CI/CD, assets, and the web platform.',
+    avatarInitials: 'TP',
+  },
+  {
+    id: 'studio-2',
+    name: 'Pierre Ryssen',
+    role: 'Game Dev • Assets / Web',
+    bio: 'Works on game dev, assets, and the web platform.',
+    avatarInitials: 'PR',
+  },
+  {
+    id: 'studio-3',
+    name: 'Antoine Papillon',
+    role: 'Game Dev • Gameplay',
+    bio: 'Focused on core game development for the project.',
+    avatarInitials: 'AP',
+  },
+  {
+    id: 'studio-4',
+    name: 'Clement Augustinowick',
+    role: 'Game Dev • Gameplay',
+    bio: 'Focused on core game development for the project.',
+    avatarInitials: 'CA',
+  },
+  {
+    id: 'studio-5',
+    name: 'Dany Lhoir',
+    role: 'Game Dev • Multiplayer / Security',
+    bio: 'Works on game dev, multiplayer systems, and cybersecurity.',
+    avatarInitials: 'DL',
+  },
+  {
+    id: 'studio-6',
+    name: 'Timote Koenig',
+    role: 'Game Dev • Assets / Planning',
+    bio: 'Works on game dev, assets, and project planning.',
+    avatarInitials: 'TK',
+  },
+];
 
-  useEffect(() => {
-    teamApi.getMembers()
-      .then(setMembers)
-      .catch(() => { /* show empty state */ });
-  }, []);
+export default function StudioPage() {
+  const members = FALLBACK_MEMBERS;
 
   return (
     <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '4rem 1.5rem' }}>
@@ -42,8 +79,8 @@ export default function StudioPage() {
             }}
           >
             CrowMate Studio is an independent game studio founded in 2023 by a team of six developers
-            united by a shared obsession: games that are strange, atmospheric, and actually interesting.
-            We are headquartered somewhere in Europe and operate fully remote.
+            who are all new to game development and learning by building together. We are headquartered
+            somewhere in Europe and operate fully remote.
           </p>
           <p
             style={{
@@ -60,6 +97,41 @@ export default function StudioPage() {
             you don't need a $200 million budget to make something that sticks.
           </p>
         </div>
+
+        <div
+          className="crt-box"
+          style={{ padding: '1.5rem 2rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '1rem' }}
+        >
+          {[
+            { label: 'TEAM SIZE', value: '6 PEOPLE' },
+            { label: 'FOUNDED', value: '2026' },
+            { label: 'WORK MODE', value: 'REMOTE' },
+            { label: 'CURRENT GAME', value: 'HEADLESS HAZARD' },
+          ].map(({ label, value }) => (
+            <div key={label}>
+              <div
+                style={{
+                  fontFamily: 'var(--font-mono)',
+                  color: 'var(--color-green)',
+                  fontSize: '0.72rem',
+                  letterSpacing: '0.08em',
+                  marginBottom: '0.45rem',
+                }}
+              >
+                {label}
+              </div>
+              <div
+                style={{
+                  fontFamily: 'var(--font-heading)',
+                  color: 'var(--color-text)',
+                  fontSize: '1rem',
+                }}
+              >
+                {value}
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
 
       {/* History & Vision */}