> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hedera.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hedera Developer Docs

> Explore our SDKs, APIs, tutorials, and guides for building on the Hedera network.

export const PlaygroundShowcase = () => {
  const [tabIdx, setTabIdx] = useState(0);
  const [itemIdx, setItemIdx] = useState(0);
  const [hoverIdx, setHoverIdx] = useState(-1);
  const ICON = {
    bot: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="10" rx="2" /><circle cx="12" cy="5" r="2" /><path d="M12 7v4 M8 16h.01 M16 16h.01" /></svg>,
    coin: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 6v12 M15.5 9.5H10a2.5 2.5 0 0 0 0 5h4a2.5 2.5 0 0 1 0 5H8.5" /></svg>,
    chat: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>,
    contract: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8" /></svg>,
    sparkle: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l2.4 5.6L20 9l-4.2 3.6L17 18l-5-3-5 3 1.2-5.4L4 9l5.6-1.4z" /></svg>,
    flask: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 2v6L4 18a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-6-10V2 M10 2h4" /></svg>,
    cpu: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 1v3 M15 1v3 M9 20v3 M15 20v3 M20 9h3 M20 14h3 M1 9h3 M1 14h3" /></svg>,
    image: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="M21 15l-5-5L5 21" /></svg>,
    bldg: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18 M9 21V9" /></svg>,
    wrench: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /></svg>,
    code: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 18l6-6-6-6 M8 6l-6 6 6 6" /></svg>,
    play: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 3l14 9-14 9z" /></svg>,
    globe: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M2 12h20 M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 M12 2a15.3 15.3 0 0 0-4 10 15.3 15.3 0 0 0 4 10" /></svg>,
    cube: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /></svg>
  };
  const TABS = [{
    label: 'Try it live',
    items: [{
      icon: 'play',
      title: 'Developer Playground',
      desc: 'Run real Hedera transactions in your browser, no setup.',
      href: 'https://portal.hedera.com/playground',
      preview: {
        kind: 'embed',
        url: 'https://portal.hedera.com/playground',
        label: 'portal.hedera.com/playground'
      }
    }, {
      icon: 'contract',
      title: 'Contract Builder',
      desc: 'Scaffold and deploy Solidity contracts from the browser.',
      href: 'https://portal.hedera.com/contract-builder',
      preview: {
        kind: 'embed',
        url: 'https://portal.hedera.com/contract-builder?minimal=1',
        label: 'portal.hedera.com/contract-builder'
      }
    }, {
      icon: 'flask',
      title: 'Agent Lab',
      desc: 'Visual playground to build, test, and demo AI agents on Hedera.',
      href: 'https://portal.hedera.com/agent-lab',
      preview: {
        kind: 'embed',
        url: 'https://portal.hedera.com/agent-lab',
        label: 'portal.hedera.com/agent-lab'
      }
    }]
  }];
  const tab = TABS[tabIdx];
  const item = tab.items[itemIdx];
  const chip = active => ({
    padding: '6px 14px',
    borderRadius: '999px',
    fontSize: '13px',
    fontWeight: 400,
    lineHeight: 1.4,
    cursor: 'pointer',
    border: '1px solid var(--landing-border)',
    background: active ? 'var(--landing-pill-bg)' : 'transparent',
    color: active ? 'var(--landing-pill-fg)' : 'var(--landing-fg-secondary)',
    transition: 'background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease',
    whiteSpace: 'nowrap'
  });
  const ChatBubble = ({msg}) => {
    const isUser = msg.from === 'user';
    const statusColor = msg.status === 'success' ? '#16a34a' : msg.status === 'pending' ? '#d97706' : null;
    return <div style={{
      display: 'flex',
      justifyContent: isUser ? 'flex-end' : 'flex-start',
      marginBottom: '10px'
    }}>
        <div style={{
      maxWidth: '85%',
      padding: '10px 14px',
      borderRadius: '14px',
      background: isUser ? 'rgba(130,89,239,0.18)' : 'rgba(17,21,29,0.55)',
      color: '#fff',
      fontSize: '0.8125rem',
      lineHeight: 1.45,
      border: '1px solid rgba(255,255,255,0.06)'
    }}>
          {msg.status && <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: '6px',
      fontSize: '0.6875rem',
      color: statusColor,
      fontWeight: 500,
      marginBottom: '4px'
    }}>
              {msg.status === 'success' && <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={statusColor} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" stroke={statusColor} strokeWidth="2" fill="none" /><path d="M8 12l3 3 5-6" /></svg>}
              {msg.status === 'pending' && <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={statusColor} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>}
              <span style={{
      textTransform: 'uppercase',
      letterSpacing: '0.04em'
    }}>{msg.status}</span>
            </div>}
          <div>{msg.text}</div>
          {msg.action && <div style={{
      marginTop: '8px',
      padding: '6px 12px',
      borderRadius: '8px',
      background: 'rgba(255,255,255,0.08)',
      fontSize: '0.6875rem',
      display: 'inline-block'
    }}>
              {msg.action.label} · <span style={{
      fontFamily: 'monospace'
    }}>{msg.action.tx}</span>
            </div>}
        </div>
      </div>;
  };
  const PreviewPane = ({preview}) => {
    if (!preview) return null;
    const isEmbed = preview.kind === 'embed';
    const shell = {
      borderRadius: '12px',
      border: '1px solid var(--landing-border)',
      overflow: 'hidden',
      background: 'linear-gradient(180deg, #0c1226 0%, #11151D 100%)',
      height: isEmbed ? preview.height || '575px' : '420px',
      display: 'grid',
      gridTemplateRows: 'auto 1fr'
    };
    if (preview.kind === 'chat') {
      return <div style={shell}>
          <div style={{
        padding: '14px 18px',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}>
            <div style={{
        width: '8px',
        height: '8px',
        borderRadius: '50%',
        background: '#16a34a'
      }} />
            <div style={{
        fontSize: '0.75rem',
        color: 'rgba(255,255,255,0.55)',
        fontFamily: 'monospace'
      }}>hedera-agent · testnet</div>
          </div>
          <div style={{
        flex: 1,
        padding: '18px',
        overflowY: 'auto'
      }}>
            {preview.messages.map((m, i) => <ChatBubble key={i} msg={m} />)}
          </div>
        </div>;
    }
    if (preview.kind === 'code') {
      return <div style={shell}>
          <div style={{
        padding: '10px 14px',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}>
            <div style={{
        display: 'flex',
        gap: '6px'
      }}>
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#ff5f57'
      }} />
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#febc2e'
      }} />
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#28c840'
      }} />
            </div>
            <div style={{
        fontSize: '0.6875rem',
        color: 'rgba(255,255,255,0.5)',
        fontFamily: 'monospace',
        marginLeft: '8px',
        textTransform: 'uppercase',
        letterSpacing: '0.06em'
      }}>{preview.lang}</div>
          </div>
          <pre style={{
        flex: 1,
        margin: 0,
        padding: '18px',
        overflow: 'auto',
        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
        fontSize: '0.75rem',
        lineHeight: 1.55,
        color: 'rgba(255,255,255,0.88)',
        whiteSpace: 'pre',
        background: 'transparent'
      }}><code>{preview.code}</code></pre>
        </div>;
    }
    if (preview.kind === 'result') {
      return <div style={shell}>
          <div style={{
        padding: '14px 18px',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
        display: 'flex',
        alignItems: 'center',
        gap: '10px'
      }}>
            {preview.status === 'success' && <div style={{
        width: '24px',
        height: '24px',
        borderRadius: '50%',
        background: 'rgba(22,163,74,0.18)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}>
                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7" /></svg>
              </div>}
            <div style={{
        fontSize: '0.875rem',
        fontWeight: 500,
        color: '#fff'
      }}>{preview.title}</div>
          </div>
          <div style={{
        flex: 1,
        padding: '18px',
        overflow: 'auto'
      }}>
            <div style={{
        display: 'grid',
        gridTemplateColumns: '120px 1fr',
        gap: '8px 16px'
      }}>
              {preview.rows.flatMap(([k, v], i) => [<div key={'k' + i} style={{
        fontSize: '0.75rem',
        color: 'rgba(255,255,255,0.5)',
        textTransform: 'uppercase',
        letterSpacing: '0.04em'
      }}>{k}</div>, <div key={'v' + i} style={{
        fontSize: '0.8125rem',
        color: 'rgba(255,255,255,0.92)',
        fontFamily: (/^[0-9.\-]/).test(String(v)) || String(v).startsWith('0x') || String(v).startsWith('{') ? 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' : 'inherit',
        wordBreak: 'break-all'
      }}>{v}</div>])}
            </div>
          </div>
        </div>;
    }
    if (preview.kind === 'embed') {
      return <div style={shell}>
          <div style={{
        padding: '10px 14px',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}>
            <div style={{
        display: 'flex',
        gap: '6px'
      }}>
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#ff5f57'
      }} />
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#febc2e'
      }} />
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#28c840'
      }} />
            </div>
            <div style={{
        fontSize: '0.6875rem',
        color: 'rgba(255,255,255,0.5)',
        fontFamily: 'monospace',
        marginLeft: '8px'
      }}>{preview.label || preview.url}</div>
          </div>
          <iframe src={preview.url} title={preview.label || 'Embedded preview'} style={{
        flex: 1,
        width: '100%',
        border: 0,
        background: '#fff',
        display: 'block'
      }} loading="lazy" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox" />
        </div>;
    }
    return null;
  };
  return <div>
      {}
      {TABS.length > 1 && <div role="tablist" aria-label="Showcase categories" style={{
    display: 'flex',
    gap: '8px',
    flexWrap: 'wrap',
    margin: '0 0 16px'
  }}>
          {TABS.map((t, i) => <button key={t.label} role="tab" aria-selected={i === tabIdx} onClick={() => {
    setTabIdx(i);
    setItemIdx(0);
  }} style={chip(i === tabIdx)}>
              {t.label}
            </button>)}
        </div>}

      {}
      <div className="playground-grid">
        {}
        <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '8px'
  }}>
          {tab.items.map((it, i) => {
    const active = i === itemIdx;
    return <button key={it.title} onClick={() => setItemIdx(i)} onMouseEnter={() => setHoverIdx(i)} onMouseLeave={() => setHoverIdx(-1)} style={{
      display: 'flex',
      alignItems: 'flex-start',
      gap: '14px',
      padding: '16px',
      borderRadius: '10px',
      border: '1px solid ' + (active ? '#8259EF' : hoverIdx === i ? 'rgba(130,89,239,0.45)' : 'var(--landing-border)'),
      background: active || hoverIdx === i ? 'var(--landing-card-bg)' : 'transparent',
      textAlign: 'left',
      cursor: 'pointer',
      width: '100%',
      transition: 'background-color 0.15s ease, border-color 0.15s ease',
      font: 'inherit',
      color: 'inherit'
    }}>
                <div style={{
      width: '36px',
      height: '36px',
      borderRadius: '8px',
      background: 'var(--landing-card-icon-bg)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0
    }}>
                  {ICON[it.icon]}
                </div>
                <div style={{
      flex: 1,
      minWidth: 0
    }}>
                  <div style={{
      fontWeight: 500,
      fontSize: '0.875rem',
      color: 'var(--landing-fg-primary)',
      marginBottom: '4px'
    }}>{it.title}</div>
                  <div style={{
      fontSize: '0.8125rem',
      color: 'var(--landing-fg-tertiary)',
      lineHeight: 1.45
    }}>{it.desc}</div>
                </div>
                <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--landing-fg-tertiary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
      flexShrink: 0,
      marginTop: '10px'
    }}><path d="M9 18l6-6-6-6" /></svg>
              </button>;
  })}

          <a href={item.href} style={{
    alignSelf: 'flex-start',
    marginTop: '8px',
    padding: '8px 16px',
    borderRadius: '999px',
    backgroundColor: '#8259EF',
    color: '#fff',
    fontSize: '0.8125rem',
    fontWeight: 500,
    textDecoration: 'none'
  }}>
            Open {item.title} →
          </a>
        </div>

        {}
        <PreviewPane preview={item.preview} />
      </div>
    </div>;
};

