From 5fcec90d7bad39e872b9cc22abe7330489947205 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Thu, 23 Apr 2026 21:23:24 +0800
Subject: [PATCH] feat: remove API and Three Ways sections, redesign How It
 Works as terminal mockup

---
 apps/landing/src/app/page.tsx                |  5 --
 apps/landing/src/components/api-callout.tsx  | 66 ---------------
 apps/landing/src/components/how-it-works.tsx | 84 ++++++++++----------
 apps/landing/src/components/navbar.tsx       |  1 -
 apps/landing/src/components/three-ways.tsx   | 55 -------------
 5 files changed, 42 insertions(+), 169 deletions(-)
 delete mode 100644 apps/landing/src/components/api-callout.tsx
 delete mode 100644 apps/landing/src/components/three-ways.tsx

diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
index 19acbd3b..34332c6c 100644
--- a/apps/landing/src/app/page.tsx
+++ b/apps/landing/src/app/page.tsx
@@ -1,4 +1,3 @@
-import { ApiCallout } from "@/components/api-callout";
 import { BentoGrid } from "@/components/bento-grid";
 import { Enterprise } from "@/components/enterprise";
 import { Footer } from "@/components/footer";
@@ -6,8 +5,6 @@ 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 { WhyChoose } from "@/components/why-choose";
 
 export default function Home() {
@@ -18,10 +15,8 @@ export default function Home() {
         <Hero />
         <WhyChoose />
         <BentoGrid />
-        <ThreeWays />
         <Enterprise />
         <HowItWorks />
-        <ApiCallout />
         <OpenSource />
       </main>
       <Footer />
diff --git a/apps/landing/src/components/api-callout.tsx b/apps/landing/src/components/api-callout.tsx
deleted file mode 100644
index f165f10b..00000000
--- a/apps/landing/src/components/api-callout.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { FadeIn } from "./fade-in";
-
-const request = `curl -X POST https://your-server/api/tools/resize \\
-  -H "X-API-Key: sk_live_..." \\
-  -F "image=@photo.jpg" \\
-  -F "width=800"`;
-
-const response = `{
-  "success": true,
-  "output": "resized_photo.jpg",
-  "metadata": {
-    "width": 800,
-    "height": 600,
-    "format": "jpeg",
-    "size": "124KB"
-  }
-}`;
-
-export function ApiCallout() {
-  return (
-    <section id="api" 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">
-            API-first by design.
-          </h2>
-          <p className="mx-auto mt-4 max-w-xl text-center text-lg text-muted">
-            Every tool accessible via HTTP. OpenAPI documentation included.
-          </p>
-        </FadeIn>
-
-        <FadeIn delay={0.1}>
-          <div className="mt-12 grid gap-4 md:grid-cols-2">
-            <div className="overflow-hidden rounded-xl border border-border">
-              <div className="border-b border-border bg-background-alt px-4 py-2 text-xs font-medium text-muted">
-                Request
-              </div>
-              <pre className="overflow-x-auto bg-dark-bg p-4 font-mono text-sm leading-relaxed text-dark-fg">
-                {request}
-              </pre>
-            </div>
-            <div className="overflow-hidden rounded-xl border border-border">
-              <div className="border-b border-border bg-background-alt px-4 py-2 text-xs font-medium text-muted">
-                Response
-              </div>
-              <pre className="overflow-x-auto bg-dark-bg p-4 font-mono text-sm leading-relaxed text-dark-fg">
-                {response}
-              </pre>
-            </div>
-          </div>
-        </FadeIn>
-
-        <FadeIn delay={0.2}>
-          <p className="mt-8 text-center">
-            <a
-              href="https://docs.snapotter.com"
-              className="text-accent font-medium hover:underline"
-            >
-              Explore the API Docs &rarr;
-            </a>
-          </p>
-        </FadeIn>
-      </div>
-    </section>
-  );
-}
diff --git a/apps/landing/src/components/how-it-works.tsx b/apps/landing/src/components/how-it-works.tsx
index 4b6f10c2..bbad092e 100644
--- a/apps/landing/src/components/how-it-works.tsx
+++ b/apps/landing/src/components/how-it-works.tsx
@@ -1,54 +1,54 @@
 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 id="how-it-works" className="px-6 py-24 md:py-36">
-      <div className="mx-auto max-w-6xl">
+    <section id="how-it-works" className="bg-background-alt px-6 py-24 md:py-36">
+      <div className="mx-auto max-w-3xl">
         <FadeIn>
           <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
-            Up and running in 60 seconds.
+            Get started in seconds.
           </h2>
+          <p className="mx-auto mt-4 max-w-xl text-center text-lg text-muted">
+            One command. Everything included.
+          </p>
         </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>
+        <FadeIn delay={0.1}>
+          <div className="mt-12 overflow-hidden rounded-2xl border border-border bg-[#1e1e1e] shadow-xl">
+            <div className="flex items-center gap-2 border-b border-white/10 px-4 py-3">
+              <div className="h-3 w-3 rounded-full bg-[#ff5f57]" />
+              <div className="h-3 w-3 rounded-full bg-[#febc2e]" />
+              <div className="h-3 w-3 rounded-full bg-[#28c840]" />
+              <span className="ml-2 text-xs text-white/40">Terminal</span>
+            </div>
+            <div className="p-6 font-mono text-sm leading-loose">
+              <p className="text-white/50"># Pull the image</p>
+              <p className="text-white">
+                <span className="text-green-400">$</span> docker pull snapotter/snapotter
+              </p>
+              <p className="mt-4 text-white/50"># Run it</p>
+              <p className="text-white">
+                <span className="text-green-400">$</span> docker run -p 8080:8080
+                snapotter/snapotter
+              </p>
+              <p className="mt-4 text-white/50"># That's it. Open your browser.</p>
+              <p className="text-amber-400">SnapOtter is running at http://localhost:8080</p>
+            </div>
+          </div>
+        </FadeIn>
+
+        <FadeIn delay={0.2}>
+          <p className="mt-8 text-center text-sm text-muted">
+            Works on Linux, macOS, and Windows. ARM and x86 supported.
+            <br />
+            <a
+              href="https://docs.snapotter.com"
+              className="mt-1 inline-block font-medium text-accent hover:underline"
+            >
+              Read the full installation guide
+            </a>
+          </p>
+        </FadeIn>
       </div>
     </section>
   );
diff --git a/apps/landing/src/components/navbar.tsx b/apps/landing/src/components/navbar.tsx
index 682c5e51..679e239f 100644
--- a/apps/landing/src/components/navbar.tsx
+++ b/apps/landing/src/components/navbar.tsx
@@ -6,7 +6,6 @@ import { useState } from "react";
 const links = [
   { label: "Features", href: "#features" },
   { label: "Download", href: "#how-it-works" },
-  { label: "API", href: "#api" },
   { label: "Pricing", href: "#enterprise" },
   { label: "Docs", href: "https://docs.snapotter.com" },
   { label: "About", href: "#open-source" },
diff --git a/apps/landing/src/components/three-ways.tsx b/apps/landing/src/components/three-ways.tsx
deleted file mode 100644
index 4fc5effb..00000000
--- a/apps/landing/src/components/three-ways.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-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 multiple tools in sequence. Batch process unlimited images at once. Automate your entire image workflow.",
-    icon: Workflow,
-  },
-];
-
-export function ThreeWays() {
-  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">
-            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>
-  );
-}