hanzo.ai/app/studio/page.tsx

import type { Metadata } from 'next'
import { BOOT } from '@hanzo/app/lib/session'
import { AccountProvider } from '@hanzo/app/lib/account'
import { SiteHeader, SiteFooter } from '@/components/home/shell'
import { Box } from '@/components/ui'
import Closing from '@/components/marketing/Closing'
import StudioLanding from './StudioLanding'
import { Door } from './_door'

export const metadata: Metadata = {
  title: 'Hanzo Studio — the visual AI engine for generative media',
  description:
    'Visual node-graph builder for generative media. Create image, video, audio, and 3D pipelines without code. Open source or cloud managed.',
  openGraph: {
    title: 'Hanzo Studio — the visual AI engine for generative media',
    description:
      'Visual node-graph builder for generative media. Create image, video, audio, and 3D pipelines without code. Open source or cloud managed.',
    url: 'https://studio.hanzo.ai',
    siteName: 'Hanzo Studio',
    type: 'website',
  },
}

export default function StudioPage() {
  // The landing for a stranger, in the site's frame (the marketing layout's,
  // drawn here because a signed-in reader gets the whole window instead); a
  // signed-in reader is drawn the app in Studio (_door). The boot script hides
  // the landing before the first paint for a reader who is in.
  return (
    <Door>
      <script dangerouslySetInnerHTML={{ __html: BOOT }} />
      <AccountProvider>
        <Box minH="100vh" $platform-web={{ color: 'var(--foreground)' }}>
          <SiteHeader />
          <main id="main">
            <StudioLanding />
          </main>
          <Closing />
          <SiteFooter />
        </Box>
      </AccountProvider>
    </Door>
  )
}