mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
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:
@@ -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; }
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user