Who we are

We build games
players remember

Valkaya Studio is an independent mobile game developer focused on tight mechanics, deep progression, and worlds worth exploring. We're a small team with a big appetite.

Founded in 2026, we set out to prove that mobile games don't have to feel disposable. Every title we ship is built around one question: "Is this worth picking up at 11pm?" If the answer isn't a clear yes, we go back to the drawing board.

Our team spans game design, engineering, and live-ops — all working under one roof with one goal: games that respect your time and reward your skill.

{[ { num: "1", label: "Games shipped" }, // { num: "2M+", label: "Players worldwide" }, // { num: "4.7★", label: "Average store rating" }, { num: "2026", label: "Founded" }, ].map(s => (

{s.num}

{s.label}

))}

How we work

Our values

{v.title}

{v.desc}

Our portfolio

Our games

Our first racing game is built to be played in short sessions and remembered for long ones — with more titles on the way.

{GAMES.map(game => (

{game.genre} {game.rating} {game.status === 'live' ? '● Live' : '◎ Coming soon'}

{game.name}

{game.desc}

{game.store ? Download : Watch trailer } {game.store && Trailer}

))}

More titles in development.{' '}

Get in touch

Let's talk

Whether you're a player with feedback, a publisher with a pitch, or a developer looking to join the team — we read every message.

{[ { icon: icons.contact, label: "General enquiries", value: dev@indvalkayastudios.com }, // { icon: icons.shield, label: "Business & partnerships", value: biz@voidpixel.studio }, // { icon: icons.star, label: "Press & media", value: press@voidpixel.studio }, { icon: icons.zap, label: "Response time", value: "Typically within 2 business days" }, ].map(c => (

{c.label}

{c.value}

))}

{submitted ? (

Message received

We'll get back to you within 2 business days.

) : ( <>

Send a message

Your name

Email address

Subject

Message

</div>
                <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%', justifyContent: 'center' }} disabled={loading}>
                  {loading ? 'Sending…' : <><Icon d={icons.arrow} size={16} />Send message</>}
                </button>
              </form>
            </>
          )}
        </div>
      </div>
    </main>
  );
}

// ─────────────────────────────────────────────
// NAV CONFIG
// ─────────────────────────────────────────────
const NAV_ITEMS = [
  { id: 'about',   label: 'About Us',   icon: icons.about,   Page: AboutPage },
  { id: 'games',   label: 'Our Games',  icon: icons.games,   Page: GamesPage },
  { id: 'contact', label: 'Contact',    icon: icons.contact, Page: ContactPage },
];

// ─────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────
function App() {
  const [active, setActive] = useState('about');
  const [collapsed, setCollapsed] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

useEffect(() => {
    const handle = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handle);
    return () => window.removeEventListener('resize', handle);
  }, []);

// Close mobile sidebar on resize to desktop
  useEffect(() => { if (!isMobile) setMobileOpen(false); }, [isMobile]);

// Handle hash routing for direct links (optional)
  useEffect(() => {
    const hash = window.location.hash.replace('#', '');
    if (NAV_ITEMS.find(n => n.id === hash)) setActive(hash);
  }, []);

const navigate = useCallback((id) => {
    setActive(id);
    setMobileOpen(false);
    window.location.hash = id;
  }, []);

const ActivePage = NAV_ITEMS.find(n => n.id === active)?.Page || AboutPage;
  const activeLabel = NAV_ITEMS.find(n => n.id === active)?.label || '';

return (
    <div className="layout">
      {/* Mobile overlay */}
      <div
        className={`sidebar-overlay ${mobileOpen ? 'active' : ''}`}
        onClick={() => setMobileOpen(false)}
        aria-hidden="true"
      />

{/* ── Sidebar ── */}
      <aside
        className={`sidebar ${collapsed && !isMobile ? 'collapsed' : ''} ${mobileOpen ? 'mobile-open' : ''}`}
        aria-label="Main navigation"
      >
        <div className="sidebar-header">
          <a className="sidebar-logo" href="#about" onClick={e => { e.preventDefault(); navigate('about'); }}>
            <div className="logo-mark">VP</div>
            <div className="logo-text">
              Valkaya<span>Studio</span>
            </div>
          </a>
          {/* Desktop collapse toggle */}
          {!isMobile && (
            <button
              className="toggle-btn desktop-only"
              onClick={() => setCollapsed(c => !c)}
              aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
              title={collapsed ? 'Expand' : 'Collapse'}
            >
              <Icon d={collapsed ? icons.menu : icons.chevron} size={18} />
            </button>
          )}
          {/* Mobile close */}
          {isMobile && (
            <button className="toggle-btn" onClick={() => setMobileOpen(false)} aria-label="Close menu">
              <Icon d={icons.close} size={18} />
            </button>
          )}
        </div>

<nav className="nav" role="navigation">
          <div className="nav-label">Menu</div>
          {NAV_ITEMS.map(item => (
            <button
              key={item.id}
              className={`nav-item ${active === item.id ? 'active' : ''}`}
              onClick={() => navigate(item.id)}
              aria-current={active === item.id ? 'page' : undefined}
              title={item.label}
            >
              <span className="nav-icon"><Icon d={item.icon} size={18} /></span>
              <span className="nav-text">{item.label}</span>
              <span className="nav-tooltip" aria-hidden="true">{item.label}</span>
            </button>
          ))}
        </nav>

{/* ── Main ── */}
      <div className={`main ${collapsed && !isMobile ? 'sidebar-collapsed' : ''}`}>
        {/* Mobile topbar */}
        {isMobile && (
          <header className="topbar">
            <button className="toggle-btn" onClick={() => setMobileOpen(true)} aria-label="Open menu">
              <Icon d={icons.menu} size={20} />
            </button>
            <div className="topbar-title">{activeLabel}</div>
          </header>
        )}

{/* Page — key forces re-mount animation on nav */}
        <ActivePage key={active} />
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────
// MOUNT
// ─────────────────────────────────────────────
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

We build gamesplayers remember

Our values

Our games

Let's talk

We build games
players remember