add Layer 2 Scaling topic with State Channels and Rollups pages

src/App.tsx

@@ -35,6 +35,9 @@ import {
   EthereumTransactionsLogsPage,
   EthereumTransactionsGasPage,
   EthereumTransactionsGasPricePage,
+  Layer2Page,
+  StateChannelsPage,
+  RollupsPage,
 } from './pages'
 
 function App() {
@@ -66,6 +69,9 @@ function App() {
           <Route path="consensus/proof-of-work" element={<ConsensusProofOfWorkPage />} />
           <Route path="consensus/proof-of-stake" element={<ConsensusProofOfStakePage />} />
           <Route path="blockspace" element={<BlockspacePage />} />
+          <Route path="layer-2" element={<Layer2Page />} />
+          <Route path="layer-2/state-channels" element={<StateChannelsPage />} />
+          <Route path="layer-2/rollups" element={<RollupsPage />} />
           <Route path="transaction-inclusion" element={<TransactionInclusionPage />} />
           <Route path="transaction-inclusion/nonce" element={<TransactionInclusionNoncePage />} />
           <Route path="transaction-inclusion/replacing" element={<TransactionInclusionReplacingPage />} />

src/config/navigation.ts

@@ -52,6 +52,14 @@ export const navConfig: NavCategory[] = [
         ],
       },
       { label: 'Blockspace', path: 'blockspace' },
+      {
+        label: 'Layer 2 Scaling',
+        path: 'layer-2',
+        children: [
+          { label: 'State Channels', path: 'layer-2/state-channels' },
+          { label: 'Rollups', path: 'layer-2/rollups' },
+        ],
+      },
       {
         label: 'Transaction Inclusion',
         path: 'transaction-inclusion',

src/pages/index.ts

@@ -22,6 +22,9 @@ export { ConsensusPage } from './consensus/ConsensusPage'
 export { ConsensusProofOfWorkPage } from './consensus/ConsensusProofOfWorkPage'
 export { ConsensusProofOfStakePage } from './consensus/ConsensusProofOfStakePage'
 export { BlockspacePage } from './blockspace/BlockspacePage'
+export { Layer2Page } from './layer-2/Layer2Page'
+export { StateChannelsPage } from './layer-2/StateChannelsPage'
+export { RollupsPage } from './layer-2/RollupsPage'
 export { TransactionInclusionPage } from './transaction-inclusion/TransactionInclusionPage'
 export { TransactionInclusionNoncePage } from './transaction-inclusion/TransactionInclusionNoncePage'
 export { TransactionInclusionReplacingPage } from './transaction-inclusion/TransactionInclusionReplacingPage'

src/pages/layer-2/Layer2Page.tsx

@@ -0,0 +1,76 @@
+import { Link } from 'react-router-dom'
+
+export function Layer2Page() {
+  return (
+    <div className="page">
+      <h1>Layer 2 Scaling</h1>
+      <p className="lead">
+        Layer 1 blockchains are intentionally slow. They cap throughput to keep every node in
+        sync and preserve decentralization. Layer 2 solutions run on top, processing transactions
+        off-chain and anchoring trust back to the base chain.
+      </p>
+
+      <h2 id="the-scaling-problem">
+        <a href="#the-scaling-problem" className="anchor-link" aria-label="Link to this section">
+          The scaling problem
+        </a>
+      </h2>
+      <p>
+        Every node on a blockchain processes every transaction. This is what makes it trustless:
+        you don't have to trust any single operator because you can verify the chain yourself. But
+        it also means throughput is bounded by what the slowest full node can handle.
+      </p>
+      <p>
+        <Link to="/blockspace">Blockspace</Link> is capped to keep block production predictable.
+        When demand exceeds capacity, fees rise and transactions queue up. You can't simply raise
+        the block limit without making it harder to run a node, which weakens decentralization.
+      </p>
+
+      <h2 id="the-trilemma">
+        <a href="#the-trilemma" className="anchor-link" aria-label="Link to this section">
+          The trilemma
+        </a>
+      </h2>
+      <p>
+        Blockchains face a tradeoff between three properties:{' '}
+        <strong>decentralization</strong>, <strong>security</strong>, and{' '}
+        <strong>scalability</strong>. Optimizing for any two typically degrades the third. A
+        network with very high throughput either relies on powerful hardware (centralizing who
+        can run a node) or weakens its security guarantees.
+      </p>
+      <p>
+        Layer 2 approaches this differently: offload execution to a separate system, but inherit
+        the security of Layer 1 for the final settlement. The L2 can be faster and cheaper because
+        it doesn't require global consensus for every transaction; only the final result needs to
+        be verifiable on-chain.
+      </p>
+
+      <h2 id="approaches">
+        <a href="#approaches" className="anchor-link" aria-label="Link to this section">
+          Two main approaches
+        </a>
+      </h2>
+      <p>There are two broad families of Layer 2 solutions:</p>
+      <ul>
+        <li>
+          <Link to="/layer-2/state-channels">State Channels</Link>: two or more parties lock
+          funds on-chain, then exchange signed state updates directly off-chain. Only the opening
+          and closing transactions touch the base chain.
+        </li>
+        <li>
+          <Link to="/layer-2/rollups">Rollups</Link>: a sequencer batches many transactions,
+          posts compressed data to L1, and includes a proof that the state transition was valid.
+          Suitable for general-purpose applications with many users.
+        </li>
+      </ul>
+
+      <p className="page-next-link">
+        <Link to="/layer-2/state-channels">State Channels</Link>
+        {' · '}
+        <Link to="/layer-2/rollups">Rollups</Link>
+        {' · '}
+        <Link to="/blockspace">Blockspace</Link>
+      </p>
+    </div>
+  )
+}

src/pages/layer-2/RollupsDemo.css

@@ -0,0 +1,212 @@
+.rollups-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  margin: 1rem 0;
+  background: rgba(30, 41, 59, 0.4);
+  border-radius: 8px;
+  border: 1px solid rgba(6, 182, 212, 0.3);
+}
+
+.rollups-mode-toggle {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.rollups-mode-btn {
+  padding: 0.3rem 0.85rem;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 4px;
+  border: 1px solid rgba(51, 65, 85, 0.8);
+  background: transparent;
+  color: rgba(148, 163, 184, 0.8);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.rollups-mode-btn.active {
+  background: rgba(6, 182, 212, 0.15);
+  border-color: rgba(6, 182, 212, 0.5);
+  color: #06b6d4;
+}
+
+.rollups-zones {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.rollups-zone {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(15, 23, 42, 0.5);
+  border-radius: 6px;
+  border: 1px solid rgba(51, 65, 85, 0.6);
+  min-height: 150px;
+}
+
+.rollups-zone-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(148, 163, 184, 0.85);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.rollups-tx-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+}
+
+.rollups-tx {
+  padding: 0.2rem 0.5rem;
+  font-size: 12px;
+  color: #e2e8f0;
+  background: rgba(51, 65, 85, 0.4);
+  border-radius: 3px;
+  border: 1px solid rgba(71, 85, 105, 0.5);
+}
+
+.rollups-empty {
+  font-size: 12px;
+  color: rgba(148, 163, 184, 0.5);
+  font-style: italic;
+}
+
+.rollups-zone-actions {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
+.rollups-arrow {
+  align-self: center;
+  font-size: 20px;
+  color: rgba(6, 182, 212, 0.6);
+  flex: 0 0 auto;
+}
+
+.rollups-zone-l1 {
+  border-color: rgba(139, 92, 246, 0.3);
+}
+
+.rollups-post-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  flex: 1;
+}
+
+.rollups-post {
+  padding: 0.5rem 0.6rem;
+  border-radius: 4px;
+  border: 1px solid;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.rollups-post-optimistic {
+  background: rgba(234, 179, 8, 0.08);
+  border-color: rgba(234, 179, 8, 0.3);
+}
+
+.rollups-post-zk {
+  background: rgba(139, 92, 246, 0.1);
+  border-color: rgba(139, 92, 246, 0.35);
+}
+
+.rollups-post-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.rollups-post-count {
+  font-size: 13px;
+  font-weight: 600;
+  color: #e2e8f0;
+}
+
+.rollups-finality-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+}
+
+.rollups-finality-optimistic {
+  background: rgba(234, 179, 8, 0.15);
+  color: #eab308;
+}
+
+.rollups-finality-zk {
+  background: rgba(139, 92, 246, 0.15);
+  color: #a78bfa;
+}
+
+.rollups-post-root {
+  font-size: 10px;
+  color: rgba(148, 163, 184, 0.7);
+  font-family: monospace;
+}
+
+.rollups-btn {
+  padding: 0.3rem 0.7rem;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 4px;
+  border: 1px solid rgba(51, 65, 85, 0.8);
+  background: rgba(51, 65, 85, 0.3);
+  color: rgba(203, 213, 225, 0.9);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.rollups-btn:hover:not(:disabled) {
+  background: rgba(71, 85, 105, 0.5);
+}
+
+.rollups-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.rollups-btn-primary {
+  background: rgba(6, 182, 212, 0.12);
+  border-color: rgba(6, 182, 212, 0.4);
+  color: #06b6d4;
+}
+
+.rollups-btn-primary:hover:not(:disabled) {
+  background: rgba(6, 182, 212, 0.22);
+}
+
+.rollups-stat {
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(148, 163, 184, 0.9);
+  padding: 0.5rem 0.75rem;
+  background: rgba(15, 23, 42, 0.4);
+  border-radius: 4px;
+  text-align: center;
+}
+
+.rollups-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.rollups-caption {
+  margin: 0;
+  font-size: 12px;
+  color: rgba(148, 163, 184, 0.9);
+}