Write Code.
Instantly Render.

import React from 'react';
import Link from 'next/link';

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-black p-4 font-sans text-zinc-100">
      <div className="max-w-md w-full bg-[#111] border border-zinc-800/50 p-8 rounded-2xl relative overflow-hidden">
        {/* Subtle Next.js style glow */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[200px] h-[100px] bg-white/10 blur-[60px] rounded-full pointer-events-none"></div>
        
        <div className="relative z-10 flex flex-col items-center text-center">
          {/* Next.js Triangle Logo shape */}
          <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center mb-6 shadow-[0_0_40px_rgba(255,255,255,0.15)]">
            <svg viewBox="0 0 180 180" width="32" height="32">
              <path fill="black" d="M90 0L0 180h180L90 0z" />
            </svg>
          </div>
          
          <h1 className="text-3xl font-bold tracking-tight mb-3">Next.js Engine</h1>
          <p className="text-zinc-400 text-sm mb-8 leading-relaxed">
            Running natively in the browser. Powered by Sandpack and fully configured with Tailwind CSS.
          </p>
          
          <div className="w-full space-y-3">
            <Link 
              href="#" 
              className="block w-full bg-white text-black font-semibold py-3 px-4 rounded-lg hover:bg-zinc-200 transition-colors"
            >
              Start Building
            </Link>
            <button className="w-full bg-transparent border border-zinc-800 text-white font-medium py-3 px-4 rounded-lg hover:bg-zinc-900 transition-colors">
              Read Documentation
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}