mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
200 lines
13 KiB
Plaintext
200 lines
13 KiB
Plaintext
|
---
|
||
|
|
import SectionHeading from "./SectionHeading.astro";
|
||
|
|
---
|
||
|
|
|
||
|
|
<section class="px-6 py-20 md:py-28">
|
||
|
|
<SectionHeading
|
||
|
|
title="Built for regulated environments."
|
||
|
|
subtitle="Your files stay on your infrastructure. No third-party processing, no data transfer risk."
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div class="mx-auto max-w-6xl space-y-20 md:space-y-28">
|
||
|
|
|
||
|
|
<!-- Feature 1: Data Sovereignty — text left, visual right -->
|
||
|
|
<div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
|
||
|
|
<div class="md:order-1">
|
||
|
|
<h3 class="font-display text-2xl font-bold tracking-tight sm:text-3xl">
|
||
|
|
Compliant by architecture
|
||
|
|
</h3>
|
||
|
|
<p class="mt-4 text-base leading-relaxed text-muted">
|
||
|
|
No vendor DPAs. No data processing agreements. No third-party risk assessments.
|
||
|
|
Files are processed on your infrastructure and never transmitted to external services.
|
||
|
|
GDPR, HIPAA, and CCPA compliant from day one.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="md:order-2">
|
||
|
|
<div class="rounded-xl border border-border bg-surface p-6 md:p-8">
|
||
|
|
<!-- Outer infrastructure box -->
|
||
|
|
<div class="rounded-lg border-2 border-dashed border-primary/30 p-5">
|
||
|
|
<span class="mb-4 block text-xs font-semibold uppercase tracking-wider text-primary">Your Infrastructure</span>
|
||
|
|
<div class="grid grid-cols-2 gap-4">
|
||
|
|
<div class="flex flex-col items-center gap-2 rounded-lg bg-primary-subtle p-4">
|
||
|
|
<svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<rect x="2" y="3" width="20" height="18" rx="2" />
|
||
|
|
<path d="M8 12h8M8 16h5" />
|
||
|
|
<circle cx="18" cy="7" r="1" fill="currentColor" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-xs font-semibold text-primary">SnapOtter</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 rounded-lg bg-primary-subtle p-4">
|
||
|
|
<svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
|
||
|
|
<polyline points="13 2 13 9 20 9" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-xs font-semibold text-primary">Your Files</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Internal arrows -->
|
||
|
|
<div class="mt-4 flex items-center justify-center gap-2">
|
||
|
|
<svg class="h-4 w-20 text-primary/50" viewBox="0 0 80 16" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
|
|
<line x1="8" y1="8" x2="32" y2="8" />
|
||
|
|
<polygon points="30,4 38,8 30,12" fill="currentColor" stroke="none" />
|
||
|
|
<line x1="42" y1="8" x2="66" y2="8" />
|
||
|
|
<polygon points="48,12 40,8 48,4" fill="currentColor" stroke="none" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p class="mt-3 text-center text-xs text-muted">Data never leaves this boundary</p>
|
||
|
|
</div>
|
||
|
|
<!-- External cloud — blocked -->
|
||
|
|
<div class="mt-4 flex items-center justify-center gap-3 rounded-lg border border-danger/20 bg-danger/5 px-4 py-2.5">
|
||
|
|
<svg class="h-4 w-4 shrink-0 text-danger" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<circle cx="12" cy="12" r="10" /><line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-xs text-danger">No external cloud connections</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Feature 2: REST API — visual left, text right -->
|
||
|
|
<div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
|
||
|
|
<div class="md:order-2">
|
||
|
|
<h3 class="font-display text-2xl font-bold tracking-tight sm:text-3xl">
|
||
|
|
Integrate with your existing workflows
|
||
|
|
</h3>
|
||
|
|
<p class="mt-4 text-base leading-relaxed text-muted">
|
||
|
|
Full REST API with OpenAPI documentation for every tool. Chain tools into automated
|
||
|
|
pipelines. Batch process thousands of files. Trigger via webhooks and integrate
|
||
|
|
with your internal systems.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="md:order-1">
|
||
|
|
<pre class="code-block p-5"><span class="code-comment"># Resize an image via the API</span>
|
||
|
|
<span class="code-url">$</span> curl <span class="code-flag">-X POST</span> <span class="code-url">localhost:1349/api/v1/tools/resize</span> \
|
||
|
|
<span class="code-flag">-F</span> <span class="code-string">"file=@photo.jpg"</span> \
|
||
|
|
<span class="code-flag">-F</span> <span class="code-string">'settings={"width":800}'</span>
|
||
|
|
|
||
|
|
<span class="code-comment"># Response</span>
|
||
|
|
{
|
||
|
|
<span class="code-flag">"jobId"</span>: <span class="code-string">"abc123"</span>,
|
||
|
|
<span class="code-flag">"downloadUrl"</span>: <span class="code-string">"/api/v1/jobs/abc123/download"</span>
|
||
|
|
}</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Feature 3: AI Models — text left, visual right -->
|
||
|
|
<div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
|
||
|
|
<div class="md:order-1">
|
||
|
|
<h3 class="font-display text-2xl font-bold tracking-tight sm:text-3xl">
|
||
|
|
AI processing without external APIs
|
||
|
|
</h3>
|
||
|
|
<p class="mt-4 text-base leading-relaxed text-muted">
|
||
|
|
15 local AI models for OCR, transcription, background removal, upscaling, and more.
|
||
|
|
No external API keys, no per-request charges, no data sent to third-party AI providers.
|
||
|
|
Runs on your GPU or CPU within your own infrastructure.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="md:order-2">
|
||
|
|
<div class="flex flex-wrap gap-2.5">
|
||
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-purple-200 bg-purple-50 px-3.5 py-1.5 text-sm font-medium text-purple-700">
|
||
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5z"/><path d="M9 3v18M3 15h18"/></svg>
|
||
|
|
Background Removal
|
||
|
|
</span>
|
||
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-blue-200 bg-blue-50 px-3.5 py-1.5 text-sm font-medium text-blue-700">
|
||
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||
|
|
OCR
|
||
|
|
</span>
|
||
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-3.5 py-1.5 text-sm font-medium text-emerald-700">
|
||
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
|
||
|
|
Upscaling 4x
|
||
|
|
</span>
|
||
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-amber-200 bg-amber-50 px-3.5 py-1.5 text-sm font-medium text-amber-700">
|
||
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/></svg>
|
||
|
|
Transcription
|
||
|
|
</span>
|
||
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-rose-200 bg-rose-50 px-3.5 py-1.5 text-sm font-medium text-rose-700">
|
||
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg>
|
||
|
|
Face Detection
|
||
|
|
</span>
|
||
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-orange-200 bg-orange-50 px-3.5 py-1.5 text-sm font-medium text-orange-700">
|
||
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||
|
|
Photo Restoration
|
||
|
|
</span>
|
||
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-orange-200 bg-orange-50 px-3.5 py-1.5 text-sm font-medium text-orange-700">
|
||
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="13.5" cy="6.5" r="2.5"/><circle cx="17" cy="15.5" r="2.5"/><circle cx="8.5" cy="15.5" r="2.5"/></svg>
|
||
|
|
Colorization
|
||
|
|
</span>
|
||
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-3.5 py-1.5 text-sm font-medium text-slate-700">
|
||
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H2v15h7c1.7 0 3 1.3 3 3V7c0-2.2-1.8-4-4-4z"/><path d="M16 3h6v15h-7c-1.7 0-3 1.3-3 3V7c0-2.2 1.8-4 4-4z"/></svg>
|
||
|
|
Noise Removal
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Feature 4: Deployment — visual left, text right -->
|
||
|
|
<div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
|
||
|
|
<div class="md:order-2">
|
||
|
|
<h3 class="font-display text-2xl font-bold tracking-tight sm:text-3xl">
|
||
|
|
Fits your infrastructure
|
||
|
|
</h3>
|
||
|
|
<p class="mt-4 text-base leading-relaxed text-muted">
|
||
|
|
Single Docker container with everything bundled. Deploy on Kubernetes, bare metal,
|
||
|
|
or cloud VMs. ARM and x86 architectures. Works in air-gapped and classified
|
||
|
|
environments with zero internet dependency.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="md:order-1">
|
||
|
|
<div class="grid grid-cols-3 gap-3">
|
||
|
|
<!-- Docker -->
|
||
|
|
<div class="flex flex-col items-center gap-2 rounded-xl border border-border bg-surface p-4 transition-shadow hover:shadow-md">
|
||
|
|
<img src="/logos/docker.svg" alt="Docker" class="h-8 w-8" width="32" height="32" />
|
||
|
|
<span class="text-xs font-medium">Docker</span>
|
||
|
|
</div>
|
||
|
|
<!-- Kubernetes -->
|
||
|
|
<div class="flex flex-col items-center gap-2 rounded-xl border border-border bg-surface p-4 transition-shadow hover:shadow-md">
|
||
|
|
<img src="/logos/kubernetes.svg" alt="Kubernetes" class="h-8 w-8" width="32" height="32" />
|
||
|
|
<span class="text-xs font-medium">Kubernetes</span>
|
||
|
|
</div>
|
||
|
|
<!-- AWS -->
|
||
|
|
<div class="flex flex-col items-center gap-2 rounded-xl border border-border bg-surface p-4 transition-shadow hover:shadow-md">
|
||
|
|
<img src="/logos/aws.svg" alt="AWS" class="h-8 w-8" width="32" height="32" />
|
||
|
|
<span class="text-xs font-medium">AWS</span>
|
||
|
|
</div>
|
||
|
|
<!-- Linux -->
|
||
|
|
<div class="flex flex-col items-center gap-2 rounded-xl border border-border bg-surface p-4 transition-shadow hover:shadow-md">
|
||
|
|
<img src="/logos/linux.svg" alt="Linux" class="h-8 w-8" width="32" height="32" />
|
||
|
|
<span class="text-xs font-medium">Linux</span>
|
||
|
|
</div>
|
||
|
|
<!-- macOS -->
|
||
|
|
<div class="flex flex-col items-center gap-2 rounded-xl border border-border bg-surface p-4 transition-shadow hover:shadow-md">
|
||
|
|
<svg class="h-8 w-8 text-foreground" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
||
|
|
</svg>
|
||
|
|
<span class="text-xs font-medium">macOS</span>
|
||
|
|
</div>
|
||
|
|
<!-- Air-Gapped -->
|
||
|
|
<div class="flex flex-col items-center gap-2 rounded-xl border border-border bg-surface p-4 transition-shadow hover:shadow-md">
|
||
|
|
<svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
||
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-xs font-medium">Air-Gapped</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|