chore : move all to root
This commit is contained in:
Thibault Pouch
206
nest-front/src/pages/public/StudioPage.tsx
Normal file
206
nest-front/src/pages/public/StudioPage.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import { TEAM_MEMBERS } from '../../data/mockData';
|
||||
|
||||
export default function StudioPage() {
|
||||
return (
|
||||
<div style={{ maxWidth: '1000px', margin: '0 auto', padding: '4rem 1.5rem' }}>
|
||||
{/* Header */}
|
||||
<div style={{ marginBottom: '4rem' }}>
|
||||
<div className="section-label">About</div>
|
||||
<h1
|
||||
style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
color: 'var(--color-text)',
|
||||
fontSize: 'clamp(2.5rem, 6vw, 4rem)',
|
||||
marginTop: '0.5rem',
|
||||
marginBottom: '1.5rem',
|
||||
}}
|
||||
>
|
||||
CROWMATE STUDIO
|
||||
</h1>
|
||||
<div
|
||||
className="crt-box"
|
||||
style={{ padding: '2rem', marginBottom: '3rem' }}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)',
|
||||
color: 'var(--color-text-dim)',
|
||||
fontSize: '0.95rem',
|
||||
lineHeight: 2,
|
||||
margin: 0,
|
||||
marginBottom: '1rem',
|
||||
}}
|
||||
>
|
||||
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.
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)',
|
||||
color: 'var(--color-text-dim)',
|
||||
fontSize: '0.95rem',
|
||||
lineHeight: 2,
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--color-green)' }}>>></span>{' '}
|
||||
Our debut title, <strong style={{ color: 'var(--color-text)' }}>Headless Hazard</strong>,
|
||||
is currently in development. We believe that constraints breed creativity — and that
|
||||
you don't need a $200 million budget to make something that sticks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* History & Vision */}
|
||||
<div style={{ marginBottom: '4rem' }}>
|
||||
<div className="section-label" style={{ marginBottom: '1rem' }}>Our Vision</div>
|
||||
<h2
|
||||
style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
color: 'var(--color-text)',
|
||||
fontSize: '1.8rem',
|
||||
marginBottom: '1.5rem',
|
||||
}}
|
||||
>
|
||||
WHY WE BUILD
|
||||
</h2>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
|
||||
gap: '1.25rem',
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{
|
||||
title: 'Strange Mechanics',
|
||||
content: 'We look for the game ideas that make people say "wait, how does that even work?" — then we find out.',
|
||||
},
|
||||
{
|
||||
title: 'Atmospheric Worlds',
|
||||
content: 'Every pixel, every sound, every line of UI text should reinforce the world. Atmosphere is not decoration, it is the game.',
|
||||
},
|
||||
{
|
||||
title: 'Community First',
|
||||
content: 'We build in public. We listen to our players. Bug reports are not annoyances — they are conversations.',
|
||||
},
|
||||
].map(({ title, content }) => (
|
||||
<div key={title} className="crt-box" style={{ padding: '1.5rem' }}>
|
||||
<h3
|
||||
style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
color: 'var(--color-amber)',
|
||||
fontSize: '1rem',
|
||||
marginBottom: '0.75rem',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.83rem', lineHeight: 1.75, margin: 0 }}>
|
||||
{content}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team */}
|
||||
<div>
|
||||
<div className="section-label" style={{ marginBottom: '1rem' }}>The Team</div>
|
||||
<h2
|
||||
style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
color: 'var(--color-text)',
|
||||
fontSize: '1.8rem',
|
||||
marginBottom: '2rem',
|
||||
}}
|
||||
>
|
||||
MEET THE CREW
|
||||
</h2>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
|
||||
gap: '1.25rem',
|
||||
}}
|
||||
>
|
||||
{TEAM_MEMBERS.map((member) => (
|
||||
<div key={member.id} className="crt-box" style={{ padding: '1.5rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
|
||||
{/* Avatar */}
|
||||
<div
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
background: 'rgba(0,255,65,0.08)',
|
||||
border: '1px solid var(--color-border)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontFamily: 'var(--font-heading)',
|
||||
color: 'var(--color-green)',
|
||||
fontSize: '1rem',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{member.avatarInitials}
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
color: 'var(--color-text)',
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
{member.name}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)',
|
||||
color: 'var(--color-green)',
|
||||
fontSize: '0.7rem',
|
||||
letterSpacing: '0.05em',
|
||||
}}
|
||||
>
|
||||
{member.role}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{member.bio && (
|
||||
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem', lineHeight: 1.7, margin: '0 0 1rem' }}>
|
||||
{member.bio}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{member.social && (
|
||||
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
|
||||
{member.social.twitter && (
|
||||
<a
|
||||
href="#"
|
||||
style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', fontFamily: 'var(--font-mono)' }}
|
||||
>
|
||||
{member.social.twitter}
|
||||
</a>
|
||||
)}
|
||||
{member.social.github && (
|
||||
<a
|
||||
href="#"
|
||||
style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', fontFamily: 'var(--font-mono)' }}
|
||||
>
|
||||
gh/{member.social.github}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user