feat: implement fallback team members and enhance StudioPage layout with team information
This commit is contained in:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user