Files
SnapOtter/apps/landing/src/components/enterprise.tsx
T

57 lines
2.0 KiB
TypeScript

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>
);
}