<div className="not-prose landing-container">
  <div className="hero-panel">
    <div className="hero-split" style={{ gap: '48px', alignItems: 'center', position: 'relative' }}>
      {/* Left: title + CTA */}

      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
        <div>
          <h1
            style={{
      fontSize: 'clamp(2rem, 4vw, 3rem)',
      fontWeight: 700,
      lineHeight: 1.1,
      margin: '0 0 16px',
      letterSpacing: '-0.02em',
      color: 'var(--landing-fg-primary)'
    }}
          >
            Hedera Developer Docs
          </h1>

          <p
            style={{
      fontSize: '1rem',
      color: 'var(--landing-fg-secondary)',
      margin: 0,
      lineHeight: 1.6,
      maxWidth: '420px'
    }}
          >
            Explore our SDKs, APIs, tutorials, and guides for building on the Hedera network.
          </p>
        </div>
      </div>

      {/* Right: persona selector */}

      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <div
          style={{
    fontSize: '0.875rem', fontWeight: 700,
    fontFamily: '"Styrene Bold", sans-serif',
    color: 'var(--landing-fg-primary)',
    marginBottom: '4px'
  }}
        >
          Where do you want to start?
        </div>

        <a href="/learn/getting-started/index" className="hero-persona-card">
          <div className="hero-persona-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />

              <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />

              <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />

              <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
            </svg>
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--landing-fg-primary)', marginBottom: '3px' }}>New to Hedera</div>
            <div style={{ fontSize: '0.75rem', color: 'var(--landing-fg-tertiary)', lineHeight: 1.4 }}>Accounts, HBAR, and your first transaction</div>
          </div>
        </a>

        <a href="/evm" className="hero-persona-card">
          <div className="hero-persona-icon">
            <svg viewBox="0 0 256 417" fill="none">
              <path fill="#fff" d="M127.961 0l-2.795 9.5v275.668l2.795 2.79 127.962-75.638z" />

              <path fill="#fff" fillOpacity="0.7" d="M127.962 0L0 212.32l127.962 75.639V154.158z" />

              <path fill="#fff" d="M127.961 312.187l-1.575 1.92v98.199l1.575 4.6L256 236.587z" />

              <path fill="#fff" fillOpacity="0.7" d="M127.962 416.905v-104.72L0 236.585z" />

              <path fill="#fff" fillOpacity="0.4" d="M127.961 287.958l127.96-75.637-127.96-58.162z" />

              <path fill="#fff" fillOpacity="0.4" d="M0 212.32l127.96 75.638V154.159z" />
            </svg>
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--landing-fg-primary)', marginBottom: '3px' }}>EVM developers</div>
            <div style={{ fontSize: '0.75rem', color: 'var(--landing-fg-tertiary)', lineHeight: 1.4 }}>Hardhat, Foundry, and MetaMask on Hedera</div>
          </div>
        </a>

        <a href="/native" className="hero-persona-card">
          <div className="hero-persona-icon">
            <svg viewBox="0 0 436.54 436.54" fill="#fff" stroke="#fff" strokeWidth="13" strokeLinejoin="round">
              <path d="M372.61,63.93C331.38,22.7,276.57,0,218.27,0S105.15,22.7,63.93,63.93C22.7,105.15,0,159.97,0,218.27s22.7,113.11,63.93,154.34c41.23,41.23,96.04,63.93,154.34,63.93s113.11-22.7,154.34-63.93c41.23-41.23,63.93-96.04,63.93-154.34s-22.7-113.11-63.93-154.34ZM218.27,417.82c-110.03,0-199.55-89.52-199.55-199.55S108.24,18.72,218.27,18.72s199.55,89.52,199.55,199.55-89.52,199.55-199.55,199.55Z" />

              <path d="M218.27,71.51l-115.65,115.65,31.11,31.11-31.11,31.11,115.65,115.65,115.65-115.65-31.11-31.11,31.11-31.11-115.65-115.65ZM218.27,95.56l91.59,91.59-91.59,91.59-91.59-91.59,91.59-91.59ZM309.86,249.38l-91.59,91.59-91.59-91.59,19.09-19.08,72.51,72.51,72.51-72.51,19.09,19.08Z" />
            </svg>
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--landing-fg-primary)', marginBottom: '3px' }}>Native SDKs</div>
            <div style={{ fontSize: '0.75rem', color: 'var(--landing-fg-tertiary)', lineHeight: 1.4 }}>JavaScript, Java, and Go direct API access</div>
          </div>
        </a>
      </div>
    </div>
  </div>

  <a href="/solutions/ai/index" className="ai-spotlight" aria-label="Hedera AI Studio: open-source toolkit bridging artificial intelligence and Hedera">
    {/* Left: round H badge + title, subtitle below */}

    <div className="ai-spotlight-head">
      <div className="ai-spotlight-titlerow">
        <img className="ai-spotlight-badge ai-spotlight-badge--white" src="https://mintcdn.com/hedera-0c6e0218/02ghNJ6QcD5SIj9-/images/logos/hedera-con-white.svg?fit=max&auto=format&n=02ghNJ6QcD5SIj9-&q=85&s=6b5eab4d6c51853c3fcaadfa59ffe4fa" alt="Hedera" width="1200" height="1200" data-path="images/logos/hedera-con-white.svg" />

        <img className="ai-spotlight-badge ai-spotlight-badge--dark" src="https://mintcdn.com/hedera-0c6e0218/02ghNJ6QcD5SIj9-/images/logos/hedera-con-dark.svg?fit=max&auto=format&n=02ghNJ6QcD5SIj9-&q=85&s=cca0eab560a5bc590041acf7c96cb812" alt="Hedera" width="1200" height="1200" data-path="images/logos/hedera-con-dark.svg" />

        <div className="ai-spotlight-title">Hedera AI Studio</div>
      </div>

      <div className="ai-spotlight-subtitle">Open-source toolkit bridging artificial intelligence and Hedera</div>
    </div>

    {/* 5 icons — inline SVG (recolored via currentColor) so they render in the
            Mintlify production build; CSS mask-image was stripped on deploy */}

    <div className="ai-spotlight-features">
      <div className="ai-spotlight-feature">
        <svg className="ai-spotlight-ico" viewBox="8 8 32 32" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="13" y="13" width="22" height="22" rx="3" />

          <path d="M19 13V8 M29 13V8 M19 35v5 M29 35v5 M13 19H8 M13 29H8 M35 19h5 M35 29h5" />

          <path d="M16 30 L19.5 18 L23 30 M17 26.5 H22" />

          <path d="M27 18 V30" />
        </svg>

        <span className="ai-spotlight-caption">Modular tools to build AI agents</span>
      </div>

      <div className="ai-spotlight-feature">
        <svg className="ai-spotlight-ico" viewBox="83 83 274 274" fill="currentColor">
          <polygon points="213.14 226.67 196.2 209.73 184.17 221.75 213.14 250.72 256.18 207.68 244.16 195.65 213.14 226.67" />

          <path d="M296.72,211.67c-3.95-35.76-32.47-64.22-68.26-68.07v-60.57h-17.01v60.62c-35.59,4.03-63.89,32.4-67.82,68.01h-60.81v17.01h60.81c3.94,35.69,32.35,64.1,68.04,68.04v60.6h17.01v-60.6c35.69-3.94,64.1-32.35,68.04-68.04h60.37v-17.01h-60.37ZM220.18,280.2c-33.09,0-60.02-26.92-60.02-60.02s26.92-60.02,60.02-60.02,60.02,26.92,60.02,60.02-26.92,60.02-60.02,60.02Z" />

          <path d="M175.77,136.36l-39.23-39.23-39.23,39.23,39.23,39.23,39.23-39.23ZM136.54,121.17l15.18,15.18-15.18,15.18-15.18-15.18,15.18-15.18Z" />

          <path d="M264.95,304l39.23,39.23,39.23-39.23-39.23-39.23-39.23,39.23ZM304.19,319.18l-15.18-15.18,15.18-15.18,15.18,15.18-15.18,15.18Z" />

          <path d="M342.61,136.36l-39.23-39.23-39.23,39.23,39.23,39.23,39.23-39.23ZM303.38,121.17l15.18,15.18-15.18,15.18-15.18-15.18,15.18-15.18Z" />

          <path d="M97.31,304l39.23,39.23,39.23-39.23-39.23-39.23-39.23,39.23ZM136.54,319.18l-15.18-15.18,15.18-15.18,15.18,15.18-15.18,15.18Z" />
        </svg>

        <span className="ai-spotlight-caption">Connect AI agents seamlessly</span>
      </div>

      <div className="ai-spotlight-feature">
        <svg className="ai-spotlight-ico" viewBox="99 99 242 242" fill="currentColor">
          <path d="M324,134.4v170.6H116.3v-170.6h207.7M341,117.3H99.3v204.7h241.7V117.3h0Z" />

          <polygon points="177.6 263.6 133.7 222.2 179 176.9 191.1 188.9 158.1 221.8 189.3 251.2 177.6 263.6" />

          <polygon points="263.5 263 250.7 251.8 279.6 218.7 249.8 188.9 261.8 176.9 302.9 218 263.5 263" />

          <rect x="193.8" y="210.4" width="54.9" height="17" transform="translate(-90 215.1) rotate(-44)" />
        </svg>

        <span className="ai-spotlight-caption">Build with LangChain, LangGraph, and JavaScript</span>
      </div>

      <div className="ai-spotlight-feature">
        <svg className="ai-spotlight-ico" viewBox="120 120 202 202" fill="currentColor">
          <path d="m220.2 139.3 70.2 40.5v81.1l-70.2 40.5-70.2-40.5v-81.1l70.2-40.5m0-19.6L133 170.1v100.7l87.2 50.4 87.2-50.4V170.1l-87.2-50.3Z" />

          <path d="M273.6 220h-17v-15.5l-37.7-24.3-29.1 15.8-8.1-15 37.9-20.5 54 34.7V220z" />
        </svg>

        <span className="ai-spotlight-caption">Automated tokenization, messaging, and data logging</span>
      </div>

      <div className="ai-spotlight-feature">
        <svg className="ai-spotlight-ico" viewBox="77 77 286 286" fill="currentColor">
          <path d="M261.5,153.3v37.7h-82.4v-37.7h-19.2v134.9h19.2v-40.2h82.4v40.2h19.2v-134.9h-19.2ZM179.1,228.9v-18.7h82.4v18.7h-82.4Z" />

          <path d="M210.1,376.7v-19h-1.3c-29-2.6-55.9-14-78-33.1l-1-.9-13.7,13.6-13.6-13.6,13.7-13.7-.8-1c-12.4-14.8-21.5-31.5-26.9-50l-.3-1h-24.4v-19.2h20.4l-.2-1.6c-.7-5.6-1-11.2-1-16.8s.4-12.4,1.3-18.6l.2-1.6h-20.6v-19.2h24.9l.3-1c5.6-18,14.6-34.5,27-48.9l.8-1-13.8-13.8,13.6-13.6,13.8,13.8,1-.8c22.2-18.9,49.2-30.1,78.1-32.4h1.3v-19.2h19.2v19.1h1.3c29,2.4,56.1,13.6,78.3,32.6l1,.8,13.3-13.3,13.6,13.6-13.3,13.3.9,1c12.3,14.4,21.3,30.8,26.8,48.7l.3,1h24v19.2h-19.7l.2,1.6c.8,6.2,1.3,12.4,1.3,18.6s-.3,11.2-1,16.8l-.2,1.6h19.5v19.2h-23.5l-.3,1c-5.5,18.9-14.9,36.1-27.9,51.1l-.9,1,13.2,13.2-13.6,13.6-13.3-13.3-1,.8c-22.4,18.9-49.6,30-78.6,32.1h-1.3v19h-19.3l.2.3ZM220.6,102.6c-65,0-117.8,52.8-117.8,117.8s52.9,117.8,117.8,117.8,117.8-52.9,117.8-117.8-52.9-117.8-117.8-117.8h0Z" />
        </svg>

        <span className="ai-spotlight-caption">Integrated with ElizaOS for intuitive agent interactions</span>
      </div>
    </div>

    <span className="ai-spotlight-footer">Explore AI Studio →</span>
  </a>

  <div className="landing-section">
    <h2 id="explore-the-docs" className="landing-section-heading">
      <a href="#explore-the-docs">Explore the docs</a>
    </h2>

    <p className="landing-section-description">
      The Hedera documentation is organized into seven sections. Pick the one that fits what you're building.
    </p>

    <div className="landing-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))' }}>
      <a href="/learn" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-docs.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=e11bd4009a92b77a8dade60cd5cf400c" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-docs.svg" />
        </div>

        <div>
          <div className="landing-card-title">Learn</div>
          <div className="landing-card-desc">Fundamentals: accounts, keys, transactions, tokens, hashgraph, and networks.</div>
        </div>
      </a>

      <a href="/evm" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-ethereum.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=136db51a20d3901d9b7ea0df717d19fe" alt="" aria-hidden="true" width="417" height="417" data-path="images/brand-icons/icon-white-ethereum.svg" />
        </div>

        <div>
          <div className="landing-card-title">EVM Developers</div>
          <div className="landing-card-desc">Deploy Solidity contracts with MetaMask, Hardhat, Foundry, and JSON-RPC relay.</div>
        </div>
      </a>

      <a href="/native" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-sdk.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=a30cd658d5962f91875f6d8dad34eb86" alt="" aria-hidden="true" width="437" height="437" data-path="images/brand-icons/icon-white-sdk.svg" />
        </div>

        <div>
          <div className="landing-card-title">Native SDKs</div>
          <div className="landing-card-desc">JavaScript, Java, and Go SDKs for direct access to Hedera services.</div>
        </div>
      </a>

      <a href="/solutions" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-ecosystem.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=960a0186c1d69c2b999104db057bb97f" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-ecosystem.svg" />
        </div>

        <div>
          <div className="landing-card-title">Solutions</div>
          <div className="landing-card-desc">Tokenization, AI agents, governance, sustainability, and developer tools.</div>
        </div>
      </a>

      <a href="/operators/mirror-node/index" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-hedera-network.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=5a57bda8e51db8dae955ea065dfb10b1" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-hedera-network.svg" />
        </div>

        <div>
          <div className="landing-card-title">Operators</div>
          <div className="landing-card-desc">Run your own mirror node, JSON-RPC relay, or consensus node.</div>
        </div>
      </a>

      <a href="/reference" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-file-alt.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=01b108431735014a1995603030363b38" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-file-alt.svg" />
        </div>

        <div>
          <div className="landing-card-title">Reference</div>
          <div className="landing-card-desc">REST API, Protobuf, HCS gRPC, Status, and Contract Verification APIs.</div>
        </div>
      </a>

      <a href="/support" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-support.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=b2c51cf64cf774332d9354fc6f751ecc" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-support.svg" />
        </div>

        <div>
          <div className="landing-card-title">Support</div>
          <div className="landing-card-desc">FAQs, contributing, style guide, glossary, and community resources.</div>
        </div>
      </a>
    </div>
  </div>

  <div className="landing-section">
    <div className="landing-section-heading-row">
      <h2 id="build-on-hedera" className="landing-section-heading">
        <a href="#build-on-hedera">Build on Hedera</a>
      </h2>

      <a href="/learn#core-concepts" className="landing-see-all">See all →</a>
    </div>

    <p className="landing-section-description">
      Pick the Hedera service that powers your app: accounts, smart contracts, native tokens, or consensus, then try it in your browser with no setup.
    </p>

    <div className="landing-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', marginBottom: '36px' }}>
      <a href="/native/consensus/create-topic" className="landing-card-stacked">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-consensus.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=b1aedc00f96e23c335b1096e9f949918" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-consensus.svg" />
        </div>

        <div className="landing-card-title">Consensus Service</div>
        <div className="landing-card-desc">Scalable, real-time audit logs with consensus timestamps. 10k+ TPS at \$0.0001 per message.</div>

        <div className="landing-tag-group">
          <span className="landing-tag">HCS</span>
          <span className="landing-tag">Messaging</span>
        </div>
      </a>

      <a href="/learn/core-concepts/tokens/index" className="landing-card-stacked">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-tokens.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=2f32df634f62f79fba7af1ea097d522b" alt="" aria-hidden="true" width="448" height="441" data-path="images/brand-icons/icon-white-tokens.svg" />
        </div>

        <div className="landing-card-title">Token Service</div>
        <div className="landing-card-desc">Configure, mint, and manage native fungible and non-fungible tokens with built-in compliance.</div>

        <div className="landing-tag-group">
          <span className="landing-tag">HTS</span>
          <span className="landing-tag">ERC-20</span>
          <span className="landing-tag">ERC-721</span>
        </div>
      </a>

      <a href="/learn/core-concepts/services/smart-contracts" className="landing-card-stacked">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-smart-contract.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=aab577823b00589765e298115651974e" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-smart-contract.svg" />
        </div>

        <div className="landing-card-title">Smart Contracts</div>
        <div className="landing-card-desc">EVM-compatible Solidity contracts with access to native Hedera services via system contracts.</div>

        <div className="landing-tag-group">
          <span className="landing-tag">Solidity</span>
          <span className="landing-tag">EVM</span>
        </div>
      </a>

      <a href="/learn/core-concepts/accounts/index" className="landing-card-stacked">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-people.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=d44f7fb823bcb4fab3e41246c1037cd2" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-people.svg" />
        </div>

        <div className="landing-card-title">Account Service</div>
        <div className="landing-card-desc">Create and manage Hedera accounts, keys, staking, and auto-account creation from a public key.</div>

        <div className="landing-tag-group">
          <span className="landing-tag">Accounts</span>
          <span className="landing-tag">HBAR</span>
        </div>
      </a>
    </div>

    <h3
      id="try-it-live"
      style={{
fontSize: '1rem',
fontWeight: 500,
margin: '0 0 6px',
letterSpacing: '-0.01em',
color: 'var(--landing-fg-primary)'
}}
    >
      <a href="#try-it-live" style={{ color: 'inherit', textDecoration: 'none' }}>Try it live</a>
    </h3>

    <p
      style={{
fontSize: '0.875rem',
color: 'var(--landing-fg-tertiary)',
margin: '0 0 20px',
maxWidth: '620px',
lineHeight: 1.55
}}
    >
      Run code in the Playground, scaffold a contract, demo an agent, or preview a token mint, no setup.
    </p>

    <PlaygroundShowcase />
  </div>

  <div className="landing-section">
    <div className="landing-section-heading-row" style={{ marginBottom: '24px' }}>
      <h2 id="developer-tools" className="landing-section-heading">
        <a href="#developer-tools">Developer tools & resources</a>
      </h2>
    </div>

    <div className="landing-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
      <a href="/native/tutorials/advanced/mcp-server-setup" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-ai-studio.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=c35ecf3f6200669caef5b6e335f1e161" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-ai-studio.svg" />
        </div>

        <div>
          <div className="landing-card-title">MCP Server</div>
          <div className="landing-card-desc">Connect AI assistants like Claude and Cursor to Hedera with the Model Context Protocol server.</div>
        </div>
      </a>

      <a href="/learn/networks/community-mirror-nodes" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-hedera-ecosystem.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=f74d10e06b2cf1398a95c4042ceb7047" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-hedera-ecosystem.svg" />
        </div>

        <div>
          <div className="landing-card-title">Network Explorers</div>
          <div className="landing-card-desc">Visualize accounts, tokens, transactions, and contracts on Hedera.</div>
        </div>
      </a>

      <a href="/evm/development/json-rpc/index" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-technical.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=7c89b22f905a73841c69847cbda85027" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-technical.svg" />
        </div>

        <div>
          <div className="landing-card-title">JSON-RPC Relay</div>
          <div className="landing-card-desc">EVM-compatible JSON-RPC endpoint: connect MetaMask, Hardhat, Foundry, and ethers.js to Hedera.</div>
        </div>
      </a>

      <a href="/native/fundamentals/index" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-wallet.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=c38f1d3c052534d14d259de9f0710b21" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-wallet.svg" />
        </div>

        <div>
          <div className="landing-card-title">Wallet Integration</div>
          <div className="landing-card-desc">Connect Hedera-native and EVM wallets: HashPack, Blade, Kabila, MetaMask, and more.</div>
        </div>
      </a>

      <a href="/evm/integrations/oracles/index" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-globe.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=f2d2e3c7e592685f8a10cf1bf74f5806" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-globe.svg" />
        </div>

        <div>
          <div className="landing-card-title">Oracle Networks</div>
          <div className="landing-card-desc">Pull external data into Hedera smart contracts: Chainlink, Pyth, Supra, and other oracle providers.</div>
        </div>
      </a>

      <a href="https://solo.hiero.org/docs/" target="_blank" rel="noopener noreferrer" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-hiero.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=e867cd14f0e1a49661c9a3a2e5edcec9" alt="" aria-hidden="true" width="68" height="67" data-path="images/brand-icons/icon-white-hiero.svg" />
        </div>

        <div>
          <div className="landing-card-title">Solo</div>
          <div className="landing-card-desc">Deploy and operate a Hiero/Hedera network locally with Kubernetes, perfect for development and testing.</div>
        </div>
      </a>
    </div>
  </div>

  <div className="landing-footer">
    <h2 id="contributing" className="landing-footer-heading">
      <a href="#contributing">Contributing</a>
    </h2>

    <p
      style={{
fontSize: '0.875rem',
color: 'var(--landing-fg-tertiary)',
margin: '0 0 20px',
lineHeight: 1.55,
maxWidth: '600px'
}}
    >
      Whether you're fixing bugs, enhancing features, or improving documentation, your contributions are important. Read our{' '}
      <a href="https://github.com/hashgraph/.github/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" className="landing-prose-link">contributing guide</a>{' '}
      to get involved.
    </p>

    <div className="landing-pill-group">
      <a className="landing-pill" href="https://github.com/hashgraph" target="_blank" rel="noopener noreferrer">GitHub</a>
      <a className="landing-pill" href="https://hedera.com/discord" target="_blank" rel="noopener noreferrer">Discord</a>
      <a className="landing-pill" href="https://www.youtube.com/hederahashgraph" target="_blank" rel="noopener noreferrer">YouTube</a>
      <a className="landing-pill" href="https://x.com/hedera" target="_blank" rel="noopener noreferrer">X</a>
      <a className="landing-pill" href="https://www.linkedin.com/company/hedera-network" target="_blank" rel="noopener noreferrer">LinkedIn</a>
    </div>
  </div>
</div>