export default function App() {
  return (
    <div className="min-h-screen bg-[#eeefeb] text-[#171917] font-sans">
      <div className="mx-auto flex min-h-screen max-w-4xl flex-col px-6 py-7 sm:px-10 sm:py-10">
        <header className="flex items-center justify-between border-b border-[#171917] pb-4 font-mono text-[10px] font-semibold tracking-[.12em]">
          <span>ZEVIO / NEW PROJECT</span>
          <span className="text-[#5b6159]">01</span>
        </header>

        <main className="flex flex-1 flex-col justify-center py-16">
          <p className="mb-6 font-mono text-[10px] font-semibold tracking-[.12em] text-[#5b6159]">YOUR CANVAS IS READY</p>
          <h1 className="m-0 max-w-2xl text-5xl font-medium leading-[1.02] tracking-[-.07em] sm:text-7xl">Start with one idea.</h1>
          <p className="mt-6 max-w-md text-sm leading-7 text-[#596058]">Edit this file or ask Zevio to build something. Every saved change appears here in the live preview.</p>
          <div className="mt-12 flex max-w-md items-center justify-between gap-4 border-t border-[#bfc4ba] pt-4 font-mono text-[10px] font-semibold tracking-[.05em]">
            <span>src/App.tsx</span>
            <span className="text-[#5b6159]">LIVE PREVIEW</span>
          </div>
        </main>

        <footer className="border-t border-[#bfc4ba] pt-4 font-mono text-[10px] text-[#5b6159]">BUILT IN THE ZEVIO WORKSPACE</footer>
      </div>
    </div>
  );
}