From d72788ffc1633fa5ff3da89ad3fa523afc6d594d Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Mon, 9 Feb 2026 01:50:41 +0000
Subject: feat: link to apps and extensions, docs and twitter in profile
 dropdown

---
 apps/landing/src/App.tsx                           |   2 +
 apps/landing/src/Apps.tsx                          | 112 +++++++++++++++++++++
 .../components/dashboard/header/ProfileOptions.tsx |  31 +++++-
 apps/web/lib/i18n/locales/en/translation.json      |   5 +-
 4 files changed, 148 insertions(+), 2 deletions(-)
 create mode 100644 apps/landing/src/Apps.tsx

diff --git a/apps/landing/src/App.tsx b/apps/landing/src/App.tsx
index 45a019c5..7448aa86 100644
--- a/apps/landing/src/App.tsx
+++ b/apps/landing/src/App.tsx
@@ -1,3 +1,4 @@
+import Apps from "@/src/Apps";
 import Homepage from "@/src/Homepage";
 import Pricing from "@/src/Pricing";
 import Privacy from "@/src/Privacy";
@@ -10,6 +11,7 @@ export default function App() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Homepage />} />
+        <Route path="/apps" element={<Apps />} />
         <Route path="/pricing" element={<Pricing />} />
         <Route path="/privacy" element={<Privacy />} />
       </Routes>
diff --git a/apps/landing/src/Apps.tsx b/apps/landing/src/Apps.tsx
new file mode 100644
index 00000000..7e6a7137
--- /dev/null
+++ b/apps/landing/src/Apps.tsx
@@ -0,0 +1,112 @@
+import NavBar from "./Navbar";
+import appStoreBadge from "/app-store-badge.png?url";
+import chromeExtensionBadge from "/chrome-extension-badge.png?url";
+import firefoxAddonBadge from "/firefox-addon.png?url";
+import playStoreBadge from "/google-play-badge.webp?url";
+
+interface Listing {
+  name: string;
+  description: string;
+  url: string;
+  badge: string;
+}
+
+const mobileApps: Listing[] = [
+  {
+    name: "iOS App",
+    description: "Save links and notes from your iPhone and iPad.",
+    url: "https://apps.apple.com/us/app/karakeep-app/id6479258022",
+    badge: appStoreBadge,
+  },
+  {
+    name: "Android App",
+    description: "Capture and organize content on Android devices.",
+    url: "https://play.google.com/store/apps/details?id=app.hoarder.hoardermobile&pcampaignid=web_share",
+    badge: playStoreBadge,
+  },
+];
+
+const browserExtensions: Listing[] = [
+  {
+    name: "Chrome Extension",
+    description: "One-click saving from Chrome.",
+    url: "https://chromewebstore.google.com/detail/karakeep/kgcjekpmcjjogibpjebkhaanilehneje",
+    badge: chromeExtensionBadge,
+  },
+  {
+    name: "Firefox Add-on",
+    description: "Save pages directly from Firefox.",
+    url: "https://addons.mozilla.org/en-US/firefox/addon/karakeep/",
+    badge: firefoxAddonBadge,
+  },
+];
+
+function ListingSection({
+  title,
+  description,
+  items,
+}: {
+  title: string;
+  description: string;
+  items: Listing[];
+}) {
+  return (
+    <section className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sm:p-8">
+      <h2 className="text-2xl font-semibold text-gray-900">{title}</h2>
+      <p className="mt-2 text-gray-600">{description}</p>
+      <div className="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2">
+        {items.map((item) => (
+          <a
+            key={item.name}
+            href={item.url}
+            target="_blank"
+            rel="noreferrer"
+            className="flex flex-col gap-4 rounded-xl border border-gray-200 p-4 transition-colors hover:border-gray-300"
+          >
+            <div>
+              <h3 className="font-semibold text-gray-900">{item.name}</h3>
+              <p className="mt-1 text-sm text-gray-600">{item.description}</p>
+            </div>
+            <div className="h-12 w-fit">
+              <img
+                className="h-full w-auto object-contain"
+                alt={item.name}
+                src={item.badge}
+              />
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default function Apps() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto pb-16">
+        <NavBar />
+        <main className="px-4 py-8 sm:px-6 sm:py-14">
+          <h1 className="text-4xl font-bold text-gray-900 sm:text-5xl">
+            Apps & Extensions
+          </h1>
+          <p className="mt-3 max-w-2xl text-base text-gray-600 sm:text-lg">
+            Use Karakeep anywhere with our mobile apps and browser extensions.
+          </p>
+          <div className="mt-10 space-y-6">
+            <ListingSection
+              title="Mobile Apps"
+              description="Take your bookmarks with you on iOS and Android."
+              items={mobileApps}
+            />
+            <ListingSection
+              title="Browser Extensions"
+              description="Save content from your browser in one click."
+              items={browserExtensions}
+            />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/dashboard/header/ProfileOptions.tsx b/apps/web/components/dashboard/header/ProfileOptions.tsx
index b09d276e..8a2b0165 100644
--- a/apps/web/components/dashboard/header/ProfileOptions.tsx
+++ b/apps/web/components/dashboard/header/ProfileOptions.tsx
@@ -15,7 +15,17 @@ import { Separator } from "@/components/ui/separator";
 import { UserAvatar } from "@/components/ui/user-avatar";
 import { useSession } from "@/lib/auth/client";
 import { useTranslation } from "@/lib/i18n/client";
-import { LogOut, Moon, Paintbrush, Settings, Shield, Sun } from "lucide-react";
+import {
+  BookOpen,
+  LogOut,
+  Moon,
+  Paintbrush,
+  Puzzle,
+  Settings,
+  Shield,
+  Sun,
+  Twitter,
+} from "lucide-react";
 import { useTheme } from "next-themes";
 
 import { useWhoAmI } from "@karakeep/shared-react/hooks/users";
@@ -112,6 +122,25 @@ export default function SidebarProfileOptions() {
           <DarkModeToggle />
         </DropdownMenuItem>
         <Separator className="my-2" />
+        <DropdownMenuItem asChild>
+          <a href="https://karakeep.app/apps" target="_blank" rel="noreferrer">
+            <Puzzle className="mr-2 size-4" />
+            {t("options.apps_extensions")}
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a href="https://docs.karakeep.app" target="_blank" rel="noreferrer">
+            <BookOpen className="mr-2 size-4" />
+            {t("options.documentation")}
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a href="https://x.com/karakeep_app" target="_blank" rel="noreferrer">
+            <Twitter className="mr-2 size-4" />
+            {t("options.follow_us_on_x")}
+          </a>
+        </DropdownMenuItem>
+        <Separator className="my-2" />
         <DropdownMenuItem onClick={() => router.push("/logout")}>
           <LogOut className="mr-2 size-4" />
           <span>{t("actions.sign_out")}</span>
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 40cf6ece..37212ede 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -659,7 +659,10 @@
   },
   "options": {
     "dark_mode": "Dark Mode",
-    "light_mode": "Light Mode"
+    "light_mode": "Light Mode",
+    "apps_extensions": "Apps & Extensions",
+    "documentation": "Documentation",
+    "follow_us_on_x": "Follow us on X"
   },
   "lists": {
     "all_lists": "All Lists",
-- 
cgit v1.2.3-70-g09d2