NFT Project Landing Development
NFT landing is what potential holder sees first. In 2021–2022 an animated logo and "Connect Wallet" button was enough. Now the bar is higher: visitor decides in 10 seconds whether project deserves trust. Technically weak landing with slow load, broken gallery, or non-working mint button on mobile — direct losses at mint moment.
Key Technical Components
Gallery and Generative Preview
For generative collections (10k pfp) can't load all images into browser. Standard approach: lazy loading with virtualization (react-window or tanstack-virtual), images load as scroll. IPFS or Arweave for storage — CDN layer via NFT.Storage or Pinata for speed.
Pre-reveal: if collection not revealed, gallery shows placeholder. After reveal — IPFS URI from tokenURI() contract. Sync via The Graph subgraph or direct tokenURI calls for small collections.
Minting Section: Wallet + Contract
Wallet connection via wagmi + WalletConnect v2: support MetaMask, Coinbase Wallet, Rainbow, all hardware wallets. Network detection — if user on Ethereum but mint on Polygon, show prompt to switch.
Mint button must handle all states: not connected, wrong network, insufficient gas, transaction pending, success, error. Each state — separate UI. Button that just "hangs" on pending transaction — classic mistake.
Whitelist (Allowlist) Verification
Merkle tree proof — standard for allowlist mint. Tree root in contract. Client: generate proof for address from Merkle tree via @openzeppelin/merkle-tree. Proof passed to mint(proof, amount) contract function.
Process and Timeline
Design + animations: 1–2 days with Figma reference. Development: 2–3 days. Contract integration + tests: 1 day. Total: 3–5 days for standard landing. Cost calculated individually.