feat: add Enterprise and How It Works sections

2026-08-03 07:46:42 +02:00 · 2026-04-23 17:26:44 +08:00
parent 42fc8c5c80
commit f7348ee82d
2 changed files with 111 additions and 0 deletions
@@ -0,0 +1,56 @@
+import { Lock, Server, Users } from "lucide-react";
+
+import { FadeIn } from "./fade-in";
+
+const features = [
+  {
+    title: "Data Sovereignty",
+    description:
+      "Your images never leave your network. No external API calls, no cloud dependencies. Full GDPR, HIPAA, CCPA compliance by architecture.",
+    icon: Lock,
+  },
+  {
+    title: "Enterprise Controls",
+    description:
+      "Multi-user authentication, team permissions, API key management, and audit logging. Everything you need for regulated environments.",
+    icon: Users,
+  },
+  {
+    title: "Deploy Anywhere",
+    description:
+      "Docker, Kubernetes, bare metal. ARM and x86. Air-gapped networks. One container, any infrastructure.",
+    icon: Server,
+  },
+];
+
+export function Enterprise() {
+  return (
+    <section id="enterprise" className="bg-dark-bg px-6 py-24 text-dark-fg md:py-36">
+      <div className="mx-auto max-w-6xl">
+        <FadeIn>
+          <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
+            Built for organizations that take data seriously.
+          </h2>
+          <p className="mx-auto mt-4 max-w-xl text-center text-lg text-dark-muted">
+            Healthcare, legal, defense, finance — when images are sensitive, SnapOtter keeps them on
+            your infrastructure.
+          </p>
+        </FadeIn>
+
+        <div className="mt-16 grid gap-12 md:grid-cols-3 md:gap-16">
+          {features.map((feat, i) => (
+            <FadeIn key={feat.title} delay={i * 0.1}>
+              <div>
+                <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/5">
+                  <feat.icon size={22} className="text-accent" />
+                </div>
+                <h3 className="mt-4 text-xl font-bold">{feat.title}</h3>
+                <p className="mt-3 leading-relaxed text-dark-muted">{feat.description}</p>
+              </div>
+            </FadeIn>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,55 @@
+import { FadeIn } from "./fade-in";
+
+const steps = [
+  {
+    number: "1",
+    title: "Pull",
+    code: "docker pull snapotter/snapotter",
+    description: "One image. Everything included.",
+  },
+  {
+    number: "2",
+    title: "Deploy",
+    code: "docker run -p 8080:8080 snapotter/snapotter",
+    description: "One command. Any server.",
+  },
+  {
+    number: "3",
+    title: "Use",
+    code: null,
+    description: "Browser UI, REST API, or pipeline automation.",
+  },
+];
+
+export function HowItWorks() {
+  return (
+    <section className="bg-background-alt px-6 py-24 md:py-36">
+      <div className="mx-auto max-w-6xl">
+        <FadeIn>
+          <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
+            Up and running in 60 seconds.
+          </h2>
+        </FadeIn>
+
+        <div className="mt-16 grid gap-8 md:grid-cols-3 md:gap-12">
+          {steps.map((step, i) => (
+            <FadeIn key={step.number} delay={i * 0.1}>
+              <div className="text-center">
+                <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-accent text-accent-foreground text-sm font-bold">
+                  {step.number}
+                </div>
+                <h3 className="mt-4 text-xl font-bold">{step.title}</h3>
+                {step.code && (
+                  <div className="mt-3 rounded-lg bg-dark-bg px-4 py-2.5 font-mono text-sm text-dark-fg">
+                    {step.code}
+                  </div>
+                )}
+                <p className="mt-3 text-muted">{step.description}</p>
+              </div>
+            </FadeIn>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}