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

# Home

> Build blockchain data pipelines with SQD — Portal HTTP APIs across 225+ chains, Squid and Pipes SDKs in TypeScript, and managed Cloud hosting for indexers.

export const QueryInterface = () => {
  const useCasesConfig = [{
    id: "ethereum-usdt",
    name: "Track USDT transfers on Ethereum",
    network: "ethereum-mainnet",
    payload: {
      type: "evm",
      fromBlock: 18000000,
      toBlock: 18000001,
      fields: {
        log: {
          address: true,
          topics: true,
          data: true,
          transactionHash: true
        }
      },
      logs: [{
        address: ["0xdAC17F958D2ee523a2206206994597C13D831ec7"],
        topic0: ["0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef"]
      }]
    }
  }, {
    id: "solana-token",
    name: "Query token transfers on Solana",
    network: "solana-mainnet",
    payload: {
      type: "solana",
      fromBlock: 269828500,
      toBlock: 269828501,
      fields: {
        instruction: {
          programId: true,
          data: true
        },
        block: {
          number: true,
          hash: true
        }
      },
      instructions: [{
        programId: ["TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA"]
      }]
    }
  }, {
    id: "base-mainnet",
    name: "Query recent blocks on Base",
    network: "base-mainnet",
    payload: {
      type: "evm",
      fromBlock: 10000000,
      toBlock: 10000010,
      fields: {
        block: {
          number: true,
          hash: true,
          timestamp: true,
          gasUsed: true
        }
      }
    }
  }, {
    id: "arbitrum-mainnet",
    name: "Track USDC transfers on Arbitrum",
    network: "arbitrum-one",
    payload: {
      type: "evm",
      fromBlock: 200000000,
      toBlock: 200000010,
      fields: {
        log: {
          address: true,
          topics: true,
          data: true,
          transactionHash: true
        }
      },
      logs: [{
        address: ["0xaf88d065e77c8cC2239327C5EDb3A432268e5831"],
        topic0: ["0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef"]
      }]
    }
  }, {
    id: "hyperliquid-mainnet",
    name: "Query logs on HyperEVM",
    network: "hyperliquid-mainnet",
    payload: {
      type: "evm",
      fromBlock: 10000000,
      toBlock: 10000010,
      fields: {
        block: {
          number: true,
          hash: true
        },
        log: {
          address: true,
          topics: true,
          data: true
        }
      },
      logs: [{
        address: ["0x0000000000000000000000000000000000000000"]
      }]
    }
  }];
  const [queryFormat, setQueryFormat] = useState("curl");
  const [useCase, setUseCase] = useState("ethereum-usdt");
  const [response, setResponse] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [viewMode, setViewMode] = useState("code");
  const [copied, setCopied] = useState(false);
  const generateCurlCommand = config => {
    const url = `https://portal.sqd.dev/datasets/${config.network}/stream`;
    const payload = JSON.stringify(config.payload, null, 2);
    return `curl --compressed -X POST '${url}' \\\n  -H 'Content-Type: application/json' \\\n  -d '${payload}'`;
  };
  useEffect(() => {
    setViewMode("code");
    setResponse("");
    setError(null);
  }, [useCase]);
  const handleRun = async () => {
    const selectedUseCase = useCasesConfig.find(uc => uc.id === useCase);
    if (!selectedUseCase) return;
    setViewMode("output");
    setLoading(true);
    setError(null);
    setResponse('');
    try {
      const url = `https://portal.sqd.dev/datasets/${selectedUseCase.network}/stream`;
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(selectedUseCase.payload)
      });
      if (!response.ok) {
        throw new Error(`API request failed: ${response.status} ${response.statusText}`);
      }
      const text = await response.text();
      if (text.trim()) {
        const lines = text.trim().split('\n');
        const parsedData = lines.map((line, index) => {
          try {
            return JSON.parse(line);
          } catch (e) {
            return {
              error: `Failed to parse line ${index + 1}`,
              raw: line
            };
          }
        });
        const formattedOutput = parsedData.map(obj => JSON.stringify(obj, null, 2)).join('\n\n');
        setResponse(formattedOutput);
      } else {
        setResponse('No data returned from API');
      }
    } catch (err) {
      setError(err.message || 'An error occurred while fetching data');
      setResponse('');
    } finally {
      setLoading(false);
    }
  };
  return <div className="not-prose w-full max-w-7xl mx-auto px-4 sm:px-6 my-6 sm:my-8">

      <div className="bg-white dark:bg-gray-950 rounded-xl p-4 sm:p-6 border border-gray-200 dark:border-gray-800 shadow-sm">
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 mb-4">
          <label className="text-sm font-semibold text-gray-700 dark:text-gray-300 whitespace-nowrap">
            Response
          </label>

          <div className="flex flex-wrap items-center gap-3 flex-1 w-full">
            <div className="relative flex-shrink-0">
              <select value={queryFormat} onChange={e => setQueryFormat(e.target.value)} className="appearance-none bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-xl px-4 py-2.5 pr-10 text-sm font-medium text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#2563eb] dark:focus:ring-[#2563eb] cursor-pointer transition-all">
                <option value="curl">curl</option>
              </select>
              <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </div>
            </div>

            <div className="relative flex-shrink-0 flex-1 min-w-[200px]">
              <select value={useCase} onChange={e => setUseCase(e.target.value)} className="appearance-none w-full bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-xl px-4 py-2.5 pr-10 text-sm font-medium text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#2563eb] dark:focus:ring-[#2563eb] cursor-pointer transition-all">
                {useCasesConfig.map(uc => <option key={uc.id} value={uc.id}>
                    {uc.name}
                  </option>)}
              </select>
              <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </div>
            </div>

            <button onClick={handleRun} type="button" disabled={loading} className="flex items-center gap-2 bg-[#2563eb] hover:bg-[#1e40af] dark:bg-[#2563eb] dark:hover:bg-[#1e40af] disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold px-6 py-2.5 rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-2 dark:focus:ring-offset-gray-950 whitespace-nowrap shadow-sm hover:shadow-md">
              {loading ? <>
                  <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  Loading...
                </> : <>
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
                  </svg>
                  RUN
                </>}
            </button>
          </div>
        </div>

        {error && <div className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl">
            <p className="text-sm text-red-800 dark:text-red-200 font-medium">Error: {error}</p>
          </div>}

        <div className="mt-4 bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl overflow-hidden h-[450px] flex flex-col">
          <div className="bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 px-4 py-2.5 flex items-center justify-between">
            <span className="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide">
              {viewMode === "code" ? "Request" : "Response"}
            </span>
            <button onClick={() => {
    const textToCopy = viewMode === "code" ? generateCurlCommand(useCasesConfig.find(uc => uc.id === useCase)) : response;
    navigator.clipboard.writeText(textToCopy);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }} className={`flex items-center gap-1.5 transition-colors ${copied ? "text-[#2563eb] dark:text-[#60a5fa]" : "text-gray-500 hover:text-[#2563eb] dark:text-gray-400 dark:hover:text-[#60a5fa]"}`} title={copied ? "Copied!" : "Copy to clipboard"}>
              {copied ? <>
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                  <span className="text-xs font-medium">Copied!</span>
                </> : <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>}
            </button>
          </div>
          <div className="flex-1 overflow-auto p-3 bg-gray-50 dark:bg-gray-950">
            {loading ? <div className="flex items-center justify-center h-full">
                <div className="text-sm text-gray-500 dark:text-gray-400">Fetching data from Portal API...</div>
              </div> : viewMode === "code" ? <div key={`code-${useCase}`} style={{
    position: 'relative'
  }}>
                <pre style={{
    margin: 0,
    padding: '1rem',
    background: 'var(--hl-bg)',
    borderRadius: '0.75rem',
    overflow: 'auto',
    fontSize: '0.875rem',
    lineHeight: '1.5',
    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
    color: 'var(--hl-cmd)'
  }}>
                  <code key={`curl-code-${useCase}`} style={{
    counterReset: 'line'
  }}>
                    {generateCurlCommand(useCasesConfig.find(uc => uc.id === useCase)).trim().split('\n').map((line, i) => <div key={`curl-line-${i}`} style={{
    display: 'flex',
    position: 'relative',
    paddingLeft: '3.5em',
    minHeight: '1.5em',
    lineHeight: '1.5'
  }}>
                        <span style={{
    position: 'absolute',
    left: 0,
    width: '2.5em',
    textAlign: 'right',
    color: 'var(--hl-line-num)',
    userSelect: 'none',
    paddingRight: '1em',
    lineHeight: '1.5'
  }}>{i + 1}</span>
                        <span style={{
    whiteSpace: 'pre-wrap',
    wordBreak: 'break-word',
    color: 'var(--hl-cmd)',
    lineHeight: '1.5'
  }}>
                          {line.includes('curl') && <span style={{
    color: 'var(--hl-key)'
  }}>{line}</span>}
                          {!line.includes('curl') && line.match(/^\s*-[XHd]/) && <>
                              <span style={{
    color: 'var(--hl-flag)'
  }}>{line.match(/^\s*-[XHd]/)[0]}</span>
                              <span style={{
    color: 'var(--hl-cmd)'
  }}>{line.substring(line.match(/^\s*-[XHd]/)[0].length)}</span>
                            </>}
                          {!line.includes('curl') && !line.match(/^\s*-[XHd]/) && line.match(/'[^']*'/) && <>
                              {line.split(/'([^']*)'/).map((part, j) => j % 2 === 1 ? <span key={`curl-part-${i}-${j}`} style={{
    color: 'var(--hl-str)'
  }}>'{part}'</span> : <span key={`curl-part-${i}-${j}`} style={{
    color: 'var(--hl-cmd)'
  }}>{part}</span>)}
                            </>}
                          {!line.includes('curl') && !line.match(/^\s*-[XHd]/) && !line.match(/'[^']*'/) && <span style={{
    color: 'var(--hl-cmd)'
  }}>{line}</span>}
                        </span>
                      </div>)}
                  </code>
                </pre>
              </div> : response ? <div key={`response-${useCase}-${response.length}`} style={{
    position: 'relative'
  }}>
                <pre style={{
    margin: 0,
    padding: '1rem',
    background: 'var(--hl-bg)',
    borderRadius: '0.75rem',
    overflow: 'auto',
    fontSize: '0.875rem',
    lineHeight: '1.5',
    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
    color: 'var(--hl-cmd)'
  }}>
                  <code key={`response-code-${useCase}-${response.length}`}>
                    {response.trim().split('\n').map((line, i) => <div key={`response-line-${i}`} style={{
    display: 'flex',
    position: 'relative',
    paddingLeft: '3.5em',
    minHeight: '1.5em',
    lineHeight: '1.5'
  }}>
                        <span style={{
    position: 'absolute',
    left: 0,
    width: '2.5em',
    textAlign: 'right',
    color: 'var(--hl-line-num)',
    userSelect: 'none',
    paddingRight: '1em',
    lineHeight: '1.5'
  }}>{i + 1}</span>
                        <span style={{
    whiteSpace: 'pre-wrap',
    wordBreak: 'break-word',
    color: 'var(--hl-cmd)',
    lineHeight: '1.5'
  }}>
                          {line.match(/"[^"]+":/) ? <>
                              {line.split(/("[^"]+":)/).map((part, j) => part.match(/^"[^"]+":$/) ? <span key={`resp-part-${i}-${j}`} style={{
    color: 'var(--hl-flag)'
  }}>{part}</span> : part.match(/^"[^"]+"$/) ? <span key={`resp-part-${i}-${j}`} style={{
    color: 'var(--hl-str)'
  }}>{part}</span> : <span key={`resp-part-${i}-${j}`} style={{
    color: 'var(--hl-cmd)'
  }}>{part}</span>)}
                            </> : <span style={{
    color: 'var(--hl-cmd)'
  }}>{line}</span>}
                        </span>
                      </div>)}
                  </code>
                </pre>
              </div> : <div className="text-sm text-gray-500 dark:text-gray-400 text-center h-full flex items-center justify-center">
                No data returned from API
              </div>}
          </div>
        </div>
      </div>
    </div>;
};

