feat: add press kit page with brand assets and guidelines

deno.lock

···
     "jsr:@fresh/build-id@1": "1.0.1",
     "jsr:@fresh/core@^2.2.0": "2.2.0",
     "jsr:@panva/jose@6.1.0": "6.1.0",
-    "jsr:@std/assert@1": "1.0.16",
+    "jsr:@std/assert@1": "1.0.19",
     "jsr:@std/bytes@^1.0.6": "1.0.6",
     "jsr:@std/dotenv@0.225": "0.225.6",
     "jsr:@std/encoding@1": "1.0.10",
···
         "jsr:@std/internal"
       ]
     },
+    "@std/assert@1.0.19": {
+      "integrity": "eaada96ee120cb980bc47e040f82814d786fe8162ecc53c91d8df60b8755991e",
+      "dependencies": [
+        "jsr:@std/internal"
+      ]
+    },
     "@std/bytes@1.0.6": {
       "integrity": "f6ac6adbd8ccd99314045f5703e23af0a68d7f7e58364b47d2c7f408aeb5820a"
     },
···
       ]
     },
     "@std/http@1.0.25": {
-      "integrity": "577b4252290af1097132812b339fffdd55fb0f4aeb98ff11bdbf67998aa17193"
+      "integrity": "577b4252290af1097132812b339fffdd55fb0f4aeb98ff11bdbf67998aa17193",
+      "dependencies": [
+        "jsr:@std/encoding@^1.0.10"
+      ]
     },
     "@std/internal@1.0.12": {
       "integrity": "972a634fd5bc34b242024402972cd5143eac68d8dffaca5eaa4dba30ce17b027"

frontend/components/About.tsx

···
               <span aria-hidden className="text-lg">🦋</span>
               made bij tijs.org
             </a>
+            <a
+              href="/press"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-white hover:opacity-95"
+              style={{ backgroundColor: "var(--teal)" }}
+            >
+              <svg
+                className="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+                />
+              </svg>
+              Press Kit
+            </a>
           </div>
         </section>
       </main>

frontend/components/App.tsx

···
 import { Settings } from "./Settings.tsx";
 import { ReadingList } from "./ReadingList.tsx";
 import { Support } from "./Support.tsx";
+import { Press } from "./Press.tsx";
 import { useApp } from "../context/AppContext.tsx";
 import { clearAll as clearCache } from "../cache/db.ts";
 
···
 
   if (currentPath === "/support") {
     return <Support />;
+  }
+
+  if (currentPath === "/press") {
+    return <Press />;
   }
 
   if (currentPath === "/create-account") {

frontend/components/Press.tsx

···
+const CDN = "https://cdn.kipclip.com";
+
+const assets = [
+  {
+    name: "Mascot (with background)",
+    filename: "kip-satchel.png",
+    description: "Full mascot illustration on blue background",
+  },
+  {
+    name: "Mascot (transparent)",
+    filename: "kip-satchel-transparent.png",
+    description: "Full mascot illustration on transparent background",
+  },
+  {
+    name: "Avatar",
+    filename: "kip-vignette.png",
+    description: "Circular mascot avatar for profile images and icons",
+  },
+  {
+    name: "Wordmark (SVG)",
+    filename: "kipclip.svg",
+    description: "kipclip wordmark logo in vector format",
+  },
+];
+
+function DownloadCard(
+  { name, filename, description }: {
+    name: string;
+    filename: string;
+    description: string;
+  },
+) {
+  const url = `${CDN}/images/${filename}`;
+  const isSvg = filename.endsWith(".svg");
+
+  return (
+    <div className="bg-white rounded-lg shadow-md overflow-hidden">
+      <div
+        className="flex items-center justify-center p-6"
+        style={{
+          backgroundColor: isSvg ? "var(--cream)" : undefined,
+          backgroundImage: !isSvg
+            ? "linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%), linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%)"
+            : undefined,
+          backgroundSize: !isSvg ? "16px 16px" : undefined,
+          backgroundPosition: !isSvg ? "0 0, 8px 8px" : undefined,
+        }}
+      >
+        <img
+          src={url}
+          alt={name}
+          className="max-h-40 object-contain"
+        />
+      </div>
+      <div className="p-4 border-t border-gray-100">
+        <h4 className="font-semibold text-gray-800">{name}</h4>
+        <p className="text-sm text-gray-500 mt-1">{description}</p>
+        <a
+          href={url}
+          download={filename}
+          className="inline-flex items-center gap-1 mt-3 text-sm font-medium hover:opacity-80"
+          style={{ color: "var(--coral)" }}
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V3"
+            />
+          </svg>
+          Download
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export function Press() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="bg-white shadow-sm">
+        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
+          <a href="/" className="flex items-center gap-2">
+            <img
+              src="https://res.cloudinary.com/dru3aznlk/image/upload/v1760692589/kip-vignette_h2jwct.png"
+              alt="Kip logo"
+              className="w-8 h-8"
+            />
+            <h1
+              className="text-2xl font-bold"
+              style={{ color: "var(--coral)" }}
+            >
+              kipclip
+            </h1>
+          </a>
+          <a
+            href="/"
+            className="text-gray-600 hover:text-gray-800 text-sm font-medium"
+          >
+            Back to Bookmarks
+          </a>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-12 space-y-8">
+        <section>
+          <h2 className="text-3xl font-bold text-gray-800 mb-3">
+            Press Kit
+          </h2>
+          <p className="text-gray-700 text-lg">
+            Resources for writing about kipclip. Feel free to use these assets
+            in articles, blog posts, and other media.
+          </p>
+        </section>
+
+        <section className="bg-white rounded-lg shadow-md p-6 space-y-3">
+          <h3 className="text-xl font-bold text-gray-800">About kipclip</h3>
+          <p className="text-gray-700">
+            kipclip is a free, open bookmark manager built on{" "}
+            <a
+              href="https://atproto.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-gray-800"
+            >
+              AT Protocol
+            </a>
+            . Users sign in with their Bluesky account and their bookmarks are
+            stored on their own personal data server — not on kipclip's
+            infrastructure. This means users own their data and can take it with
+            them.
+          </p>
+          <div className="bg-gray-50 rounded-md p-4 mt-2">
+            <p className="text-sm text-gray-500 mb-1 font-medium">
+              Short description (for bios, listings, etc.)
+            </p>
+            <p className="text-gray-700 italic">
+              "kipclip is a free, open bookmark manager for the AT Protocol
+              ecosystem. Save links, organize with tags, own your data."
+            </p>
+          </div>
+        </section>
+
+        <section className="bg-white rounded-lg shadow-md p-6 space-y-3">
+          <h3 className="text-xl font-bold text-gray-800">Key Facts</h3>
+          <ul className="list-disc pl-5 text-gray-700 space-y-2">
+            <li>
+              <strong>What:</strong>{" "}
+              Bookmark manager for the AT Protocol / Bluesky ecosystem
+            </li>
+            <li>
+              <strong>Built on:</strong>{" "}
+              AT Protocol (open standard for decentralized social)
+            </li>
+            <li>
+              <strong>Data ownership:</strong>{" "}
+              Bookmarks stored on user's Personal Data Server (PDS), not kipclip
+              servers
+            </li>
+            <li>
+              <strong>Price:</strong> Free
+            </li>
+            <li>
+              <strong>Source:</strong>{" "}
+              <a
+                href="https://github.com/tijs/kipclip-appview"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline hover:text-gray-800"
+              >
+                Open source on GitHub
+              </a>
+            </li>
+            <li>
+              <strong>Creator:</strong>{" "}
+              <a
+                href="https://bsky.app/profile/tijs.org"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline hover:text-gray-800"
+              >
+                tijs.org
+              </a>
+            </li>
+            <li>
+              <strong>Website:</strong>{" "}
+              <a
+                href="https://kipclip.com"
+                className="underline hover:text-gray-800"
+              >
+                kipclip.com
+              </a>
+            </li>
+          </ul>
+        </section>
+
+        <section className="space-y-4">
+          <h3 className="text-xl font-bold text-gray-800">Brand Assets</h3>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {assets.map((asset) => (
+              <DownloadCard key={asset.filename} {...asset} />
+            ))}
+          </div>
+        </section>
+
+        <section className="bg-white rounded-lg shadow-md p-6 space-y-3">
+          <h3 className="text-xl font-bold text-gray-800">Brand Colors</h3>
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            {[
+              { name: "Coral", var: "--coral", hex: "#e66456" },
+              { name: "Teal", var: "--teal", hex: "#5b8a8f" },
+              { name: "Orange", var: "--orange", hex: "#f4a261" },
+              { name: "Cream", var: "--cream", hex: "#f5f1e8" },
+            ].map((color) => (
+              <div key={color.var} className="text-center">
+                <div
+                  className="w-full h-16 rounded-lg mb-2 border border-gray-200"
+                  style={{ backgroundColor: color.hex }}
+                />
+                <p className="text-sm font-medium text-gray-800">
+                  {color.name}
+                </p>
+                <p className="text-xs text-gray-500">{color.hex}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="bg-white rounded-lg shadow-md p-6 space-y-3">
+          <h3 className="text-xl font-bold text-gray-800">Usage Guidelines</h3>
+          <ul className="list-disc pl-5 text-gray-700 space-y-2">
+            <li>
+              Use "kipclip" in lowercase — it's not capitalized, even at the
+              start of a sentence.
+            </li>
+            <li>Don't alter, rotate, or distort the logo or mascot.</li>
+            <li>
+              Keep adequate spacing around the logo when placing it alongside
+              other elements.
+            </li>
+            <li>
+              The mascot's name is Kip. Kip is a chicken with a satchel full of
+              bookmarks.
+            </li>
+          </ul>
+        </section>
+
+        <section className="bg-white rounded-lg shadow-md p-6 space-y-3">
+          <h3 className="text-xl font-bold text-gray-800">Contact</h3>
+          <p className="text-gray-700">
+            For press inquiries, reach out to{" "}
+            <a
+              href="https://bsky.app/profile/tijs.org"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-gray-800"
+            >
+              tijs.org on Bluesky
+            </a>
+            .
+          </p>
+        </section>
+      </main>
+    </div>
+  );
+}