docs: declutter the docs home hero and fix the enterprise door CTA (#483)

The repositioning in #469 pushed the full marketing pitch into the docs home hero: eyebrow badge, marketing h1, a bolded two-sentence value prop, and a second paragraph, all before the install command. The hero now states what the page is and gets out of the way: "SnapOtter Documentation" plus one line that keeps the self-hosted file-processing positioning, then the one-command install and quick links.

The Enterprise door CTA said "Evaluate for your org" but linked to /guide/architecture, already the first link in that same card. It now says "See enterprise features" and points at https://snapotter.com/enterprise, where the evaluation journey (features, pricing, demo booking) actually lives.

Also repairs the docs homepage e2e spec, which still asserted pre-2.0 copy and has been failing nightly since the hero changed, and adds coverage for both door CTAs.
This commit is contained in:
SnapOtter
2026-07-11 11:43:08 +08:00
committed by GitHub
parent b369b4fb41
commit 4426c733e7
2 changed files with 18 additions and 14 deletions
+5 -11
View File
@@ -42,15 +42,10 @@ function copyCommand() {
<template>
<div class="so-home">
<section class="hero">
<p class="eyebrow">Self-hosted · Open source · AGPLv3</p>
<h1 class="hero-title">Self-hosted file-processing infrastructure.</h1>
<h1 class="hero-title">SnapOtter Documentation</h1>
<p class="hero-sub">
<strong>Convert, compress, OCR, transcribe, strip metadata, and run local AI across image,
video, audio, PDF, and documents, through a UI, REST API, and pipelines, on infrastructure
you control.</strong>
<br />
200+ tools across five modalities, all on your own hardware. Choose your path below, or get
running in one command:
Install, operate, and build on your self-hosted file-processing infrastructure. Get running
in one command:
</p>
<div class="cmd" title="Click to copy" @click="copyCommand">
<code>$ {{ command }}</code>
@@ -89,7 +84,7 @@ function copyCommand() {
<ul class="door-links">
<li v-for="l in entLinks" :key="l.href"><a :href="l.href">{{ l.label }}</a></li>
</ul>
<a class="door-cta" href="/guide/architecture">Evaluate for your org </a>
<a class="door-cta" href="https://snapotter.com/enterprise">See enterprise features </a>
</div>
</section>
@@ -115,7 +110,6 @@ function copyCommand() {
<style scoped>
.so-home { max-width: 1080px; margin: 0 auto; padding: 16px 24px 64px; }
.hero { text-align: center; padding: 48px 16px 28px; }
.eyebrow { font: 600 11px/1 var(--vp-font-family-mono); letter-spacing: .16em; text-transform: uppercase; color: #A85518; margin-bottom: 14px; }
.hero-title { font-family: var(--so-font-heading); font-size: 42px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px; }
.hero-sub { color: var(--vp-c-text-2); font-size: 17px; max-width: 60ch; margin: 0 auto 20px; }
.cmd { display: flex; gap: 14px; align-items: center; max-width: 860px; margin: 0 auto; background: #15100B; border: 1px solid #3A2A1E; border-radius: 10px; padding: 13px 16px; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
@@ -168,7 +162,7 @@ function copyCommand() {
:root.dark .door.self { background: linear-gradient(180deg, #2A1F16, #221A13); border-color: #3A2C20; color: #F0EBE4; }
:root.dark .door.self .door-links li { border-color: #3A2C20; }
:root.dark .chip-count { color: #F0A766; }
:root.dark .hero-meta a, :root.dark .eyebrow { color: #F0A766; }
:root.dark .hero-meta a { color: #F0A766; }
:root.dark .door.self .door-sub { color: #C9BCAE; }
:root.dark .door.self .door-links a:hover { color: #F09550; }
:root.dark .door.self .door-cta { background: #A85518; }
+13 -3
View File
@@ -9,11 +9,10 @@ test.describe("docs homepage (Two Doors)", () => {
await expect(page).toHaveTitle(/SnapOtter/);
});
test("hero renders eyebrow, name, and value prop", async ({ page }) => {
test("hero renders name and value prop", async ({ page }) => {
await expect(page.getByRole("heading", { name: "SnapOtter Documentation" })).toBeVisible();
await expect(page.getByText("Self-hosted", { exact: false }).first()).toBeVisible();
await expect(
page.getByText("running entirely on your hardware", { exact: false }),
page.getByText("self-hosted file-processing infrastructure", { exact: false }),
).toBeVisible();
});
@@ -28,6 +27,17 @@ test.describe("docs homepage (Two Doors)", () => {
await expect(page.getByRole("link", { name: "SCIM provisioning" })).toBeVisible();
});
test("door CTAs lead to getting started and the enterprise page", async ({ page }) => {
await expect(page.getByRole("link", { name: "Start self-hosting" })).toHaveAttribute(
"href",
"/guide/getting-started",
);
await expect(page.getByRole("link", { name: "See enterprise features" })).toHaveAttribute(
"href",
"https://snapotter.com/enterprise",
);
});
test("renders the modality strip with counts", async ({ page }) => {
await expect(page.getByText("200+ tools across 5 modalities")).toBeVisible();
await expect(page.getByRole("link", { name: /Image/ })).toBeVisible();