Skip to content

[TaskMarket #24583] Build a clean dark-mode static landing page for Queryx (agent-native search API) #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jackson161 wants to merge 14 commits into
base: main
Choose a base branch
from
Open

[TaskMarket #24583] Build a clean dark-mode static landing page for Queryx (agent-native search API) #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
ab65ca6
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
1f9d12d
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
8310976
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
fd2485c
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
1f71d64
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
9622722
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
045d7a0
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
263ff67
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
a41d2f8
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
3742035
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
b2da079
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
90f554c
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
d4c5b64
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
54c498b
feat: implement task 0x99024b4e593404877f via TaskMarket agent #24583
jackson161 Mar 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added IMPLEMENTATION.md
View file
Open in desktop
Empty file.
332 changes: 171 additions & 161 deletions landing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,178 +1,188 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Queryx — Agent-native search API</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Queryx is an agent-native search API with x402 payments on Base. Pay per query, no accounts."
/>
<meta name="theme-color" content="#0a0a0a" />
<title>Queryx — Agent-Native Search API</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header class="hero" id="top">
<div class="container">
<nav class="nav">
<a class="brand" href="#top" aria-label="Queryx homepage">Queryx</a>
<a class="nav-link" href="https://github.com/langoustine69/queryx" target="_blank" rel="noopener noreferrer">GitHub</a>
</nav>

<!-- Hero -->
<section class="hero">
<div class="container">
<div class="badge">x402 payments on Base</div>
<h1>Search the web.<br>Pay per query.<br>No accounts.</h1>
<p class="subtitle">The search API built for agents. 5x cheaper than Perplexity. Native x402 micropayments on Base.</p>
<div class="cta-row">
<a href="#quickstart" class="btn btn-primary">Try it &rarr;</a>
<a href="#pricing" class="btn btn-secondary">View pricing</a>
</div>
</div>
</section>

<!-- Pricing -->
<section id="pricing" class="pricing">
<div class="container">
<h2>Simple pricing</h2>
<p class="section-sub">Pay per query. No subscriptions. No API keys. No accounts.</p>
<div class="price-grid">
<div class="price-card">
<div class="endpoint">/v1/search</div>
<div class="price">$0.001</div>
<div class="price-desc">Web search + AI synthesis. Fast, structured JSON with sources and confidence scores.</div>
</div>
<div class="price-card">
<div class="endpoint">/v1/search/news</div>
<div class="price">$0.001</div>
<div class="price-desc">News-focused search. Results sorted by recency with publication dates.</div>
</div>
<div class="price-card featured">
<div class="endpoint">/v1/search/deep</div>
<div class="price">$0.005</div>
<div class="price-desc">Multi-source deep research. Cross-references multiple sources for complex queries.</div>
</div>
</div>
<div class="comparison">
<h3>How we compare</h3>
<div class="comp-table">
<div class="comp-row comp-header">
<span></span>
<span>Price/query</span>
<span>x402</span>
<span>No account</span>
<span>Agent JSON</span>
</div>
<div class="comp-row highlight">
<span class="provider">Queryx</span>
<span class="cheap">$0.001</span>
<span class="yes">&#10003;</span>
<span class="yes">&#10003;</span>
<span class="yes">&#10003;</span>
</div>
<div class="comp-row">
<span class="provider">Perplexity</span>
<span class="expensive">$0.005&ndash;0.014</span>
<span class="no">&times;</span>
<span class="no">&times;</span>
<span class="no">&times;</span>
</div>
<div class="comp-row">
<span class="provider">Tavily</span>
<span class="expensive">$0.004</span>
<span class="no">&times;</span>
<span class="no">&times;</span>
<span class="yes">&#10003;</span>
<div class="hero-content">
<p class="eyebrow">Agent-native search API</p>
<h1>Search the web. Pay per query. No accounts.</h1>
<p class="subheadline">
Queryx uses x402 payments on Base so agents can run search in real time and only pay for each request.
Start at $0.001/query with structured JSON output.
</p>
<div class="hero-cta">
<a class="btn btn-primary" href="#pricing">See pricing</a>
<a class="btn btn-secondary" href="#quickstart">Quick start</a>
</div>
<ul class="hero-points" aria-label="Key benefits">
<li>No signup flow</li>
<li>No subscription lock-in</li>
<li>Built for autonomous agents</li>
</ul>
</div>
</div>
</div>
</section>
</header>

<!-- Quickstart -->
<section id="quickstart" class="quickstart">
<div class="container">
<h2>Quick start</h2>
<p class="section-sub">One curl. That's it.</p>
<div class="code-block">
<div class="code-header">
<span class="code-lang">bash</span>
<button class="copy-btn" onclick="copyCode(this)" data-code='curl -H "PAYMENT-SIGNATURE: <x402-sig>" \
"https://queryx.run/v1/search?q=Fed+rate+decision+2026"'>Copy</button>
</div>
<pre><code>curl -H "PAYMENT-SIGNATURE: &lt;x402-sig&gt;" \
"https://queryx.run/v1/search?q=Fed+rate+decision+2026"</code></pre>
</div>
<details class="response-toggle">
<summary>View response</summary>
<div class="code-block">
<div class="code-header">
<span class="code-lang">json</span>
<main>
<section class="section" id="pricing" aria-labelledby="pricing-title">
<div class="container">
<h2 id="pricing-title">Pricing</h2>
<p class="section-lead">Simple endpoint pricing with transparent per-query costs.</p>

<div class="pricing-grid">
<article class="card endpoint-card">
<h3>/v1/search</h3>
<p class="price">$0.001<span>/query</span></p>
<p>General web search for fast retrieval and citation-ready results.</p>
</article>

<article class="card endpoint-card">
<h3>/v1/search/news</h3>
<p class="price">$0.001<span>/query</span></p>
<p>Recent headlines and publisher coverage optimized for up-to-date context.</p>
</article>

<article class="card endpoint-card">
<h3>/v1/search/deep</h3>
<p class="price">$0.005<span>/query</span></p>
<p>Higher-depth crawling and extraction for hard, multi-source questions.</p>
</article>
</div>
<pre><code>{
<span class="key">"query"</span>: <span class="str">"Fed rate decision 2026"</span>,
<span class="key">"answer"</span>: <span class="str">"The Federal Reserve held rates steady at 4.25-4.50% in its January 2026 meeting, citing persistent inflation concerns..."</span>,
<span class="key">"sources"</span>: [

<article class="card competitor-card" aria-labelledby="compare-title">
<h3 id="compare-title">Competitor comparison</h3>
<div class="compare-table" role="table" aria-label="Search API price comparison">
<div class="row header" role="row">
<span role="columnheader">Provider</span>
<span role="columnheader">Price / query</span>
</div>
<div class="row" role="row">
<span role="cell">Perplexity</span>
<span class="danger" role="cell">$0.005–0.014</span>
</div>
<div class="row" role="row">
<span role="cell">Tavily</span>
<span class="danger" role="cell">$0.004</span>
</div>
<div class="row" role="row">
<span role="cell">Queryx</span>
<span class="accent" role="cell">$0.001–0.005</span>
</div>
</div>
</article>
</div>
</section>

<section class="section" id="quickstart" aria-labelledby="quickstart-title">
<div class="container">
<h2 id="quickstart-title">Quick start</h2>
<p class="section-lead">One call, one payment proof, one JSON response.</p>

<div class="card code-card">
<div class="code-header">
<span>curl</span>
<button id="copyCurlBtn" class="copy-btn" type="button" aria-label="Copy curl command">Copy</button>
</div>
<pre><code id="curlCode">curl -X POST https://api.queryx.io/v1/search \
-H "Content-Type: application/json" \
-H "x402-payment: &lt;base-payment-proof&gt;" \
-d '{"query":"latest ethereum L2 news","limit":5}'</code></pre>

<details class="json-details">
<summary>Show example JSON response</summary>
<pre><code>{
"query": "latest ethereum L2 news",
"results": [
{
"title": "L2 rollups continue to grow in transaction volume",
"url": "https://example.com/article-1",
"snippet": "New data shows sustained growth across major L2 ecosystems.",
"source": "Example News",
"published_at": "2026-03-03T18:10:00Z"
},
{
<span class="key">"title"</span>: <span class="str">"Fed Holds Rates Steady in January 2026"</span>,
<span class="key">"url"</span>: <span class="str">"https://reuters.com/markets/fed-jan-2026"</span>,
<span class="key">"snippet"</span>: <span class="str">"The Federal Reserve maintained its benchmark rate..."</span>,
<span class="key">"published"</span>: <span class="str">"2026-01-29T18:00:00Z"</span>
"title": "Base ecosystem update",
"url": "https://example.com/article-2",
"snippet": "Developers ship new tools for payments and agent workflows.",
"source": "Example Wire",
"published_at": "2026-03-03T14:42:00Z"
}
],
<span class="key">"confidence"</span>: <span class="num">0.92</span>,
<span class="key">"freshness"</span>: {
<span class="key">"fetchedAt"</span>: <span class="str">"2026-02-27T10:30:00Z"</span>,
<span class="key">"resultsAge"</span>: <span class="str">"29d"</span>
},
<span class="key">"model"</span>: <span class="str">"queryx-fast-v1"</span>,
<span class="key">"tokens"</span>: { <span class="key">"in"</span>: <span class="num">312</span>, <span class="key">"out"</span>: <span class="num">187</span> }
"count": 2
}</code></pre>
</details>
</div>
</div>
</details>
</div>
</section>
</section>

<!-- How it works -->
<section class="how-it-works">
<div class="container">
<h2>How it works</h2>
<div class="steps">
<div class="step">
<div class="step-icon">&#128269;</div>
<div class="step-num">1</div>
<h3>Agent sends query</h3>
<p>Your agent hits the API with a search query and an x402 payment signature.</p>
</div>
<div class="step-arrow">&rarr;</div>
<div class="step">
<div class="step-icon">&#9889;</div>
<div class="step-num">2</div>
<h3>Payment verified</h3>
<p>x402 USDC micropayment verified on Base in under 100ms. No accounts, no API keys.</p>
</div>
<div class="step-arrow">&rarr;</div>
<div class="step">
<div class="step-icon">&#128202;</div>
<div class="step-num">3</div>
<h3>Structured JSON returned</h3>
<p>Search results synthesized by AI with sources, confidence scores, and freshness metadata.</p>
<section class="section" id="how-it-works" aria-labelledby="how-title">
<div class="container">
<h2 id="how-title">How it works</h2>
<div class="steps-grid">
<article class="card step-card">
<div class="step-num">1</div>
<h3>Query</h3>
<p>Send your search request to a Queryx endpoint with your payload.</p>
</article>
<article class="card step-card">
<div class="step-num">2</div>
<h3>x402 payment on Base</h3>
<p>Attach an x402 payment proof on Base. You pay exactly per request.</p>
</article>
<article class="card step-card">
<div class="step-num">3</div>
<h3>Structured JSON</h3>
<p>Receive clean, structured JSON designed for agent pipelines and tools.</p>
</article>
</div>
</div>
</div>
</div>
</section>
</section>
</main>

<!-- Footer -->
<footer>
<div class="container footer-inner">
<div class="footer-links">
<a href="https://github.com/langoustine69/queryx">GitHub</a>
<a href="https://xgate.run">xgate.run</a>
<footer class="footer">
<div class="container footer-inner">
<a href="https://github.com/langoustine69/queryx" target="_blank" rel="noopener noreferrer">GitHub</a>
<p>Built by @langoustine69 · <span id="year"></span></p>
</div>
<div class="footer-credit">Built by <a href="https://github.com/langoustine69">@langoustine69</a></div>
</div>
</footer>
</footer>

<script>
function copyCode(btn) {
const code = btn.getAttribute('data-code');
navigator.clipboard.writeText(code).then(() => {
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = 'Copy', 2000);
});
}
</script>
</body>
</html>
<script>
(function () {
var yearEl = document.getElementById("year");
if (yearEl) yearEl.textContent = String(new Date().getFullYear());

var copyBtn = document.getElementById("copyCurlBtn");
var codeEl = document.getElementById("curlCode");

if (copyBtn && codeEl && navigator.clipboard) {
copyBtn.addEventListener("click", function () {
var text = codeEl.innerText;
navigator.clipboard.writeText(text).then(function () {
var original = copyBtn.textContent;
copyBtn.textContent = "Copied";
setTimeout(function () {
copyBtn.textContent = original;
}, 1200);
});
});
}
})();
</script>
</body>
</html>
Loading