Clone 3D Web Prompts site into Next.js

[edenbuilds]

Summary

Ports mubbashirdevsite/3d-hero-prompts into the Next.js template as a pixel-faithful clone of the original static site.

What was cloned

• Hero section with gradient headline, CTA buttons, and scroll hint animation
• Particle canvas background with mouse-repulsion and connection lines
• Ambient CSS orbs with drift animation
• 12 prompt cards with copy-to-clipboard functionality (from prompts.json)
• How it works 4-step workflow grid
• Pro tips section with 3 advice cards
• Fixed navigation with scroll shadow and active section highlighting
• Scroll-reveal animations via IntersectionObserver
• Responsive layout matching the original breakpoints (1024px, 768px, 480px, 1440px)

Implementation details

• Fonts: Space Grotesk + Space Mono via next/font/google
• Site styles preserved in src/app/site.css with original design tokens
• Client components for interactive features (particles, copy, scroll reveal, nav)
• Prompt data imported from src/data/prompts.json

Verification

• npm run check passes (lint + typecheck + build)