zhirtless design overhaul + new zc messaging

ui/app/(vscode)/burn/[tokenAddress]/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { BurnContent } from '@/components/BurnContent';
+import { useParams } from 'next/navigation';
+
+export default function BurnPage() {
+  const params = useParams();
+  const tokenAddress = params.tokenAddress as string;
+
+  // Token symbol and userBalance will be fetched in BurnContent component
+  // For now, pass empty strings - BurnContent should handle fetching this data
+
+  return <BurnContent tokenAddress={tokenAddress} tokenSymbol="" userBalance="0" />;
+}

ui/app/(vscode)/claim/page.tsx

@@ -0,0 +1,5 @@
+import { ClaimContent } from '@/components/ClaimContent';
+
+export default function ClaimPage() {
+  return <ClaimContent />;
+}

ui/app/(vscode)/faq/page.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link';
+
+export default function FaqPage() {
+  return (
+    <div className="max-w-5xl">
+      <h1 className="text-7xl font-bold">FAQ</h1>
+      <p className="mt-7 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}Why are all ZC launched tokens (including $ZC) mintable?</p>
+      <p className="mt-1 text-[14px] text-gray-300 leading-relaxed" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>Only the ZC protocol (NOT the token dev) can mint tokens. It will do so automatically at the end of each Quantum Market to pay users whose PRs get merged. This aligns incentives with token price growth, rewarding all users who create value.</p>
+
+      <p className="mt-6.5 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}What is the utility of $ZC?</p>
+      <p className="mt-1 text-[14px] text-gray-300 leading-relaxed" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>$ZC represents a stake in the Z Combinator treasury, which receives a portion of all token mints from platform launches. Other launched tokens on ZC have utilities as determined by their founders. More $ZC utilities coming soon.</p>
+
+      <p className="mt-6.5 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}How does staking work? What are the rewards for staking?</p>
+      <p className="mt-0.5 text-[14px] text-gray-300 leading-relaxed" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>All ZC launched tokens will have native staking. Users who lock their tokens in the vault will earn rewards from protocol-minted tokens. Currently only available for $ZC and $oogway.</p>
+
+      <p className="mt-6.5 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}Are there trading fees?</p>
+      <p className="mt-0.5 text-[14px] text-gray-300 leading-relaxed" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>There are no trading fees for any ZC launched token currently.</p>
+
+      <p className="mt-6.5 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}As a dev, isn&apos;t it weird that I have to dump my tokens to fund myself?</p>
+      <p className="mt-1 text-[14px] text-gray-300 leading-relaxed" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>Projects relying on trading fees are unsustainable. Controlled token emissions let founders fuel growth through incentives, creating long-term value. Both users and founders get rich by contributing to and sharing ownership of a valuable project.</p>
+
+      <p className="mt-6.5 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}How can you get involved?</p>
+      <p className="mt-0.5 text-[14px] text-gray-300 leading-relaxed" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>&gt; If you want to found a startup, launch a ZC token and follow the steps on the <Link href="/" className="underline hover:text-white">landing page</Link>.</p>
+      <p className="mt-0.5 text-[14px] text-gray-300 leading-relaxed" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>&gt; If you want help grow existing projects, submit PRs to and trade Quantum Markets for any ZC launched project (<a href="https://github.com/zcombinatorio/zcombinator" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">including ZC itself</a>!) to earn substantial token rewards.</p>
+
+      <p className="mt-7 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}Have other questions?</p>
+      <p className="mt-1 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>Join <a href="https://discord.gg/MQfcX9QM2r" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">our discord</a> and ask them!</p>
+    </div>
+  );
+}

ui/app/(vscode)/history/[tokenAddress]/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { HistoryContent } from '@/components/HistoryContent';
+import { useParams } from 'next/navigation';
+
+export default function HistoryPage() {
+  const params = useParams();
+  const tokenAddress = params.tokenAddress as string;
+
+  // Extract token symbol from URL if needed, or fetch it
+  // For now, we'll pass it as a query param or fetch it in HistoryContent
+
+  return <HistoryContent tokenAddress={tokenAddress} tokenSymbol="" />;
+}

ui/app/(vscode)/holders/[tokenAddress]/page.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { HoldersContent } from '@/components/HoldersContent';
+import { useParams } from 'next/navigation';
+
+export default function HoldersPage() {
+  const params = useParams();
+  const tokenAddress = params.tokenAddress as string;
+
+  return <HoldersContent tokenAddress={tokenAddress} tokenSymbol="" />;
+}

ui/app/(vscode)/launch/page.tsx

@@ -0,0 +1,5 @@
+import { LaunchContent } from '@/components/LaunchContent';
+
+export default function LaunchPage() {
+  return <LaunchContent />;
+}

ui/app/(vscode)/layout.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { usePathname } from 'next/navigation';
+import { Sidebar } from '@/components/Sidebar';
+import { Header } from '@/components/Header';
+import { LineNumbers } from '@/components/LineNumbers';
+import { Footer } from '@/components/Footer';
+import { TabProvider } from '@/contexts/TabContext';
+
+function VscodeLayoutContent({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [lineCount, setLineCount] = useState(1);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const updateLineCount = () => {
+      if (contentRef.current) {
+        const contentHeight = contentRef.current.scrollHeight;
+        const lineHeight = 24;
+        const calculatedLines = Math.max(Math.ceil(contentHeight / lineHeight), 1);
+        setLineCount(calculatedLines);
+      }
+    };
+
+    // Initial update
+    const frameId = requestAnimationFrame(updateLineCount);
+
+    // Recalculate on window resize
+    window.addEventListener('resize', updateLineCount);
+
+    // Watch for DOM changes (when content loads dynamically)
+    let observer: MutationObserver | null = null;
+    if (contentRef.current) {
+      observer = new MutationObserver(updateLineCount);
+      observer.observe(contentRef.current, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true
+      });
+    }
+
+    return () => {
+      cancelAnimationFrame(frameId);
+      window.removeEventListener('resize', updateLineCount);
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [pathname, children]);
+
+  return (
+    <div className="min-h-screen text-white" style={{ backgroundColor: '#1F1F1F' }}>
+      <Sidebar />
+
+      {/* Main Content */}
+      <main
+        className="h-screen overflow-y-auto ml-[40px] md:ml-[300px]"
+      >
+        <Header />
+
+        {/* Content Area with Line Numbers */}
+        <div className="flex">
+          <LineNumbers lineCount={lineCount} />
+
+          {/* Main Content Column */}
+          <div ref={contentRef} className="flex-1 px-4 md:px-8 py-12">
+            {children}
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
+
+export default function VscodeLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <TabProvider>
+      <VscodeLayoutContent>{children}</VscodeLayoutContent>
+    </TabProvider>
+  );
+}

ui/app/(vscode)/page.tsx

@@ -0,0 +1,39 @@
+import Image from 'next/image';
+
+export default function LandingPage() {
+  return (
+    <div className="max-w-5xl">
+      <h1 className="text-7xl font-bold flex items-center gap-4">
+        <Image
+          src="/logos/z-logo-white.png"
+          alt="Z"
+          width={56}
+          height={56}
+          className="mr-2"
+        />
+        <span className="hidden md:inline">Combinator</span>
+      </h1>
+      <p className="mt-7 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}What is ZC?</p>
+      <p className="mt-1 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>A launchpad that helps founders hit PMF</p>
+      <p className="mt-[26px] text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}Thesis</p>
+      <p className="mt-1 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>The highest signal product feedback is a ready-to-merge PR made and selected by your users.</p>
+      <p className="mt-[26px] text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}What problems are ZC solving for you as a founder?</p>
+      <p className="mt-0.5 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>&gt; I don&apos;t know what to build b/c</p>
+      <p className="mt-0.5 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>&gt; I&apos;m getting no feedback (at worst) and bad feedback (at best) b/c</p>
+      <p className="mt-1 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>&gt; I&apos;m poorly incentivizing my users to give me good feedback b/c</p>
+      <p className="mt-1 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>&gt; I don&apos;t know how valueable each piece of feedback is</p>
+      <p className="mt-7 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}How does ZC solve these problems?</p>
+      <p className="mt-1 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>From Zero to PMF with ZC:</p>
+      <p className="mt-0.5 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>1. Come up with an idea and build the MVP.</p>
+      <p className="mt-0.5 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>2. Open source your code and <a href="https://www.zcombinator.io/launch" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">launch a ZC token</a> for it.</p>
+      <p className="mt-1 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>3. ZC spins up a <a href="https://percent.markets" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">Percent</a> <a href="https://www.paradigm.xyz/2025/06/quantum-markets" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">Quantum Market</a> (QM) for selecting the best user-submitted PR to merge.</p>
+      <p className="mt-1 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>4. Invite your users to submit PRs and trade the QM.</p>
+      <p className="mt-0.5 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>5. When the QM ends, the best performing PR gets merged and tokens get minted to pay the user who made the PR an amount proportional to how much the PR increased your token price.</p>
+      <p className="mt-1 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>6. Rerun steps 3-5 (ZC does this) while you build until you hit PMF.</p>
+      <p className="mt-7 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}Want to help build ZC?</p>
+      <p className="mt-1 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>Submit PRs to the <a href="https://github.com/zcombinatorio/zcombinator" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">ZC codebase</a> and trade the <a href="https://zc.percent.markets/" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">ZC QMs</a> to shape the future of the protocol.</p>
+      <p className="mt-7 text-[14px] text-gray-500" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>{'//'}Have questions?</p>
+      <p className="mt-0.5 text-[14px] text-gray-300" style={{ fontFamily: 'Monaco, Menlo, "Courier New", monospace' }}>Join <a href="https://discord.gg/MQfcX9QM2r" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">our discord</a> and ask them!</p>
+    </div>
+  );
+}