forgedock 1.0.17 → 1.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -1
- package/bin/cross-publish.mjs +344 -0
- package/bin/forgedock.mjs +229 -17
- package/commands/autopilot.md +77 -0
- package/commands/design-bench.md +176 -0
- package/commands/design-render-critique-loop.md +103 -0
- package/commands/design.md +259 -0
- package/commands/issue.md +7 -3
- package/commands/orchestrate.md +121 -0
- package/commands/{resume.md → pipeline-resume.md} +4 -4
- package/commands/{status.md → pipeline-status.md} +1 -1
- package/commands/qa-sweep.md +37 -2
- package/commands/quality-gate.md +57 -0
- package/commands/review-pr-staging.md +158 -2
- package/commands/test-gate.md +929 -0
- package/commands/work-on/build/implement.md +5 -3
- package/commands/work-on.md +53 -3
- package/docs/CI.md +177 -0
- package/docs/FORGE-PROTOCOL.md +324 -0
- package/docs/articles/b-vs-c-baseline.md +210 -0
- package/docs/articles/full-abc-benchmark.md +205 -0
- package/docs/articles/selective-spec-loading-token-savings.md +140 -0
- package/docs/design/abc-benchmark.md +195 -0
- package/docs/design/design-architect-rationale.md +123 -0
- package/docs/design/design-memory.md +61 -0
- package/docs/design/design-spec-schema.md +248 -0
- package/docs/design/design-system-lint.md +150 -0
- package/docs/design/divergent-generation.md +106 -0
- package/docs/design/effects-appropriateness.md +133 -0
- package/docs/design/fixtures/briefs/README.md +47 -0
- package/docs/design/fixtures/briefs/cadence.md +39 -0
- package/docs/design/fixtures/briefs/plume.md +39 -0
- package/docs/design/fixtures/briefs/slipstream.md +39 -0
- package/docs/design/fixtures/briefs/tender.md +39 -0
- package/docs/design/fixtures/briefs/voltage.md +39 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-1.html +364 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-2.html +420 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-3.html +506 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-1.html +611 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-2.html +594 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-3.html +817 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/runs.json +175 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/scorecard.json +138 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-1.html +373 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-2.html +398 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-3.html +595 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-1.html +531 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-2.html +565 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-3.html +674 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-1.html +388 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-2.html +463 -0
- package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-3.html +568 -0
- package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-1.html +562 -0
- package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-2.html +618 -0
- package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-3.html +618 -0
- package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-1.html +364 -0
- package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-2.html +420 -0
- package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-3.html +506 -0
- package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-1.html +527 -0
- package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-2.html +445 -0
- package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-3.html +483 -0
- package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-1.html +611 -0
- package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-2.html +594 -0
- package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-3.html +817 -0
- package/docs/design/fixtures/runs/full-abc/runs.json +190 -0
- package/docs/design/fixtures/runs/full-abc/scorecard.json +144 -0
- package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-1.html +496 -0
- package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-2.html +447 -0
- package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-3.html +564 -0
- package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-1.html +373 -0
- package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-2.html +398 -0
- package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-3.html +595 -0
- package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-1.html +622 -0
- package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-2.html +475 -0
- package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-3.html +660 -0
- package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-1.html +531 -0
- package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-2.html +565 -0
- package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-3.html +674 -0
- package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-1.html +525 -0
- package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-2.html +446 -0
- package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-3.html +463 -0
- package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-1.html +388 -0
- package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-2.html +463 -0
- package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-3.html +568 -0
- package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-1.html +1068 -0
- package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-2.html +1423 -0
- package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-3.html +1245 -0
- package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-1.html +305 -0
- package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-2.html +327 -0
- package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-3.html +428 -0
- package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-1.html +1270 -0
- package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-2.html +1172 -0
- package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-3.html +1532 -0
- package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-1.html +315 -0
- package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-2.html +342 -0
- package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-3.html +353 -0
- package/docs/design/fixtures/runs/full-abc-opus/runs.json +190 -0
- package/docs/design/fixtures/runs/full-abc-opus/scorecard.json +144 -0
- package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-1.html +345 -0
- package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-2.html +396 -0
- package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-3.html +502 -0
- package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-1.html +408 -0
- package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-2.html +446 -0
- package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-3.html +496 -0
- package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-1.html +813 -0
- package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-2.html +711 -0
- package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-3.html +721 -0
- package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-1.html +280 -0
- package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-2.html +291 -0
- package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-3.html +366 -0
- package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-1.html +1010 -0
- package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-2.html +836 -0
- package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-3.html +930 -0
- package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-1.html +407 -0
- package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-2.html +396 -0
- package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-3.html +529 -0
- package/docs/design/foundations/brutalist.css +294 -0
- package/docs/design/foundations/editorial.css +300 -0
- package/docs/design/foundations/minimal-luxury.css +295 -0
- package/docs/design/foundations/technical.css +293 -0
- package/docs/design/foundations/warm-photo.css +299 -0
- package/docs/design/reference-corpus.md +1726 -0
- package/docs/design/render-critique-loop.md +57 -0
- package/docs/spec-graph-schema.md +397 -0
- package/package.json +1 -1
- package/scripts/bench-scorecard.mjs +239 -0
- package/scripts/build-spec-graph.mjs +509 -0
- package/scripts/check-native-conflicts.sh +200 -0
- package/scripts/classify-lane.sh +0 -7
- package/scripts/design-system-lint.mjs +993 -0
- package/scripts/graph-query.sh +486 -0
- package/scripts/transition-label.sh +10 -2
- package/scripts/validate-spec-graph.sh +423 -0
- package/templates/workflows/forgedock-review.yml +96 -0
|
@@ -0,0 +1,817 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Plume — Project management for engineers</title>
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
+
<script>
|
|
9
|
+
tailwind.config = {
|
|
10
|
+
theme: {
|
|
11
|
+
extend: {
|
|
12
|
+
fontFamily: {
|
|
13
|
+
display: ['"Syne"', 'system-ui', 'sans-serif'],
|
|
14
|
+
body: ['"Outfit"', 'system-ui', 'sans-serif'],
|
|
15
|
+
mono: ['"Fira Code"', 'monospace'],
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
}
|
|
20
|
+
</script>
|
|
21
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
22
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
23
|
+
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet" />
|
|
24
|
+
<style>
|
|
25
|
+
:root {
|
|
26
|
+
--bg: #ffffff;
|
|
27
|
+
--fg: #0a0a0a;
|
|
28
|
+
--teal: #0d9488;
|
|
29
|
+
--teal-light: #14b8a6;
|
|
30
|
+
--teal-pale: #f0fdfa;
|
|
31
|
+
--teal-border: #99f6e4;
|
|
32
|
+
--gray-50: #f9fafb;
|
|
33
|
+
--gray-100: #f3f4f6;
|
|
34
|
+
--gray-200: #e5e7eb;
|
|
35
|
+
--gray-400: #9ca3af;
|
|
36
|
+
--gray-500: #6b7280;
|
|
37
|
+
--gray-700: #374151;
|
|
38
|
+
--gray-900: #111827;
|
|
39
|
+
}
|
|
40
|
+
* { box-sizing: border-box; }
|
|
41
|
+
body {
|
|
42
|
+
background: var(--bg);
|
|
43
|
+
color: var(--fg);
|
|
44
|
+
font-family: 'Outfit', system-ui, sans-serif;
|
|
45
|
+
}
|
|
46
|
+
.display { font-family: 'Syne', system-ui, sans-serif; }
|
|
47
|
+
.mono { font-family: 'Fira Code', monospace; }
|
|
48
|
+
.teal-text { color: var(--teal); }
|
|
49
|
+
.teal-bg { background: var(--teal); }
|
|
50
|
+
.teal-border { border-color: var(--teal-border); }
|
|
51
|
+
.btn-primary {
|
|
52
|
+
display: inline-flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
gap: 8px;
|
|
55
|
+
padding: 13px 26px;
|
|
56
|
+
background: var(--teal);
|
|
57
|
+
color: white;
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
font-size: 15px;
|
|
60
|
+
border-radius: 8px;
|
|
61
|
+
text-decoration: none;
|
|
62
|
+
transition: background 0.15s, transform 0.1s;
|
|
63
|
+
}
|
|
64
|
+
.btn-primary:hover { background: #0f766e; }
|
|
65
|
+
.btn-outline {
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
gap: 8px;
|
|
69
|
+
padding: 12px 26px;
|
|
70
|
+
background: transparent;
|
|
71
|
+
color: var(--gray-700);
|
|
72
|
+
font-weight: 500;
|
|
73
|
+
font-size: 15px;
|
|
74
|
+
border-radius: 8px;
|
|
75
|
+
border: 1.5px solid var(--gray-200);
|
|
76
|
+
text-decoration: none;
|
|
77
|
+
transition: border-color 0.15s, background 0.15s;
|
|
78
|
+
}
|
|
79
|
+
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }
|
|
80
|
+
.feature-card {
|
|
81
|
+
border: 1.5px solid var(--gray-200);
|
|
82
|
+
border-radius: 16px;
|
|
83
|
+
padding: 28px;
|
|
84
|
+
background: white;
|
|
85
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
86
|
+
}
|
|
87
|
+
.feature-card:hover {
|
|
88
|
+
border-color: var(--teal-border);
|
|
89
|
+
box-shadow: 0 0 0 4px rgba(20,184,166,0.06);
|
|
90
|
+
}
|
|
91
|
+
.tag {
|
|
92
|
+
display: inline-flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
gap: 4px;
|
|
95
|
+
padding: 3px 10px;
|
|
96
|
+
border-radius: 100px;
|
|
97
|
+
font-size: 12px;
|
|
98
|
+
font-weight: 500;
|
|
99
|
+
}
|
|
100
|
+
.tag-teal { background: var(--teal-pale); color: var(--teal); border: 1px solid var(--teal-border); }
|
|
101
|
+
.tag-gray { background: var(--gray-100); color: var(--gray-500); border: 1px solid var(--gray-200); }
|
|
102
|
+
.tag-amber { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
|
|
103
|
+
.tag-blue { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
|
|
104
|
+
.tag-green { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
|
|
105
|
+
.kbd {
|
|
106
|
+
display: inline-block;
|
|
107
|
+
padding: 2px 7px;
|
|
108
|
+
background: var(--gray-100);
|
|
109
|
+
border: 1px solid var(--gray-200);
|
|
110
|
+
border-bottom: 2px solid var(--gray-300);
|
|
111
|
+
border-radius: 4px;
|
|
112
|
+
font-family: 'Fira Code', monospace;
|
|
113
|
+
font-size: 11px;
|
|
114
|
+
color: var(--gray-500);
|
|
115
|
+
}
|
|
116
|
+
.section-label {
|
|
117
|
+
font-size: 12px;
|
|
118
|
+
font-weight: 600;
|
|
119
|
+
text-transform: uppercase;
|
|
120
|
+
letter-spacing: 0.1em;
|
|
121
|
+
color: var(--teal);
|
|
122
|
+
}
|
|
123
|
+
.issue-row {
|
|
124
|
+
display: flex;
|
|
125
|
+
align-items: center;
|
|
126
|
+
gap: 12px;
|
|
127
|
+
padding: 10px 16px;
|
|
128
|
+
border-bottom: 1px solid var(--gray-100);
|
|
129
|
+
transition: background 0.1s;
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
}
|
|
132
|
+
.issue-row:hover { background: var(--gray-50); }
|
|
133
|
+
.issue-row:last-child { border-bottom: none; }
|
|
134
|
+
.priority-critical { color: #dc2626; }
|
|
135
|
+
.priority-high { color: #d97706; }
|
|
136
|
+
.priority-medium { color: #6b7280; }
|
|
137
|
+
.avatar {
|
|
138
|
+
width: 22px; height: 22px; border-radius: 50%;
|
|
139
|
+
display: flex; align-items: center; justify-content: center;
|
|
140
|
+
font-size: 9px; font-weight: 700; flex-shrink: 0;
|
|
141
|
+
}
|
|
142
|
+
.cycle-bar {
|
|
143
|
+
height: 6px;
|
|
144
|
+
border-radius: 100px;
|
|
145
|
+
background: var(--gray-200);
|
|
146
|
+
overflow: hidden;
|
|
147
|
+
}
|
|
148
|
+
.cycle-fill {
|
|
149
|
+
height: 100%;
|
|
150
|
+
border-radius: 100px;
|
|
151
|
+
background: linear-gradient(90deg, var(--teal) 0%, var(--teal-light) 100%);
|
|
152
|
+
}
|
|
153
|
+
.faq-item { border-bottom: 1px solid var(--gray-200); }
|
|
154
|
+
.faq-item:last-child { border-bottom: none; }
|
|
155
|
+
.scroll-fade {
|
|
156
|
+
background: linear-gradient(to right, transparent 0%, white 15%, white 85%, transparent 100%);
|
|
157
|
+
}
|
|
158
|
+
</style>
|
|
159
|
+
</head>
|
|
160
|
+
<body class="antialiased">
|
|
161
|
+
|
|
162
|
+
<!-- Top banner -->
|
|
163
|
+
<div class="teal-bg text-white text-center py-2.5 text-sm font-medium">
|
|
164
|
+
Now in public beta. Free for teams up to 10.
|
|
165
|
+
<a href="#signup" class="underline ml-2 opacity-80 hover:opacity-100">Get started →</a>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<!-- Nav -->
|
|
169
|
+
<nav class="sticky top-0 z-50 bg-white border-b border-gray-200">
|
|
170
|
+
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
171
|
+
<div class="flex items-center gap-10">
|
|
172
|
+
<div class="flex items-center gap-2.5">
|
|
173
|
+
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
|
174
|
+
<rect width="28" height="28" rx="8" fill="#0d9488"/>
|
|
175
|
+
<circle cx="14" cy="14" r="4" fill="white"/>
|
|
176
|
+
<path d="M14 6C9.58 6 6 9.58 6 14" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
|
177
|
+
<path d="M14 22C18.42 22 22 18.42 22 14" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
|
178
|
+
</svg>
|
|
179
|
+
<span class="display font-bold text-lg tracking-tight" style="color: var(--gray-900);">Plume</span>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="hidden md:flex items-center gap-1">
|
|
182
|
+
<a href="#product" class="text-sm px-3 py-1.5 rounded-lg hover:bg-gray-100 transition-colors" style="color: var(--gray-500);">Product</a>
|
|
183
|
+
<a href="#cycles" class="text-sm px-3 py-1.5 rounded-lg hover:bg-gray-100 transition-colors" style="color: var(--gray-500);">Cycles</a>
|
|
184
|
+
<a href="#integrations" class="text-sm px-3 py-1.5 rounded-lg hover:bg-gray-100 transition-colors" style="color: var(--gray-500);">Integrations</a>
|
|
185
|
+
<a href="#pricing" class="text-sm px-3 py-1.5 rounded-lg hover:bg-gray-100 transition-colors" style="color: var(--gray-500);">Pricing</a>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="flex items-center gap-3">
|
|
189
|
+
<a href="#" class="text-sm hidden sm:block" style="color: var(--gray-500);">Log in</a>
|
|
190
|
+
<a href="#signup" class="btn-primary" style="padding: 9px 20px; font-size: 13px; border-radius: 8px;">Get started free</a>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</nav>
|
|
194
|
+
|
|
195
|
+
<!-- Hero — centered, clean, modern -->
|
|
196
|
+
<section class="max-w-5xl mx-auto px-6 pt-20 pb-16 text-center">
|
|
197
|
+
<div class="tag tag-teal mb-6 mx-auto w-fit">
|
|
198
|
+
<svg class="w-3 h-3" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.5"/><circle cx="6" cy="6" r="1.5" fill="currentColor"/></svg>
|
|
199
|
+
Built for engineering teams
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<h1 class="display text-6xl md:text-7xl lg:text-8xl font-extrabold tracking-tight leading-none mb-6" style="color: var(--gray-900);">
|
|
203
|
+
Issue tracking<br/>
|
|
204
|
+
<span style="color: var(--teal);">without the drag.</span>
|
|
205
|
+
</h1>
|
|
206
|
+
|
|
207
|
+
<p class="text-xl max-w-xl mx-auto leading-relaxed mb-8" style="color: var(--gray-500);">
|
|
208
|
+
Plume is keyboard-driven project management for software teams. Plan cycles, ship issues, and see your roadmap — without the overhead.
|
|
209
|
+
</p>
|
|
210
|
+
|
|
211
|
+
<div class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-12">
|
|
212
|
+
<a href="#signup" class="btn-primary w-full sm:w-auto justify-center">
|
|
213
|
+
Start for free
|
|
214
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
215
|
+
</a>
|
|
216
|
+
<a href="#demo" class="btn-outline w-full sm:w-auto justify-center">
|
|
217
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none"><path d="M5 3.5l8 4.5-8 4.5V3.5z" fill="currentColor"/></svg>
|
|
218
|
+
Watch the demo
|
|
219
|
+
</a>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<!-- Social proof line -->
|
|
223
|
+
<div class="flex flex-wrap items-center justify-center gap-4 text-sm" style="color: var(--gray-400);">
|
|
224
|
+
<span class="flex items-center gap-1.5">
|
|
225
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor" style="color: var(--teal);"><path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 11.771l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/></svg>
|
|
226
|
+
4.9 on Product Hunt
|
|
227
|
+
</span>
|
|
228
|
+
<span>·</span>
|
|
229
|
+
<span>Free for teams under 10</span>
|
|
230
|
+
<span>·</span>
|
|
231
|
+
<span>No credit card required</span>
|
|
232
|
+
<span>·</span>
|
|
233
|
+
<span>Setup in 2 minutes</span>
|
|
234
|
+
</div>
|
|
235
|
+
</section>
|
|
236
|
+
|
|
237
|
+
<!-- Main UI Mockup -->
|
|
238
|
+
<section class="max-w-6xl mx-auto px-6 pb-24">
|
|
239
|
+
<div class="rounded-2xl overflow-hidden shadow-xl" style="border: 1.5px solid var(--gray-200);">
|
|
240
|
+
<!-- Chrome bar -->
|
|
241
|
+
<div class="flex items-center gap-3 px-4 h-11 border-b" style="background: var(--gray-50); border-color: var(--gray-200);">
|
|
242
|
+
<div class="flex gap-1.5 flex-shrink-0">
|
|
243
|
+
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
|
244
|
+
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
|
245
|
+
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
|
246
|
+
</div>
|
|
247
|
+
<div class="flex-1 flex items-center justify-center">
|
|
248
|
+
<div class="flex items-center gap-1.5 bg-white border border-gray-200 rounded-md px-3 h-6 text-xs text-gray-400">
|
|
249
|
+
<svg class="w-3 h-3" viewBox="0 0 12 12" fill="none"><path d="M10.5 10.5l-2.25-2.25M8.5 5.5A3 3 0 112.5 5.5a3 3 0 016 0z" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
|
250
|
+
app.plume.dev/acme
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
<div class="flex-shrink-0 flex items-center gap-2">
|
|
254
|
+
<div class="avatar" style="background: #0d9488; color: white;">J</div>
|
|
255
|
+
<div class="avatar" style="background: #8b5cf6; color: white;">S</div>
|
|
256
|
+
<div class="avatar" style="background: #f59e0b; color: white;">M</div>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
|
|
260
|
+
<div class="flex bg-white" style="min-height: 480px;">
|
|
261
|
+
<!-- Sidebar -->
|
|
262
|
+
<div class="w-56 flex-shrink-0 border-r py-3" style="border-color: var(--gray-200);">
|
|
263
|
+
<!-- Workspace -->
|
|
264
|
+
<div class="px-3 mb-4">
|
|
265
|
+
<div class="flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm font-semibold" style="color: var(--gray-900);">
|
|
266
|
+
<div class="w-5 h-5 rounded" style="background: var(--teal);"></div>
|
|
267
|
+
Acme Corp
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
|
|
271
|
+
<div class="px-3 mb-1">
|
|
272
|
+
<div class="text-xs font-semibold uppercase tracking-wider px-2 py-1" style="color: var(--gray-400);">Workspace</div>
|
|
273
|
+
</div>
|
|
274
|
+
<div class="px-3 space-y-0.5 mb-4">
|
|
275
|
+
<div class="flex items-center justify-between px-2 py-1.5 rounded-lg text-sm cursor-pointer hover:bg-gray-50 font-medium" style="color: var(--teal); background: var(--teal-pale);">
|
|
276
|
+
<div class="flex items-center gap-2">
|
|
277
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1" fill="currentColor" opacity="0.7"/><rect x="9" y="2" width="5" height="5" rx="1" fill="currentColor" opacity="0.7"/><rect x="2" y="9" width="5" height="5" rx="1" fill="currentColor" opacity="0.4"/><rect x="9" y="9" width="5" height="5" rx="1" fill="currentColor" opacity="0.4"/></svg>
|
|
278
|
+
Issues
|
|
279
|
+
</div>
|
|
280
|
+
<span class="text-xs" style="color: var(--gray-400);">47</span>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="flex items-center justify-between px-2 py-1.5 rounded-lg text-sm cursor-pointer hover:bg-gray-50" style="color: var(--gray-500);">
|
|
283
|
+
<div class="flex items-center gap-2">
|
|
284
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
285
|
+
Cycles
|
|
286
|
+
</div>
|
|
287
|
+
<span class="text-xs bg-teal-100 text-teal-700 px-1.5 rounded font-medium">S12</span>
|
|
288
|
+
</div>
|
|
289
|
+
<div class="flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm cursor-pointer hover:bg-gray-50" style="color: var(--gray-500);">
|
|
290
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none"><path d="M2 12L5 5l3 4 3-6 3 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
291
|
+
Roadmap
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
|
|
295
|
+
<div class="px-3 mb-1">
|
|
296
|
+
<div class="text-xs font-semibold uppercase tracking-wider px-2 py-1" style="color: var(--gray-400);">Projects</div>
|
|
297
|
+
</div>
|
|
298
|
+
<div class="px-3 space-y-0.5">
|
|
299
|
+
<div class="flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm cursor-pointer hover:bg-gray-50" style="color: var(--gray-600);">
|
|
300
|
+
<span class="w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background: #3b82f6;"></span> API v3
|
|
301
|
+
</div>
|
|
302
|
+
<div class="flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm cursor-pointer hover:bg-gray-50" style="color: var(--gray-600);">
|
|
303
|
+
<span class="w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background: #8b5cf6;"></span> Dashboard
|
|
304
|
+
</div>
|
|
305
|
+
<div class="flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm cursor-pointer hover:bg-gray-50" style="color: var(--gray-600);">
|
|
306
|
+
<span class="w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background: #f59e0b;"></span> Mobile app
|
|
307
|
+
</div>
|
|
308
|
+
<div class="flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm cursor-pointer hover:bg-gray-50" style="color: var(--gray-400);">
|
|
309
|
+
<span class="w-2.5 h-2.5 rounded-sm flex-shrink-0 border-2 border-dashed border-gray-300"></span> + New project
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
<!-- Main panel -->
|
|
315
|
+
<div class="flex-1 flex flex-col">
|
|
316
|
+
<!-- Toolbar -->
|
|
317
|
+
<div class="flex items-center justify-between px-5 py-3 border-b" style="border-color: var(--gray-200);">
|
|
318
|
+
<div class="flex items-center gap-3">
|
|
319
|
+
<h2 class="font-semibold text-sm" style="color: var(--gray-900);">All issues</h2>
|
|
320
|
+
<span class="tag tag-gray text-xs">47</span>
|
|
321
|
+
</div>
|
|
322
|
+
<div class="flex items-center gap-2">
|
|
323
|
+
<button class="text-xs flex items-center gap-1.5 px-3 py-1.5 rounded-lg border hover:bg-gray-50 transition-colors" style="border-color: var(--gray-200); color: var(--gray-500);">
|
|
324
|
+
<svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none"><path d="M1 3.5h12M3 7h8M5 10.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
|
325
|
+
Filter
|
|
326
|
+
</button>
|
|
327
|
+
<button class="text-xs flex items-center gap-1.5 px-3 py-1.5 rounded-lg border hover:bg-gray-50 transition-colors" style="border-color: var(--gray-200); color: var(--gray-500);">
|
|
328
|
+
Group: Status
|
|
329
|
+
<svg class="w-3 h-3" viewBox="0 0 12 12" fill="none"><path d="M3 5l3 3 3-3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
|
330
|
+
</button>
|
|
331
|
+
<kbd class="kbd hidden md:inline">C</kbd>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
<!-- Status group: In Progress -->
|
|
336
|
+
<div>
|
|
337
|
+
<div class="flex items-center gap-2 px-5 py-2 border-b" style="border-color: var(--gray-100); background: var(--gray-50);">
|
|
338
|
+
<span class="w-2 h-2 rounded-full bg-amber-400 flex-shrink-0"></span>
|
|
339
|
+
<span class="text-xs font-semibold" style="color: var(--gray-600);">In Progress</span>
|
|
340
|
+
<span class="text-xs" style="color: var(--gray-400);">3</span>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="issue-row">
|
|
343
|
+
<span class="priority-critical flex-shrink-0">
|
|
344
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor"><path d="M7.493 0.015a.75.75 0 01.762.066 8.751 8.751 0 011.735 13.373 8.75 8.75 0 01-13.373-1.734.75.75 0 01.128-.847l.99-1.006a.75.75 0 01.876-.153A6.25 6.25 0 0014 8.25 6.237 6.237 0 009.54 2.2a.75.75 0 01-.047-1.186z" transform="translate(0, 0)"/><path d="M8 4.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4.75zM8 11a1 1 0 110 2 1 1 0 010-2z"/></svg>
|
|
345
|
+
</span>
|
|
346
|
+
<span class="mono text-xs flex-shrink-0" style="color: var(--gray-400);">PLM-47</span>
|
|
347
|
+
<span class="text-sm font-medium flex-1 truncate" style="color: var(--gray-900);">Fix rate limiting on GraphQL subscriptions</span>
|
|
348
|
+
<div class="flex items-center gap-2 flex-shrink-0">
|
|
349
|
+
<span class="tag tag-amber hidden sm:flex">S12</span>
|
|
350
|
+
<div class="avatar" style="background: #0d9488; color: white;">J</div>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
<div class="issue-row">
|
|
354
|
+
<span class="priority-high flex-shrink-0">
|
|
355
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor"><path d="M8 2a.75.75 0 01.75.75v7.5a.75.75 0 01-1.5 0v-7.5A.75.75 0 018 2zm0 10.5a1 1 0 110 2 1 1 0 010-2z"/></svg>
|
|
356
|
+
</span>
|
|
357
|
+
<span class="mono text-xs flex-shrink-0" style="color: var(--gray-400);">PLM-45</span>
|
|
358
|
+
<span class="text-sm font-medium flex-1 truncate" style="color: var(--gray-900);">Webhook delivery retry queue overflow</span>
|
|
359
|
+
<div class="flex items-center gap-2 flex-shrink-0">
|
|
360
|
+
<span class="tag tag-amber hidden sm:flex">S12</span>
|
|
361
|
+
<div class="avatar" style="background: #0d9488; color: white;">J</div>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
<div class="issue-row" style="background: rgba(13,148,136,0.03); border-left: 3px solid var(--teal);">
|
|
365
|
+
<span class="priority-high flex-shrink-0">
|
|
366
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor"><path d="M8 2a.75.75 0 01.75.75v7.5a.75.75 0 01-1.5 0v-7.5A.75.75 0 018 2zm0 10.5a1 1 0 110 2 1 1 0 010-2z"/></svg>
|
|
367
|
+
</span>
|
|
368
|
+
<span class="mono text-xs flex-shrink-0" style="color: var(--gray-400);">PLM-43</span>
|
|
369
|
+
<span class="text-sm font-medium flex-1 truncate" style="color: var(--gray-900);">Keyboard shortcut conflicts in issue modal</span>
|
|
370
|
+
<div class="flex items-center gap-2 flex-shrink-0">
|
|
371
|
+
<span class="tag tag-blue hidden sm:flex">In Review</span>
|
|
372
|
+
<div class="avatar" style="background: #8b5cf6; color: white;">S</div>
|
|
373
|
+
</div>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
<!-- Status group: Todo -->
|
|
378
|
+
<div>
|
|
379
|
+
<div class="flex items-center gap-2 px-5 py-2 border-b border-t" style="border-color: var(--gray-100); background: var(--gray-50);">
|
|
380
|
+
<span class="w-2 h-2 rounded-full flex-shrink-0" style="background: var(--gray-400);"></span>
|
|
381
|
+
<span class="text-xs font-semibold" style="color: var(--gray-600);">Todo</span>
|
|
382
|
+
<span class="text-xs" style="color: var(--gray-400);">12</span>
|
|
383
|
+
</div>
|
|
384
|
+
<div class="issue-row">
|
|
385
|
+
<span class="priority-medium flex-shrink-0">
|
|
386
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none"><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/></svg>
|
|
387
|
+
</span>
|
|
388
|
+
<span class="mono text-xs flex-shrink-0" style="color: var(--gray-400);">PLM-42</span>
|
|
389
|
+
<span class="text-sm flex-1 truncate" style="color: var(--gray-700);">Add bulk reassign to triage view</span>
|
|
390
|
+
<div class="flex items-center gap-2 flex-shrink-0">
|
|
391
|
+
<span class="text-xs" style="color: var(--gray-400);">unassigned</span>
|
|
392
|
+
</div>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="issue-row">
|
|
395
|
+
<span class="priority-medium flex-shrink-0">
|
|
396
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none"><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/></svg>
|
|
397
|
+
</span>
|
|
398
|
+
<span class="mono text-xs flex-shrink-0" style="color: var(--gray-400);">PLM-41</span>
|
|
399
|
+
<span class="text-sm flex-1 truncate" style="color: var(--gray-700);">Roadmap export to PDF</span>
|
|
400
|
+
<div class="flex items-center gap-2 flex-shrink-0">
|
|
401
|
+
<div class="avatar" style="background: #f59e0b; color: white;">M</div>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
|
|
406
|
+
<!-- Done group - collapsed indicator -->
|
|
407
|
+
<div class="flex items-center gap-2 px-5 py-2 border-t cursor-pointer hover:bg-gray-50 transition-colors" style="border-color: var(--gray-100);">
|
|
408
|
+
<svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" style="color: var(--gray-400);"><path d="M5 3l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
|
409
|
+
<span class="w-2 h-2 rounded-full flex-shrink-0 bg-green-500"></span>
|
|
410
|
+
<span class="text-xs font-semibold" style="color: var(--gray-500);">Done</span>
|
|
411
|
+
<span class="text-xs" style="color: var(--gray-400);">32 issues</span>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
|
|
415
|
+
<!-- Right detail panel (abbreviated) -->
|
|
416
|
+
<div class="w-72 flex-shrink-0 border-l hidden lg:block" style="border-color: var(--gray-200);">
|
|
417
|
+
<div class="p-4 border-b" style="border-color: var(--gray-200);">
|
|
418
|
+
<div class="flex items-start justify-between gap-2 mb-3">
|
|
419
|
+
<span class="mono text-xs" style="color: var(--gray-400);">PLM-43</span>
|
|
420
|
+
<span class="tag tag-blue">In Review</span>
|
|
421
|
+
</div>
|
|
422
|
+
<h3 class="text-sm font-semibold leading-snug" style="color: var(--gray-900);">Keyboard shortcut conflicts in issue modal</h3>
|
|
423
|
+
</div>
|
|
424
|
+
<div class="p-4 space-y-4">
|
|
425
|
+
<div>
|
|
426
|
+
<div class="text-xs font-medium mb-1.5" style="color: var(--gray-400);">Priority</div>
|
|
427
|
+
<div class="flex items-center gap-1.5 text-sm priority-high">
|
|
428
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor"><path d="M8 2a.75.75 0 01.75.75v7.5a.75.75 0 01-1.5 0v-7.5A.75.75 0 018 2zm0 10.5a1 1 0 110 2 1 1 0 010-2z"/></svg>
|
|
429
|
+
High
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
<div>
|
|
433
|
+
<div class="text-xs font-medium mb-1.5" style="color: var(--gray-400);">Assignee</div>
|
|
434
|
+
<div class="flex items-center gap-2">
|
|
435
|
+
<div class="avatar" style="background: #8b5cf6; color: white; width: 24px; height: 24px; font-size: 10px;">S</div>
|
|
436
|
+
<span class="text-sm" style="color: var(--gray-700);">Sarah Chen</span>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
<div>
|
|
440
|
+
<div class="text-xs font-medium mb-1.5" style="color: var(--gray-400);">Cycle</div>
|
|
441
|
+
<div class="flex items-center gap-2 text-sm" style="color: var(--gray-700);">
|
|
442
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/></svg>
|
|
443
|
+
Sprint 12
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
<div>
|
|
447
|
+
<div class="text-xs font-medium mb-1.5" style="color: var(--gray-400);">Linked PR</div>
|
|
448
|
+
<div class="flex items-center gap-2 text-sm text-blue-600 cursor-pointer hover:text-blue-800">
|
|
449
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none"><circle cx="4" cy="4" r="2" stroke="currentColor" stroke-width="1.3"/><circle cx="12" cy="12" r="2" stroke="currentColor" stroke-width="1.3"/><circle cx="12" cy="4" r="2" stroke="currentColor" stroke-width="1.3"/><path d="M6 4h4M4 6v4" stroke="currentColor" stroke-width="1.3"/></svg>
|
|
450
|
+
#238 — fix keyboard modal
|
|
451
|
+
</div>
|
|
452
|
+
</div>
|
|
453
|
+
<div>
|
|
454
|
+
<div class="text-xs font-medium mb-1.5" style="color: var(--gray-400);">Labels</div>
|
|
455
|
+
<div class="flex flex-wrap gap-1">
|
|
456
|
+
<span class="tag tag-gray">bug</span>
|
|
457
|
+
<span class="tag tag-gray">keyboard</span>
|
|
458
|
+
</div>
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
</section>
|
|
465
|
+
|
|
466
|
+
<!-- Logos -->
|
|
467
|
+
<section class="border-y py-10" style="border-color: var(--gray-200); background: var(--gray-50);">
|
|
468
|
+
<div class="max-w-5xl mx-auto px-6 text-center">
|
|
469
|
+
<p class="text-xs uppercase tracking-widest font-semibold mb-6" style="color: var(--gray-400);">Used by teams at</p>
|
|
470
|
+
<div class="flex flex-wrap items-center justify-center gap-8 md:gap-12">
|
|
471
|
+
<span class="text-sm font-semibold" style="color: var(--gray-300);">Vercel</span>
|
|
472
|
+
<span class="text-sm font-semibold" style="color: var(--gray-300);">Supabase</span>
|
|
473
|
+
<span class="text-sm font-semibold" style="color: var(--gray-300);">Railway</span>
|
|
474
|
+
<span class="text-sm font-semibold" style="color: var(--gray-300);">Liveblocks</span>
|
|
475
|
+
<span class="text-sm font-semibold" style="color: var(--gray-300);">Resend</span>
|
|
476
|
+
<span class="text-sm font-semibold" style="color: var(--gray-300);">Trigger.dev</span>
|
|
477
|
+
<span class="text-sm font-semibold" style="color: var(--gray-300);">Deno</span>
|
|
478
|
+
</div>
|
|
479
|
+
</div>
|
|
480
|
+
</section>
|
|
481
|
+
|
|
482
|
+
<!-- Three column feature strip -->
|
|
483
|
+
<section id="product" class="max-w-6xl mx-auto px-6 py-20">
|
|
484
|
+
<div class="text-center mb-14">
|
|
485
|
+
<div class="section-label mb-3">Features</div>
|
|
486
|
+
<h2 class="display text-5xl font-extrabold tracking-tight mb-4" style="color: var(--gray-900);">Designed around how<br/>engineering teams actually work.</h2>
|
|
487
|
+
<p class="text-lg max-w-lg mx-auto" style="color: var(--gray-500);">Every feature in Plume exists to save time or eliminate a meeting. Nothing else made the cut.</p>
|
|
488
|
+
</div>
|
|
489
|
+
|
|
490
|
+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
|
|
491
|
+
<div class="feature-card">
|
|
492
|
+
<div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background: var(--teal-pale);">
|
|
493
|
+
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" style="color: var(--teal);">
|
|
494
|
+
<path d="M3 6a3 3 0 013-3h8a3 3 0 013 3v8a3 3 0 01-3 3H6a3 3 0 01-3-3V6z" stroke="currentColor" stroke-width="1.5"/>
|
|
495
|
+
<path d="M7 10h6M7 7h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
496
|
+
</svg>
|
|
497
|
+
</div>
|
|
498
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">Keyboard-first navigation</h3>
|
|
499
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">Every action is reachable from the keyboard. Create, assign, prioritize, move to cycle — without leaving the home row.</p>
|
|
500
|
+
</div>
|
|
501
|
+
|
|
502
|
+
<div class="feature-card">
|
|
503
|
+
<div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background: var(--teal-pale);">
|
|
504
|
+
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" style="color: var(--teal);">
|
|
505
|
+
<circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="1.5"/>
|
|
506
|
+
<path d="M10 6v4l2.5 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
507
|
+
</svg>
|
|
508
|
+
</div>
|
|
509
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">Cycles without the ceremony</h3>
|
|
510
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">Time-boxed sprints that auto-carry incomplete work. Start a new cycle in one click. Analytics roll up automatically.</p>
|
|
511
|
+
</div>
|
|
512
|
+
|
|
513
|
+
<div class="feature-card">
|
|
514
|
+
<div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background: var(--teal-pale);">
|
|
515
|
+
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" style="color: var(--teal);">
|
|
516
|
+
<path d="M3 14l4-5 3 3 3-4 4 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
517
|
+
</svg>
|
|
518
|
+
</div>
|
|
519
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">Live roadmap for leads</h3>
|
|
520
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">Quarter and year views with real-time progress from issues. No manual status updates. No deck to maintain the night before planning.</p>
|
|
521
|
+
</div>
|
|
522
|
+
|
|
523
|
+
<div class="feature-card">
|
|
524
|
+
<div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background: var(--teal-pale);">
|
|
525
|
+
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" style="color: var(--teal);">
|
|
526
|
+
<circle cx="7" cy="7" r="3" stroke="currentColor" stroke-width="1.5"/>
|
|
527
|
+
<circle cx="14" cy="14" r="3" stroke="currentColor" stroke-width="1.5"/>
|
|
528
|
+
<path d="M10 7h2v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
529
|
+
</svg>
|
|
530
|
+
</div>
|
|
531
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">GitHub, GitLab, Bitbucket</h3>
|
|
532
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">Branch names auto-link. PRs surface in issue context. Status changes on open, review, merge, and CI pass or fail.</p>
|
|
533
|
+
</div>
|
|
534
|
+
|
|
535
|
+
<div class="feature-card">
|
|
536
|
+
<div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background: var(--teal-pale);">
|
|
537
|
+
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" style="color: var(--teal);">
|
|
538
|
+
<path d="M4 8h12M4 12h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
539
|
+
<rect x="2" y="4" width="16" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
|
|
540
|
+
</svg>
|
|
541
|
+
</div>
|
|
542
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">Projects with milestones</h3>
|
|
543
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">Group ongoing work into projects. Milestones track delivery dates. Issues belong to a project and a cycle at the same time.</p>
|
|
544
|
+
</div>
|
|
545
|
+
|
|
546
|
+
<div class="feature-card">
|
|
547
|
+
<div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background: var(--teal-pale);">
|
|
548
|
+
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" style="color: var(--teal);">
|
|
549
|
+
<path d="M10 2v16M2 10h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
550
|
+
</svg>
|
|
551
|
+
</div>
|
|
552
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">Command palette</h3>
|
|
553
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">Hit <span class="kbd">⌘K</span> from anywhere. Search issues, jump to projects, run bulk actions, navigate views. Two keystrokes to anything.</p>
|
|
554
|
+
</div>
|
|
555
|
+
</div>
|
|
556
|
+
</section>
|
|
557
|
+
|
|
558
|
+
<!-- Cycles deep dive -->
|
|
559
|
+
<section id="cycles" class="border-t py-20" style="border-color: var(--gray-200);">
|
|
560
|
+
<div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
|
|
561
|
+
<div>
|
|
562
|
+
<div class="section-label mb-3">Cycles</div>
|
|
563
|
+
<h2 class="display text-5xl font-extrabold tracking-tight mb-5" style="color: var(--gray-900);">Sprint planning without the planning meeting.</h2>
|
|
564
|
+
<p class="text-base leading-relaxed mb-6" style="color: var(--gray-500);">Cycles are time-boxed containers for issues. Start one with a click, drag in what matters, and Plume tracks progress automatically. When the cycle ends, incomplete work carries over — nothing falls through the cracks.</p>
|
|
565
|
+
<div class="space-y-3">
|
|
566
|
+
<div class="flex items-center gap-3 text-sm" style="color: var(--gray-600);">
|
|
567
|
+
<div class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0" style="background: var(--teal-pale); border: 1.5px solid var(--teal-border);">
|
|
568
|
+
<svg class="w-3 h-3" viewBox="0 0 12 12" fill="none" style="color: var(--teal);"><path d="M2 6l2.5 2.5L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
569
|
+
</div>
|
|
570
|
+
Automatic carryover of incomplete issues
|
|
571
|
+
</div>
|
|
572
|
+
<div class="flex items-center gap-3 text-sm" style="color: var(--gray-600);">
|
|
573
|
+
<div class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0" style="background: var(--teal-pale); border: 1.5px solid var(--teal-border);">
|
|
574
|
+
<svg class="w-3 h-3" viewBox="0 0 12 12" fill="none" style="color: var(--teal);"><path d="M2 6l2.5 2.5L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
575
|
+
</div>
|
|
576
|
+
Burndown charts and velocity tracking
|
|
577
|
+
</div>
|
|
578
|
+
<div class="flex items-center gap-3 text-sm" style="color: var(--gray-600);">
|
|
579
|
+
<div class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0" style="background: var(--teal-pale); border: 1.5px solid var(--teal-border);">
|
|
580
|
+
<svg class="w-3 h-3" viewBox="0 0 12 12" fill="none" style="color: var(--teal);"><path d="M2 6l2.5 2.5L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
581
|
+
</div>
|
|
582
|
+
Issues can span cycles and projects simultaneously
|
|
583
|
+
</div>
|
|
584
|
+
<div class="flex items-center gap-3 text-sm" style="color: var(--gray-600);">
|
|
585
|
+
<div class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0" style="background: var(--teal-pale); border: 1.5px solid var(--teal-border);">
|
|
586
|
+
<svg class="w-3 h-3" viewBox="0 0 12 12" fill="none" style="color: var(--teal);"><path d="M2 6l2.5 2.5L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
587
|
+
</div>
|
|
588
|
+
One-click cycle start — no sprint ceremony required
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
</div>
|
|
592
|
+
|
|
593
|
+
<!-- Cycle widget mockup -->
|
|
594
|
+
<div class="space-y-4">
|
|
595
|
+
<div class="rounded-2xl overflow-hidden" style="border: 1.5px solid var(--gray-200);">
|
|
596
|
+
<div class="px-5 py-4 border-b" style="border-color: var(--gray-200);">
|
|
597
|
+
<div class="flex items-center justify-between mb-1">
|
|
598
|
+
<div class="flex items-center gap-2">
|
|
599
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
600
|
+
<span class="text-sm font-semibold" style="color: var(--gray-900);">Sprint 12</span>
|
|
601
|
+
<span class="tag tag-green">Active</span>
|
|
602
|
+
</div>
|
|
603
|
+
<span class="text-xs" style="color: var(--gray-400);">Jun 16 – Jun 30</span>
|
|
604
|
+
</div>
|
|
605
|
+
<div class="flex items-center justify-between text-xs mb-2 mt-3" style="color: var(--gray-400);">
|
|
606
|
+
<span>9 of 14 completed</span>
|
|
607
|
+
<span>64%</span>
|
|
608
|
+
</div>
|
|
609
|
+
<div class="cycle-bar">
|
|
610
|
+
<div class="cycle-fill" style="width: 64%;"></div>
|
|
611
|
+
</div>
|
|
612
|
+
</div>
|
|
613
|
+
<div class="px-5 py-3 grid grid-cols-3 gap-3 text-center border-b" style="border-color: var(--gray-100);">
|
|
614
|
+
<div>
|
|
615
|
+
<div class="text-2xl font-bold display" style="color: var(--gray-900);">3</div>
|
|
616
|
+
<div class="text-xs" style="color: var(--gray-400);">In progress</div>
|
|
617
|
+
</div>
|
|
618
|
+
<div>
|
|
619
|
+
<div class="text-2xl font-bold display" style="color: var(--gray-900);">2</div>
|
|
620
|
+
<div class="text-xs" style="color: var(--gray-400);">Blocked</div>
|
|
621
|
+
</div>
|
|
622
|
+
<div>
|
|
623
|
+
<div class="text-2xl font-bold display" style="color: var(--teal);">9</div>
|
|
624
|
+
<div class="text-xs" style="color: var(--gray-400);">Done</div>
|
|
625
|
+
</div>
|
|
626
|
+
</div>
|
|
627
|
+
<div class="px-5 py-3 flex items-center justify-between text-sm" style="color: var(--gray-500);">
|
|
628
|
+
<span>4 days remaining</span>
|
|
629
|
+
<button class="text-xs text-blue-600 hover:text-blue-800 font-medium">View cycle →</button>
|
|
630
|
+
</div>
|
|
631
|
+
</div>
|
|
632
|
+
|
|
633
|
+
<!-- Upcoming cycle -->
|
|
634
|
+
<div class="rounded-2xl px-5 py-4" style="border: 1.5px solid var(--gray-200);">
|
|
635
|
+
<div class="flex items-center justify-between mb-2">
|
|
636
|
+
<div class="flex items-center gap-2">
|
|
637
|
+
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none" style="color: var(--gray-300);"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/></svg>
|
|
638
|
+
<span class="text-sm font-medium" style="color: var(--gray-600);">Sprint 13</span>
|
|
639
|
+
<span class="tag tag-gray">Upcoming</span>
|
|
640
|
+
</div>
|
|
641
|
+
<span class="text-xs" style="color: var(--gray-400);">Jul 1 – Jul 14</span>
|
|
642
|
+
</div>
|
|
643
|
+
<div class="text-xs" style="color: var(--gray-400);">0 issues added yet · <span class="teal-text cursor-pointer hover:underline">Add issues to cycle</span></div>
|
|
644
|
+
</div>
|
|
645
|
+
</div>
|
|
646
|
+
</div>
|
|
647
|
+
</section>
|
|
648
|
+
|
|
649
|
+
<!-- Testimonials – horizontal scrolling cards -->
|
|
650
|
+
<section class="py-20 border-t" style="border-color: var(--gray-200);">
|
|
651
|
+
<div class="max-w-6xl mx-auto px-6 mb-10">
|
|
652
|
+
<div class="section-label mb-3">What teams say</div>
|
|
653
|
+
<h2 class="display text-4xl font-extrabold tracking-tight" style="color: var(--gray-900);">Used by teams who ship.</h2>
|
|
654
|
+
</div>
|
|
655
|
+
<div class="grid md:grid-cols-3 gap-5 max-w-6xl mx-auto px-6">
|
|
656
|
+
<div class="rounded-2xl p-6" style="background: var(--gray-50); border: 1.5px solid var(--gray-200);">
|
|
657
|
+
<p class="text-base leading-relaxed mb-5" style="color: var(--gray-700);">"We dropped Jira the week we tried Plume. No migration ceremony, no change management — the team just switched and velocity went up."</p>
|
|
658
|
+
<div class="flex items-center gap-3">
|
|
659
|
+
<div class="avatar" style="background: linear-gradient(135deg, #0d9488, #0891b2); color: white; width: 36px; height: 36px; font-size: 13px;">A</div>
|
|
660
|
+
<div>
|
|
661
|
+
<div class="font-semibold text-sm" style="color: var(--gray-900);">Ana Sokolović</div>
|
|
662
|
+
<div class="text-xs" style="color: var(--gray-400);">Engineering Lead, Loom</div>
|
|
663
|
+
</div>
|
|
664
|
+
</div>
|
|
665
|
+
</div>
|
|
666
|
+
<div class="rounded-2xl p-6" style="background: var(--gray-50); border: 1.5px solid var(--gray-200);">
|
|
667
|
+
<p class="text-base leading-relaxed mb-5" style="color: var(--gray-700);">"Keyboard shortcuts are not an afterthought — they're the product. I go through 30 issues in triage in under 5 minutes."</p>
|
|
668
|
+
<div class="flex items-center gap-3">
|
|
669
|
+
<div class="avatar" style="background: linear-gradient(135deg, #7c3aed, #2563eb); color: white; width: 36px; height: 36px; font-size: 13px;">T</div>
|
|
670
|
+
<div>
|
|
671
|
+
<div class="font-semibold text-sm" style="color: var(--gray-900);">Thomas Müller</div>
|
|
672
|
+
<div class="text-xs" style="color: var(--gray-400);">Staff Engineer, Deno</div>
|
|
673
|
+
</div>
|
|
674
|
+
</div>
|
|
675
|
+
</div>
|
|
676
|
+
<div class="rounded-2xl p-6" style="background: var(--gray-50); border: 1.5px solid var(--gray-200);">
|
|
677
|
+
<p class="text-base leading-relaxed mb-5" style="color: var(--gray-700);">"Our sprint retros went from 90 minutes to 20 because everything is already written down in the cycle history. It's like the meetings do themselves."</p>
|
|
678
|
+
<div class="flex items-center gap-3">
|
|
679
|
+
<div class="avatar" style="background: linear-gradient(135deg, #dc2626, #d97706); color: white; width: 36px; height: 36px; font-size: 13px;">P</div>
|
|
680
|
+
<div>
|
|
681
|
+
<div class="font-semibold text-sm" style="color: var(--gray-900);">Priya Nair</div>
|
|
682
|
+
<div class="text-xs" style="color: var(--gray-400);">Head of Product, Basehub</div>
|
|
683
|
+
</div>
|
|
684
|
+
</div>
|
|
685
|
+
</div>
|
|
686
|
+
</div>
|
|
687
|
+
</section>
|
|
688
|
+
|
|
689
|
+
<!-- Pricing -->
|
|
690
|
+
<section id="pricing" class="border-t py-20" style="border-color: var(--gray-200);">
|
|
691
|
+
<div class="max-w-5xl mx-auto px-6">
|
|
692
|
+
<div class="text-center mb-14">
|
|
693
|
+
<div class="section-label mb-3">Pricing</div>
|
|
694
|
+
<h2 class="display text-5xl font-extrabold tracking-tight mb-4" style="color: var(--gray-900);">No per-feature tiers. No surprises.</h2>
|
|
695
|
+
<p class="text-lg" style="color: var(--gray-500);">Full access at every plan. Pay for what you use.</p>
|
|
696
|
+
</div>
|
|
697
|
+
|
|
698
|
+
<div class="grid md:grid-cols-3 gap-5">
|
|
699
|
+
<div class="rounded-2xl p-7" style="border: 1.5px solid var(--gray-200);">
|
|
700
|
+
<div class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--gray-500);">Starter</div>
|
|
701
|
+
<div class="mb-1">
|
|
702
|
+
<span class="display text-5xl font-extrabold" style="color: var(--gray-900);">$0</span>
|
|
703
|
+
</div>
|
|
704
|
+
<p class="text-sm mb-6" style="color: var(--gray-400);">Up to 10 team members</p>
|
|
705
|
+
<a href="#signup" class="btn-outline block text-center mb-6" style="font-size: 14px; padding: 11px;">Get started free</a>
|
|
706
|
+
<ul class="space-y-2.5 text-sm" style="color: var(--gray-500);">
|
|
707
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Unlimited issues</li>
|
|
708
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>3 active cycles</li>
|
|
709
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>GitHub integration</li>
|
|
710
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Roadmap view</li>
|
|
711
|
+
</ul>
|
|
712
|
+
</div>
|
|
713
|
+
|
|
714
|
+
<div class="rounded-2xl p-7 relative overflow-hidden" style="border: 2px solid var(--teal); background: var(--teal-pale);">
|
|
715
|
+
<div class="absolute top-0 right-0 bg-teal-600 text-white text-xs font-bold px-3 py-1 rounded-bl-xl">Popular</div>
|
|
716
|
+
<div class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--teal);">Pro</div>
|
|
717
|
+
<div class="mb-1">
|
|
718
|
+
<span class="display text-5xl font-extrabold" style="color: var(--gray-900);">$12</span>
|
|
719
|
+
<span class="text-lg" style="color: var(--gray-400);">/user/mo</span>
|
|
720
|
+
</div>
|
|
721
|
+
<p class="text-sm mb-6" style="color: var(--gray-400);">Billed annually</p>
|
|
722
|
+
<a href="#signup" class="btn-primary block text-center justify-center mb-6" style="font-size: 14px; padding: 11px;">Start 14-day trial</a>
|
|
723
|
+
<ul class="space-y-2.5 text-sm" style="color: var(--gray-600);">
|
|
724
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Everything in Starter</li>
|
|
725
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Unlimited cycles & projects</li>
|
|
726
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>GitLab & Bitbucket</li>
|
|
727
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Advanced analytics</li>
|
|
728
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Priority support</li>
|
|
729
|
+
</ul>
|
|
730
|
+
</div>
|
|
731
|
+
|
|
732
|
+
<div class="rounded-2xl p-7" style="border: 1.5px solid var(--gray-200);">
|
|
733
|
+
<div class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--gray-500);">Enterprise</div>
|
|
734
|
+
<div class="mb-1">
|
|
735
|
+
<span class="display text-5xl font-extrabold" style="color: var(--gray-900);">Custom</span>
|
|
736
|
+
</div>
|
|
737
|
+
<p class="text-sm mb-6" style="color: var(--gray-400);">100+ seat teams</p>
|
|
738
|
+
<a href="mailto:sales@plume.dev" class="btn-outline block text-center mb-6" style="font-size: 14px; padding: 11px;">Contact sales</a>
|
|
739
|
+
<ul class="space-y-2.5 text-sm" style="color: var(--gray-500);">
|
|
740
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Everything in Pro</li>
|
|
741
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>SSO / SAML 2.0</li>
|
|
742
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Audit logs</li>
|
|
743
|
+
<li class="flex items-center gap-2"><svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 16 16" fill="none" style="color: var(--teal);"><path d="M2.5 8l4 4 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Dedicated SLA</li>
|
|
744
|
+
</ul>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
</section>
|
|
749
|
+
|
|
750
|
+
<!-- FAQ -->
|
|
751
|
+
<section class="border-t py-20" style="border-color: var(--gray-200);">
|
|
752
|
+
<div class="max-w-3xl mx-auto px-6">
|
|
753
|
+
<div class="text-center mb-12">
|
|
754
|
+
<h2 class="display text-4xl font-extrabold tracking-tight" style="color: var(--gray-900);">Common questions</h2>
|
|
755
|
+
</div>
|
|
756
|
+
<div class="divide-y" style="border-color: var(--gray-200);">
|
|
757
|
+
<div class="py-5">
|
|
758
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">How is Plume different from Linear or Jira?</h3>
|
|
759
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">Plume is more opinionated than Linear and far leaner than Jira. We made deliberate choices about what to leave out. There are no points, no boards unless you want them, no 12-step issue creation flows. If you want to add a ticket in under 3 seconds, Plume was built for that.</p>
|
|
760
|
+
</div>
|
|
761
|
+
<div class="py-5">
|
|
762
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">Can I import from Jira or GitHub Issues?</h3>
|
|
763
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">Yes. We support one-click import from Jira, GitHub Issues, Linear, Asana, and CSV. Imports preserve titles, descriptions, assignees, labels, and statuses. Most teams are fully migrated in under 30 minutes.</p>
|
|
764
|
+
</div>
|
|
765
|
+
<div class="py-5">
|
|
766
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">Do product and design people use it too?</h3>
|
|
767
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">Yes — and this is intentional. Plume is built so engineering, product, and design share one source of truth. PMs manage the backlog and roadmap; designers track work in the same issues as engineering. No translation layer needed.</p>
|
|
768
|
+
</div>
|
|
769
|
+
<div class="py-5">
|
|
770
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">Is there an API?</h3>
|
|
771
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">Yes. Plume has a full REST API and webhooks. You can create issues, update statuses, query cycles, and build integrations. SDKs for TypeScript and Python are available. Docs live at api.plume.dev.</p>
|
|
772
|
+
</div>
|
|
773
|
+
<div class="py-5">
|
|
774
|
+
<h3 class="font-semibold text-base mb-2" style="color: var(--gray-900);">What happens if my team grows past 10?</h3>
|
|
775
|
+
<p class="text-sm leading-relaxed" style="color: var(--gray-500);">You get a 14-day heads-up and can upgrade to Pro at any time. There's no data loss, no migration, no interruption. You pick a billing date that works for your team.</p>
|
|
776
|
+
</div>
|
|
777
|
+
</div>
|
|
778
|
+
</div>
|
|
779
|
+
</section>
|
|
780
|
+
|
|
781
|
+
<!-- CTA banner -->
|
|
782
|
+
<section id="signup" class="border-t" style="border-color: var(--gray-200); background: var(--gray-900);">
|
|
783
|
+
<div class="max-w-4xl mx-auto px-6 py-24 text-center">
|
|
784
|
+
<h2 class="display text-6xl font-extrabold tracking-tight mb-4 text-white">Start shipping faster.</h2>
|
|
785
|
+
<p class="text-xl mb-10" style="color: rgba(255,255,255,0.5);">Free for teams under 10. Set up in 2 minutes. No credit card.</p>
|
|
786
|
+
<div class="flex flex-col sm:flex-row gap-3 max-w-sm mx-auto">
|
|
787
|
+
<input type="email" placeholder="you@company.com" class="flex-1 px-4 py-3 rounded-lg text-sm outline-none focus:ring-2 focus:ring-teal-400 transition-shadow" style="background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: white;" />
|
|
788
|
+
<button class="btn-primary whitespace-nowrap">Get started</button>
|
|
789
|
+
</div>
|
|
790
|
+
<p class="text-xs mt-4" style="color: rgba(255,255,255,0.25);">By signing up you agree to our Terms of Service and Privacy Policy.</p>
|
|
791
|
+
</div>
|
|
792
|
+
</section>
|
|
793
|
+
|
|
794
|
+
<!-- Footer -->
|
|
795
|
+
<footer class="border-t py-10" style="border-color: var(--gray-200);">
|
|
796
|
+
<div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
|
|
797
|
+
<div class="flex items-center gap-2.5">
|
|
798
|
+
<svg width="24" height="24" viewBox="0 0 28 28" fill="none">
|
|
799
|
+
<rect width="28" height="28" rx="8" fill="#0d9488"/>
|
|
800
|
+
<circle cx="14" cy="14" r="4" fill="white"/>
|
|
801
|
+
<path d="M14 6C9.58 6 6 9.58 6 14" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
|
802
|
+
</svg>
|
|
803
|
+
<span class="display font-bold text-base" style="color: var(--gray-900);">Plume</span>
|
|
804
|
+
</div>
|
|
805
|
+
<div class="flex flex-wrap gap-6 text-sm" style="color: var(--gray-400);">
|
|
806
|
+
<a href="#" class="hover:text-gray-600">Privacy</a>
|
|
807
|
+
<a href="#" class="hover:text-gray-600">Terms</a>
|
|
808
|
+
<a href="#" class="hover:text-gray-600">Changelog</a>
|
|
809
|
+
<a href="#" class="hover:text-gray-600">Docs</a>
|
|
810
|
+
<a href="#" class="hover:text-gray-600">Status</a>
|
|
811
|
+
<a href="mailto:hi@plume.dev" class="hover:text-gray-600">Contact</a>
|
|
812
|
+
</div>
|
|
813
|
+
<div class="text-xs" style="color: var(--gray-300);">© 2026 Plume, Inc.</div>
|
|
814
|
+
</div>
|
|
815
|
+
</footer>
|
|
816
|
+
</body>
|
|
817
|
+
</html>
|