ATOM-MCP / index.html
Steriani's picture
Update index.html
78b5c13 verified
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>ATOM MCP. Live AI Inference Pricing</title>
<style>
body { font-family: Arial, sans-serif; background: #0a0a0a; color: #ffffff; margin: 0; padding: 40px 20px; }
.container { max-width: 800px; margin: 0 auto; text-align: center; }
.logo { font-size: 48px; font-weight: bold; color: #ffffff; letter-spacing: 4px; margin-bottom: 8px; }
.tagline { color: #888; font-size: 16px; margin-bottom: 40px; }
.highlight { color: #4a9eff; }
.stats { display: flex; justify-content: center; gap: 40px; margin: 40px 0; flex-wrap: wrap; }
.stat { text-align: center; }
.stat-number { font-size: 36px; font-weight: bold; color: #4a9eff; }
.stat-label { color: #888; font-size: 14px; }
.section { background: #1a1a1a; border-radius: 12px; padding: 30px; margin: 20px 0; text-align: left; }
.section h2 { color: #4a9eff; margin-top: 0; }
.tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.tool { background: #2a2a2a; padding: 12px; border-radius: 8px; font-family: monospace; font-size: 14px; color: #4a9eff; }
.free-tag { background: #1a3a1a; color: #4aff88; font-size: 11px; padding: 2px 8px; border-radius: 4px; margin-left: 8px; }
.pro-tag { background: #3a1a1a; color: #ff8844; font-size: 11px; padding: 2px 8px; border-radius: 4px; margin-left: 8px; }
.platforms { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 20px 0; }
.platform { background: #1a1a1a; padding: 10px 20px; border-radius: 8px; color: #888; }
.cta { display: inline-block; background: #4a9eff; color: #000; padding: 16px 40px; border-radius: 8px; font-weight: bold; font-size: 18px; text-decoration: none; margin: 20px 10px; }
.cta-secondary { display: inline-block; background: #1a1a1a; color: #4a9eff; padding: 16px 40px; border-radius: 8px; font-weight: bold; font-size: 18px; text-decoration: none; margin: 20px 10px; border: 1px solid #4a9eff; }
</style>
</head>
<body>
<div class="container">
<div class="logo">A7OM</div>
<div class="tagline">The Global Price Benchmark for AI Inference</div>
<div class="stats">
<div class="stat">
<div class="stat-number">1,600+</div>
<div class="stat-label">SKUs Tracked</div>
</div>
<div class="stat">
<div class="stat-number">40+</div>
<div class="stat-label">Vendors</div>
</div>
<div class="stat">
<div class="stat-number">8</div>
<div class="stat-label">MCP Tools</div>
</div>
<div class="stat">
<div class="stat-number">25</div>
<div class="stat-label">Price Indexes</div>
</div>
</div>
<div class="section">
<h2>ATOM MCP. AI Pricing Intelligence for Your Agent</h2>
<p>Give your AI agent live inference pricing context at decision time. Query 1,600+ SKUs across 40+ vendors directly inside your coding environment.</p>
<div class="tools">
<div class="tool">list_vendors <span class="free-tag">FREE</span></div>
<div class="tool">get_kpis <span class="free-tag">FREE</span></div>
<div class="tool">get_index_benchmarks <span class="free-tag">FREE</span></div>
<div class="tool">get_market_stats <span class="free-tag">FREE</span></div>
<div class="tool">search_models <span class="pro-tag">PRO</span></div>
<div class="tool">get_model_detail <span class="pro-tag">PRO</span></div>
<div class="tool">compare_prices <span class="pro-tag">PRO</span></div>
<div class="tool">get_vendor_catalog <span class="pro-tag">PRO</span></div>
</div>
</div>
<div class="section">
<h2>Works Natively In</h2>
<div class="platforms">
<div class="platform">Claude</div>
<div class="platform">Cursor</div>
<div class="platform">Windsurf</div>
<div class="platform">Any MCP Client</div>
</div>
</div>
<div class="section">
<h2>Who We Built This For</h2>
<p>AI Developers building cost-aware applications. FinOps and platform engineers automating inference cost monitoring. AI agents that need real pricing context at decision time.</p>
</div>
<a href="https://www.a7om.com/mcp" class="cta">Get Started Free</a>
<a href="https://www.a7om.com" class="cta-secondary">Learn More</a>
</div>
</body>
</html>