margin.at
Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
1import React from "react";
2import { useStore } from "@nanostores/react";
3import { Link } from "react-router-dom";
4import { $theme, cycleTheme } from "../store/theme";
5import { $user } from "../store/auth";
6import {
7 MessageSquareText,
8 Highlighter,
9 Bookmark,
10 FolderOpen,
11 Keyboard,
12 PanelRight,
13 MousePointerClick,
14 Shield,
15 Users,
16 Chrome,
17 ArrowRight,
18 Github,
19 ExternalLink,
20 Hash,
21 Coffee,
22 Heart,
23 Eye,
24 Sun,
25 Moon,
26 Monitor,
27} from "lucide-react";
28import { AppleIcon, TangledIcon } from "../components/common/Icons";
29import { FaFirefox, FaEdge } from "react-icons/fa";
30
31function FeatureCard({
32 icon: Icon,
33 title,
34 description,
35 accent = false,
36}: {
37 icon: React.ElementType;
38 title: string;
39 description: string;
40 accent?: boolean;
41}) {
42 return (
43 <div
44 className={`group p-6 rounded-2xl border transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm ${
45 accent
46 ? "bg-primary-50 dark:bg-primary-950/30 border-primary-200/50 dark:border-primary-800/40"
47 : "bg-white dark:bg-surface-800 border-surface-200/60 dark:border-surface-700/60"
48 }`}
49 >
50 <div
51 className={`w-11 h-11 rounded-xl flex items-center justify-center mb-4 transition-colors ${
52 accent
53 ? "bg-primary-600 text-white"
54 : "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"
55 }`}
56 >
57 <Icon size={20} />
58 </div>
59 <h3 className="font-display font-semibold text-base mb-2 text-surface-900 dark:text-white">
60 {title}
61 </h3>
62 <p className="text-sm text-surface-500 dark:text-surface-400 leading-relaxed">
63 {description}
64 </p>
65 </div>
66 );
67}
68
69function ExtensionFeature({
70 icon: Icon,
71 title,
72 description,
73}: {
74 icon: React.ElementType;
75 title: string;
76 description: string;
77}) {
78 return (
79 <div className="flex gap-4 items-start">
80 <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">
81 <Icon size={18} />
82 </div>
83 <div>
84 <h4 className="font-semibold text-sm text-surface-900 dark:text-white mb-1">
85 {title}
86 </h4>
87 <p className="text-sm text-surface-500 dark:text-surface-400 leading-relaxed">
88 {description}
89 </p>
90 </div>
91 </div>
92 );
93}
94
95export default function About() {
96 const theme = useStore($theme); // ensure theme is applied on this page
97 const user = useStore($user);
98
99 const [browser] = React.useState<
100 "chrome" | "firefox" | "edge" | "safari" | "other"
101 >(() => {
102 if (typeof navigator === "undefined") return "other";
103 const ua = navigator.userAgent;
104 if (/Edg\//i.test(ua)) return "edge";
105 if (/Firefox/i.test(ua)) return "firefox";
106 if (/^((?!chrome|android).)*safari/i.test(ua)) return "safari";
107 if (/Chrome/i.test(ua)) return "chrome";
108 return "other";
109 });
110
111 const extensionLink =
112 browser === "firefox"
113 ? "https://addons.mozilla.org/en-US/firefox/addon/margin/"
114 : browser === "edge"
115 ? "https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn"
116 : "https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa";
117
118 const ExtensionIcon =
119 browser === "firefox" ? FaFirefox : browser === "edge" ? FaEdge : Chrome;
120 const extensionLabel =
121 browser === "firefox" ? "Firefox" : browser === "edge" ? "Edge" : "Chrome";
122
123 const [isScrolled, setIsScrolled] = React.useState(false);
124
125 React.useEffect(() => {
126 const handleScroll = () => {
127 setIsScrolled(window.scrollY > 20);
128 };
129 window.addEventListener("scroll", handleScroll, { passive: true });
130 return () => window.removeEventListener("scroll", handleScroll);
131 }, []);
132
133 return (
134 <div className="min-h-screen bg-surface-100 dark:bg-surface-900">
135 <nav
136 className={`sticky top-0 z-50 transition-all duration-300 ${
137 isScrolled
138 ? "bg-white/80 dark:bg-surface-900/80 backdrop-blur-xl border-b border-surface-200/50 dark:border-surface-800/50 shadow-sm"
139 : "bg-transparent border-b border-transparent"
140 }`}
141 >
142 <div
143 className={`max-w-5xl mx-auto px-4 sm:px-6 flex items-center justify-between transition-all duration-300 ${
144 isScrolled ? "h-14" : "h-24"
145 }`}
146 >
147 <div className="flex items-center gap-2.5">
148 <img src="/logo.svg" alt="Margin" className="w-7 h-7" />
149 <span className="font-display font-bold text-lg tracking-tight text-surface-900 dark:text-white">
150 Margin
151 </span>
152 </div>
153 <div className="flex items-center gap-1 sm:gap-2">
154 <div className="hidden md:flex items-center gap-1 mr-2">
155 {user && (
156 <Link
157 to="/home"
158 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"
159 >
160 Feed
161 </Link>
162 )}
163 </div>
164
165 {!user && (
166 <Link
167 to="/login"
168 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"
169 >
170 Sign in
171 </Link>
172 )}
173
174 <a
175 href={extensionLink}
176 target="_blank"
177 rel="noopener noreferrer"
178 className="text-[13px] font-semibold px-3 sm:px-4 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"
179 >
180 <span className="hidden sm:inline">Get Extension</span>
181 <span className="sm:hidden">Install</span>
182 </a>
183 </div>
184 </div>
185 </nav>
186
187 <section className="relative overflow-hidden">
188 <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" />
189
190 <div className="max-w-4xl mx-auto px-6 pt-8 pb-20 md:pt-16 md:pb-28 text-center relative z-10">
191 <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-10">
192 <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">
193 <div className="flex items-center -space-x-2">
194 <a
195 href="https://github.com/margin-at"
196 target="_blank"
197 rel="noreferrer"
198 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"
199 title="GitHub"
200 >
201 <Github size={15} />
202 </a>
203 <a
204 href="https://tangled.org/margin.at/margin"
205 target="_blank"
206 rel="noreferrer"
207 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"
208 title="Tangled"
209 >
210 <TangledIcon
211 size={16}
212 className="text-surface-600 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white transition-colors"
213 />
214 </a>
215 </div>
216 <span className="pr-4 pl-0.5 text-[13px] font-semibold text-surface-600 dark:text-surface-300">
217 Fully open source{" "}
218 <span className="text-primary-500 font-normal">✨</span>
219 </span>
220 </div>
221 </div>
222
223 <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">
224 Write on the margins <br className="hidden sm:block" />
225 <span className="text-primary-600 dark:text-primary-400">
226 of the internet.
227 </span>
228 </h1>
229
230 <p className="text-lg md:text-xl text-surface-500 dark:text-surface-400 max-w-2xl mx-auto leading-relaxed mb-10">
231 Margin is an open annotation layer for the internet. Highlight text,
232 leave notes, and bookmark pages, all stored on your decentralized
233 identity with the{" "}
234 <a
235 href="https://atproto.com"
236 target="_blank"
237 rel="noreferrer"
238 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"
239 >
240 AT Protocol
241 </a>
242 . Not locked in a silo.
243 </p>
244
245 <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-4">
246 <Link
247 to={user ? "/home" : "/login"}
248 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"
249 >
250 {user ? "Open App" : "Get Started"}
251 <ArrowRight
252 size={18}
253 className="transition-transform group-hover:translate-x-1"
254 />
255 </Link>
256 <a
257 href={extensionLink}
258 target="_blank"
259 rel="noopener noreferrer"
260 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"
261 >
262 <ExtensionIcon size={18} />
263 Install for {extensionLabel}
264 </a>
265 </div>
266 </div>
267 </section>
268
269 <section className="max-w-5xl mx-auto px-6 py-20 md:py-24">
270 <div className="text-center mb-12">
271 <h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight text-surface-900 dark:text-white mb-4">
272 Everything you need to engage with the web
273 </h2>
274 <p className="text-surface-500 dark:text-surface-400 max-w-xl mx-auto leading-relaxed">
275 More than bookmarks. A full toolkit for reading, thinking, and
276 sharing on the open web.
277 </p>
278 </div>
279
280 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
281 <FeatureCard
282 icon={MessageSquareText}
283 title="Annotations"
284 description="Leave notes on any web page. Start discussions, share insights, or just jot down your thoughts for later."
285 accent
286 />
287 <FeatureCard
288 icon={Highlighter}
289 title="Highlights"
290 description="Select and highlight text on any page with customizable colors. Your highlights are rendered inline with the CSS Highlights API."
291 />
292 <FeatureCard
293 icon={Bookmark}
294 title="Bookmarks"
295 description="Save pages with one click or a keyboard shortcut. All your bookmarks are synced to your AT Protocol identity."
296 />
297 <FeatureCard
298 icon={FolderOpen}
299 title="Collections"
300 description="Organize your annotations, highlights, and bookmarks into themed collections. Share them publicly or keep them private."
301 />
302 <FeatureCard
303 icon={Users}
304 title="Social Discovery"
305 description="See what others are saying about the pages you visit. Discover annotations, trending tags, and connect with other readers."
306 />
307 <FeatureCard
308 icon={Hash}
309 title="Tags & Search"
310 description="Tag your annotations for easy retrieval. Search by URL, tag, or content to find exactly what you're looking for."
311 />
312 </div>
313 </section>
314
315 <section className="bg-white/50 dark:bg-surface-800/50 border-y border-surface-200/60 dark:border-surface-800/60">
316 <div className="max-w-5xl mx-auto px-6 py-20 md:py-24">
317 <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
318 <div>
319 <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">
320 <ExtensionIcon size={13} />
321 Browser Extension
322 </div>
323 <h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight text-surface-900 dark:text-white mb-4">
324 Your annotation toolkit,
325 <br />
326 right in the browser
327 </h2>
328 <p className="text-surface-500 dark:text-surface-400 leading-relaxed mb-8">
329 The Margin extension brings the full annotation experience
330 directly into every page you visit. Just select, annotate, and
331 go.
332 </p>
333
334 <div className="space-y-5">
335 <ExtensionFeature
336 icon={Eye}
337 title="Inline Overlay"
338 description="See annotations and highlights rendered directly on the page. Uses the CSS Highlights API for beautiful, native-feeling text underlines."
339 />
340 <ExtensionFeature
341 icon={MousePointerClick}
342 title="Context Menu & Selection"
343 description="Right-click any selected text to annotate, highlight, or quote it. Or just right-click the page to bookmark it instantly."
344 />
345 <ExtensionFeature
346 icon={Keyboard}
347 title="Keyboard Shortcuts"
348 description="Toggle the overlay, bookmark the current page, or annotate selected text without reaching for the mouse."
349 />
350 <ExtensionFeature
351 icon={PanelRight}
352 title="Side Panel"
353 description="Open the Margin side panel to browse annotations, bookmarks, and collections without leaving the page you're reading."
354 />
355 </div>
356
357 <div className="flex flex-col sm:flex-row gap-3 mt-8 flex-wrap">
358 <a
359 href={extensionLink}
360 target="_blank"
361 rel="noopener noreferrer"
362 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"
363 >
364 <ExtensionIcon size={15} />
365 Install for {extensionLabel}
366 <ExternalLink size={12} />
367 </a>
368 {browser !== "chrome" && (
369 <a
370 href="https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa"
371 target="_blank"
372 rel="noopener noreferrer"
373 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"
374 >
375 <Chrome size={15} />
376 Chrome
377 <ExternalLink size={12} />
378 </a>
379 )}
380 {browser !== "firefox" && (
381 <a
382 href="https://addons.mozilla.org/en-US/firefox/addon/margin/"
383 target="_blank"
384 rel="noopener noreferrer"
385 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"
386 >
387 <FaFirefox size={15} />
388 Firefox
389 <ExternalLink size={12} />
390 </a>
391 )}
392 {browser !== "edge" && (
393 <a
394 href="https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn"
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 <FaEdge size={15} />
400 Edge
401 <ExternalLink size={12} />
402 </a>
403 )}
404 <a
405 href="https://www.icloud.com/shortcuts/1e33ebf52f55431fae1e187cfe9738c3"
406 target="_blank"
407 rel="noopener noreferrer"
408 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"
409 >
410 <AppleIcon size={15} />
411 iOS Shortcut
412 <ExternalLink size={12} />
413 </a>
414 </div>
415 </div>
416
417 <div className="relative hidden lg:block">
418 <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">
419 <div className="flex items-center gap-2 mb-4">
420 <div className="flex gap-1.5">
421 <div className="w-3 h-3 rounded-full bg-red-400/60" />
422 <div className="w-3 h-3 rounded-full bg-yellow-400/60" />
423 <div className="w-3 h-3 rounded-full bg-green-400/60" />
424 </div>
425 <div className="flex-1 mx-3 bg-surface-200 dark:bg-surface-700 rounded-md h-6 flex items-center px-3">
426 <span className="text-[10px] text-surface-400 truncate">
427 example.com/article/how-to-think-clearly
428 </span>
429 </div>
430 </div>
431
432 <div className="space-y-3 text-sm text-surface-600 dark:text-surface-300 leading-relaxed">
433 <div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-3/4" />
434 <div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-full" />
435 <div className="flex gap-0.5 flex-wrap items-center">
436 <div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-1/4" />
437 <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">
438 The point here is that Margin is indeed
439 </span>
440 <div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-1/5" />
441 </div>
442 <div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-5/6" />
443 <div className="flex gap-0.5 flex-wrap items-center">
444 <div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-2/5" />
445 <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">
446 the best thing ever
447 </span>
448 <div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-1/4" />
449 </div>
450 <div className="h-3 bg-surface-200 dark:bg-surface-700 rounded w-2/3" />
451 </div>
452
453 <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">
454 <div className="flex items-center gap-2 mb-2">
455 <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">
456 S
457 </div>
458 <span className="text-xs font-semibold text-surface-900 dark:text-white">
459 @scan.margin.cafe
460 </span>
461 </div>
462 <p className="text-xs text-surface-600 dark:text-surface-300 leading-relaxed">
463 I agree, Margin is just so good, like the other day I was
464 drinking some of that Margin for breakfast
465 </p>
466 <div className="flex items-center gap-3 mt-2.5 pt-2 border-t border-surface-100 dark:border-surface-700">
467 <span className="text-[10px] text-surface-400 flex items-center gap-1">
468 <Heart size={10} /> 3
469 </span>
470 <span className="text-[10px] text-surface-400 flex items-center gap-1">
471 <MessageSquareText size={10} /> 1
472 </span>
473 </div>
474 </div>
475 </div>
476 </div>
477 </div>
478 </div>
479 </section>
480
481 <section className="max-w-5xl mx-auto px-6 py-20 md:py-24">
482 <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
483 <div>
484 <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">
485 <Shield size={13} />
486 Decentralized
487 </div>
488 <h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight text-surface-900 dark:text-white mb-4">
489 Your data, your identity
490 </h2>
491 <p className="text-surface-500 dark:text-surface-400 leading-relaxed mb-6">
492 Margin is built on the{" "}
493 <a
494 href="https://atproto.com"
495 target="_blank"
496 rel="noreferrer"
497 className="text-primary-600 dark:text-primary-400 hover:underline font-medium"
498 >
499 AT Protocol
500 </a>
501 , the open protocol that powers apps like Bluesky. Your
502 annotations, highlights, and bookmarks are stored in your personal
503 data repository, not locked in a silo.
504 </p>
505 <ul className="space-y-3 text-sm text-surface-600 dark:text-surface-300">
506 <li className="flex items-start gap-3">
507 <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">
508 <div className="w-1.5 h-1.5 rounded-full bg-primary-600 dark:bg-primary-400" />
509 </div>
510 Sign in with your AT Protocol handle, no new account needed
511 </li>
512 <li className="flex items-start gap-3">
513 <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">
514 <div className="w-1.5 h-1.5 rounded-full bg-primary-600 dark:bg-primary-400" />
515 </div>
516 Your data lives in your PDS, portable and under your control
517 </li>
518 <li className="flex items-start gap-3">
519 <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">
520 <div className="w-1.5 h-1.5 rounded-full bg-primary-600 dark:bg-primary-400" />
521 </div>
522 Custom Lexicon schemas for annotations, highlights, collections
523 & more
524 </li>
525 <li className="flex items-start gap-3">
526 <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">
527 <div className="w-1.5 h-1.5 rounded-full bg-primary-600 dark:bg-primary-400" />
528 </div>
529 Fully open source, check out the code and contribute
530 </li>
531 </ul>
532 </div>
533
534 <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">
535 <div className="flex items-center gap-2 mb-4">
536 <div className="text-xs text-surface-500">lexicon</div>
537 <div className="text-xs text-primary-400 px-2 py-0.5 rounded bg-primary-400/10">
538 at.margin.annotation
539 </div>
540 </div>
541 <div className="space-y-1 text-[13px] leading-relaxed">
542 <span className="text-surface-500">{"{"}</span>
543 <div className="pl-4">
544 <span className="text-green-400">"type"</span>
545 <span className="text-surface-400">: </span>
546 <span className="text-amber-400">"record"</span>
547 <span className="text-surface-400">,</span>
548 </div>
549 <div className="pl-4">
550 <span className="text-green-400">"record"</span>
551 <span className="text-surface-400">: {"{"}</span>
552 </div>
553 <div className="pl-8">
554 <span className="text-green-400">"body"</span>
555 <span className="text-surface-400">: </span>
556 <span className="text-amber-400">"Great insight..."</span>
557 <span className="text-surface-400">,</span>
558 </div>
559 <div className="pl-8">
560 <span className="text-green-400">"target"</span>
561 <span className="text-surface-400">: {"{"}</span>
562 </div>
563 <div className="pl-12">
564 <span className="text-green-400">"source"</span>
565 <span className="text-surface-400">: </span>
566 <span className="text-sky-400">"https://..."</span>
567 <span className="text-surface-400">,</span>
568 </div>
569 <div className="pl-12">
570 <span className="text-green-400">"selector"</span>
571 <span className="text-surface-400">: {"{"}</span>
572 </div>
573 <div className="pl-16">
574 <span className="text-green-400">"exact"</span>
575 <span className="text-surface-400">: </span>
576 <span className="text-amber-400">"selected text"</span>
577 </div>
578 <div className="pl-12">
579 <span className="text-surface-400">{"}"}</span>
580 </div>
581 <div className="pl-8">
582 <span className="text-surface-400">{"}"}</span>
583 </div>
584 <div className="pl-4">
585 <span className="text-surface-400">{"}"}</span>
586 </div>
587 <span className="text-surface-500">{"}"}</span>
588 </div>
589 </div>
590 </div>
591 </section>
592
593 <section className="border-t border-surface-200/60 dark:border-surface-800/60">
594 <div className="max-w-5xl mx-auto px-6 py-20 md:py-24 text-center">
595 <h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight text-surface-900 dark:text-white mb-4">
596 Start writing on the margins
597 </h2>
598 <p className="text-surface-500 dark:text-surface-400 max-w-lg mx-auto mb-8">
599 Join the open annotation layer. Sign in with your AT Protocol
600 identity and install the extension to get started.
601 </p>
602 <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
603 <Link
604 to={user ? "/home" : "/login"}
605 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"
606 >
607 {user ? "Open App" : "Sign in"}
608 <ArrowRight size={16} />
609 </Link>
610 <a
611 href="https://github.com/margin-at"
612 target="_blank"
613 rel="noreferrer"
614 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"
615 >
616 <Github size={16} />
617 View on GitHub
618 </a>
619 <a
620 href="https://tangled.org/margin.at/margin"
621 target="_blank"
622 rel="noreferrer"
623 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"
624 >
625 <TangledIcon size={16} />
626 View on Tangled
627 </a>
628 </div>
629 <div className="mt-10 flex items-center gap-5 flex-wrap justify-center">
630 <a
631 href="https://ko-fi.com/scan"
632 target="_blank"
633 rel="noopener noreferrer"
634 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"
635 >
636 <Coffee size={16} />
637 Ko-fi
638 </a>
639 </div>
640 </div>
641 </section>
642
643 <footer className="border-t border-surface-200/60 dark:border-surface-800/60">
644 <div className="max-w-5xl mx-auto px-6 py-8">
645 <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
646 <div className="flex items-center gap-2.5">
647 <img
648 src="/logo.svg"
649 alt="Margin"
650 className="w-5 h-5 opacity-60"
651 />
652 <span className="text-sm text-surface-400 dark:text-surface-500">
653 © 2026 Margin
654 </span>
655 </div>
656 <div className="flex items-center gap-5 text-sm text-surface-400 dark:text-surface-500">
657 {user && (
658 <Link
659 to="/home"
660 className="hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
661 >
662 Feed
663 </Link>
664 )}
665 <a
666 href="/privacy"
667 className="hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
668 >
669 Privacy
670 </a>
671 <a
672 href="/terms"
673 className="hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
674 >
675 Terms
676 </a>
677 <a
678 href="https://github.com/margin-at"
679 target="_blank"
680 rel="noreferrer"
681 className="hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
682 >
683 GitHub
684 </a>
685 <a
686 href="https://tangled.org/margin.at/margin"
687 target="_blank"
688 rel="noreferrer"
689 className="hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
690 >
691 Tangled
692 </a>
693 <a
694 href="mailto:hello@margin.at"
695 className="hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
696 >
697 Contact
698 </a>
699 <div className="w-px h-4 bg-surface-200 dark:bg-surface-700 ml-1" />
700 <button
701 onClick={cycleTheme}
702 title={
703 theme === "light"
704 ? "Light mode"
705 : theme === "dark"
706 ? "Dark mode"
707 : "System theme"
708 }
709 className="flex items-center gap-1.5 hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
710 >
711 {theme === "light" ? (
712 <Sun size={15} />
713 ) : theme === "dark" ? (
714 <Moon size={15} />
715 ) : (
716 <Monitor size={15} />
717 )}
718 <span className="hidden sm:inline capitalize">{theme}</span>
719 </button>
720 </div>
721 </div>
722 </div>
723 </footer>
724 </div>
725 );
726}