feat: expand pricing with detailed features, remove Download from nav, remove RECOMMENDED tag

apps/landing/src/components/navbar.tsx

@@ -4,7 +4,6 @@ import { Github, Menu, Star, X } from "lucide-react";
 import { useState } from "react";
 
 const links = [
-  { label: "Download", href: "#how-it-works" },
   { label: "Features", href: "#features" },
   { label: "Pricing", href: "#pricing" },
   { label: "Docs", href: "https://docs.snapotter.com" },

apps/landing/src/components/pricing.tsx

@@ -2,81 +2,120 @@ import { Check } from "lucide-react";
 
 import { FadeIn } from "./fade-in";
 
-const plans = [
-  {
-    name: "Free",
-    price: "Free",
-    subtitle: "For everyone",
-    features: [
-      "All 40+ tools included",
-      "Unlimited usage",
-      "Self-host anywhere",
-      "Community support",
-      "Open source (AGPL-3.0)",
-    ],
-    cta: "Get Started",
-    href: "#how-it-works",
-    highlighted: false,
-  },
-  {
-    name: "Enterprise",
-    price: "Custom",
-    subtitle: "For organizations",
-    features: [
-      "Everything in Free",
-      "Commercial license (no AGPL)",
-      "Priority support",
-      "Deployment assistance",
-      "Custom integrations",
-    ],
-    cta: "Contact Us",
-    href: "/contact",
-    highlighted: true,
-  },
-];
+const freePlan = {
+  name: "Open Source",
+  price: "Free",
+  subtitle: "For everyone. Forever.",
+  features: [
+    "All 40+ image processing tools",
+    "Unlimited usage, no hidden caps",
+    "Full REST API with OpenAPI docs",
+    "Pipeline automation",
+    "Batch processing (unlimited files)",
+    "14 local AI models included",
+    "Self-host on any infrastructure",
+    "Docker, Kubernetes, bare metal",
+    "ARM and x86 support",
+    "Air-gapped and offline ready",
+    "Multi-user with team permissions",
+    "Audit logging",
+    "Community support via GitHub",
+    "All updates included",
+    "AGPL-3.0 licensed",
+  ],
+  cta: "Get Started Free",
+  href: "https://github.com/ashim-hq/ashim",
+  external: true,
+};
+
+const enterprisePlan = {
+  name: "Enterprise",
+  price: "Custom",
+  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() {
   return (
     <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>
-          <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
-            Simple pricing
+          <p className="text-center text-sm font-medium text-accent">Pricing</p>
+          <h2 className="mt-2 text-center text-3xl font-bold tracking-tight md:text-4xl">
+            Free for everyone. Enterprise when you need it.
           </h2>
-          <p className="mx-auto mt-4 max-w-xl text-center text-lg text-muted">
-            Free for everyone. Enterprise support when you need it.
+          <p className="mx-auto mt-4 max-w-2xl text-center text-lg text-muted">
+            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>
         </FadeIn>
 
-        <div className="mt-16 grid gap-6 md:grid-cols-2">
-          {plans.map((plan, i) => (
-            <FadeIn key={plan.name} delay={i * 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-muted">{plan.subtitle}</p>
-                <p className="mt-2 text-3xl font-bold">{plan.price}</p>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          <FadeIn>
+            <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>
+              <h3 className="mt-1 text-2xl font-bold">{freePlan.name}</h3>
+              <p className="mt-4 text-4xl font-bold">{freePlan.price}</p>
 
-                <ul className="mt-8 flex-1 space-y-3">
-                  {plan.features.map((feature) => (
-                    <li key={feature} className="flex items-center gap-2 text-sm">
-                      <Check size={16} className="shrink-0 text-accent" />
-                      <span>{feature}</span>
-                    </li>
-                  ))}
-                </ul>
+              <ul className="mt-8 flex-1 space-y-3">
+                {freePlan.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={plan.href}
-                  className={`mt-8 block rounded-lg px-4 py-2.5 text-center text-sm font-medium transition-colors ${
-                    plan.highlighted
-                      ? "bg-accent text-accent-foreground hover:bg-accent-hover"
-                      : "border border-border hover:bg-background-alt"
-                  }`}
-                >
-                  {plan.cta}
-                </a>
-              </div>
-            </FadeIn>
-          ))}
+              <a
+                href={freePlan.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                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"
+              >
+                {freePlan.cta} &rarr;
+              </a>
+            </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} &rarr;
+              </a>
+            </div>
+          </FadeIn>
         </div>
       </div>
     </section>