import type { Metadata } from "next";

export const metadata: Metadata = {
    title: "About",
    description: "Vantage is built by HostXtra, a small UK company that manages servers for a living. Who we are, why we built it, and how we plan to keep it going.",
};

export default function AboutPage() {
    return (
        <>
            <section className="rail band band--open">
                <span className="tag">About</span>
                <h1 style={{ fontSize: "var(--s-3)", margin: "0.8rem 0 1.1rem", maxWidth: "20ch" }}>We built this because we needed it.</h1>

                <div className="split" style={{ marginTop: "2.4rem" }}>
                    <div className="prose">
                        <p>
                            Vantage is made by HostXtra, a small company in the UK. We manage servers for a living our own and other people&apos;s and we built Vantage because we were doing that job
                            badly with a spreadsheet and a folder of scripts.
                        </p>
                        <p>
                            It started after a laptop went missing. Working out which servers that laptop could still get into meant logging into every one of them and reading a file by hand. The list
                            of servers lived in somebody&apos;s head, and two of them weren&apos;t on it. That took an afternoon, and it should have taken a minute.
                        </p>
                        <p>
                            Everything that existed to fix this was built for companies far larger than ours. We wanted one screen that answered &quot;who can get into this machine&quot; and let us
                            change the answer. Once that worked, the rest followed: if there&apos;s already a way to talk to every server you own, you may as well use it to run your scripts, check
                            things are still up, and open a terminal when something breaks at midnight.
                        </p>
                        <p>We use Vantage every day to run our own servers. When something about it is annoying, it&apos;s annoying us too, which is the main reason it keeps getting better.</p>
                    </div>

                    <div>
                        <span className="tag">The company</span>
                        <div className="specs">
                            <div className="spec">
                                <span className="spec__k">WHO</span>
                                <div>
                                    <h3>HostXtra</h3>
                                    <p>A small independent team in the United Kingdom. No investors, nobody to answer to but the people paying us.</p>
                                </div>
                            </div>
                            <div className="spec">
                                <span className="spec__k">HOW WE EARN</span>
                                <div>
                                    <h3>Subscriptions, and that&apos;s all</h3>
                                    <p>We&apos;re paid by our customers. We don&apos;t sell data, we don&apos;t sell ads, and there&apos;s no free tier being mined for anything.</p>
                                </div>
                            </div>
                            <div className="spec">
                                <span className="spec__k">WHO YOU GET</span>
                                <div>
                                    <h3>The people who wrote it</h3>
                                    <p>Support goes to the same small group that builds the product. There is no first line, and nobody reading from a script.</p>
                                </div>
                            </div>
                            <div className="spec">
                                <span className="spec__k">IF WE STOP</span>
                                <div>
                                    <h3>You can host it yourself</h3>
                                    <p>Every tier can run on your own hardware, and your data is exportable whenever you want it. You are not stuck with us.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="rail band">
                <span className="tag">Who uses it</span>
                <h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "24ch" }}>People with more servers than time.</h2>
                <div className="caps">
                    <article className="cap">
                        <span className="cap__k">Home labs</span>
                        <h3>A rack in the spare room</h3>
                        <p>A handful of machines you built yourself, and no interest in running enterprise software to keep track of them.</p>
                    </article>
                    <article className="cap">
                        <span className="cap__k">Small teams</span>
                        <h3>Two or three people, one estate</h3>
                        <p>Everyone needs access to everything, and everyone needs to know what the others changed. Usually the point where the spreadsheet stops working.</p>
                    </article>
                    <article className="cap">
                        <span className="cap__k">Agencies</span>
                        <h3>Servers you inherited</h3>
                        <p>Machines set up by somebody who has since left, for a client who now wants a straight answer about who can get into them.</p>
                    </article>
                    <article className="cap">
                        <span className="cap__k">Hosting</span>
                        <h3>Small providers</h3>
                        <p>Lots of machines, thin margins, and a need to prove access is controlled without buying something priced per seat.</p>
                    </article>
                </div>
            </section>

            <section className="rail band">
                <span className="tag">How we work</span>
                <h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "24ch" }}>A few things we&apos;ve decided.</h2>
                <div className="specs" style={{ maxWidth: "70ch" }}>
                    <div className="spec">
                        <span className="spec__k">SMALL</span>
                        <div>
                            <h3>We say no to most things</h3>
                            <p>Every feature has to earn its place. A tool that manages access to your servers is one you have to be able to understand completely.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">HONEST</span>
                        <div>
                            <h3>The price is on the website</h3>
                            <p>All three tiers, including the largest, can be bought without speaking to anybody. There is no hidden pricing and no &quot;contact us&quot; tier.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">OPEN</span>
                        <div>
                            <h3>Bugs are in public</h3>
                            <p>Our issue tracker is open to read. If something is broken, you can see whether we already know about it.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">CAREFUL</span>
                        <div>
                            <h3>We take security reports seriously</h3>
                            <p>Report something and you&apos;ll hear back from a person within three days. We would much rather you told us than didn&apos;t.</p>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}
