Web3 product marketing site

DEGN Website

Next.js 15 DEGN marketing site with Three.js / React Three Fiber phone models, product storytelling sections, blog route, and Google Sheets waitlist capture.

DEGN Website project preview

Background & Context

degn-website is the marketing portion of the DEGN product family—not the trading UI. Docs classify it as Next.js 15.5 (Turbopack), React 19, Tailwind 4, Three.js / @react-three/fiber, with routes for home and blog/[id], plus a Google Sheets waitlist (googleapis, SETUP_GOOGLE_SHEETS.md). It does not implement wallet connect, swaps, or Nest trading APIs.

The home page composes Hero (GLB phone models with scroll-driven staging), PaymentIntegration, OneTapTrading, AIPoweredInsights, FAQ, BlogSection, and WaitlistSection. Waitlist posts to /api/waitlist and persists leads via Google Sheets configuration—lead capture for launch interest rather than in-app trading.

Earlier portfolio copy incorrectly implied Ethereum/MetaMask/NFT/cross-chain features. Verified source is a Solana-product marketing site with 3D visuals and waitlist—not a DeFi execution surface. Trading lives in apidegn, mobile apps, and related packages documented under DEGN DApp.

The Challenge

DEGN needed a public brand and waitlist surface that communicated the trading vision with immersive visuals—without conflating marketing pages with the Nest trading APIs or wallet product. Without a coherent web3 product marketing site foundation, DEGN Website stakeholders faced fragmented tools, slow handoffs, and limited visibility—classic failure modes Tekvers designs against.

The Solution

DEGN Website: Next.js 15 DEGN marketing site with Three.js / React Three Fiber phone models, product storytelling sections, blog route, and Google Sheets waitlist capture. Distinct marketing surface that does not pretend to be the trading dApp. Tekvers delivered a maintainable web3 product marketing site system for DEGN Website using Next.js 15, React 19, TypeScript, Tailwind CSS 4, with phased rollout, operator workflows, and documentation suited to long-term ownership.

Our Approach

  1. Marketing-only boundary

    Kept trading, custody, and admin out of this package; home and blog tell the product story and collect waitlist intent via Sheets.

  2. Three.js product presence

    Hero loads primary/secondary GLB phone models (`Phone_02-Spotlight.glb`, `Phone_3.glb`) with scroll progress, responsive offsets, and preloader gating so the first viewport feels like the app—not a flat crypto lander.

  3. Lead capture and content

    Waitlist form (name, email, email-consent) posts to `/api/waitlist`; blog section/route support content storytelling; FAQ and feature sections explain payments, one-tap trading, and insights messaging without executing on-chain actions here.

What We Delivered

  • Next.js 15 App Router marketing site (React 19, TypeScript, Tailwind CSS 4, Turbopack scripts)
  • Three.js / `@react-three/fiber` / `@react-three/drei` hero with GLB phone models
  • Home sections: hero, payment integration, one-tap trading, AI insights, FAQ, blog, waitlist
  • Blog detail route (`/blog/[id]`)
  • Google Sheets waitlist integration (`googleapis` + setup docs)
  • `/api/waitlist` submission path with success/error UX
  • Dark, motion-led brand presentation aligned to DEGN product marketing

Outcomes & Impact

  • Distinct marketing surface that does not pretend to be the trading dApp
  • Immersive 3D hero supporting brand differentiation
  • Operational waitlist capture into Google Sheets
  • Clear handoff story from marketing interest to the DEGN app ecosystem

DEGN’s public site sells the product vision and captures waitlist demand with Three.js polish—while Tekvers keeps wallet, Jupiter, and admin work accurately attributed to the DApp/API packages instead of inventing MetaMask/NFT features on the marketing site.

Technology Stack

  • Next.js 15
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Three.js
  • React Three Fiber
  • Google APIs

Services Delivered

Guides & articles from this niche

Planning a similar platform? Share your scope and we will map architecture, delivery phases, and a realistic timeline.