Skip to content

Tighten landing page spacing, add support section, fix provider counts #697

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

Merged
rygel merged 1 commit into from
Jul 1, 2026
Merged

Tighten landing page spacing, add support section, fix provider counts #697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
60 changes: 47 additions & 13 deletions docs/landing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Usage Tracker — Monitor your AI API usage in one place</title>
<meta name="description" content="A desktop GUI, web dashboard, and cross-platform CLI to monitor AI API usage, costs, and quotas across 18+ providers. Built with .NET 10.">
<meta name="description" content="A desktop GUI, web dashboard, and cross-platform CLI to monitor AI API usage, costs, and quotas across 16 providers. Built with .NET 10.">
<meta name="keywords" content="AI usage tracker, API usage monitor, AI quota tracker, AI spending monitor, Claude usage, OpenAI usage, Gemini usage, Copilot usage, API cost tracker, AI credits monitor, provider usage dashboard, AI billing tracker">
<meta name="author" content="rygel">
<meta name="robots" content="index, follow">
Expand All @@ -15,7 +15,7 @@
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="AI Usage Tracker — Monitor your AI API usage in one place">
<meta property="og:description" content="Track AI API usage, costs, and quotas across 18+ providers. Desktop GUI, web dashboard, and cross-platform CLI.">
<meta property="og:description" content="Track AI API usage, costs, and quotas across 16 providers. Desktop GUI, web dashboard, and cross-platform CLI.">
<meta property="og:url" content="https://aiusagetracker.outerstellar.net/">
<meta property="og:site_name" content="AI Usage Tracker">
<meta property="og:image" content="https://aiusagetracker.outerstellar.net/screenshot_dashboard_privacy.png">
Expand All @@ -24,7 +24,7 @@
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="AI Usage Tracker — Monitor your AI API usage">
<meta name="twitter:description" content="Track AI API usage, costs, and quotas across 18+ providers. Desktop GUI, web dashboard, and CLI.">
<meta name="twitter:description" content="Track AI API usage, costs, and quotas across 16 providers. Desktop GUI, web dashboard, and CLI.">
<meta name="twitter:image" content="https://aiusagetracker.outerstellar.net/screenshot_dashboard_privacy.png">

<!-- Structured Data -->
Expand All @@ -33,7 +33,7 @@
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "AI Usage Tracker",
"description": "A desktop GUI, web dashboard, and cross-platform CLI to monitor AI API usage, costs, and quotas across 18+ providers including Claude, Gemini, OpenAI, GitHub Copilot, DeepSeek, and more.",
"description": "A desktop GUI, web dashboard, and cross-platform CLI to monitor AI API usage, costs, and quotas across 16 providers including Claude, Gemini, OpenAI, GitHub Copilot, DeepSeek, and more.",
"applicationCategory": "Utilities",
"operatingSystem": "Windows, Linux",
"softwareVersion": "2.3.8-beta.1",
Expand Down Expand Up @@ -66,7 +66,7 @@
</div>
<h1>Track most AI providers<br><span class="hero__highlight">in one glance</span></h1>
<p class="hero__tagline">
Three ways to monitor your AI API usage, costs, and quotas across 18+ providers:
Three ways to monitor your AI API usage, costs, and quotas across 16 providers:
a compact desktop GUI with system tray integration, a full web dashboard with
charts and analytics, and a cross-platform CLI. Auto-discovers your keys, stays out of your way.
</p>
Expand Down Expand Up @@ -94,24 +94,24 @@ <h1>Track most AI providers<br><span class="hero__highlight">in one glance</span
<section class="section">
<div class="container">
<h2 class="section__title">Supported Providers</h2>
<p class="section__subtitle">18+ providers in a single view</p>
<p class="section__subtitle">16 providers in a single view</p>
<div class="provider-grid">
<div class="provider-card"><span class="provider-card__name">Antigravity</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">Claude Code</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">DeepSeek</span><span class="provider-card__status provider-card__status--beta">Beta</span></div>
<div class="provider-card"><span class="provider-card__name">Gemini</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">GitHub Copilot</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">Groq</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">Kimi (Moonshot)</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">MiniMax (China)</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">MiniMax (Intl)</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">Mistral</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">OpenAI (Codex)</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">Synthetic</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">Z.AI</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">DeepSeek</span><span class="provider-card__status provider-card__status--beta">Beta</span></div>
<div class="provider-card"><span class="provider-card__name">Gemini</span><span class="provider-card__status provider-card__status--beta">Beta</span></div>
<div class="provider-card"><span class="provider-card__name">Groq</span><span class="provider-card__status provider-card__status--beta">Beta</span></div>
<div class="provider-card"><span class="provider-card__name">MiniMax (China)</span><span class="provider-card__status provider-card__status--beta">Beta</span></div>
<div class="provider-card"><span class="provider-card__name">Mistral</span><span class="provider-card__status provider-card__status--beta">Beta</span></div>
<div class="provider-card"><span class="provider-card__name">OpenCode Go</span><span class="provider-card__status provider-card__status--beta">Beta</span></div>
<div class="provider-card"><span class="provider-card__name">OpenCode Zen</span><span class="provider-card__status provider-card__status--beta">Beta</span></div>
<div class="provider-card"><span class="provider-card__name">Synthetic</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">Xiaomi</span><span class="provider-card__status provider-card__status--beta">Beta</span></div>
<div class="provider-card"><span class="provider-card__name">Z.AI</span><span class="provider-card__status provider-card__status--ok">Tested</span></div>
<div class="provider-card"><span class="provider-card__name">OpenRouter</span><span class="provider-card__status provider-card__status--planned">Planned</span></div>
</div>
</div>
Expand Down Expand Up @@ -216,6 +216,40 @@ <h2 class="section__title">Get Started</h2>
</div>
</section>

