Images and assets

The home page and store use a set of bundled images. They live in public/images/ and are replaced by overwriting the file with the same name, then rebuilding.

What is in there

File	Where it appears
`logo.svg`	Default header logo and fallback favicon
`hero-left-man.webp`	Home page hero, left character
`hero-left-woman.webp`	Home page hero, left character
`hero-right-man.webp`	Home page hero, right character
`hero-right-castle.webp`	Home page hero, right scenery
`sky-bg.webp`	Page background, light mode
`dark-sky-bg.webp`	Page background, dark mode
`footer-scene-left.webp`	Footer artwork
`footer-scene-right.webp`	Footer artwork
`cart-hero.webp`	Basket page header
`tebex-primary-wordmark-light.webp`	Tebex mark in the footer legal bar
`tebex-primary-wordmark-dark.webp`	Tebex mark, dark mode

Leave the Tebex wordmarks alone. They are part of Tebex's branding requirements for stores using their checkout. Removing them can put you out of compliance.

The public/images-old/ and public/images-old-old/ folders are earlier versions of the artwork, kept for reference. Nothing loads them and you can delete both.

Replacing artwork

Make your replacement the same size

Open the original to check its dimensions, and match them. A different aspect ratio will stretch or crop in ways the layout does not expect.

Use the same filename and format

hero-left-man.webp must stay hero-left-man.webp. Converting to PNG means editing the component that references it.

Rebuild

bun run build

Bundled images are part of the build. Unlike admin panel uploads, they need a rebuild and redeploy.

Logo and favicon: prefer the admin panel

For your logo and favicon there is a better way — upload them under Site Settings → Branding. No rebuild, no file editing, and you can change them whenever you like. See Site Settings.

Uploads work on every host, because they go to your Supabase Storage bucket rather than the server's disk. Editing public/images/logo.svg is only the fallback for when you would rather ship the artwork with the code.

Keeping the site fast

Use WebP for photographs and illustrations. It is typically 30% smaller than PNG at the same quality, and the bundled artwork already uses it.
Use SVG for logos and flat graphics. It scales to any size for a fraction of the bytes.
Compress before uploading. Squoosh is free and runs in your browser.
Watch the total. Background art above about 300 KB is noticeable on mobile connections.

Images from other websites

The theme only allows images from hosts it knows about — an anti-abuse measure built into Next.js. Two hosts are allowed out of the box:

dunb17ur4ymx4.cloudfront.net — package images served by Tebex
mc-heads.net — player avatars

To use images from anywhere else you must add that host to next.config.ts. See Security and headers.

Fonts

The theme uses Fredoka and Poppins, downloaded from Google Fonts at build time and then served from your own domain.

Changing them means editing src/app/(frontend)/layout.tsx:

src/app/(frontend)/layout.tsx

const fredoka = Fredoka({
  variable: "--font-fredoka",
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
});

Swap in any font from the next/font/google catalogue. Keep the variable names the same, or the stylesheet will not find them.

Because fonts are downloaded during the build, the machine doing the build needs internet access. This trips up air-gapped build servers.