1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
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>
);
}
|
