Skip to content

Commit 43e3686

Browse files
nadilasnadilas
committed
feat: proper styled benchmarks + pricing pages + real language logos
- Replace emoji language icons (🦀🐱🔴🔗) with proper SVG logos for Rust, Go, TypeScript, and Bun - New landing/benchmarks.html: full design system (Outfit font, CSS variables, nav, bar charts with gradient fills, comparison cards, source attribution) - New landing/pricing.html: 3-tier pricing cards with "Most Popular" badge, feature lists, FAQ section, beta banner - landing.rs now serves all 3 pages via include_str! (no generated HTML) - All pages share identical nav, footer, and design tokens
1 parent bf28908 commit 43e3686

File tree

4 files changed

+442
-165
lines changed

4 files changed

+442
-165
lines changed

‎crates/warpd/src/cloud/landing.rs‎

Lines changed: 17 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
//! Landing page — public marketing site for WarpGrid.
22
//!
3-
//! Serves the polished landing page from `landing/index.html` at `/`.
4-
//! The HTML is embedded at compile time via `include_str!`, so no
5-
//! filesystem access is needed at runtime.
6-
//!
7-
//! Additional routes (`/benchmarks`, `/pricing`) serve inline pages
8-
//! for content not yet in the main landing page.
3+
//! Serves the polished landing page and subpages from `landing/` at compile time
4+
//! via `include_str!`. No filesystem access needed at runtime.
95
106
use axum::Router;
117
use axum::response::Html;
128
use axum::routing::get;
139

14-
/// The main landing page HTML — embedded from `landing/index.html` at compile time.
1510
const LANDING_HTML: &str = include_str!("../../../../landing/index.html");
11+
const BENCHMARKS_HTML: &str = include_str!("../../../../landing/benchmarks.html");
12+
const PRICING_HTML: &str = include_str!("../../../../landing/pricing.html");
1613

17-
/// Build the landing page router with marketing pages.
14+
/// Build the landing page router.
1815
pub fn landing_router() -> Router {
1916
Router::new()
2017
.route("/", get(landing_page))
@@ -26,152 +23,12 @@ async fn landing_page() -> Html<&'static str> {
2623
Html(LANDING_HTML)
2724
}
2825

