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