From 6f728fe629ad500e93ad49a36366831cfbf7ff27 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Thu, 23 Apr 2026 18:22:22 +0800
Subject: [PATCH] feat: add Three Ways to Use and Industry Use Cases sections

---
 apps/landing/src/app/page.tsx              |  4 ++
 apps/landing/src/components/three-ways.tsx | 55 +++++++++++++++++
 apps/landing/src/components/use-cases.tsx  | 71 ++++++++++++++++++++++
 3 files changed, 130 insertions(+)
 create mode 100644 apps/landing/src/components/three-ways.tsx
 create mode 100644 apps/landing/src/components/use-cases.tsx

diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
index ee61450f..4e27d1fb 100644
--- a/apps/landing/src/app/page.tsx
+++ b/apps/landing/src/app/page.tsx
@@ -6,6 +6,8 @@ import { Hero } from "@/components/hero";
 import { HowItWorks } from "@/components/how-it-works";
 import { Navbar } from "@/components/navbar";
 import { OpenSource } from "@/components/open-source";
+import { ThreeWays } from "@/components/three-ways";
+import { UseCases } from "@/components/use-cases";
 
 export default function Home() {
   return (
@@ -14,7 +16,9 @@ export default function Home() {
       <main>
         <Hero />
         <BentoGrid />
+        <ThreeWays />
         <Enterprise />
+        <UseCases />
         <HowItWorks />
         <ApiCallout />
         <OpenSource />
diff --git a/apps/landing/src/components/three-ways.tsx b/apps/landing/src/components/three-ways.tsx
new file mode 100644
index 00000000..e8ec455c
--- /dev/null
+++ b/apps/landing/src/components/three-ways.tsx
@@ -0,0 +1,55 @@
+import { Code, Monitor, Workflow } from "lucide-react";
+
+import { FadeIn } from "./fade-in";
+
+const ways = [
+  {
+    title: "Browser UI",
+    description:
+      "Upload, edit, and download. No installation needed for your team. Just open the browser and start processing.",
+    icon: Monitor,
+  },
+  {
+    title: "REST API",
+    description:
+      "Integrate image processing into your apps and workflows. Every tool available via HTTP with OpenAPI docs.",
+    icon: Code,
+  },
+  {
+    title: "Pipelines",
+    description:
+      "Chain up to 20 tools in sequence. Batch process up to 200 images at once. Automate your image workflows.",
+    icon: Workflow,
+  },
+];
+
+export function ThreeWays() {
+  return (
+    <section className="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">
+            Three ways to use SnapOtter
+          </h2>
+          <p className="mx-auto mt-4 max-w-xl text-center text-lg text-muted">
+            One platform. Browser, API, or automation.
+          </p>
+        </FadeIn>
+
+        <div className="mt-16 grid gap-8 md:grid-cols-3 md:gap-12">
+          {ways.map((way, i) => (
+            <FadeIn key={way.title} delay={i * 0.1}>
+              <div className="flex flex-col items-center text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-accent/10">
+                  <way.icon size={32} className="text-accent" />
+                </div>
+                <h3 className="mt-5 text-xl font-bold">{way.title}</h3>
+                <p className="mt-3 leading-relaxed text-muted">{way.description}</p>
+              </div>
+            </FadeIn>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/landing/src/components/use-cases.tsx b/apps/landing/src/components/use-cases.tsx
new file mode 100644
index 00000000..fff61940
--- /dev/null
+++ b/apps/landing/src/components/use-cases.tsx
@@ -0,0 +1,71 @@
+import { Building2, Factory, GraduationCap, Heart, Scale, Shield } from "lucide-react";
+
+import { FadeIn } from "./fade-in";
+
+const industries = [
+  {
+    title: "Healthcare",
+    description:
+      "Process patient photos, medical scans, and clinical images without sending data to third-party servers. HIPAA compliant by architecture.",
+    icon: Heart,
+  },
+  {
+    title: "Legal",
+    description:
+      "Handle sensitive document scans, evidence photos, and case files entirely on-premise. Full audit trail included.",
+    icon: Scale,
+  },
+  {
+    title: "Financial Services",
+    description:
+      "Process check images, ID verification photos, and financial documents behind your firewall.",
+    icon: Building2,
+  },
+  {
+    title: "Government & Defense",
+    description:
+      "Air-gapped deployment for classified environments. No internet connection required.",
+    icon: Shield,
+  },
+  {
+    title: "Education",
+    description:
+      "Process student records, research images, and campus photos with zero cloud dependency.",
+    icon: GraduationCap,
+  },
+  {
+    title: "Manufacturing",
+    description:
+      "Quality control imaging, product photography, and documentation processing on your factory network.",
+    icon: Factory,
+  },
+];
+
+export function UseCases() {
+  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">
+            Trusted across industries
+          </h2>
+          <p className="mx-auto mt-4 max-w-xl text-center text-lg text-muted">
+            Organizations choose SnapOtter when data privacy is non-negotiable.
+          </p>
+        </FadeIn>
+
+        <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {industries.map((industry, i) => (
+            <FadeIn key={industry.title} delay={i * 0.08}>
+              <div className="rounded-xl border border-border bg-background p-6">
+                <industry.icon size={24} className="text-accent" />
+                <h3 className="mt-4 text-lg font-bold">{industry.title}</h3>
+                <p className="mt-2 text-sm leading-relaxed text-muted">{industry.description}</p>
+              </div>
+            </FadeIn>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}