margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
some improvements to landing page
scanash.com
+128
-53
+128
-53
web/src/views/About.tsx
+128
-53
web/src/views/About.tsx
···
1
1
import React from "react";
2
2
import { useStore } from "@nanostores/react";
3
3
import { Link } from "react-router-dom";
4
-
import { $theme } from "../store/theme";
4
+
import { $theme, cycleTheme } from "../store/theme";
5
5
import { $user } from "../store/auth";
6
6
import {
7
7
MessageSquareText,
···
20
20
Hash,
21
21
Heart,
22
22
Eye,
23
+
Sun,
24
+
Moon,
25
+
Monitor,
23
26
} from "lucide-react";
24
-
import { AppleIcon } from "../components/common/Icons";
27
+
import { AppleIcon, TangledIcon } from "../components/common/Icons";
25
28
import { FaFirefox, FaEdge } from "react-icons/fa";
26
29
27
30
function FeatureCard({
···
89
92
}
90
93
91
94
export default function About() {
92
-
useStore($theme); // ensure theme is applied on this page
95
+
const theme = useStore($theme); // ensure theme is applied on this page
93
96
const user = useStore($user);
94
97
95
98
const [browser] = React.useState<
···
115
118
browser === "firefox" ? FaFirefox : browser === "edge" ? FaEdge : Chrome;
116
119
const extensionLabel =
117
120
browser === "firefox" ? "Firefox" : browser === "edge" ? "Edge" : "Chrome";
121
+
122
+
const [isScrolled, setIsScrolled] = React.useState(false);
123
+
124
+
React.useEffect(() => {
125
+
const handleScroll = () => {
126
+
setIsScrolled(window.scrollY > 20);
127
+
};
128
+
window.addEventListener("scroll", handleScroll, { passive: true });
129
+
return () => window.removeEventListener("scroll", handleScroll);
130
+
}, []);
118
131
119
132
return (
120
133
<div className="min-h-screen bg-surface-100 dark:bg-surface-900">
121
-
<nav className="sticky top-0 z-50 bg-white/80 dark:bg-surface-900/80 backdrop-blur-xl border-b border-surface-200/50 dark:border-surface-800/50">
122
-
<div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
134
+
<nav
135
+
className={`sticky top-0 z-50 transition-all duration-300 ${
136
+
isScrolled
137
+
? "bg-white/80 dark:bg-surface-900/80 backdrop-blur-xl border-b border-surface-200/50 dark:border-surface-800/50 shadow-sm"
138
+
: "bg-transparent border-b border-transparent"
139
+
}`}
140
+
>
141
+
<div
142
+
className={`max-w-5xl mx-auto px-4 sm:px-6 flex items-center justify-between transition-all duration-300 ${
143
+
isScrolled ? "h-14" : "h-24"
144
+
}`}
145
+
>
123
146
<div className="flex items-center gap-2.5">
124
147
<img src="/logo.svg" alt="Margin" className="w-7 h-7" />
125
148
<span className="font-display font-bold text-lg tracking-tight text-surface-900 dark:text-white">
126
149
Margin
127
150
</span>
128
151
</div>
129
-
<div className="flex items-center gap-1">
130
-
{user && (
152
+
<div className="flex items-center gap-1 sm:gap-2">
153
+
<div className="hidden md:flex items-center gap-1 mr-2">
154
+
{user && (
155
+
<Link
156
+
to="/home"
157
+
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"
158
+
>
159
+
Feed
160
+
</Link>
161
+
)}
162
+
</div>
163
+
164
+
{!user && (
131
165
<Link
132
-
to="/home"
133
-
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"
166
+
to="/login"
167
+
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"
134
168
>
135
-
Feed
169
+
Sign in
136
170
</Link>
137
171
)}
138
-
<a
139
-
href="https://github.com/margin-at"
140
-
target="_blank"
141
-
rel="noreferrer"
142
-
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"
143
-
>
144
-
GitHub
145
-
</a>
146
-
<a
147
-
href="https://tangled.org/margin.at/margin"
148
-
target="_blank"
149
-
rel="noreferrer"
150
-
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"
151
-
>
152
-
Tangled
153
-
</a>
154
-
{!user && (
155
-
<>
156
-
<div className="w-px h-5 bg-surface-200 dark:bg-surface-700 mx-1.5" />
157
-
<Link
158
-
to="/login"
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 rounded-lg hover:bg-surface-100 dark:hover:bg-surface-800"
160
-
>
161
-
Sign in
162
-
</Link>
163
-
</>
164
-
)}
172
+
165
173
<a
166
174
href={extensionLink}
167
175
target="_blank"
168
176
rel="noopener noreferrer"
169
-
className="text-[13px] font-semibold 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 ml-0.5"
177
+
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"
170
178
>
171
-
Get Extension
179
+
<span className="hidden sm:inline">Get Extension</span>
180
+
<span className="sm:hidden">Install</span>
172
181
</a>
173
182
</div>
174
183
</div>
175
184
</nav>
176
185
177
-
<section>
178
-
<div className="max-w-3xl mx-auto px-6 pt-24 pb-20 md:pt-32 md:pb-28 text-center">
179
-
<p className="text-[13px] font-medium text-surface-400 dark:text-surface-500 tracking-wide uppercase mb-5">
180
-
Open-source web annotations
181
-
</p>
186
+
<section className="relative overflow-hidden">
187
+
<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" />
188
+
189
+
<div className="max-w-4xl mx-auto px-6 pt-8 pb-20 md:pt-16 md:pb-28 text-center relative z-10">
190
+
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-10">
191
+
<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">
192
+
<div className="flex items-center -space-x-2">
193
+
<a
194
+
href="https://github.com/margin-at"
195
+
target="_blank"
196
+
rel="noreferrer"
197
+
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"
198
+
title="GitHub"
199
+
>
200
+
<Github size={15} />
201
+
</a>
202
+
<a
203
+
href="https://tangled.org/margin.at/margin"
204
+
target="_blank"
205
+
rel="noreferrer"
206
+
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"
207
+
title="Tangled"
208
+
>
209
+
<TangledIcon
210
+
size={16}
211
+
className="text-surface-600 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white transition-colors"
212
+
/>
213
+
</a>
214
+
</div>
215
+
<span className="pr-4 pl-0.5 text-[13px] font-semibold text-surface-600 dark:text-surface-300">
216
+
Fully open source{" "}
217
+
<span className="text-primary-500 font-normal">✨</span>
218
+
</span>
219
+
</div>
220
+
</div>
182
221
183
-
<h1 className="font-display text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-surface-900 dark:text-white leading-[1.08] mb-6">
184
-
Write on the margins of the internet.
222
+
<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">
223
+
Write on the margins <br className="hidden sm:block" />
224
+
<span className="text-primary-600 dark:text-primary-400">
225
+
of the internet.
226
+
</span>
185
227
</h1>
186
228
187
-
<p className="text-base md:text-lg text-surface-500 dark:text-surface-400 max-w-xl mx-auto leading-relaxed mb-10">
229
+
<p className="text-lg md:text-xl text-surface-500 dark:text-surface-400 max-w-2xl mx-auto leading-relaxed mb-10">
188
230
Margin is an open annotation layer for the internet. Highlight text,
189
231
leave notes, and bookmark pages, all stored on your decentralized
190
232
identity with the{" "}
···
192
234
href="https://atproto.com"
193
235
target="_blank"
194
236
rel="noreferrer"
195
-
className="text-surface-700 dark:text-surface-300 hover:underline"
237
+
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"
196
238
>
197
239
AT Protocol
198
240
</a>
199
241
. Not locked in a silo.
200
242
</p>
201
243
202
-
<div className="flex flex-col sm:flex-row items-center justify-center gap-3">
244
+
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-4">
203
245
<Link
204
246
to={user ? "/home" : "/login"}
205
-
className="inline-flex items-center gap-2 px-7 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-100 transition-colors"
247
+
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"
206
248
>
207
249
{user ? "Open App" : "Get Started"}
208
-
<ArrowRight size={16} />
250
+
<ArrowRight
251
+
size={18}
252
+
className="transition-transform group-hover:translate-x-1"
253
+
/>
209
254
</Link>
210
255
<a
211
256
href={extensionLink}
212
257
target="_blank"
213
258
rel="noopener noreferrer"
214
-
className="inline-flex items-center gap-2 px-7 py-3 bg-white 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"
259
+
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"
215
260
>
216
-
<ExtensionIcon size={16} />
261
+
<ExtensionIcon size={18} />
217
262
Install for {extensionLabel}
218
263
</a>
219
264
</div>
···
570
615
<Github size={16} />
571
616
View on GitHub
572
617
</a>
618
+
<a
619
+
href="https://tangled.org/margin.at/margin"
620
+
target="_blank"
621
+
rel="noreferrer"
622
+
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"
623
+
>
624
+
<TangledIcon size={16} />
625
+
View on Tangled
626
+
</a>
573
627
</div>
574
628
</div>
575
629
</section>
···
630
684
>
631
685
Contact
632
686
</a>
687
+
<div className="w-px h-4 bg-surface-200 dark:bg-surface-700 ml-1" />
688
+
<button
689
+
onClick={cycleTheme}
690
+
title={
691
+
theme === "light"
692
+
? "Light mode"
693
+
: theme === "dark"
694
+
? "Dark mode"
695
+
: "System theme"
696
+
}
697
+
className="flex items-center gap-1.5 hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
698
+
>
699
+
{theme === "light" ? (
700
+
<Sun size={15} />
701
+
) : theme === "dark" ? (
702
+
<Moon size={15} />
703
+
) : (
704
+
<Monitor size={15} />
705
+
)}
706
+
<span className="hidden sm:inline capitalize">{theme}</span>
707
+
</button>
633
708
</div>
634
709
</div>
635
710
</div>