GrowQuest Website

1:1 Next.js (App Router) port of the GrowQuest design pages from the Claude Design project.

Routes

Route	Design source
/	GrowQuest.dc.html
/services	GrowQuest Services.dc.html
/technology	GrowQuest Technology.dc.html
/work	GrowQuest Work.dc.html
/company	GrowQuest Company.dc.html
/team	GrowQuest Team.dc.html
/contact	GrowQuest Contact.dc.html

Run

npm install
npm run dev    # development
npm run build && npm start   # production

Structure

• app/*/page.tsx — one client component per design page; markup is a direct translation of the design HTML (inline styles preserved).
• components/Chrome.tsx — shared Header (brand Q-mark logo, XP bar, responsive nav + burger), MobileMenu, Footer, Toast, CRT overlay, fixed page background, marquee ribbon.
• components/Sprite.tsx — box-shadow pixel sprites (Sprite, AnimatedSprite for the runner/birds two-frame loops).
• components/ImageSlot.tsx — visual port of the design's <image-slot> placeholder; pass src to fill a slot with a real image.
• lib/sprites.ts — all sprite palettes/maps from the design pages.
• lib/fx.ts — ported runtime effects: scroll reveals (data-rv), stat bars (data-bar), count-ups (data-count), star fields, snow, parallax (data-plx), typewriter/quote rotator, toast, confetti, FAQ accordion.
• app/globals.css — base styles, all gq* keyframes, and the interactive hover/active/focus utility classes that replace the design runtime's style-hover / style-active / style-focus attributes.

Home-page extras ported 1:1: smooth wheel scrolling, level tracking with toasts and the fixed mini-map, the quest-map path drawing with the walking sprite, and the ↑ ↑ ↓ ↓ ← → ← → B A party-mode cheat code.