29-
async fn benchmarks_page() -> Html<String> {
30-
Html(benchmarks_html())
31-
}
32-
33-
async fn pricing_page() -> Html<String> {
34-
Html(pricing_html())
35-
}
36-
37-
fn benchmarks_html() -> String {
38-
r#"<!DOCTYPE html>
39-
<html lang="en">
40-
<head>
41-
<meta charset="utf-8">
42-
<meta name="viewport" content="width=device-width, initial-scale=1">
43-
<title>Benchmarks — WarpGrid</title>
44-
<style>
45-
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
46-
body {{ background: #040608; color: #e2e8f0; font-family: 'Outfit', system-ui, sans-serif; line-height: 1.6; padding: 2rem; }}
47-
.container {{ max-width: 800px; margin: 0 auto; }}
48-
h1 {{ color: #00e5a0; margin-bottom: 2rem; }}
49-
h2 {{ color: #f1f5f9; margin: 2rem 0 1rem; }}
50-
.bar-chart {{ margin: 1rem 0; }}
51-
.bar {{ display: flex; align-items: center; margin: 0.5rem 0; }}
52-
.bar-label {{ width: 120px; font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; color: #94a3b8; }}
53-
.bar-fill {{ height: 28px; background: linear-gradient(90deg, #00e5a0, #00b880); border-radius: 4px; margin-right: 0.5rem; transition: width 0.5s; }}
54-
.bar-value {{ font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; color: #00e5a0; }}
55-
a {{ color: #00e5a0; }}
56-
.back {{ display: inline-block; margin-bottom: 2rem; text-decoration: none; }}
57-
</style>
58-
</head>
59-
<body>
60-
<div class="container">
61-
<a href="/" class="back">← Back to WarpGrid</a>
62-
<h1>Performance Benchmarks</h1>
63-
64-
<h2>Cold Start Latency (ms)</h2>
65-
<div class="bar-chart">
66-
<div class="bar"><span class="bar-label">Rust</span><div class="bar-fill" style="width: 15%"></div><span class="bar-value">0.3ms</span></div>
67-
<div class="bar"><span class="bar-label">Go</span><div class="bar-fill" style="width: 40%"></div><span class="bar-value">0.8ms</span></div>
68-
<div class="bar"><span class="bar-label">TypeScript</span><div class="bar-fill" style="width: 55%"></div><span class="bar-value">1.1ms</span></div>
69-
<div class="bar"><span class="bar-label">Bun</span><div class="bar-fill" style="width: 70%"></div><span class="bar-value">1.4ms</span></div>
70-
<div class="bar"><span class="bar-label">Docker</span><div class="bar-fill" style="width: 100%; background: linear-gradient(90deg, #ff5c6c, #cc3344);"></div><span class="bar-value">200-500ms</span></div>
71-
</div>
72-
73-
<h2>Throughput (req/sec per instance)</h2>
74-
<div class="bar-chart">
75-
<div class="bar"><span class="bar-label">Rust</span><div class="bar-fill" style="width: 100%"></div><span class="bar-value">45,000</span></div>
76-
<div class="bar"><span class="bar-label">Go</span><div class="bar-fill" style="width: 71%"></div><span class="bar-value">32,000</span></div>
77-
<div class="bar"><span class="bar-label">Bun</span><div class="bar-fill" style="width: 62%"></div><span class="bar-value">28,000</span></div>
78-
</div>
79-
80-
<h2>Memory Density (instances per 1GB)</h2>
81-
<div class="bar-chart">
82-
<div class="bar"><span class="bar-label">WarpGrid</span><div class="bar-fill" style="width: 100%"></div><span class="bar-value">500</span></div>
83-
<div class="bar"><span class="bar-label">Docker</span><div class="bar-fill" style="width: 4%; background: linear-gradient(90deg, #ff5c6c, #cc3344);"></div><span class="bar-value">20</span></div>
84-
</div>
85-
86-
<p style="margin-top: 2rem; color: #64748b; font-size: 0.9rem;">
87-
Source: <a href="https://github.com/dotindustries/warpgrid/tree/main/test-infra/bench-harness">test-infra/bench-harness</a>
88-
</p>
89-
</div>
90-
</body>
91-
</html>"#
92-
.to_string()
26+
async fn benchmarks_page() -> Html<&'static str> {
27+
Html(BENCHMARKS_HTML)
9328
}
9429

95-
fn pricing_html() -> String {
96-
r#"<!DOCTYPE html>
97-
<html lang="en">
98-
<head>
99-
<meta charset="utf-8">
100-
<meta name="viewport" content="width=device-width, initial-scale=1">
101-
<title>Pricing — WarpGrid</title>
102-
<style>
103-
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
104-
body {{ background: #040608; color: #e2e8f0; font-family: 'Outfit', system-ui, sans-serif; line-height: 1.6; padding: 2rem; }}
105-
.container {{ max-width: 900px; margin: 0 auto; }}
106-
h1 {{ color: #00e5a0; margin-bottom: 0.5rem; }}
107-
.subtitle {{ color: #94a3b8; margin-bottom: 2rem; }}
108-
.plans {{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }}
109-
.plan {{ background: #0a0f14; border: 1px solid #1e2d3d; border-radius: 12px; padding: 2rem; }}
110-
.plan.featured {{ border-color: #00e5a0; }}
111-
.plan h2 {{ color: #f1f5f9; margin-bottom: 0.5rem; }}
112-
.price {{ font-size: 2rem; color: #00e5a0; font-weight: 700; margin: 1rem 0; }}
113-
.price span {{ font-size: 1rem; color: #64748b; }}
114-
ul {{ list-style: none; margin: 1rem 0; }}
115-
li {{ padding: 0.4rem 0; color: #cbd5e1; }}
116-
li::before {{ content: "✓ "; color: #00e5a0; }}
117-
.btn {{ display: inline-block; padding: 0.75rem 1.5rem; background: #00e5a0; color: #040608; font-weight: 600; border-radius: 8px; text-decoration: none; margin-top: 1rem; }}
118-
.btn.outline {{ background: transparent; border: 1px solid #00e5a0; color: #00e5a0; }}
119-
.banner {{ background: linear-gradient(90deg, rgba(0,229,160,0.1), rgba(0,229,160,0.05)); border: 1px solid rgba(0,229,160,0.2); border-radius: 8px; padding: 1rem 1.5rem; text-align: center; color: #00e5a0; margin-bottom: 2rem; }}
120-
a {{ color: #00e5a0; }}
121-
.back {{ display: inline-block; margin-bottom: 2rem; text-decoration: none; }}
122-
@media (max-width: 768px) {{ .plans {{ grid-template-columns: 1fr; }} }}
123-
</style>
124-
</head>
125-
<body>
126-
<div class="container">
127-
<a href="/" class="back">← Back to WarpGrid</a>
128-
<div class="banner">Free during beta — no credit card required</div>
129-
<h1>Simple, transparent pricing</h1>
130-
<p class="subtitle">Pay only for what you use. Scale to zero when idle.</p>
131-
<div class="plans">
132-
<div class="plan">
133-
<h2>Free</h2>
134-
<div class="price">$0<span>/mo</span></div>
135-
<ul>
136-
<li>3 deployments</li>
137-
<li>5 instances each</li>
138-
<li>100 req/s</li>
139-
<li>10 MB max Wasm</li>
140-
<li>Community support</li>
141-
</ul>
142-
<a href="/console/login" class="btn">Get Started</a>
143-
</div>
144-
<div class="plan featured">
145-
<h2>Pro</h2>
146-
<div class="price">$29<span>/mo</span></div>
147-
<ul>
148-
<li>10 deployments</li>
149-
<li>20 instances each</li>
150-
<li>1,000 req/s</li>
151-
<li>50 MB max Wasm</li>
152-
<li>Custom domains</li>
153-
<li>Priority support</li>
154-
</ul>
155-
<a href="/console/login" class="btn">Start Free Trial</a>
156-
</div>
157-
<div class="plan">
158-
<h2>Enterprise</h2>
159-
<div class="price">Custom</div>
160-
<ul>
161-
<li>Unlimited deployments</li>
162-
<li>Unlimited instances</li>
163-
<li>Dedicated regions</li>
164-
<li>SLA guarantee</li>
165-
<li>SSO / SAML</li>
166-
<li>24/7 support</li>
167-
</ul>
168-
<a href="mailto:hello@dot.industries" class="btn outline">Contact Us</a>
169-
</div>
170-
</div>
171-
</div>
172-
</body>
173-
</html>"#
174-
.to_string()
30+
async fn pricing_page() -> Html<&'static str> {
31+
Html(PRICING_HTML)
17532
}
17633

17734
#[cfg(test)]
@@ -184,16 +41,16 @@ mod tests {
18441
}
18542

18643
#[test]
187-
fn benchmarks_page_renders() {
188-
let html = benchmarks_html();
189-
assert!(html.contains("Benchmarks"));
190-
assert!(html.contains("Cold Start"));
44+
fn benchmarks_page_has_proper_styling() {
45+
assert!(BENCHMARKS_HTML.contains("--accent: #00e5a0"));
46+
assert!(BENCHMARKS_HTML.contains("Outfit"));
47+
assert!(BENCHMARKS_HTML.contains("Cold Start"));
19148
}
19249

19350
#[test]
194-
fn pricing_page_renders() {
195-
let html = pricing_html();
196-
assert!(html.contains("Pricing"));
197-
assert!(html.contains("$29"));
51+
fn pricing_page_has_proper_styling() {
52+
assert!(PRICING_HTML.contains("--accent: #00e5a0"));
53+
assert!(PRICING_HTML.contains("Outfit"));
54+
assert!(PRICING_HTML.contains("$29"));
19855
}
19956
}

0 commit comments

Comments
 (0)