<!-- ===== SUPPORT ===== -->
<section class="section">
<div class="container">
<h2 class="section__title">Support the Project</h2>
<p class="section__subtitle">Use these referral links when signing up &mdash; it costs you nothing and helps fund development</p>
<div class="support-grid">
<a href="#" class="support-card">
<span class="support-card__name">Claude Code</span>
<span class="support-card__action">Sign up &rarr;</span>
</a>
<a href="#" class="support-card">
<span class="support-card__name">Gemini</span>
<span class="support-card__action">Sign up &rarr;</span>
</a>
<a href="#" class="support-card">
<span class="support-card__name">GitHub Copilot</span>
<span class="support-card__action">Sign up &rarr;</span>
</a>
<a href="#" class="support-card">
<span class="support-card__name">DeepSeek</span>
<span class="support-card__action">Sign up &rarr;</span>
</a>
<a href="#" class="support-card">
<span class="support-card__name">OpenAI</span>
<span class="support-card__action">Sign up &rarr;</span>
</a>
<a href="#" class="support-card">
<span class="support-card__name">Z.AI</span>
<span class="support-card__action">Sign up &rarr;</span>
</a>
</div>
</div>
</section>

<!-- ===== FOOTER ===== -->
<footer class="footer">
<div class="container footer__content">
Expand Down
57 changes: 49 additions & 8 deletions docs/landing/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ body {

.hero {
background: linear-gradient(160deg, #1a1a2e 0%, var(--bg-primary) 60%);
padding: 80px 0 60px;
padding: 48px 0 36px;
overflow: hidden;
}

Expand Down Expand Up @@ -162,7 +162,7 @@ body {
/* ===== SECTIONS ===== */

.section {
padding: 80px 0;
padding: 40px 0;
}

.section--alt {
Expand All @@ -180,7 +180,7 @@ body {
text-align: center;
color: var(--text-muted);
font-size: 1.05rem;
margin-bottom: 48px;
margin-bottom: 24px;
}

/* ===== PROVIDER GRID ===== */
Expand Down Expand Up @@ -238,7 +238,7 @@ body {
.features-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
gap: 32px;
}

.feature-column h3 {
Expand Down Expand Up @@ -308,8 +308,8 @@ body {
.download__steps {
display: flex;
justify-content: center;
gap: 48px;
margin-bottom: 40px;
gap: 32px;
margin-bottom: 28px;
}

.download__step {
Expand Down Expand Up @@ -340,6 +340,43 @@ body {
color: var(--accent);
}

/* ===== SUPPORT ===== */

.support-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.support-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: var(--radius);
text-decoration: none;
transition: border-color 0.15s ease, transform 0.15s ease;
}

.support-card:hover {
border-color: rgba(59, 130, 246, 0.4);
transform: translateY(-1px);
}

.support-card__name {
font-weight: 500;
font-size: 0.95rem;
color: var(--text-primary);
}

.support-card__action {
font-size: 0.85rem;
color: var(--accent);
font-weight: 600;
}

/* ===== FOOTER ===== */

.footer {
Expand Down Expand Up @@ -405,7 +442,7 @@ body {

@media (max-width: 900px) {
.hero {
padding: 60px 0 40px;
padding: 36px 0 24px;
}

.hero__content {
Expand Down Expand Up @@ -442,6 +479,10 @@ body {
gap: 32px;
}

.support-grid {
grid-template-columns: 1fr;
}

.screenshot-grid {
grid-template-columns: repeat(2, 1fr);
}
Expand All @@ -458,7 +499,7 @@ body {
}

.section {
padding: 56px 0;
padding: 28px 0;
}

.section__title {
Expand Down