Building the MonsterHunter Landing Page

A landing page for an NFT game, built in roughly 10 days. Next.js, TypeScript, Tailwind, and a self-imposed black-and-white look because the reference material wasn't worth copying.

A client came to me with a tight brief: an NFT game landing page, "just the basic necessities," shipped within two weeks.

Client said: "We want you to create our landing page as soon as possible within 2 weeks. Just the basic necessities would be fine to us."

The game itself was a monster-hunting NFT title — strategic battles, special abilities, and rewards in the form of rare NFTs you unlock as you play. The brief was clear enough that I could skip the discovery dance and just build.

How I started

It's an NFT game landing page and the client wanted it fast, so I skipped design tools entirely. I spun up a new Next.js project with TypeScript and pulled in tailwindcss, postcss, and autoprefixer for the utility setup.

The reference site he sent over was a ThemeForest template, and honestly it wasn't good — it didn't read as a professional site. So I dropped it and went with my own black-and-white styling instead.

Fetching NFTs from OpenSea

OpenSea is an online marketplace for non-fungible tokens, sold either at a fixed price or through auction.

This was the tricky part. OpenSea's API policy didn't allow public GET requests at the time. The one endpoint I had public access to was this collection URL, which was enough to pull the name, description, and image.

const collectionName = 'example_collection';
const apiString = `https://api.opensea.io/api/v1/collection/${collectionName}`;

I wrapped the fetching in a custom useFetch hook built on Axios, so the request logic stayed in one reusable place instead of being scattered across components.

The components

Hero section. This one was constrained by the brief — the client wanted text on one side and a YouTube iframe on the other. Not much room to make it striking, and the short timeline didn't help, but it did the job he asked for.

Carousel. I used Embla Carousel with embla-carousel-classNames so it slotted into the Tailwind setup cleanly. It runs the feature and NFT highlights.

Scroll and size observers. I wired these into _app.tsx to track scroll position and viewport size, so the page could react to both without me hand-tuning breakpoints everywhere.

NFT icon slider. A native-feeling slider the client specifically asked for, animated with requestAnimationFrame instead of a heavier animation dependency.

Pre-register form. The client wanted a Formspree-backed signup, so I set up a Formspree POST endpoint to capture emails from potential players.

Where it landed

It came together in about 10 days, basics covered, shipped on the client's timeline. Constrained brief, but a fun one to build, and I'd work with them again.