From a8988c074261e7d351b7241581969f6e6c320dbf Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Thu, 23 Apr 2026 17:28:41 +0800
Subject: [PATCH] feat: add API Callout, Open Source, and Footer sections

---
 apps/landing/src/components/api-callout.tsx | 66 +++++++++++++++
 apps/landing/src/components/footer.tsx      | 92 +++++++++++++++++++++
 apps/landing/src/components/open-source.tsx | 30 +++++++
 3 files changed, 188 insertions(+)
 create mode 100644 apps/landing/src/components/api-callout.tsx
 create mode 100644 apps/landing/src/components/footer.tsx
 create mode 100644 apps/landing/src/components/open-source.tsx

diff --git a/apps/landing/src/components/api-callout.tsx b/apps/landing/src/components/api-callout.tsx
new file mode 100644
index 00000000..f923a8dc
--- /dev/null
+++ b/apps/landing/src/components/api-callout.tsx
@@ -0,0 +1,66 @@
+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 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">
+            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/footer.tsx b/apps/landing/src/components/footer.tsx
new file mode 100644
index 00000000..d41f65f3
--- /dev/null
+++ b/apps/landing/src/components/footer.tsx
@@ -0,0 +1,92 @@
+import { Github } from "lucide-react";
+
+const columns = [
+  {
+    title: "Product",
+    links: [
+      { label: "Features", href: "#features" },
+      { label: "Demo", href: "https://demo.snapotter.com" },
+      { label: "Enterprise", href: "#enterprise" },
+    ],
+  },
+  {
+    title: "Resources",
+    links: [
+      { label: "Documentation", href: "https://docs.snapotter.com" },
+      { label: "API Reference", href: "https://docs.snapotter.com/api" },
+      {
+        label: "Docker Hub",
+        href: "https://hub.docker.com/r/snapotter/snapotter",
+      },
+    ],
+  },
+  {
+    title: "Community",
+    links: [
+      { label: "GitHub", href: "https://github.com/ashim-hq/ashim" },
+      {
+        label: "Contributing",
+        href: "https://github.com/ashim-hq/ashim/blob/main/CONTRIBUTING.md",
+      },
+      {
+        label: "Discussions",
+        href: "https://github.com/ashim-hq/ashim/discussions",
+      },
+    ],
+  },
+];
+
+export function Footer() {
+  return (
+    <footer className="border-t border-border bg-background-alt px-6 py-16">
+      <div className="mx-auto grid max-w-6xl gap-12 md:grid-cols-4">
+        <div>
+          <div className="flex items-center gap-2">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-accent-foreground text-sm font-bold">
+              S
+            </div>
+            <span className="text-lg font-bold">SnapOtter</span>
+          </div>
+          <p className="mt-3 text-sm text-muted">
+            Self-hosted image processing.
+            <br />
+            Your images, your infrastructure.
+          </p>
+        </div>
+
+        {columns.map((col) => (
+          <div key={col.title}>
+            <h4 className="text-sm font-semibold">{col.title}</h4>
+            <ul className="mt-4 space-y-3">
+              {col.links.map((link) => (
+                <li key={link.label}>
+                  <a
+                    href={link.href}
+                    className="text-sm text-muted transition-colors hover:text-foreground"
+                    {...(link.href.startsWith("http")
+                      ? { target: "_blank", rel: "noopener noreferrer" }
+                      : {})}
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+
+      <div className="mx-auto mt-12 flex max-w-6xl items-center justify-between border-t border-border pt-8">
+        <p className="text-sm text-muted">&copy; {new Date().getFullYear()} SnapOtter</p>
+        <a
+          href="https://github.com/ashim-hq/ashim"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-muted transition-colors hover:text-foreground"
+        >
+          <Github size={20} />
+        </a>
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/landing/src/components/open-source.tsx b/apps/landing/src/components/open-source.tsx
new file mode 100644
index 00000000..a1a1f8dc
--- /dev/null
+++ b/apps/landing/src/components/open-source.tsx
@@ -0,0 +1,30 @@
+import { Github, Star } from "lucide-react";
+import { FadeIn } from "./fade-in";
+
+export function OpenSource() {
+  return (
+    <section className="bg-background-alt px-6 py-24 md:py-36">
+      <div className="mx-auto max-w-3xl text-center">
+        <FadeIn>
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">Open source. Always.</h2>
+          <p className="mt-6 text-lg leading-relaxed text-muted">
+            SnapOtter is AGPL-3.0 licensed. Inspect every line of code. Contribute back. Self-host
+            forever. No vendor lock-in, no surprise pricing changes, no rug pulls.
+          </p>
+          <div className="mt-10">
+            <a
+              href="https://github.com/ashim-hq/ashim"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 rounded-xl border border-border bg-background px-6 py-3 text-base font-semibold transition-colors hover:bg-background-alt"
+            >
+              <Github size={20} />
+              Star on GitHub
+              <Star size={16} className="text-accent" />
+            </a>
+          </div>
+        </FadeIn>
+      </div>
+    </section>
+  );
+}