From d348721b96bcd1e2d69df106a38477a72671bc98 Mon Sep 17 00:00:00 2001
From: mike <sfr.michael@yahoo.com>
Date: Tue, 20 Jan 2026 02:29:55 -0800
Subject: [PATCH] Add bookmark banner component to landing page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a glassmorphic "Bookmark us!" banner at the top of the landing page
that displays the keyboard shortcut (⌘+D on Mac, Ctrl+D on Windows) to
encourage users to bookmark the site.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 components/features/home-content.tsx     |  4 ++-
 components/marketing/bookmark-banner.tsx | 46 ++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 components/marketing/bookmark-banner.tsx

diff --git a/components/features/home-content.tsx b/components/features/home-content.tsx
index e9dac36e..ad3941aa 100644
--- a/components/features/home-content.tsx
+++ b/components/features/home-content.tsx
@@ -10,6 +10,7 @@ import { GitHubStarsButton } from "@/components/ui/shadcn-io/github-stars-button
 import { Banner } from "@/components/marketing/banner";
 import { SiteFooter } from "@/components/layout/site-footer";
 import { BookmarkletLink } from "@/components/marketing/bookmarklet";
+import { BookmarkBanner } from "@/components/marketing/bookmark-banner";
 import { AdSpot } from "@/components/marketing/ad-spot";
 import { PaperAirplaneIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
@@ -89,11 +90,12 @@ export function HomeContent() {
 
       <main className="flex min-h-screen flex-col items-center bg-background p-4 pt-20 text-foreground sm:pt-24 md:p-24 pb-24 lg:pb-4">
         <div className="z-10 mx-auto flex w-full max-w-lg flex-col items-center justify-center sm:mt-16">
+          <BookmarkBanner />
           <GitHubStarsButton
             username="mrmps"
             repo="SMRY"
             formatted={true}
-            className="mb-10 mr-4"
+            className="mt-4 mb-10 mr-4"
           />
           <h1 className="text-center text-4xl font-semibold text-foreground md:text-5xl">
             <Image
diff --git a/components/marketing/bookmark-banner.tsx b/components/marketing/bookmark-banner.tsx
new file mode 100644
index 00000000..ff6dffe1
--- /dev/null
+++ b/components/marketing/bookmark-banner.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+const emptySubscribe = () => () => {};
+
+function useIsMac() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => navigator.platform.toLowerCase().includes("mac"),
+    () => true // Assume Mac on server for SSR
+  );
+}
+
+export function BookmarkBanner() {
+  const isMac = useIsMac();
+
+  return (
+    <div
+      className="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-xs text-foreground"
+      style={{
+        backdropFilter: "blur(40px)",
+        WebkitBackdropFilter: "blur(40px)",
+        backgroundImage:
+          "linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0px, rgba(0, 0, 0, 0) 100%), linear-gradient(100deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0) 25%)",
+        boxShadow:
+          "rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 0px 0px 2px",
+      }}
+    >
+      <span
+        style={{ textShadow: "rgba(0, 0, 0, 0.05) 0px 1px 0px" }}
+      >
+        Bookmark us!
+      </span>
+      <span className="inline-flex items-center gap-1">
+        <kbd className="inline-flex min-h-[26px] min-w-[26px] items-center justify-center rounded-md border border-border bg-background px-2 font-mono text-xs text-foreground shadow-sm [border-bottom-width:2px]">
+          {isMac ? "⌘" : "Ctrl"}
+        </kbd>
+        <span className="text-[11px] text-muted-foreground">+</span>
+        <kbd className="inline-flex min-h-[26px] min-w-[26px] items-center justify-center rounded-md border border-border bg-background px-2 font-mono text-xs text-foreground shadow-sm [border-bottom-width:2px]">
+          D
+        </kbd>
+      </span>
+    </div>
+  );
+}