feat: implement fallback team members and enhance StudioPage layout with team information

This commit is contained in:
Thibault Pouch
2026-03-12 11:30:51 +01:00
parent e86eee8744
commit c2135bbb5d

View File

@@ -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 */}