packages/website/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── page.tsx           # Landing page
│   │   ├── gold/page.tsx      # $GOLD token page
│   │   ├── layout.tsx         # Root layout
│   │   └── globals.css        # Global styles
│   ├── components/            # React components
│   │   ├── Header.tsx         # Navigation header
│   │   ├── Footer.tsx         # Site footer
│   │   ├── Background.tsx     # Reusable background
│   │   ├── Hero/              # Landing page hero
│   │   ├── Features/          # Features section
│   │   ├── CTA/               # Call-to-action
│   │   └── GoldToken/         # $GOLD token page
│   └── lib/
│       └── fonts.ts           # Font configuration
├── public/
│   ├── images/                # Static images
│   └── fonts/                 # Custom fonts
├── next.config.ts             # Next.js configuration
├── tailwind.config.ts         # Tailwind configuration
└── package.json

<Background 
  image="/images/app_background.png" 
  opacity={0.04} 
/>

<Header />

<Footer />

<Hero />

<Features />

<CTA />

<GoldToken />

@theme {
  /* Typography */
  --font-display: 'Cinzel', serif;
  --font-body: 'Rubik', system-ui, sans-serif;
  
  /* Gold palette */
  --gold-essence: #d4a84b;
  --gold-flame: #ffd866;
  --gold-dim: #c49530;
  --gold-ember: #b8860b;
  
  /* Background depths */
  --bg-depth: #0a0a0c;
  --bg-surface: #141416;
  --bg-elevated: #1e1e22;
  
  /* Glass effects */
  --glass-surface: rgba(10, 10, 12, 0.85);
  --glass-border: rgba(45, 40, 32, 0.5);
  --glass-highlight: rgba(212, 168, 75, 0.1);
}

.glass {
  background: var(--glass-surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
}

.glow-gold {
  filter: drop-shadow(0 0 20px rgba(212, 168, 75, 0.6));
}

.text-gradient-gold {
  background: linear-gradient(135deg, #d4a84b 0%, #ffd866 50%, #d4a84b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes slowZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

# External URLs
NEXT_PUBLIC_DOCS_URL=https://hyperscape-ai.mintlify.app/
NEXT_PUBLIC_GAME_URL=https://play.hyperscape.club
NEXT_PUBLIC_DISCORD_URL=https://discord.gg/f4ZwhAbKye
NEXT_PUBLIC_TWITTER_URL=https://x.com/hyperscapeai
NEXT_PUBLIC_GITHUB_URL=https://github.com/hyperscape-ai

cd packages/website
bun install
bun run dev

bun run build

bun run typecheck

// next.config.ts
const config: NextConfig = {
  output: "export",
  images: {
    unoptimized: true,
  },
  trailingSlash: true,
};

import { Cinzel } from "next/font/google";

export const cinzel = Cinzel({
  subsets: ["latin"],
  variable: "--font-display",
  display: "swap",
});

import { Rubik } from "next/font/google";

export const rubik = Rubik({
  subsets: ["latin"],
  variable: "--font-body",
  display: "swap",
});

export const metadata: Metadata = {
  title: "Hyperscape - The First AI-Native MMORPG",
  description: "Where autonomous agents powered by ElizaOS play alongside humans...",
  keywords: ["MMORPG", "AI gaming", "RuneScape", "ElizaOS", ...],
  openGraph: {
    title: "Hyperscape - The First AI-Native MMORPG",
    images: [{ url: "/images/og-image.jpg", width: 1200, height: 630 }],
  },
  twitter: {
    card: "summary_large_image",
    site: "@hyperscapeai",
  },
};

export const viewport: Viewport = {
  themeColor: "#0a0a0c",
  width: "device-width",
  initialScale: 1,
  maximumScale: 5,
};