<style>
  {`
    /* Prevent horizontal scroll on the entire page */
    body, html {
      overflow-x: hidden;
    }

    /* Smooth section transitions with brand colors */
    .section-transition {
      position: relative;
    }

    .section-transition::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 80px;
      background: linear-gradient(180deg, var(--section-from) 0%, var(--section-to) 100%);
      pointer-events: none;
    }

    `}
</style>

<div className="relative bg-white dark:bg-[#0a0b10] overflow-hidden mb-0">
  <div className="relative z-10 bg-white dark:bg-[#0a0b10] p-8 sm:p-10 lg:p-12">
    <div className="max-w-4xl mx-auto text-center">
      <div className="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-[#1e40af]/10 to-[#1e40af]/10 border border-[#1e40af]/30 mb-6">
        <span className="text-sm font-semibold text-[#1e40af] dark:text-[#93c5fd]">
          The new blockchain data standard
        </span>
      </div>

      <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-[#e2e8f0] mb-5 leading-tight">
        High-Throughput Blockchain Data Access. Finally, an Alternative to RPC
      </h1>

      <p className="text-lg sm:text-xl text-gray-700 dark:text-[#94a3b8] mb-8 leading-relaxed">
        Portal is a high-performance HTTP API for querying blockchain data at
        scale. With native finality, real-time streaming, and deep historical
        access. Query arbitrary block ranges in a single request with automatic reorg handling.
      </p>

      <div className="grid sm:grid-cols-2 gap-4 text-left mb-8">
        <div className="flex items-start gap-3 p-4 rounded-lg bg-white/60 dark:bg-[#0f172a]/60 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af]/30 dark:hover:border-[#2563eb] dark:hover:shadow-[0_4px_20px_rgba(59,130,246,0.08)]/50 transition-colors duration-300">
          <svg className="w-6 h-6 text-slate-600 dark:text-[#60a5fa] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
          </svg>

          <div>
            <div className="font-bold text-base text-gray-900 dark:text-[#e2e8f0] mb-1">
              Arbitrary block ranges
            </div>

            <div className="text-sm text-gray-700 dark:text-gray-400">
              Query any block range in a single request, no manual pagination needed,
              even on high-throughput chains
            </div>
          </div>
        </div>

        <div className="flex items-start gap-3 p-4 rounded-lg bg-white/60 dark:bg-[#0f172a]/60 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af]/30 dark:hover:border-[#2563eb] dark:hover:shadow-[0_4px_20px_rgba(59,130,246,0.08)]/50 transition-colors duration-300">
          <svg className="w-6 h-6 text-slate-600 dark:text-[#60a5fa] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
          </svg>

          <div>
            <div className="font-bold text-base text-gray-900 dark:text-[#e2e8f0] mb-1">
              Native finalization
            </div>

            <div className="text-sm text-gray-700 dark:text-gray-400">
              Automatic chain-specific finality & reorg handling. Skip the
              custom rollback logic.
            </div>
          </div>
        </div>

        <div className="flex items-start gap-3 p-4 rounded-lg bg-white/60 dark:bg-[#0f172a]/60 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af]/30 dark:hover:border-[#2563eb] dark:hover:shadow-[0_4px_20px_rgba(59,130,246,0.08)]/50 transition-colors duration-300">
          <svg className="w-6 h-6 text-slate-600 dark:text-[#60a5fa] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
          </svg>

          <div>
            <div className="font-bold text-base text-gray-900 dark:text-[#e2e8f0] mb-1">
              Streaming responses
            </div>

            <div className="text-sm text-gray-700 dark:text-gray-400">
              High-throughput data ingestion with constant memory
              footprint
            </div>
          </div>
        </div>

        <div className="flex items-start gap-3 p-4 rounded-lg bg-white/60 dark:bg-[#0f172a]/60 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af]/30 dark:hover:border-[#2563eb] dark:hover:shadow-[0_4px_20px_rgba(59,130,246,0.08)]/50 transition-colors duration-300">
          <svg className="w-6 h-6 text-slate-600 dark:text-[#60a5fa] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
          </svg>

          <div>
            <div className="font-bold text-base text-gray-900 dark:text-[#e2e8f0] mb-1">
              No vendor lock-in
            </div>

            <div className="text-sm text-gray-700 dark:text-gray-400">
              Self-host or use decentralized infrastructure. Run the same code
              anywhere.
            </div>
          </div>
        </div>
      </div>

      <div className="flex gap-4 flex-wrap justify-center">
        <a href="/en/portal/evm/quickstart" className="inline-flex items-center px-8 py-4 bg-[#2563eb] hover:bg-[#3b82f6] text-[#f1f5f9] font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-300">
          Build with Portal API

          <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </a>

        <a href="/en/sdk/overview" className="inline-flex items-center px-8 py-4 border-2 border-[#1e40af] dark:border-[#334155] hover:border-[#2563eb] dark:hover:border-[#475569] bg-white dark:bg-[#0f172a] text-[#1e40af] dark:text-[#94a3b8] dark:hover:text-[#e2e8f0] font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-300 hover:bg-[#1e40af]/5 dark:hover:bg-[#1e293b]">
          Use with SDK
        </a>
      </div>
    </div>
  </div>
</div>

<div className="h-px bg-gradient-to-r from-transparent via-[#1e40af]/50 to-transparent dark:via-[#1e40af]/30" />

<div className="relative bg-white dark:bg-[#0a0b10] shadow-xl py-20 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6">
    <div className="text-center mb-12">
      <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-[#e2e8f0] mb-6">
        The Complete Data Stack
      </h2>

      <p className="text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-8">
        Four integrated products that work together to power your blockchain
        data infrastructure
      </p>

      <div className="inline-flex items-center gap-3 px-6 py-3 rounded-xl bg-[#1e40af]/[0.08] dark:bg-[#2563eb]/[0.12] border-2 border-[#1e40af]/25 dark:border-[#2563eb]/30">
        <span className="font-semibold text-[#1e40af] dark:text-[#93c5fd]">
          Portal
        </span>

        <span className="text-2xl text-[#1e40af] dark:text-[#2563eb]/60">
          •
        </span>

        <span className="font-semibold text-[#1e40af] dark:text-[#93c5fd]">
          SDK
        </span>

        <span className="text-2xl text-[#1e40af] dark:text-[#2563eb]/60">
          •
        </span>

        <span className="font-semibold text-[#1e40af] dark:text-[#93c5fd]">
          Cloud
        </span>

        <span className="text-2xl text-[#1e40af] dark:text-[#2563eb]/60">
          •
        </span>

        <span className="font-semibold text-[#1e40af] dark:text-[#93c5fd]">
          Network
        </span>
      </div>
    </div>

    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
      <a href="/en/portal/evm/quickstart" className="group block bg-white dark:bg-[#0f172a] rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb]">
        <img src="https://mintcdn.com/sqd-2119b3c3/Kx7YspEVpTTxfIRc/images/home/portal.png?fit=max&auto=format&n=Kx7YspEVpTTxfIRc&q=85&s=b462eb28aa5b2c735f753127b23047c7" alt="Portal - HTTP API for blockchain data" loading="lazy" className="w-full h-48 object-cover pointer-events-none" width="1440" height="600" data-path="images/home/portal.png" />

        <div className="p-6">
          <h3 className="text-xl font-bold text-gray-900 dark:text-[#e2e8f0] mb-3">
            Portal
          </h3>

          <p className="text-gray-700 dark:text-gray-300 leading-relaxed mb-3">
            HTTP API for raw blockchain data with arbitrary ranges, streaming,
            and finality handling
          </p>

          <span className="text-sm font-medium transition-colors duration-200 text-[#1e40af] dark:text-[#2563eb]">
            Learn more →
          </span>
        </div>
      </a>

      <a href="/en/sdk/overview" className="group block bg-white dark:bg-[#0f172a] rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb]">
        <img src="https://mintcdn.com/sqd-2119b3c3/Kx7YspEVpTTxfIRc/images/home/sdk.png?fit=max&auto=format&n=Kx7YspEVpTTxfIRc&q=85&s=5ee99f1134ea780987334a3ddc8d4ca7" alt="SDK - TypeScript libraries for data transformation" loading="lazy" className="w-full h-48 object-cover pointer-events-none" width="1440" height="600" data-path="images/home/sdk.png" />

        <div className="p-6">
          <h3 className="text-xl font-bold text-gray-900 dark:text-[#e2e8f0] mb-3">
            SDK
          </h3>

          <p className="text-gray-700 dark:text-gray-300 leading-relaxed mb-3">
            TypeScript libraries for data transformation, decoding, and
            persistence to any database
          </p>

          <span className="text-sm font-medium transition-colors duration-200 text-[#1e40af] dark:text-[#2563eb]">
            Learn more →
          </span>
        </div>
      </a>

      <a href="/en/cloud/overview" className="group block bg-white dark:bg-[#0f172a] rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb]">
        <img src="https://mintcdn.com/sqd-2119b3c3/Kx7YspEVpTTxfIRc/images/home/cloud.png?fit=max&auto=format&n=Kx7YspEVpTTxfIRc&q=85&s=5114ab7dd93424fb47f7fe41e1e913c2" alt="Cloud - Managed deployment platform" loading="lazy" className="w-full h-48 object-cover pointer-events-none" width="1440" height="600" data-path="images/home/cloud.png" />

        <div className="p-6">
          <h3 className="text-xl font-bold text-gray-900 dark:text-[#e2e8f0] mb-3">
            Cloud
          </h3>

          <p className="text-gray-700 dark:text-gray-300 leading-relaxed mb-3">
            Managed deployment platform with monitoring, scaling, and zero
            DevOps required
          </p>

          <span className="text-sm font-medium transition-colors duration-200 text-[#1e40af] dark:text-[#2563eb]">
            Learn more →
          </span>
        </div>
      </a>

      <a href="/en/network/overview" className="group block bg-white dark:bg-[#0f172a] rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb]">
        <img src="https://mintcdn.com/sqd-2119b3c3/Kx7YspEVpTTxfIRc/images/home/network.png?fit=max&auto=format&n=Kx7YspEVpTTxfIRc&q=85&s=21c1efac1fea81c5cdd5b0eed79bb9ed" alt="Network - Decentralized data lake" loading="lazy" className="w-full h-48 object-cover pointer-events-none" width="1440" height="600" data-path="images/home/network.png" />

        <div className="p-6">
          <h3 className="text-xl font-bold text-gray-900 dark:text-[#e2e8f0] mb-3">
            Network
          </h3>

          <p className="text-gray-700 dark:text-gray-300 leading-relaxed mb-3">
            Decentralized data lake powering Portal with 200+ networks and
            self-hosting options
          </p>

          <span className="text-sm font-medium transition-colors duration-200 text-[#1e40af] dark:text-[#2563eb]">
            Learn more →
          </span>
        </div>
      </a>
    </div>
  </div>
</div>

<div className="h-px bg-gradient-to-r from-transparent via-[#1e40af]/50 to-transparent dark:via-[#1e40af]/30" />

<div id="portal-intro" className="relative bg-white dark:bg-[#0a0b10] py-20 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6">
    <div className="text-center mb-16">
      <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-[#e2e8f0] mb-6">
        Query the blockchain instantly
      </h2>

      <p className="text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
        SQD Portal provides an HTTP API for extracting blockchain data with
        arbitrary block ranges, streaming, and reorg handling
      </p>
    </div>

    <QueryInterface />

    <div className="text-center mt-12 flex flex-wrap items-center justify-center gap-6">
      <a href="/en/portal/evm/quickstart" className="inline-flex items-center px-8 py-4 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 bg-gradient-to-r from-[#1e40af] to-[#1e40af] hover:from-[#2563eb] hover:to-[#1e40af]">
        Try Portal API

        <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </a>

      <a href="/en/portal/overview" className="inline-flex items-center px-8 py-4 border-2 border-[#1e40af] dark:border-[#334155] hover:border-[#2563eb] dark:hover:border-[#475569] bg-white dark:bg-[#0f172a] text-[#1e40af] dark:text-[#94a3b8] dark:hover:text-[#e2e8f0] font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-300 hover:bg-[#1e40af]/5 dark:hover:bg-[#1e293b]">
        Learn about Portal

        <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>
  </div>
</div>

<div className="h-px bg-gradient-to-r from-transparent via-[#1e40af]/50 to-transparent dark:via-[#1e40af]/30" />

<div className="relative bg-white dark:bg-[#0a0b10] shadow-xl py-20 sm:py-24">
  <div className="main-container-mobile max-w-7xl mx-auto px-4 sm:px-6">
    <h2 className="text-center text-gray-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6 section-heading-mobile">
      200+ Networks Supported
    </h2>

    <p className="text-center text-gray-700 dark:text-gray-300 text-xl mb-16 max-w-3xl mx-auto">
      Access data from all major blockchains through Portal
    </p>

    <CardGroup cols={4}>
      <Card href="/en/data/evm/ethereum-mainnet" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/ethereum.png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=03d79a246d265527808f7863c6cf2e43" alt="Ethereum - EVM compatible chains" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/ethereum.png" />
      </Card>

      <Card href="/en/data/solana/solana-mainnet" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/solana%20(1).png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=a769baede312ee12aa9dc167a2bf3b01" alt="Solana - High-performance blockchain" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/solana (1).png" />
      </Card>

      <Card href="/en/data/evm/base-mainnet" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/base.png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=ffc0ec4a0f1a2ae3d16aada590558a85" alt="Base - Coinbase L2 on Ethereum" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/base.png" />
      </Card>

      <Card href="/en/data/evm/arbitrum-one" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/arbitrum.png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=cba2fed53665c1a032e4edc9a5c087e6" alt="Arbitrum - Ethereum L2 scaling solution" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/arbitrum.png" />
      </Card>

      <Card href="/en/data/evm/binance-mainnet" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/bsc.png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=df1e987d59b86b74ec94e7d9813b1d76" alt="Binance Smart Chain - BSC" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/bsc.png" />
      </Card>

      <Card href="/en/data/evm/plasma-mainnet" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/plasma.png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=d57bd215710bd00bcc179d5d5797dbb2" alt="Plasma - High-performance blockchain" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/plasma.png" />
      </Card>

      <Card href="/en/data/evm/monad-testnet" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/monad.png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=6e737794cea22c1b4980276fa6b84bb8" alt="Monad - Next-gen parallel EVM" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/monad.png" />
      </Card>

      <Card href="/en/data/evm/hyperevm-mainnet" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/hyperevm.png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=0a96ca7f3054f02fb6e07499684030d0" alt="HyperEVM - High-performance blockchain" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/hyperevm.png" />
      </Card>

      <Card href="/en/data/evm/megaeth-mainnet" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/megaeth.png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=a4663876a57c2f1d034589f2dce797ae" alt="MegaETH - Ultra-fast real-time blockchain" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/megaeth.png" />
      </Card>

      <Card href="/en/portal/hyperliquid/overview" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/hypercore.png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=d0208fe35a022f3dba6ae35e384abe38" alt="HyperCore - Hyperliquid high-performance blockchain" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/hypercore.png" />
      </Card>

      <Card href="/en/portal/bitcoin/overview" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/bitcoin.png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=062b315baac0896b5423ae29899c156b" alt="Bitcoin - The original blockchain" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/bitcoin.png" />
      </Card>

      <Card href="/en/data/evm" arrow={false} noZoom>
        <img src="https://mintcdn.com/sqd-2119b3c3/zWh6VLzhTi81KGSB/images/home/all-networks%20(1).png?fit=max&auto=format&n=zWh6VLzhTi81KGSB&q=85&s=9febdb288a5090d7b8a662e7ded685df" alt="View All Networks - 200+ supported blockchains" loading="lazy" className="w-full h-24 object-contain p-3 pointer-events-none network-logo" width="600" height="400" data-path="images/home/all-networks (1).png" />
      </Card>
    </CardGroup>
  </div>
</div>

<div className="h-px bg-gradient-to-r from-transparent via-[#1e40af]/50 to-transparent dark:via-[#1e40af]/30" />

<div className="relative bg-white dark:bg-[#0a0b10] shadow-xl py-20 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6">
    <div className="text-center mb-12">
      <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-[#e2e8f0] mb-6">
        Production Use Cases
      </h2>

      <p className="text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
        Leading Web3 projects trust SQD to power their blockchain data infrastructure
      </p>
    </div>

    <div className="relative mb-8 overflow-hidden">
      <div className="overflow-x-auto pb-4 px-4 sm:px-6" style={{ scrollbarWidth: "thin", scrollbarColor: "#1e40af transparent" }}>
        <div className="flex gap-6">
          <a href="https://blog.sqd.dev/case-study-how-sqd-supports-pancakeswap-with-large-scale-access-to-multichain-data/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/6748e3b77da28adaf6817a03_pancakeswap%201%20(1).png" alt="PancakeSwap case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  DeFi
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                PancakeSwap
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Large-scale multichain data indexing for top DEX
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/how-gmx-accelerated-cross-chain-indexing-with-sqd/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/6909cca9f1b70cc95551f8c8_GMX%20THEME%20Botanix.png" alt="GMX case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  DeFi
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                GMX
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Accelerated cross-chain indexing for decentralized exchange
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/case-study-chainsafe-using-subsquid-to-power-fast-evm-deployments/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://mintcdn.com/sqd-2119b3c3/CSs72sM_E5fEPciQ/images/case-studies/chainsafe.png?fit=max&auto=format&n=CSs72sM_E5fEPciQ&q=85&s=87f9ddcae7f12ad3ab83c3638ba82ccf" alt="ChainSafe case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" width="1182" height="1176" data-path="images/case-studies/chainsafe.png" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  Gaming
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                ChainSafe
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Seamless game development across multiple chains
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/case-study-railgun-leveraging-sqd-trace-data-to-enable-privacy-pools/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/6748e162539d2702b0a3808b_success-stories-3.avif" alt="RAILGUN case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  Privacy
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                RAILGUN
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Crosschain privacy with trace data indexing
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/case-study-how-hydration-uses-sqd-data-access-to-facilitate-its-defi-success/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/6748e2d4f55a6f56618e1c72_stories.avif" alt="Hydration case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  DeFi
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                Hydration
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Data-powered growth for liquidity protocol
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/how-polimec-uses-sqd-data-to-provide-compliant-defi/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/6748d93407c5337097f82e4e_Polimec.avif" alt="Polimec case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  DeFi
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                Polimec
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Compliant DeFi with SQD data infrastructure
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/skybreach-case-study/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/6748dbaf38ab13e8a3c77b53_skybreach-kanaria.avif" alt="Skybreach case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  Gaming
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                Skybreach
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                SQD data access powering blockchain games
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/how-fantasy-top-relies-on-sqd-to-provide-a-seamless-social-gaming-experience/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/6748d9149ada1e2aab2500d2_fantasy.avif" alt="Fantasy.Top case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  Gaming
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                Fantasy.Top
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Seamless social gaming experience with real-time data
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/chillwhales-x-sqd-partner-case-study/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/68d40b02f487aff14181f32f_Chill%20Whales.png" alt="Chillwhales case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  Social
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                Chillwhales
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Expanding NFT browsing on LUKSO with SQD
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/levr-bet-x-sqd-partner-case-study/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/68b70b6e12d7069029bac575_2025-09-02%2017.21.04.jpg" alt="Levr.Bet case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  Social
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                Levr.Bet
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Real-time sports betting on Monad powered by SQD
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/how-coolwallet-uses-sqd-to-secure-its-data-back-end/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/68a458c3d1a83a2813bb4ed9_image%20(3).png" alt="CoolWallet case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  Social
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                CoolWallet
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Securing data back-end infrastructure with SQD
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/how-interface-uses-sqd-to-enable-people-to-explore-ethereum/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/6748dc6ff2fa09c87ae546e3_Interface.avif" alt="Interface case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  Social
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                Interface
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Enabling people to explore Ethereum with SQD
              </p>
            </div>
          </a>

          <a href="https://blog.sqd.dev/case-study-how-guru-network-powers-its-ai-processors-with-data-from-sqd/" target="_blank" rel="noopener noreferrer" className="group block bg-white dark:bg-[#0f172a] rounded-xl overflow-hidden transition-all duration-300 flex-shrink-0 border border-slate-200 dark:border-[#1e293b] hover:border-[#1e40af] dark:hover:border-[#2563eb] hover:shadow-lg" style={{ width: "280px" }}>
            <img src="https://cdn.prod.website-files.com/673cc86f744f188352c82682/6748d157c473c361c6ccd7e9_success-stories-2.avif" alt="Guru Network case study" loading="lazy" className="w-full h-32 object-cover pointer-events-none" />

            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-medium px-2 py-1 rounded-full bg-[#1e40af]/10 text-[#1e40af] dark:text-[#93c5fd]">
                  AI
                </span>
              </div>

              <h3 className="text-base font-bold text-gray-900 dark:text-[#e2e8f0] mb-2">
                Guru Network
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                Powering AI processors with blockchain data from SQD
              </p>
            </div>
          </a>
        </div>
      </div>
    </div>

    <div className="text-center">
      <a href="/en/other/case-studies" className="inline-flex items-center px-6 py-3 border-2 border-[#1e40af] text-[#1e40af] dark:text-white bg-white dark:bg-[#0f172a] font-medium rounded-xl transition-all duration-300 hover:bg-[#1e40af]/5 dark:hover:bg-[#1e40af]/10 hover:shadow-md">
        View All Case Studies

        <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>
  </div>
</div>

<div className="h-px bg-gradient-to-r from-transparent via-[#1e40af]/50 to-transparent dark:via-[#1e40af]/30" />

<div className="relative bg-white dark:bg-[#0a0b10] shadow-xl py-20 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6">
    <div className="text-center mb-12">
      <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-[#e2e8f0] mb-6">
        Get Started
      </h2>

      <p className="text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
        Choose your path based on your needs, from quick data queries to full
        production deployments
      </p>
    </div>

    <div className="grid md:grid-cols-2 gap-6">
      <a href="/en/portal/evm/quickstart" className="group block bg-white dark:bg-[#0f172a] rounded-xl p-8 hover:shadow-lg transition-all duration-300 border border-gray-200 dark:border-gray-700 border-l-4 border-l-[#1e40af] hover:border-l-[#1e40af] hover:bg-[#1e40af]/5 dark:hover:bg-[#1e40af]/10">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#1e40af] to-[#1e40af] flex items-center justify-center">
              <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
              </svg>
            </div>

            <h3 className="text-xl font-bold text-gray-900 dark:text-white">
              Query with Portal
            </h3>
          </div>

          <svg className="w-5 h-5 transition-all duration-200 text-[#1e40af] dark:text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>

        <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-3">
          Extract blockchain data in minutes using Portal's HTTP API, no setup
          required, just HTTP requests
        </p>

        <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-500">
          <span>5 min</span>
          <span>•</span>
          <span>Beginner</span>
        </div>
      </a>

      <a href="/en/sdk/pipes-sdk/evm/prod-ready-pipe" className="group block bg-white dark:bg-[#0f172a] rounded-xl p-8 hover:shadow-lg transition-all duration-300 border border-gray-200 dark:border-gray-700 border-l-4 border-l-[#1e40af] hover:border-l-[#1e40af] hover:bg-[#1e40af]/5 dark:hover:bg-[#1e40af]/10">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#1e40af] to-[#1e40af] flex items-center justify-center">
              <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
              </svg>
            </div>

            <h3 className="text-xl font-bold text-gray-900 dark:text-white">
              Build an Indexer
            </h3>
          </div>

          <svg className="w-5 h-5 transition-all duration-200 text-[#1e40af] dark:text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>

        <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-3">
          Create type-safe indexers with TypeScript SDK and stream data to any
          database
        </p>

        <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-500">
          <span>15 min</span>
          <span>•</span>
          <span>Intermediate</span>
        </div>
      </a>

      <a href="/en/cloud/overview" className="group block bg-white dark:bg-[#0f172a] rounded-xl p-8 hover:shadow-lg transition-all duration-300 border border-gray-200 dark:border-gray-700 border-l-4 border-l-[#1e40af] hover:border-l-[#1e40af] hover:bg-[#1e40af]/5 dark:hover:bg-[#1e40af]/10">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#1e40af] to-[#1e40af] flex items-center justify-center">
              <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
              </svg>
            </div>

            <h3 className="text-xl font-bold text-gray-900 dark:text-white">
              Deploy to Production
            </h3>
          </div>

          <svg className="w-5 h-5 transition-all duration-200 text-[#1e40af] dark:text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>

        <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-3">
          Ship to SQD Cloud with managed infrastructure, monitoring, and zero
          DevOps
        </p>

        <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-500">
          <span>15 minutes</span>
          <span>•</span>
          <span>Intermediate</span>
        </div>
      </a>

      <a href="/en/ai/ai-development" className="group block bg-white dark:bg-[#0f172a] rounded-xl p-8 hover:shadow-lg transition-all duration-300 border border-gray-200 dark:border-gray-700 border-l-4 border-l-[#1e40af] hover:border-l-[#1e40af] hover:bg-[#1e40af]/5 dark:hover:bg-[#1e40af]/10">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#1e40af] to-[#1e40af] flex items-center justify-center">
              <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>

            <h3 className="text-xl font-bold text-gray-900 dark:text-white">
              AI Development
            </h3>
          </div>

          <svg className="w-5 h-5 transition-all duration-200 text-[#1e40af] dark:text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>

        <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-3">
          Build AI agents with SQD using MCP servers, agent skills, and LLM-optimized documentation
        </p>

        <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-500">
          <span>10 min</span>
          <span>•</span>
          <span>Intermediate</span>
        </div>
      </a>
    </div>

    <div className="mt-20 text-center">
      <p className="text-gray-600 dark:text-gray-400 mb-4">
        Need help choosing? Check out our FAQ or join our community
      </p>

      <div className="flex flex-wrap items-center justify-center gap-4">
        <a href="/en/other/faq" className="inline-flex items-center px-6 py-3 border-2 border-[#1e40af] text-[#1e40af] dark:text-white bg-white dark:bg-[#0f172a] font-medium rounded-xl transition-all duration-300 hover:bg-[#1e40af]/5 dark:hover:bg-[#1e40af]/10 hover:shadow-md">
          View FAQ
        </a>

        <a href="https://t.me/subsquid" target="_blank" rel="noopener noreferrer" className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-[#1e40af] to-[#1e40af] text-white font-medium rounded-xl transition-all duration-300 hover:shadow-lg hover:from-[#2563eb] hover:to-[#1e40af]">
          <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
            <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
          </svg>

          Join Telegram
        </a>
      </div>
    </div>
  </div>
</div>