feat: link to apps and extensions, docs and twitter in profile dropdown

2 files changed, 114 insertions, 0 deletions

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>
+  );
+}