mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
feat: expand pricing with detailed features, remove Download from nav, remove RECOMMENDED tag
This commit is contained in:
ashim-hq
@@ -4,7 +4,6 @@ import { Github, Menu, Star, X } from "lucide-react";
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
const links = [
|
const links = [
|
||||||
{ label: "Download", href: "#how-it-works" },
|
|
||||||
{ label: "Features", href: "#features" },
|
{ label: "Features", href: "#features" },
|
||||||
{ label: "Pricing", href: "#pricing" },
|
{ label: "Pricing", href: "#pricing" },
|
||||||
{ label: "Docs", href: "https://docs.snapotter.com" },
|
{ label: "Docs", href: "https://docs.snapotter.com" },
|
||||||
|
|||||||
@@ -2,81 +2,120 @@ import { Check } from "lucide-react";
|
|||||||
|
|
||||||
import { FadeIn } from "./fade-in";
|
import { FadeIn } from "./fade-in";
|
||||||
|
|
||||||
const plans = [
|
const freePlan = {
|
||||||
{
|
name: "Open Source",
|
||||||
name: "Free",
|
price: "Free",
|
||||||
price: "Free",
|
subtitle: "For everyone. Forever.",
|
||||||
subtitle: "For everyone",
|
features: [
|
||||||
features: [
|
"All 40+ image processing tools",
|
||||||
"All 40+ tools included",
|
"Unlimited usage, no hidden caps",
|
||||||
"Unlimited usage",
|
"Full REST API with OpenAPI docs",
|
||||||
"Self-host anywhere",
|
"Pipeline automation",
|
||||||
"Community support",
|
"Batch processing (unlimited files)",
|
||||||
"Open source (AGPL-3.0)",
|
"14 local AI models included",
|
||||||
],
|
"Self-host on any infrastructure",
|
||||||
cta: "Get Started",
|
"Docker, Kubernetes, bare metal",
|
||||||
href: "#how-it-works",
|
"ARM and x86 support",
|
||||||
highlighted: false,
|
"Air-gapped and offline ready",
|
||||||
},
|
"Multi-user with team permissions",
|
||||||
{
|
"Audit logging",
|
||||||
name: "Enterprise",
|
"Community support via GitHub",
|
||||||
price: "Custom",
|
"All updates included",
|
||||||
subtitle: "For organizations",
|
"AGPL-3.0 licensed",
|
||||||
features: [
|
],
|
||||||
"Everything in Free",
|
cta: "Get Started Free",
|
||||||
"Commercial license (no AGPL)",
|
href: "https://github.com/ashim-hq/ashim",
|
||||||
"Priority support",
|
external: true,
|
||||||
"Deployment assistance",
|
};
|
||||||
"Custom integrations",
|
|
||||||
],
|
const enterprisePlan = {
|
||||||
cta: "Contact Us",
|
name: "Enterprise",
|
||||||
href: "/contact",
|
price: "Custom",
|
||||||
highlighted: true,
|
subtitle: "For organizations that need more.",
|
||||||
},
|
features: [
|
||||||
];
|
"Everything in Open Source",
|
||||||
|
"Commercial license (no AGPL obligations)",
|
||||||
|
"Proprietary use in closed-source products",
|
||||||
|
"Unlimited users and devices",
|
||||||
|
"Priority email and video support",
|
||||||
|
"Dedicated deployment assistance",
|
||||||
|
"Custom integrations and workflows",
|
||||||
|
"Early access to new features and updates",
|
||||||
|
"Flexible licensing terms for your needs",
|
||||||
|
"SLA and uptime guarantees",
|
||||||
|
"Security review and compliance documentation",
|
||||||
|
"OEM and white-label options",
|
||||||
|
],
|
||||||
|
cta: "Contact Sales",
|
||||||
|
href: "/contact",
|
||||||
|
external: false,
|
||||||
|
};
|
||||||
|
|
||||||
export function Pricing() {
|
export function Pricing() {
|
||||||
return (
|
return (
|
||||||
<section id="pricing" className="bg-background-alt px-6 py-24 md:py-36">
|
<section id="pricing" className="bg-background-alt px-6 py-24 md:py-36">
|
||||||
<div className="mx-auto max-w-4xl">
|
<div className="mx-auto max-w-5xl">
|
||||||
<FadeIn>
|
<FadeIn>
|
||||||
<h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
|
<p className="text-center text-sm font-medium text-accent">Pricing</p>
|
||||||
Simple pricing
|
<h2 className="mt-2 text-center text-3xl font-bold tracking-tight md:text-4xl">
|
||||||
|
Free for everyone. Enterprise when you need it.
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mx-auto mt-4 max-w-xl text-center text-lg text-muted">
|
<p className="mx-auto mt-4 max-w-2xl text-center text-lg text-muted">
|
||||||
Free for everyone. Enterprise support when you need it.
|
SnapOtter is fully functional and free. No trials, no feature gates, no time limits.
|
||||||
|
Enterprise licensing is available for organizations that need commercial terms.
|
||||||
</p>
|
</p>
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
|
|
||||||
<div className="mt-16 grid gap-6 md:grid-cols-2">
|
<div className="mt-16 grid gap-8 md:grid-cols-2">
|
||||||
{plans.map((plan, i) => (
|
<FadeIn>
|
||||||
<FadeIn key={plan.name} delay={i * 0.1}>
|
<div className="flex h-full flex-col rounded-2xl border border-border bg-background p-8">
|
||||||
<div className="flex h-full flex-col rounded-2xl border border-border bg-background p-8">
|
<p className="text-sm font-medium text-accent">{freePlan.subtitle}</p>
|
||||||
<p className="text-sm font-medium text-muted">{plan.subtitle}</p>
|
<h3 className="mt-1 text-2xl font-bold">{freePlan.name}</h3>
|
||||||
<p className="mt-2 text-3xl font-bold">{plan.price}</p>
|
<p className="mt-4 text-4xl font-bold">{freePlan.price}</p>
|
||||||
|
|
||||||
<ul className="mt-8 flex-1 space-y-3">
|
<ul className="mt-8 flex-1 space-y-3">
|
||||||
{plan.features.map((feature) => (
|
{freePlan.features.map((feature) => (
|
||||||
<li key={feature} className="flex items-center gap-2 text-sm">
|
<li key={feature} className="flex items-start gap-2.5 text-sm">
|
||||||
<Check size={16} className="shrink-0 text-accent" />
|
<Check size={16} className="mt-0.5 shrink-0 text-accent" />
|
||||||
<span>{feature}</span>
|
<span>{feature}</span>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href={plan.href}
|
href={freePlan.href}
|
||||||
className={`mt-8 block rounded-lg px-4 py-2.5 text-center text-sm font-medium transition-colors ${
|
target="_blank"
|
||||||
plan.highlighted
|
rel="noopener noreferrer"
|
||||||
? "bg-accent text-accent-foreground hover:bg-accent-hover"
|
className="mt-8 block rounded-xl border-2 border-accent px-4 py-3 text-center text-sm font-semibold text-accent transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||||
: "border border-border hover:bg-background-alt"
|
>
|
||||||
}`}
|
{freePlan.cta} →
|
||||||
>
|
</a>
|
||||||
{plan.cta}
|
</div>
|
||||||
</a>
|
</FadeIn>
|
||||||
</div>
|
|
||||||
</FadeIn>
|
<FadeIn delay={0.1}>
|
||||||
))}
|
<div className="flex h-full flex-col rounded-2xl border border-border bg-background p-8">
|
||||||
|
<p className="text-sm font-medium text-accent">{enterprisePlan.subtitle}</p>
|
||||||
|
<h3 className="mt-1 text-2xl font-bold">{enterprisePlan.name}</h3>
|
||||||
|
<p className="mt-4 text-4xl font-bold">{enterprisePlan.price}</p>
|
||||||
|
|
||||||
|
<ul className="mt-8 flex-1 space-y-3">
|
||||||
|
{enterprisePlan.features.map((feature) => (
|
||||||
|
<li key={feature} className="flex items-start gap-2.5 text-sm">
|
||||||
|
<Check size={16} className="mt-0.5 shrink-0 text-accent" />
|
||||||
|
<span>{feature}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={enterprisePlan.href}
|
||||||
|
className="mt-8 block rounded-xl bg-accent px-4 py-3 text-center text-sm font-semibold text-accent-foreground transition-colors hover:bg-accent-hover"
|
||||||
|
>
|
||||||
|
{enterprisePlan.cta} →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</FadeIn>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user