184 lines
10 KiB
TypeScript
184 lines
10 KiB
TypeScript
import Link from "next/link";
|
|
import { InstrumentPanel } from "@/components/InstrumentPanel";
|
|
|
|
export default function OverviewPage() {
|
|
return (
|
|
<>
|
|
<div className="heroband">
|
|
<section className="rail hero">
|
|
<span className="tag">Server management you can host yourself</span>
|
|
<h1>One place to manage every server you look after.</h1>
|
|
<p className="lede">
|
|
Vantage keeps track of who has access to which server, runs your scripts, checks your services are still up, stores your passwords and gives you a terminal in the browser. You
|
|
install one small program on each server, and you can run the whole thing on your own hardware.
|
|
</p>
|
|
<div className="hero__acts">
|
|
<Link className="btn btn--solid" href="/start">
|
|
Get started free
|
|
</Link>
|
|
<Link className="btn btn--line" href="/platform">
|
|
What it does
|
|
</Link>
|
|
</div>
|
|
<p className="hero__foot">Free for 3 servers · Linux and Windows · Hosted by us or by you</p>
|
|
</section>
|
|
</div>
|
|
|
|
<InstrumentPanel />
|
|
|
|
<section className="rail band band--open">
|
|
<span className="tag">The problem</span>
|
|
<h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "24ch" }}>Nothing knows about anything else.</h2>
|
|
<div className="split" style={{ marginTop: "2rem" }}>
|
|
<p className="prose">
|
|
Access ends up in a spreadsheet. Scripts end up in somebody's home directory. Uptime checks live in a separate service, passwords get pasted into a chat thread, and nobody
|
|
writes down who ran what. So when you need to know who can get into a particular box, or what was done to it last week, you go and work it out by hand.
|
|
</p>
|
|
<div className="specs specs--flush">
|
|
<div className="spec">
|
|
<span className="spec__k">ONE AGENT</span>
|
|
<div>
|
|
<h3>One thing to install</h3>
|
|
<p>Access, scripts, uptime checks and hardware stats all come down the same connection. You don't install a second thing to get the second feature.</p>
|
|
</div>
|
|
</div>
|
|
<div className="spec">
|
|
<span className="spec__k">ONE RECORD</span>
|
|
<div>
|
|
<h3>Everything is written down</h3>
|
|
<p>Who was given access and who took it away, who ran which script, who opened a session. It all goes in the same log with a name against it.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rail band">
|
|
<span className="tag">Capabilities</span>
|
|
<h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "22ch" }}>What it does.</h2>
|
|
<div className="caps">
|
|
<article className="cap">
|
|
<span className="cap__k">Access</span>
|
|
<h3>SSH keys</h3>
|
|
<p>
|
|
Choose which servers a key can reach, and take that access away again when someone leaves. Each server is kept matching what you set, without you logging in to change it.
|
|
</p>
|
|
<ul>
|
|
<li>spots the same key added twice</li>
|
|
<li>can create a key on the server itself</li>
|
|
<li>keeps a record of access you removed</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article className="cap">
|
|
<span className="cap__k">Scripts</span>
|
|
<h3>Workflows</h3>
|
|
<p>Keep your shell and PowerShell scripts in one library instead of scattered across machines, then run them in order across a group of servers.</p>
|
|
<ul>
|
|
<li>watch the output as it happens</li>
|
|
<li>stop, carry on or retry when a step fails</li>
|
|
<li>pass values from one step to the next</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article className="cap">
|
|
<span className="cap__k">Uptime</span>
|
|
<h3>Monitors</h3>
|
|
<p>
|
|
Check that a site, a port, a machine or a certificate is still answering. Checks can run from us, or from an agent inside your own network for things the internet
|
|
can't see.
|
|
</p>
|
|
<ul>
|
|
<li>a history of outages and uptime</li>
|
|
<li>warnings before a certificate expires</li>
|
|
<li>alerts by email, Slack, Discord or Telegram</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article className="cap">
|
|
<span className="cap__k">Passwords</span>
|
|
<h3>Vault</h3>
|
|
<p>Keep passwords, tokens and licence keys in one encrypted place. Your scripts are handed what they need as they run, and it never shows up in the logs afterwards.</p>
|
|
<ul>
|
|
<li>grouped by the thing they belong to</li>
|
|
<li>encrypted with a key only you hold</li>
|
|
<li>looking at one is recorded</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article className="cap">
|
|
<span className="cap__k">Access</span>
|
|
<h3>Browser console</h3>
|
|
<p>Open a terminal or a remote desktop from the browser. Nothing to install on the machine you're sitting at, and every session goes in the log.</p>
|
|
<ul>
|
|
<li>links that only work once</li>
|
|
<li>passwords used once, then discarded</li>
|
|
<li>works from a borrowed laptop</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article className="cap">
|
|
<span className="cap__k">Health</span>
|
|
<h3>Hardware and updates</h3>
|
|
<p>See processor, memory, disk and operating system for every server, along with the updates waiting to be installed and install them without logging in.</p>
|
|
<ul>
|
|
<li>refreshed every 30 seconds</li>
|
|
<li>updates applied from the same screen</li>
|
|
<li>agents keep themselves up to date</li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rail band">
|
|
<span className="tag">Getting started</span>
|
|
<h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "20ch" }}>Getting your first server in.</h2>
|
|
<div className="flow">
|
|
<div className="flow__c">
|
|
<span className="flow__n">FIRST</span>
|
|
<h3>Set up your account</h3>
|
|
<p>You're the owner. Nobody outside your account can see anything in it.</p>
|
|
</div>
|
|
<div className="flow__c">
|
|
<span className="flow__n">THEN</span>
|
|
<h3>Add a server</h3>
|
|
<p>Copy the install command we show you and paste it into the server. It works once, then expires.</p>
|
|
</div>
|
|
<div className="flow__c">
|
|
<span className="flow__n">THEN</span>
|
|
<h3>Give yourself access</h3>
|
|
<p>Paste your public key and tick the servers it should reach. It arrives within 30 seconds.</p>
|
|
</div>
|
|
<div className="flow__c">
|
|
<span className="flow__n">AFTER</span>
|
|
<h3>Add the rest as you need it</h3>
|
|
<p>Set up an uptime check, save a script, invite the people you work with.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<pre className="code" style={{ marginTop: "1.6rem" }}>
|
|
<i># Linux</i>
|
|
{"\n"}
|
|
<b>curl</b> -fsSL https://vantage.hostxtra.co.uk/install | bash -s -- --server-id=<b>$ID</b> --token=<b>$TOKEN</b>
|
|
{"\n\n"}
|
|
<i># Windows</i>
|
|
{"\n"}
|
|
<b>irm</b> https://vantage.hostxtra.co.uk/install.ps1 | <b>iex</b>
|
|
</pre>
|
|
</section>
|
|
|
|
<section className="rail band band--flush">
|
|
<div className="card card--cta">
|
|
<div style={{ maxWidth: "48ch" }}>
|
|
<h2 style={{ fontSize: "var(--s-1)" }}>Three servers, free, no card.</h2>
|
|
<p style={{ color: "var(--ink-2)", marginTop: "0.4rem", fontSize: "0.94rem" }}>Set up an account, add one server, and see it working before you decide anything.</p>
|
|
</div>
|
|
<Link className="btn btn--solid" href="/start">
|
|
Get started
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|