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