(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
new landing
+569
-453
+557
-449
web/src/views/About.tsx
+557
-449
web/src/views/About.tsx
···
26
26
Sun,
27
27
Moon,
28
28
Monitor,
29
+
Check,
30
+
Lock,
29
31
} from "lucide-react";
30
32
import { AppleIcon, TangledIcon } from "../components/common/Icons";
31
33
import { FaFirefox, FaEdge } from "react-icons/fa";
32
34
33
-
function FeatureCard({
34
-
icon: Icon,
35
-
title,
36
-
description,
37
-
accent = false,
38
-
}: {
39
-
icon: React.ElementType;
40
-
title: string;
41
-
description: string;
42
-
accent?: boolean;
43
-
}) {
44
-
return (
45
-
<div
46
-
className={`group p-6 rounded-2xl border transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm ${
47
-
accent
48
-
? "bg-primary-50 dark:bg-primary-950/30 border-primary-200/50 dark:border-primary-800/40"
49
-
: "bg-white dark:bg-surface-800 border-surface-200/60 dark:border-surface-700/60"
50
-
}`}
51
-
>
52
-
<div
53
-
className={`w-11 h-11 rounded-xl flex items-center justify-center mb-4 transition-colors ${
54
-
accent
55
-
? "bg-primary-600 text-white"
56
-
: "bg-surface-100 dark:bg-surface-700/50 text-surface-500 dark:text-surface-400 group-hover:bg-primary-600 group-hover:text-white dark:group-hover:bg-primary-500"
57
-
}`}
58
-
>
59
-
<Icon size={20} />
60
-
</div>
61
-
<h3 className="font-display font-semibold text-base mb-2 text-surface-900 dark:text-white">
62
-
{title}
63
-
</h3>
64
-
<p className="text-sm text-surface-500 dark:text-surface-400 leading-relaxed">
65
-
{description}
66
-
</p>
67
-
</div>
68
-
);
69
-
}
70
-
71
-
function ExtensionFeature({
72
-
icon: Icon,
73
-
title,
74
-
description,
75
-
}: {
76
-
icon: React.ElementType;
77
-
title: string;
78
-
description: string;
79
-
}) {
80
-
return (
81
-
<div className="flex gap-4 items-start">
82
-
<div className="w-9 h-9 rounded-lg bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center flex-shrink-0 text-primary-600 dark:text-primary-400">
83
-
<Icon size={18} />
84
-
</div>
85
-
<div>
86
-
<h4 className="font-semibold text-sm text-surface-900 dark:text-white mb-1">
87
-
{title}
88
-
</h4>
89
-
<p className="text-sm text-surface-500 dark:text-surface-400 leading-relaxed">
90
-
{description}
91
-
</p>
92
-
</div>
93
-
</div>
94
-
);
95
-
}
96
-
97
35
export default function About() {
98
36
const { t } = useTranslation();
99
-
const theme = useStore($theme); // ensure theme is applied on this page
37
+
const theme = useStore($theme);
100
38
const user = useStore($user);
101
39
102
40
const [browser] = React.useState<
···
141
79
return () => window.removeEventListener("scroll", handleScroll);
142
80
}, []);
143
81
82
+
const features = [
83
+
{
84
+
icon: MessageSquareText,
85
+
title: t("about.features.annotations.title"),
86
+
description: t("about.features.annotations.description"),
87
+
},
88
+
{
89
+
icon: Highlighter,
90
+
title: t("about.features.highlights.title"),
91
+
description: t("about.features.highlights.description"),
92
+
},
93
+
{
94
+
icon: Bookmark,
95
+
title: t("about.features.bookmarks.title"),
96
+
description: t("about.features.bookmarks.description"),
97
+
},
98
+
{
99
+
icon: FolderOpen,
100
+
title: t("about.features.collections.title"),
101
+
description: t("about.features.collections.description"),
102
+
},
103
+
{
104
+
icon: Users,
105
+
title: t("about.features.socialDiscovery.title"),
106
+
description: t("about.features.socialDiscovery.description"),
107
+
},
108
+
{
109
+
icon: Hash,
110
+
title: t("about.features.tagsSearch.title"),
111
+
description: t("about.features.tagsSearch.description"),
112
+
},
113
+
];
114
+
144
115
return (
145
116
<div className="min-h-screen bg-surface-100 dark:bg-surface-900">
146
-
<nav className="sticky top-0 z-50 pt-3 pb-1 px-4 sm:px-6 mx-auto max-w-5xl">
147
-
<div
148
-
className={`relative flex items-center justify-between rounded-2xl px-4 sm:px-5 transition-all duration-300 ease-out ${
149
-
isScrolled ? "h-12" : "h-14"
150
-
}`}
151
-
>
152
-
<div
153
-
className={`absolute inset-0 rounded-2xl bg-white/75 dark:bg-surface-900/75 backdrop-blur-lg border border-surface-200/40 dark:border-surface-700/40 shadow-sm transition-opacity duration-300 ease-out ${
154
-
isScrolled ? "opacity-100" : "opacity-0"
155
-
}`}
156
-
/>
157
-
<div className="relative flex items-center gap-6">
158
-
<a
159
-
href="/"
160
-
className="flex items-center gap-2.5 hover:opacity-80 transition-opacity"
161
-
>
162
-
<img src="/logo.svg" alt="Margin" className="w-7 h-7" />
117
+
<nav
118
+
className={`sticky top-0 z-50 transition-[background-color,border-color,backdrop-filter] duration-200 ease-out ${
119
+
isScrolled
120
+
? "bg-white/75 dark:bg-surface-900/75 backdrop-blur-xl border-b border-surface-200/60 dark:border-surface-800/60"
121
+
: "bg-transparent border-b border-transparent"
122
+
}`}
123
+
>
124
+
<div className="max-w-6xl mx-auto px-5 sm:px-8 h-16 flex items-center justify-between gap-4">
125
+
<div className="flex items-center gap-7">
126
+
<a href="/" className="group flex items-center gap-2.5">
127
+
<img
128
+
src="/logo.svg"
129
+
alt="Margin"
130
+
className="w-7 h-7 transition-transform group-hover:rotate-[-4deg]"
131
+
/>
163
132
<span className="font-display font-bold text-lg tracking-tight text-surface-900 dark:text-white">
164
133
Margin
165
134
</span>
166
135
</a>
167
-
<div className="hidden md:flex items-center gap-0.5">
168
-
<a
169
-
href="/home"
170
-
className="text-[13px] font-medium text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white transition-colors px-3 py-1.5 rounded-lg hover:bg-surface-100 dark:hover:bg-surface-800"
171
-
>
172
-
{t("nav.feed")}
173
-
</a>
174
-
<a
175
-
href="/discover"
176
-
className="text-[13px] font-medium text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white transition-colors px-3 py-1.5 rounded-lg hover:bg-surface-100 dark:hover:bg-surface-800"
177
-
>
178
-
{t("nav.discover")}
179
-
</a>
180
-
</div>
136
+
137
+
{user && (
138
+
<div className="hidden md:flex items-center gap-5">
139
+
<a
140
+
href="/home"
141
+
className="text-[13px] font-medium text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white transition-colors"
142
+
>
143
+
{t("nav.feed")}
144
+
</a>
145
+
<a
146
+
href="/discover"
147
+
className="text-[13px] font-medium text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white transition-colors"
148
+
>
149
+
{t("nav.discover")}
150
+
</a>
151
+
</div>
152
+
)}
181
153
</div>
182
-
<div className="relative flex items-center gap-2">
154
+
155
+
<div className="flex items-center gap-1 sm:gap-2">
183
156
{!user && (
184
157
<a
185
158
href="/login"
186
-
className="text-[13px] font-medium text-surface-600 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white transition-colors px-3 py-1.5 rounded-lg hover:bg-surface-100 dark:hover:bg-surface-800"
159
+
className="text-[13px] font-medium text-surface-600 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white transition-colors px-3 py-1.5"
187
160
>
188
161
{t("nav.signIn")}
189
162
</a>
190
163
)}
191
-
192
164
<a
193
165
href={extensionLink}
194
166
target="_blank"
195
167
rel="noopener noreferrer"
196
-
className="inline-flex items-center gap-1.5 text-[13px] font-semibold px-3.5 py-1.5 bg-surface-900 dark:bg-white text-white dark:text-surface-900 rounded-lg hover:bg-surface-800 dark:hover:bg-surface-100 transition-colors"
168
+
className="group inline-flex items-center gap-1.5 text-[13px] font-semibold pl-3 pr-3.5 py-1.5 bg-surface-900 dark:bg-white text-white dark:text-surface-900 rounded-lg hover:bg-surface-800 dark:hover:bg-surface-100 transition-colors"
197
169
>
198
170
<ExtensionIcon size={14} />
199
171
<span className="hidden sm:inline">
···
205
177
</div>
206
178
</nav>
207
179
208
-
<section className="relative overflow-hidden">
209
-
<div className="absolute top-0 inset-x-0 h-[500px] bg-gradient-to-b from-primary-50/50 via-transparent to-transparent dark:from-primary-900/10 dark:to-transparent -z-10 pointer-events-none" />
210
-
211
-
<div className="max-w-4xl mx-auto px-6 pt-8 pb-20 md:pt-16 md:pb-28 text-center relative z-10">
212
-
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-10">
213
-
<div className="group relative inline-flex items-center gap-2 px-1 py-1 rounded-full bg-surface-50/50 dark:bg-surface-800/30 border border-surface-200 dark:border-surface-700/50 hover:bg-surface-100/50 dark:hover:bg-surface-800/50 transition-colors cursor-pointer">
214
-
<div className="flex items-center -space-x-2">
215
-
<a
216
-
href="https://github.com/margin-at"
217
-
target="_blank"
218
-
rel="noreferrer"
219
-
className="relative z-10 flex items-center justify-center w-8 h-8 rounded-full bg-white dark:bg-surface-900 text-surface-600 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white border-2 border-surface-50 dark:border-surface-800 shadow-sm transition-transform hover:z-20 hover:scale-110"
220
-
title="GitHub"
221
-
>
222
-
<Github size={15} />
223
-
</a>
224
-
<a
225
-
href="https://tangled.org/margin.at/margin"
226
-
target="_blank"
227
-
rel="noreferrer"
228
-
className="relative z-0 flex items-center justify-center w-8 h-8 rounded-full bg-white dark:bg-surface-900 border-2 border-surface-50 dark:border-surface-800 shadow-sm transition-transform hover:z-20 hover:scale-110"
229
-
title="Tangled"
230
-
>
231
-
<TangledIcon
232
-
size={16}
233
-
className="text-surface-600 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white transition-colors"
234
-
/>
235
-
</a>
236
-
</div>
237
-
<span className="pr-4 pl-0.5 text-[13px] font-semibold text-surface-600 dark:text-surface-300">
238
-
{t("about.hero.openSource")}{" "}
239
-
<span className="text-primary-500 font-normal">✨</span>
240
-
</span>
241
-
</div>
242
-
</div>
243
-
244
-
<h1 className="font-display text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-surface-900 dark:text-white leading-[1.05] mb-6">
245
-
{t("about.hero.headline")} <br className="hidden sm:block" />
246
-
<span className="text-primary-600 dark:text-primary-400">
247
-
{t("about.hero.headlineAccent")}
248
-
</span>
249
-
</h1>
250
-
251
-
<p className="text-lg md:text-xl text-surface-500 dark:text-surface-400 max-w-2xl mx-auto leading-relaxed mb-10">
252
-
{t("about.hero.descriptionPre")}{" "}
180
+
<section className="max-w-6xl mx-auto px-6 pt-16 pb-16 md:pt-24 md:pb-20">
181
+
<div className="inline-flex items-center gap-1.5 px-1 py-1 rounded-full bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700/60 mb-8 shadow-sm">
182
+
<div className="flex items-center -space-x-1.5">
253
183
<a
254
-
href="https://atproto.com"
184
+
href="https://github.com/margin-at"
255
185
target="_blank"
256
186
rel="noreferrer"
257
-
className="text-surface-800 dark:text-surface-200 hover:text-primary-600 dark:hover:text-primary-400 border-b border-surface-300 dark:border-surface-600 hover:border-primary-400 transition-colors font-medium"
187
+
className="relative z-10 flex items-center justify-center w-7 h-7 rounded-full bg-surface-50 dark:bg-surface-900 text-surface-600 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white border-2 border-white dark:border-surface-800 shadow-sm transition-transform hover:z-20 hover:scale-110"
188
+
title="GitHub"
258
189
>
259
-
{t("about.hero.atProtocol")}
190
+
<Github size={13} />
260
191
</a>
261
-
{t("about.hero.descriptionPost")}
262
-
</p>
263
-
264
-
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-4">
265
192
<a
266
-
href={user ? "/home" : "/login"}
267
-
className="group inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-surface-900 dark:bg-white text-white dark:text-surface-900 rounded-[14px] font-semibold hover:bg-surface-800 dark:hover:bg-surface-200 hover:scale-[1.02] shadow-sm transition-all duration-200 w-full sm:w-auto"
193
+
href="https://tangled.org/margin.at/margin"
194
+
target="_blank"
195
+
rel="noreferrer"
196
+
className="relative z-0 flex items-center justify-center w-7 h-7 rounded-full bg-surface-50 dark:bg-surface-900 border-2 border-white dark:border-surface-800 shadow-sm transition-transform hover:z-20 hover:scale-110"
197
+
title="Tangled"
268
198
>
269
-
{user ? t("about.hero.openApp") : t("about.hero.getStarted")}
270
-
<ArrowRight
271
-
size={18}
272
-
className="transition-transform group-hover:translate-x-1"
199
+
<TangledIcon
200
+
size={14}
201
+
className="text-surface-600 dark:text-surface-400"
273
202
/>
274
203
</a>
275
-
<a
276
-
href={extensionLink}
277
-
target="_blank"
278
-
rel="noopener noreferrer"
279
-
className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-surface-50 dark:bg-surface-800/50 text-surface-700 dark:text-surface-200 hover:text-surface-900 dark:hover:text-white rounded-[14px] font-semibold hover:bg-surface-100 dark:hover:bg-surface-800 hover:scale-[1.02] transition-all duration-200 w-full sm:w-auto"
280
-
>
281
-
<ExtensionIcon size={18} />
282
-
{t("about.hero.installFor", { browser: extensionLabel })}
283
-
</a>
284
204
</div>
205
+
<span className="pr-3 pl-1 text-xs font-semibold text-surface-600 dark:text-surface-300">
206
+
{t("about.hero.openSource")}
207
+
</span>
285
208
</div>
286
-
</section>
287
209
288
-
<section className="max-w-5xl mx-auto px-6 py-20 md:py-24">
289
-
<div className="text-center mb-12">
290
-
<h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight text-surface-900 dark:text-white mb-4">
291
-
{t("about.features.title")}
292
-
</h2>
293
-
<p className="text-surface-500 dark:text-surface-400 max-w-xl mx-auto leading-relaxed">
294
-
{t("about.features.subtitle")}
295
-
</p>
296
-
</div>
210
+
<h1 className="font-display text-5xl md:text-7xl lg:text-[5.5rem] font-bold tracking-tight text-surface-900 dark:text-white leading-[1.02] mb-8 max-w-4xl">
211
+
{t("about.hero.headline")} <br className="hidden sm:block" />
212
+
<span className="text-primary-600 dark:text-primary-400">
213
+
{t("about.hero.headlineAccent")}
214
+
</span>
215
+
</h1>
297
216
298
-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
299
-
<FeatureCard
300
-
icon={MessageSquareText}
301
-
title={t("about.features.annotations.title")}
302
-
description={t("about.features.annotations.description")}
303
-
accent
304
-
/>
305
-
<FeatureCard
306
-
icon={Highlighter}
307
-
title={t("about.features.highlights.title")}
308
-
description={t("about.features.highlights.description")}
309
-
/>
310
-
<FeatureCard
311
-
icon={Bookmark}
312
-
title={t("about.features.bookmarks.title")}
313
-
description={t("about.features.bookmarks.description")}
314
-
/>
315
-
<FeatureCard
316
-
icon={FolderOpen}
317
-
title={t("about.features.collections.title")}
318
-
description={t("about.features.collections.description")}
319
-
/>
320
-
<FeatureCard
321
-
icon={Users}
322
-
title={t("about.features.socialDiscovery.title")}
323
-
description={t("about.features.socialDiscovery.description")}
324
-
/>
325
-
<FeatureCard
326
-
icon={Hash}
327
-
title={t("about.features.tagsSearch.title")}
328
-
description={t("about.features.tagsSearch.description")}
329
-
/>
217
+
<p className="text-lg md:text-xl text-surface-500 dark:text-surface-400 max-w-2xl leading-relaxed mb-10">
218
+
{t("about.hero.descriptionPre")}{" "}
219
+
<a
220
+
href="https://atproto.com"
221
+
target="_blank"
222
+
rel="noreferrer"
223
+
className="text-surface-800 dark:text-surface-200 hover:text-primary-600 dark:hover:text-primary-400 border-b border-surface-300 dark:border-surface-600 hover:border-primary-400 transition-colors font-medium"
224
+
>
225
+
{t("about.hero.atProtocol")}
226
+
</a>
227
+
{t("about.hero.descriptionPost")}
228
+
</p>
229
+
230
+
<div className="flex flex-col sm:flex-row items-start gap-3">
231
+
<a
232
+
href={user ? "/home" : "/login"}
233
+
className="group inline-flex items-center gap-2 px-6 py-3 bg-surface-900 dark:bg-white text-white dark:text-surface-900 rounded-xl font-semibold hover:bg-surface-800 dark:hover:bg-surface-200 transition-all duration-200 text-[15px] shadow-sm"
234
+
>
235
+
{user ? t("about.hero.openApp") : t("about.hero.getStarted")}
236
+
<ArrowRight
237
+
size={16}
238
+
className="transition-transform group-hover:translate-x-0.5"
239
+
/>
240
+
</a>
241
+
<a
242
+
href={extensionLink}
243
+
target="_blank"
244
+
rel="noopener noreferrer"
245
+
className="inline-flex items-center gap-2 px-6 py-3 text-surface-700 dark:text-surface-200 hover:text-surface-900 dark:hover:text-white bg-white dark:bg-surface-800 hover:bg-surface-50 dark:hover:bg-surface-700 border border-surface-200 dark:border-surface-700 rounded-xl font-semibold transition-all duration-200 text-[15px]"
246
+
>
247
+
<ExtensionIcon size={16} />
248
+
{t("about.hero.installFor", { browser: extensionLabel })}
249
+
</a>
330
250
</div>
331
251
</section>
332
252
333
-
<section className="bg-white/50 dark:bg-surface-800/50 border-y border-surface-200/60 dark:border-surface-800/60">
334
-
<div className="max-w-5xl mx-auto px-6 py-20 md:py-24">
335
-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
336
-
<div>
337
-
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 text-xs font-medium mb-5 border border-surface-200/60 dark:border-surface-700/60">
338
-
<ExtensionIcon size={13} />
339
-
{t("about.extension.badge")}
253
+
<section className="max-w-6xl mx-auto px-6 pb-20 md:pb-28">
254
+
<div className="relative">
255
+
<div
256
+
aria-hidden
257
+
className="absolute inset-x-12 top-12 bottom-0 bg-gradient-to-b from-primary-100/40 to-transparent dark:from-primary-900/20 dark:to-transparent rounded-3xl blur-2xl"
258
+
/>
259
+
260
+
<div className="relative rounded-2xl border border-surface-200 dark:border-surface-700/60 bg-white dark:bg-surface-800 shadow-2xl shadow-surface-900/10 overflow-hidden">
261
+
<div className="flex items-center gap-3 px-4 py-3 border-b border-surface-100 dark:border-surface-700/60 bg-surface-50/50 dark:bg-surface-900/40">
262
+
<div className="flex gap-1.5">
263
+
<div className="w-3 h-3 rounded-full bg-red-400/70" />
264
+
<div className="w-3 h-3 rounded-full bg-yellow-400/70" />
265
+
<div className="w-3 h-3 rounded-full bg-green-400/70" />
340
266
</div>
341
-
<h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight text-surface-900 dark:text-white mb-4">
342
-
{t("about.extension.title")}
343
-
<br />
344
-
{t("about.extension.titleLine2")}
345
-
</h2>
346
-
<p className="text-surface-500 dark:text-surface-400 leading-relaxed mb-8">
347
-
{t("about.extension.description")}
348
-
</p>
349
-
350
-
<div className="space-y-5">
351
-
<ExtensionFeature
352
-
icon={Eye}
353
-
title={t("about.extension.features.inlineOverlay.title")}
354
-
description={t(
355
-
"about.extension.features.inlineOverlay.description",
356
-
)}
357
-
/>
358
-
<ExtensionFeature
359
-
icon={MousePointerClick}
360
-
title={t("about.extension.features.contextMenu.title")}
361
-
description={t(
362
-
"about.extension.features.contextMenu.description",
363
-
)}
364
-
/>
365
-
<ExtensionFeature
366
-
icon={Keyboard}
367
-
title={t("about.extension.features.keyboard.title")}
368
-
description={t(
369
-
"about.extension.features.keyboard.description",
370
-
)}
371
-
/>
372
-
<ExtensionFeature
373
-
icon={PanelRight}
374
-
title={t("about.extension.features.sidePanel.title")}
375
-
description={t(
376
-
"about.extension.features.sidePanel.description",
377
-
)}
378
-
/>
267
+
<div className="flex-1 max-w-md mx-auto bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700/60 rounded-md px-3 py-1 flex items-center justify-center gap-1.5">
268
+
<Lock size={10} className="text-surface-400" />
269
+
<span className="text-[11px] font-mono text-surface-500 dark:text-surface-400 truncate">
270
+
essays.example.com/marginalia
271
+
</span>
379
272
</div>
380
-
381
-
<div className="flex flex-col sm:flex-row gap-3 mt-8 flex-wrap">
382
-
<a
383
-
href={extensionLink}
384
-
target="_blank"
385
-
rel="noopener noreferrer"
386
-
className="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-surface-900 dark:bg-white text-white dark:text-surface-900 rounded-lg font-medium text-sm transition-all hover:opacity-90"
387
-
>
388
-
<ExtensionIcon size={15} />
389
-
{t("about.hero.installFor", { browser: extensionLabel })}
390
-
<ExternalLink size={12} />
391
-
</a>
392
-
{browser !== "chrome" && (
393
-
<a
394
-
href="https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa"
395
-
target="_blank"
396
-
rel="noopener noreferrer"
397
-
className="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-200 rounded-lg font-medium text-sm transition-all hover:bg-surface-200 dark:hover:bg-surface-700 border border-surface-200/80 dark:border-surface-700/80"
398
-
>
399
-
<Chrome size={15} />
400
-
Chrome
401
-
<ExternalLink size={12} />
402
-
</a>
403
-
)}
404
-
{browser !== "firefox" && (
405
-
<a
406
-
href="https://addons.mozilla.org/en-US/firefox/addon/margin/"
407
-
target="_blank"
408
-
rel="noopener noreferrer"
409
-
className="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-200 rounded-lg font-medium text-sm transition-all hover:bg-surface-200 dark:hover:bg-surface-700 border border-surface-200/80 dark:border-surface-700/80"
410
-
>
411
-
<FaFirefox size={15} />
412
-
Firefox
413
-
<ExternalLink size={12} />
414
-
</a>
415
-
)}
416
-
{browser !== "edge" && (
417
-
<a
418
-
href="https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn"
419
-
target="_blank"
420
-
rel="noopener noreferrer"
421
-
className="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-200 rounded-lg font-medium text-sm transition-all hover:bg-surface-200 dark:hover:bg-surface-700 border border-surface-200/80 dark:border-surface-700/80"
422
-
>
423
-
<FaEdge size={15} />
424
-
Edge
425
-
<ExternalLink size={12} />
426
-
</a>
427
-
)}
428
-
<a
429
-
href="https://www.icloud.com/shortcuts/1e33ebf52f55431fae1e187cfe9738c3"
430
-
target="_blank"
431
-
rel="noopener noreferrer"
432
-
className="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-200 rounded-lg font-medium text-sm transition-all hover:bg-surface-200 dark:hover:bg-surface-700 border border-surface-200/80 dark:border-surface-700/80"
433
-
>
434
-
<AppleIcon size={15} />
435
-
{t("about.extension.iosShortcut")}
436
-
<ExternalLink size={12} />
437
-
</a>
273
+
<div className="flex items-center gap-2 pl-2">
274
+
<img src="/logo.svg" alt="" className="w-5 h-5" />
275
+
<span className="text-[11px] font-mono font-semibold text-primary-600 dark:text-primary-400">
276
+
3
277
+
</span>
438
278
</div>
439
279
</div>
440
280
441
-
<div className="relative hidden lg:block">
442
-
<div className="relative rounded-2xl border border-surface-200/60 dark:border-surface-700/60 bg-white dark:bg-surface-800 p-6 shadow-xl">
443
-
<div className="flex items-center gap-2 mb-4">
444
-
<div className="flex gap-1.5">
445
-
<div className="w-3 h-3 rounded-full bg-red-400/60" />
446
-
<div className="w-3 h-3 rounded-full bg-yellow-400/60" />
447
-
<div className="w-3 h-3 rounded-full bg-green-400/60" />
448
-
</div>
449
-
<div className="flex-1 mx-3 bg-surface-200 dark:bg-surface-700 rounded-md h-6 flex items-center px-3">
450
-
<span className="text-[10px] text-surface-400 truncate">
451
-
example.com/article/how-to-think-clearly
452
-
</span>
281
+
<div className="grid grid-cols-1 md:grid-cols-[1fr_280px] gap-0 md:gap-8">
282
+
<article className="px-6 sm:px-10 py-8 md:py-10 border-b md:border-b-0 md:border-r border-surface-100 dark:border-surface-700/60">
283
+
<div className="mb-6">
284
+
<h3 className="font-display font-bold text-2xl md:text-3xl text-surface-900 dark:text-white mb-2 tracking-tight">
285
+
The Reader's Margin
286
+
</h3>
287
+
<div className="flex items-center gap-3 text-xs text-surface-400 dark:text-surface-500 font-mono">
288
+
<span>Lena Park</span>
289
+
<span>·</span>
290
+
<span>12 min</span>
453
291
</div>
454
292
</div>
455
293
456
-
<div className="space-y-3 text-sm text-surface-600 dark:text-surface-300 leading-relaxed">
457
-
<div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-3/4" />
458
-
<div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-full" />
459
-
<div className="flex gap-0.5 flex-wrap items-center">
460
-
<div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-1/4" />
461
-
<span className="px-1 py-0.5 bg-yellow-200/70 dark:bg-yellow-500/30 rounded text-xs text-surface-700 dark:text-yellow-200 font-medium leading-none">
462
-
The point here is that Margin is indeed
294
+
<div className="space-y-2.5">
295
+
<div className="h-2.5 bg-surface-200 dark:bg-surface-700/70 rounded-full w-full" />
296
+
<div className="h-2.5 bg-surface-200 dark:bg-surface-700/70 rounded-full w-[94%]" />
297
+
<div className="h-2.5 bg-surface-200 dark:bg-surface-700/70 rounded-full w-[88%]" />
298
+
299
+
<div className="text-[15px] text-surface-700 dark:text-surface-300 leading-[1.7] py-1">
300
+
When you mark up the page,{" "}
301
+
<span className="text-surface-900 dark:text-white font-medium underline decoration-yellow-400 dark:decoration-yellow-500/80 [text-decoration-thickness:2px] underline-offset-[3px] [text-decoration-skip-ink:none]">
302
+
the page begins to read you back
463
303
</span>
464
-
<div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-1/5" />
304
+
.
465
305
</div>
466
-
<div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-5/6" />
467
-
<div className="flex gap-0.5 flex-wrap items-center">
468
-
<div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-2/5" />
469
-
<span className="px-1 py-0.5 bg-primary-200/70 dark:bg-primary-500/30 rounded text-xs text-primary-700 dark:text-primary-200 font-medium leading-none">
470
-
the best thing ever
306
+
307
+
<div className="h-2.5 bg-surface-200 dark:bg-surface-700/70 rounded-full w-[82%]" />
308
+
309
+
<div className="pt-3" />
310
+
311
+
<div className="h-2.5 bg-surface-200 dark:bg-surface-700/70 rounded-full w-[91%]" />
312
+
<div className="h-2.5 bg-surface-200 dark:bg-surface-700/70 rounded-full w-full" />
313
+
314
+
<div className="text-[15px] text-surface-700 dark:text-surface-300 leading-[1.7] py-1">
315
+
A note in the margin is{" "}
316
+
<span className="text-surface-900 dark:text-white font-medium underline decoration-primary-500 dark:decoration-primary-400 [text-decoration-thickness:2px] underline-offset-[3px] [text-decoration-skip-ink:none]">
317
+
a conversation with the future you
318
+
</span>{" "}
319
+
— and now, with everyone else who reads.
320
+
</div>
321
+
322
+
<div className="h-2.5 bg-surface-200 dark:bg-surface-700/70 rounded-full w-[85%]" />
323
+
<div className="h-2.5 bg-surface-200 dark:bg-surface-700/70 rounded-full w-[70%]" />
324
+
325
+
<div className="pt-3" />
326
+
327
+
<div className="h-2.5 bg-surface-200 dark:bg-surface-700/70 rounded-full w-[93%]" />
328
+
<div className="text-[15px] text-surface-700 dark:text-surface-300 leading-[1.7] py-1">
329
+
The library was once shared in pencil and{" "}
330
+
<span className="text-surface-900 dark:text-white font-medium underline decoration-yellow-400 dark:decoration-yellow-500/80 [text-decoration-thickness:2px] underline-offset-[3px] [text-decoration-skip-ink:none]">
331
+
whispered footnotes
471
332
</span>
472
-
<div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-1/4" />
333
+
.
473
334
</div>
474
-
<div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-2/3" />
335
+
<div className="h-2.5 bg-surface-200 dark:bg-surface-700/70 rounded-full w-[78%]" />
475
336
</div>
337
+
</article>
476
338
477
-
<div className="absolute -right-4 top-1/3 w-56 bg-white dark:bg-surface-900 rounded-xl border border-surface-200/60 dark:border-surface-700/60 shadow-lg p-3.5">
478
-
<div className="flex items-center gap-2 mb-2">
479
-
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-white text-[10px] font-bold">
480
-
S
339
+
<aside className="px-6 sm:px-6 py-8 md:py-10 bg-surface-50/40 dark:bg-surface-900/30">
340
+
<div className="flex items-center justify-between mb-4">
341
+
<span className="text-[10px] font-mono uppercase tracking-[0.12em] text-surface-400 dark:text-surface-500">
342
+
Annotations
343
+
</span>
344
+
<span className="text-[10px] font-mono text-surface-400 dark:text-surface-500">
345
+
3
346
+
</span>
347
+
</div>
348
+
349
+
<div className="space-y-3">
350
+
<div className="bg-white dark:bg-surface-800 rounded-lg border border-surface-200/70 dark:border-surface-700/60 p-3">
351
+
<div className="flex items-center gap-1.5 mb-2">
352
+
<div className="w-5 h-5 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-white text-[9px] font-bold">
353
+
S
354
+
</div>
355
+
<span className="text-[11px] font-semibold text-surface-700 dark:text-surface-300 truncate">
356
+
@scan.margin.cafe
357
+
</span>
358
+
<span className="text-[10px] text-surface-400 ml-auto font-mono shrink-0">
359
+
2m
360
+
</span>
481
361
</div>
482
-
<span className="text-xs font-semibold text-surface-900 dark:text-white">
483
-
@scan.margin.cafe
484
-
</span>
362
+
<p className="text-[12px] text-surface-600 dark:text-surface-400 leading-snug">
363
+
this is the whole thesis tbh
364
+
</p>
365
+
<div className="flex items-center gap-3 mt-2 pt-2 border-t border-surface-100 dark:border-surface-700/60">
366
+
<span className="inline-flex items-center gap-1 text-[10px] text-surface-400">
367
+
<Heart size={9} /> 4
368
+
</span>
369
+
<span className="inline-flex items-center gap-1 text-[10px] text-surface-400">
370
+
<MessageSquareText size={9} /> 1
371
+
</span>
372
+
</div>
485
373
</div>
486
-
<p className="text-xs text-surface-600 dark:text-surface-300 leading-relaxed">
487
-
I agree, Margin is just so good, like the other day I was
488
-
drinking some of that Margin for breakfast
489
-
</p>
490
-
<div className="flex items-center gap-3 mt-2.5 pt-2 border-t border-surface-100 dark:border-surface-700">
491
-
<span className="text-[10px] text-surface-400 flex items-center gap-1">
492
-
<Heart size={10} /> 3
493
-
</span>
494
-
<span className="text-[10px] text-surface-400 flex items-center gap-1">
495
-
<MessageSquareText size={10} /> 1
496
-
</span>
374
+
375
+
<div className="bg-white dark:bg-surface-800 rounded-lg border border-surface-200/70 dark:border-surface-700/60 p-3">
376
+
<div className="flex items-center gap-1.5 mb-2">
377
+
<div className="w-5 h-5 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center text-white text-[9px] font-bold">
378
+
M
379
+
</div>
380
+
<span className="text-[11px] font-semibold text-surface-700 dark:text-surface-300 truncate">
381
+
@maya.margin.cafe
382
+
</span>
383
+
<span className="text-[10px] text-surface-400 ml-auto font-mono shrink-0">
384
+
1h
385
+
</span>
386
+
</div>
387
+
<p className="text-[12px] text-surface-600 dark:text-surface-400 leading-snug">
388
+
saving this for the design book
389
+
</p>
390
+
</div>
391
+
392
+
<div className="bg-white dark:bg-surface-800 rounded-lg border border-surface-200/70 dark:border-surface-700/60 p-3">
393
+
<div className="flex items-center gap-1.5 mb-2">
394
+
<div className="w-5 h-5 rounded-full bg-surface-200 dark:bg-surface-700 flex items-center justify-center">
395
+
<Highlighter
396
+
size={10}
397
+
className="text-surface-500 dark:text-surface-400"
398
+
/>
399
+
</div>
400
+
<span className="text-[11px] font-semibold text-surface-700 dark:text-surface-300">
401
+
highlight
402
+
</span>
403
+
<span className="text-[10px] text-surface-400 ml-auto font-mono">
404
+
3h
405
+
</span>
406
+
</div>
407
+
<p className="text-[12px] text-surface-500 dark:text-surface-500 italic leading-snug">
408
+
"whispered footnotes"
409
+
</p>
497
410
</div>
498
411
</div>
499
-
</div>
412
+
</aside>
500
413
</div>
501
414
</div>
502
415
</div>
503
416
</section>
504
417
505
-
<section className="max-w-5xl mx-auto px-6 py-20 md:py-24">
506
-
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
507
-
<div>
508
-
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white dark:bg-surface-800 text-surface-600 dark:text-surface-400 text-xs font-medium mb-5 border border-surface-200/60 dark:border-surface-700/60">
509
-
<Shield size={13} />
510
-
{t("about.protocol.badge")}
511
-
</div>
512
-
<h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight text-surface-900 dark:text-white mb-4">
513
-
{t("about.protocol.title")}
418
+
<section className="border-t border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900/40">
419
+
<div className="max-w-6xl mx-auto px-6 py-24 md:py-32">
420
+
<div className="max-w-2xl mb-16 md:mb-20">
421
+
<h2 className="font-display text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-surface-900 dark:text-white mb-5 leading-[1.05]">
422
+
{t("about.features.title")}
514
423
</h2>
515
-
<p className="text-surface-500 dark:text-surface-400 leading-relaxed mb-6">
516
-
{t("about.protocol.descriptionPre")}{" "}
517
-
<a
518
-
href="https://atproto.com"
519
-
target="_blank"
520
-
rel="noreferrer"
521
-
className="text-primary-600 dark:text-primary-400 hover:underline font-medium"
522
-
>
523
-
{t("about.hero.atProtocol")}
524
-
</a>
525
-
{t("about.protocol.descriptionPost")}
424
+
<p className="text-lg text-surface-500 dark:text-surface-400 leading-relaxed">
425
+
{t("about.features.subtitle")}
526
426
</p>
527
-
<ul className="space-y-3 text-sm text-surface-600 dark:text-surface-300">
528
-
{([0, 1, 2, 3] as const).map((i) => (
529
-
<li key={i} className="flex items-start gap-3">
530
-
<div className="w-5 h-5 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center flex-shrink-0 mt-0.5">
531
-
<div className="w-1.5 h-1.5 rounded-full bg-primary-600 dark:bg-primary-400" />
532
-
</div>
533
-
{t(`about.protocol.point${i}`)}
534
-
</li>
535
-
))}
536
-
</ul>
537
427
</div>
538
428
539
-
<div className="rounded-2xl bg-surface-900 dark:bg-surface-950 p-5 text-sm font-mono shadow-xl border border-surface-800 dark:border-surface-800">
540
-
<div className="flex items-center gap-2 mb-4">
541
-
<div className="text-xs text-surface-500">lexicon</div>
542
-
<div className="text-xs text-primary-400 px-2 py-0.5 rounded bg-primary-400/10">
543
-
at.margin.annotation
429
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-14">
430
+
{features.map((feature) => (
431
+
<div key={feature.title}>
432
+
<div className="flex items-center gap-2.5 mb-3">
433
+
<feature.icon
434
+
size={16}
435
+
className="text-primary-500 dark:text-primary-400 flex-shrink-0"
436
+
/>
437
+
<h3 className="font-display font-semibold text-xl text-surface-900 dark:text-white tracking-tight">
438
+
{feature.title}
439
+
</h3>
440
+
</div>
441
+
<p className="text-[15px] text-surface-500 dark:text-surface-400 leading-relaxed">
442
+
{feature.description}
443
+
</p>
544
444
</div>
545
-
</div>
546
-
<div className="space-y-1 text-[13px] leading-relaxed">
547
-
<span className="text-surface-500">{"{"}</span>
548
-
<div className="pl-4">
549
-
<span className="text-green-400">"type"</span>
550
-
<span className="text-surface-400">: </span>
551
-
<span className="text-amber-400">"record"</span>
552
-
<span className="text-surface-400">,</span>
445
+
))}
446
+
</div>
447
+
</div>
448
+
</section>
449
+
450
+
<section className="border-t border-surface-200/60 dark:border-surface-800/60">
451
+
<div className="max-w-6xl mx-auto px-6 py-24 md:py-28">
452
+
<div className="grid grid-cols-1 lg:grid-cols-[1.3fr_1fr] gap-14 lg:gap-20 items-start">
453
+
<div>
454
+
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white dark:bg-surface-800 text-surface-600 dark:text-surface-400 text-xs font-medium mb-5 border border-surface-200/60 dark:border-surface-700/60">
455
+
<ExtensionIcon size={13} />
456
+
{t("about.extension.badge")}
553
457
</div>
554
-
<div className="pl-4">
555
-
<span className="text-green-400">"record"</span>
556
-
<span className="text-surface-400">: {"{"}</span>
458
+
<h2 className="font-display text-4xl md:text-5xl font-bold tracking-tight text-surface-900 dark:text-white mb-5 leading-[1.05]">
459
+
{t("about.extension.title")}{" "}
460
+
<span className="text-surface-400 dark:text-surface-500">
461
+
{t("about.extension.titleLine2")}
462
+
</span>
463
+
</h2>
464
+
<p className="text-lg text-surface-500 dark:text-surface-400 leading-relaxed mb-12 max-w-lg">
465
+
{t("about.extension.description")}
466
+
</p>
467
+
468
+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-8">
469
+
{(
470
+
[
471
+
{ icon: Eye, key: "inlineOverlay" },
472
+
{ icon: MousePointerClick, key: "contextMenu" },
473
+
{ icon: Keyboard, key: "keyboard" },
474
+
{ icon: PanelRight, key: "sidePanel" },
475
+
] as const
476
+
).map(({ icon: Icon, key }) => (
477
+
<div key={key}>
478
+
<div className="flex items-center gap-2.5 mb-2">
479
+
<Icon
480
+
size={15}
481
+
className="text-primary-500 dark:text-primary-400"
482
+
/>
483
+
<h4 className="font-display font-semibold text-base text-surface-900 dark:text-white tracking-tight">
484
+
{t(`about.extension.features.${key}.title`)}
485
+
</h4>
486
+
</div>
487
+
<p className="text-sm text-surface-500 dark:text-surface-400 leading-relaxed">
488
+
{t(`about.extension.features.${key}.description`)}
489
+
</p>
490
+
</div>
491
+
))}
557
492
</div>
558
-
<div className="pl-8">
559
-
<span className="text-green-400">"body"</span>
560
-
<span className="text-surface-400">: </span>
561
-
<span className="text-amber-400">"Great insight..."</span>
562
-
<span className="text-surface-400">,</span>
493
+
</div>
494
+
495
+
<div className="lg:sticky lg:top-24">
496
+
<div className="rounded-2xl bg-surface-50 dark:bg-surface-800/50 border border-surface-200/60 dark:border-surface-700/60 p-6">
497
+
<div className="text-[10px] font-mono uppercase tracking-[0.12em] text-surface-400 dark:text-surface-500 mb-4">
498
+
Install
499
+
</div>
500
+
<div className="flex flex-col gap-2">
501
+
<a
502
+
href={extensionLink}
503
+
target="_blank"
504
+
rel="noopener noreferrer"
505
+
className="inline-flex items-center justify-between gap-2 px-4 py-3 bg-surface-900 dark:bg-white text-white dark:text-surface-900 rounded-lg font-medium text-sm transition-all hover:opacity-90"
506
+
>
507
+
<span className="inline-flex items-center gap-2">
508
+
<ExtensionIcon size={15} />
509
+
{t("about.hero.installFor", {
510
+
browser: extensionLabel,
511
+
})}
512
+
</span>
513
+
<ExternalLink size={13} />
514
+
</a>
515
+
{browser !== "chrome" && (
516
+
<a
517
+
href="https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa"
518
+
target="_blank"
519
+
rel="noopener noreferrer"
520
+
className="inline-flex items-center justify-between gap-2 px-4 py-2.5 bg-white dark:bg-surface-800 text-surface-700 dark:text-surface-200 rounded-lg font-medium text-sm transition-all hover:bg-surface-100 dark:hover:bg-surface-700 border border-surface-200/80 dark:border-surface-700/80"
521
+
>
522
+
<span className="inline-flex items-center gap-2">
523
+
<Chrome size={14} />
524
+
Chrome
525
+
</span>
526
+
<ExternalLink size={12} />
527
+
</a>
528
+
)}
529
+
{browser !== "firefox" && (
530
+
<a
531
+
href="https://addons.mozilla.org/en-US/firefox/addon/margin/"
532
+
target="_blank"
533
+
rel="noopener noreferrer"
534
+
className="inline-flex items-center justify-between gap-2 px-4 py-2.5 bg-white dark:bg-surface-800 text-surface-700 dark:text-surface-200 rounded-lg font-medium text-sm transition-all hover:bg-surface-100 dark:hover:bg-surface-700 border border-surface-200/80 dark:border-surface-700/80"
535
+
>
536
+
<span className="inline-flex items-center gap-2">
537
+
<FaFirefox size={14} />
538
+
Firefox
539
+
</span>
540
+
<ExternalLink size={12} />
541
+
</a>
542
+
)}
543
+
{browser !== "edge" && (
544
+
<a
545
+
href="https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn"
546
+
target="_blank"
547
+
rel="noopener noreferrer"
548
+
className="inline-flex items-center justify-between gap-2 px-4 py-2.5 bg-white dark:bg-surface-800 text-surface-700 dark:text-surface-200 rounded-lg font-medium text-sm transition-all hover:bg-surface-100 dark:hover:bg-surface-700 border border-surface-200/80 dark:border-surface-700/80"
549
+
>
550
+
<span className="inline-flex items-center gap-2">
551
+
<FaEdge size={14} />
552
+
Edge
553
+
</span>
554
+
<ExternalLink size={12} />
555
+
</a>
556
+
)}
557
+
<a
558
+
href="https://www.icloud.com/shortcuts/1e33ebf52f55431fae1e187cfe9738c3"
559
+
target="_blank"
560
+
rel="noopener noreferrer"
561
+
className="inline-flex items-center justify-between gap-2 px-4 py-2.5 bg-white dark:bg-surface-800 text-surface-700 dark:text-surface-200 rounded-lg font-medium text-sm transition-all hover:bg-surface-100 dark:hover:bg-surface-700 border border-surface-200/80 dark:border-surface-700/80"
562
+
>
563
+
<span className="inline-flex items-center gap-2">
564
+
<AppleIcon size={14} />
565
+
{t("about.extension.iosShortcut")}
566
+
</span>
567
+
<ExternalLink size={12} />
568
+
</a>
569
+
</div>
563
570
</div>
564
-
<div className="pl-8">
565
-
<span className="text-green-400">"target"</span>
566
-
<span className="text-surface-400">: {"{"}</span>
571
+
</div>
572
+
</div>
573
+
</div>
574
+
</section>
575
+
576
+
<section className="border-t border-surface-200/60 dark:border-surface-800/60 bg-white dark:bg-surface-900/40">
577
+
<div className="max-w-6xl mx-auto px-6 py-24 md:py-32">
578
+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-14 lg:gap-20 items-center">
579
+
<div>
580
+
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 text-xs font-medium mb-5 border border-surface-200/60 dark:border-surface-700/60">
581
+
<Shield size={13} />
582
+
{t("about.protocol.badge")}
567
583
</div>
568
-
<div className="pl-12">
569
-
<span className="text-green-400">"source"</span>
570
-
<span className="text-surface-400">: </span>
571
-
<span className="text-sky-400">"https://..."</span>
572
-
<span className="text-surface-400">,</span>
584
+
<h2 className="font-display text-4xl md:text-5xl font-bold tracking-tight text-surface-900 dark:text-white mb-5 leading-[1.05]">
585
+
{t("about.protocol.title")}
586
+
</h2>
587
+
<p className="text-lg text-surface-500 dark:text-surface-400 leading-relaxed mb-10 max-w-lg">
588
+
{t("about.protocol.descriptionPre")}{" "}
589
+
<a
590
+
href="https://atproto.com"
591
+
target="_blank"
592
+
rel="noreferrer"
593
+
className="text-primary-600 dark:text-primary-400 hover:underline font-medium"
594
+
>
595
+
{t("about.hero.atProtocol")}
596
+
</a>
597
+
{t("about.protocol.descriptionPost")}
598
+
</p>
599
+
<ul className="space-y-4">
600
+
{([0, 1, 2, 3] as const).map((i) => (
601
+
<li key={i} className="flex items-start gap-3">
602
+
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-md bg-primary-100 dark:bg-primary-950/60 flex items-center justify-center">
603
+
<Check
604
+
size={12}
605
+
className="text-primary-600 dark:text-primary-400"
606
+
strokeWidth={2.5}
607
+
/>
608
+
</div>
609
+
<span className="text-[15px] text-surface-700 dark:text-surface-300 leading-relaxed">
610
+
{t(`about.protocol.point${i}`)}
611
+
</span>
612
+
</li>
613
+
))}
614
+
</ul>
615
+
</div>
616
+
617
+
<div className="rounded-2xl bg-surface-900 dark:bg-surface-950 p-5 md:p-6 text-sm font-mono shadow-2xl shadow-surface-900/10 border border-surface-800">
618
+
<div className="flex items-center gap-2 mb-4 pb-3 border-b border-surface-800">
619
+
<div className="flex gap-1">
620
+
<div className="w-2 h-2 rounded-full bg-surface-700" />
621
+
<div className="w-2 h-2 rounded-full bg-surface-700" />
622
+
<div className="w-2 h-2 rounded-full bg-surface-700" />
623
+
</div>
624
+
<div className="text-xs text-surface-500 ml-2">lexicon</div>
625
+
<div className="text-xs text-primary-400 px-2 py-0.5 rounded bg-primary-400/10 ml-auto">
626
+
at.margin.note
627
+
</div>
573
628
</div>
574
-
<div className="pl-12">
575
-
<span className="text-green-400">"selector"</span>
576
-
<span className="text-surface-400">: {"{"}</span>
577
-
</div>
578
-
<div className="pl-16">
579
-
<span className="text-green-400">"exact"</span>
580
-
<span className="text-surface-400">: </span>
581
-
<span className="text-amber-400">"selected text"</span>
582
-
</div>
583
-
<div className="pl-12">
584
-
<span className="text-surface-400">{"}"}</span>
629
+
<div className="space-y-1 text-[13px] leading-relaxed">
630
+
<span className="text-surface-500">{"{"}</span>
631
+
<div className="pl-4">
632
+
<span className="text-green-400">"$type"</span>
633
+
<span className="text-surface-400">: </span>
634
+
<span className="text-amber-400">"at.margin.note"</span>
635
+
<span className="text-surface-400">,</span>
636
+
</div>
637
+
<div className="pl-4">
638
+
<span className="text-green-400">"motivation"</span>
639
+
<span className="text-surface-400">: </span>
640
+
<span className="text-amber-400">"highlighting"</span>
641
+
<span className="text-surface-400">,</span>
642
+
</div>
643
+
<div className="pl-4">
644
+
<span className="text-green-400">"body"</span>
645
+
<span className="text-surface-400">: {"{"}</span>
646
+
</div>
647
+
<div className="pl-8">
648
+
<span className="text-green-400">"value"</span>
649
+
<span className="text-surface-400">: </span>
650
+
<span className="text-amber-400">"Great insight..."</span>
651
+
</div>
652
+
<div className="pl-4">
653
+
<span className="text-surface-400">{"}"}</span>
654
+
<span className="text-surface-400">,</span>
655
+
</div>
656
+
<div className="pl-4">
657
+
<span className="text-green-400">"target"</span>
658
+
<span className="text-surface-400">: {"{"}</span>
659
+
</div>
660
+
<div className="pl-8">
661
+
<span className="text-green-400">"source"</span>
662
+
<span className="text-surface-400">: </span>
663
+
<span className="text-sky-400">"https://..."</span>
664
+
<span className="text-surface-400">,</span>
665
+
</div>
666
+
<div className="pl-8">
667
+
<span className="text-green-400">"selector"</span>
668
+
<span className="text-surface-400">: {"{"}</span>
669
+
</div>
670
+
<div className="pl-12">
671
+
<span className="text-green-400">"type"</span>
672
+
<span className="text-surface-400">: </span>
673
+
<span className="text-amber-400">"TextQuoteSelector"</span>
674
+
<span className="text-surface-400">,</span>
675
+
</div>
676
+
<div className="pl-12">
677
+
<span className="text-green-400">"exact"</span>
678
+
<span className="text-surface-400">: </span>
679
+
<span className="text-amber-400">"selected text"</span>
680
+
</div>
681
+
<div className="pl-8">
682
+
<span className="text-surface-400">{"}"}</span>
683
+
</div>
684
+
<div className="pl-4">
685
+
<span className="text-surface-400">{"}"}</span>
686
+
</div>
687
+
<span className="text-surface-500">{"}"}</span>
585
688
</div>
586
-
<div className="pl-8">
587
-
<span className="text-surface-400">{"}"}</span>
588
-
</div>
589
-
<div className="pl-4">
590
-
<span className="text-surface-400">{"}"}</span>
591
-
</div>
592
-
<span className="text-surface-500">{"}"}</span>
593
689
</div>
594
690
</div>
595
691
</div>
596
692
</section>
597
693
598
-
<section className="border-t border-surface-200/60 dark:border-surface-800/60">
599
-
<div className="max-w-5xl mx-auto px-6 py-20 md:py-24 text-center">
600
-
<h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight text-surface-900 dark:text-white mb-4">
694
+
<section className="bg-primary-600 dark:bg-primary-700">
695
+
<div className="max-w-6xl mx-auto px-6 py-24 md:py-32">
696
+
<h2 className="font-display text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 max-w-3xl tracking-tight leading-[1.02]">
601
697
{t("about.cta.title")}
602
698
</h2>
603
-
<p className="text-surface-500 dark:text-surface-400 max-w-lg mx-auto mb-8">
699
+
<p className="text-primary-100 text-lg max-w-xl mb-12 leading-relaxed">
604
700
{t("about.cta.description")}
605
701
</p>
606
-
<div className="flex flex-col sm:flex-row items-center justify-center gap-3">
702
+
<div className="flex flex-col sm:flex-row items-start gap-3 flex-wrap">
607
703
<a
608
704
href={user ? "/home" : "/login"}
609
-
className="inline-flex items-center gap-2 px-7 py-3 bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-400 text-white rounded-xl font-semibold transition-colors"
705
+
className="group inline-flex items-center gap-2 px-7 py-3.5 bg-white text-primary-700 hover:bg-primary-50 rounded-xl font-semibold transition-colors text-[15px] shadow-lg shadow-primary-900/20"
610
706
>
611
707
{user ? t("about.hero.openApp") : t("about.cta.signIn")}
612
-
<ArrowRight size={16} />
708
+
<ArrowRight
709
+
size={16}
710
+
className="transition-transform group-hover:translate-x-0.5"
711
+
/>
613
712
</a>
614
713
<a
615
714
href="https://github.com/margin-at"
616
715
target="_blank"
617
716
rel="noreferrer"
618
-
className="inline-flex items-center gap-2 px-7 py-3 text-surface-600 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white transition-colors font-medium"
717
+
className="inline-flex items-center gap-2 px-7 py-3.5 text-white/90 hover:text-white border border-white/30 hover:border-white/50 hover:bg-white/5 rounded-xl font-semibold transition-colors text-[15px]"
619
718
>
620
719
<Github size={16} />
621
720
{t("about.cta.viewGitHub")}
···
624
723
href="https://tangled.org/margin.at/margin"
625
724
target="_blank"
626
725
rel="noreferrer"
627
-
className="inline-flex items-center gap-2 px-7 py-3 text-surface-600 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white transition-colors font-medium"
726
+
className="inline-flex items-center gap-2 px-7 py-3.5 text-white/90 hover:text-white border border-white/30 hover:border-white/50 hover:bg-white/5 rounded-xl font-semibold transition-colors text-[15px]"
628
727
>
629
728
<TangledIcon size={16} />
630
729
{t("about.cta.viewTangled")}
631
730
</a>
632
731
</div>
633
-
<div className="mt-10 flex items-center gap-5 flex-wrap justify-center">
732
+
<div className="mt-16 pt-8 border-t border-white/15 flex items-center gap-6 flex-wrap">
634
733
<a
635
734
href="https://ko-fi.com/scan"
636
735
target="_blank"
637
736
rel="noopener noreferrer"
638
-
className="inline-flex items-center gap-2 text-surface-500 dark:text-surface-400 hover:text-[#FF5E5B] dark:hover:text-[#FF5E5B] transition-colors font-medium"
737
+
className="inline-flex items-center gap-2 text-primary-100 hover:text-white transition-colors text-sm font-medium"
639
738
>
640
-
<Coffee size={16} />
739
+
<Coffee size={15} />
641
740
Ko-fi
642
741
</a>
742
+
<a
743
+
href="https://opencollective.com/margin"
744
+
target="_blank"
745
+
rel="noopener noreferrer"
746
+
className="inline-flex items-center gap-2 text-primary-100 hover:text-white transition-colors text-sm font-medium"
747
+
>
748
+
<Heart size={15} />
749
+
Open Collective
750
+
</a>
643
751
</div>
644
752
</div>
645
753
</section>
646
754
647
755
<footer className="border-t border-surface-200/60 dark:border-surface-800/60">
648
-
<div className="max-w-5xl mx-auto px-6 py-8">
756
+
<div className="max-w-6xl mx-auto px-6 py-8">
649
757
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
650
758
<div className="flex items-center gap-2.5">
651
759
<img
···
657
765
{t("sidebar.copyright")}
658
766
</span>
659
767
</div>
660
-
<div className="flex items-center gap-5 text-sm text-surface-400 dark:text-surface-500">
768
+
<div className="flex items-center gap-5 text-sm text-surface-400 dark:text-surface-500 flex-wrap">
661
769
{user && (
662
770
<a
663
771
href="/home"
+1
-2
web/src/views/content/AnnotationDetail.tsx
+1
-2
web/src/views/content/AnnotationDetail.tsx