diff options
| -rw-r--r-- | apps/landing/src/App.tsx | 2 | ||||
| -rw-r--r-- | apps/landing/src/Apps.tsx | 112 | ||||
| -rw-r--r-- | apps/web/components/dashboard/header/ProfileOptions.tsx | 31 | ||||
| -rw-r--r-- | apps/web/lib/i18n/locales/en/translation.json | 5 |
4 files changed, 148 insertions, 2 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> + ); +} 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", |