I'll look at the current project files before building the premium hero.

I have what I need. Let me generate a premium product showcase image for the hero focal point, then build the components.

Now I'll set up premium fonts. Let me update the layout and globals.

Now I'll add premium utility styles, then build the hero components.

Now the components. Let me create the header, hero, and page.

Let me verify it renders correctly in the browser.

Captured screenshots

The premium hero is rendering beautifully. The build is complete.

I rebuilt the hero from the original HTML structure into a polished Next.js + Tailwind v4 implementation while preserving the original scope (badge → headline → subcopy → dual CTAs → trust bar) and adding the premium upgrades requested: a floating 3D product showcase with mouse-driven parallax tilt as the focal point, a luxury layered background (radial color washes, ambient glow orbs, masked grid), gradient highlight text on "desks.", larger dominant typography (up to 7xl), deeper glassmorphism with inset/shadow layering, a gradient primary CTA with glow, floating spec/rating chips for depth, and a refined trust bar plus "20,000+ desk setups upgraded" social proof. I also swapped in Inter + JetBrains Mono fonts and set the dark theme to match the original palette (ink-black, electric-blue, primary blue).

Notes:

• The product image is generated and stored at public/hero-product.png.
• Staggered fade-in-up entrance animations respect prefers-reduced-motion.
• On mobile the layout stacks (copy first, showcase below) and centers cleanly. If you'd prefer the product to appear above the headline on mobile, or want me to add the next sections (product grid, etc.), just say the word.