rickub
nandi/gleanpublic⑂ Fork 0
⑂ 0d1d237
Branches
claude/modal-container-min-76527a main View all branches → View all tags →
Commits
⬇ Clone ▾
git clone https://git.rickub.com/nandi/glean.git
git clone ssh://git@rickub.com/nandi/glean.git

Host key fingerprint (ed25519): SHA256:iycHnxEyq0Q7uyVpB7JlznP0G7JrTPXLYRcAU5CSLhc — verify it before your first connect.

Improve landing pageUnverified

Julien Robert committed 2026-05-15T12:02:33+02:00 Browse files
0d1d237 parent: e4922e2
modified internal/tmpl/index.html +188 -83
@@ -1,8 +1,15 @@
11 {{define "index.html"}}
22 <style>
3-.landing-hero { padding-top: 4rem; padding-bottom: 3rem; }
4-@media (min-width: 768px) { .landing-hero { padding-top: 6rem; padding-bottom: 5rem; } }
5-@media (min-width: 1024px) { .landing-hero { padding-top: 7rem; padding-bottom: 6rem; } }
3+.landing-hero { padding-top: 3rem; padding-bottom: 2.5rem; }
4+@media (min-width: 768px) { .landing-hero { padding-top: 5rem; padding-bottom: 4rem; } }
5+@media (min-width: 1024px) { .landing-hero { padding-top: 6rem; padding-bottom: 5rem; } }
6+
7+.landing-annotation-highlight {
8+ background: rgba(0,117,74,0.20);
9+ border-bottom: 2px solid rgba(0,117,74,0.45);
10+ padding: 1px 2px;
11+ border-radius: 2px;
12+}
613 </style>
714
815 <section class="landing-hero">
@@ -31,64 +38,66 @@
3138
3239 <div class="hidden lg:block">
3340 <div class="bg-spot-surface rounded-2xl shadow-spot-heavy overflow-hidden">
34- <div class="px-5 py-3.5 border-b border-spot-divider flex items-center gap-2">
35- <div class="w-2.5 h-2.5 rounded-full bg-spot-red/80"></div>
36- <div class="w-2.5 h-2.5 rounded-full bg-spot-orange/80"></div>
37- <div class="w-2.5 h-2.5 rounded-full bg-spot-green/80"></div>
38- <span class="text-xs text-spot-muted ml-3 font-medium">Dashboard</span>
41+ <div class="px-4 py-2.5 border-b border-spot-divider flex items-center gap-2 bg-spot-bg/50">
42+ <div class="flex gap-1.5">
43+ <div class="w-2.5 h-2.5 rounded-full bg-spot-red/80"></div>
44+ <div class="w-2.5 h-2.5 rounded-full bg-spot-orange/80"></div>
45+ <div class="w-2.5 h-2.5 rounded-full bg-spot-green/80"></div>
46+ </div>
47+ <span class="text-[11px] text-spot-muted ml-2 font-medium">Glean &mdash; Dashboard</span>
3948 </div>
40- <div class="p-3.5 space-y-1.5">
41- <div class="rounded-xl px-4 py-3.5 flex items-start gap-3 hover:bg-spot-hover transition cursor-default">
42- <div class="w-9 h-9 rounded-lg bg-spot-green/15 shrink-0 flex items-center justify-center">
43- <svg class="w-4.5 h-4.5 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"/></svg>
49+ <div class="p-3 space-y-1.5">
50+ <div class="rounded-xl px-4 py-3 bg-spot-hover/40 flex items-start gap-3">
51+ <div class="w-8 h-8 rounded-lg bg-spot-green/15 shrink-0 flex items-center justify-center">
52+ <svg class="w-4 h-4 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"/></svg>
4453 </div>
4554 <div class="flex-1 min-w-0">
46- <div class="text-sm font-semibold text-spot-text leading-tight">Why the open web is making a comeback</div>
47- <div class="text-xs text-spot-secondary mt-1">theopenweb.press &middot; 2h ago</div>
55+ <div class="text-[13px] font-bold text-spot-text leading-tight">Why the open web is making a comeback</div>
56+ <div class="text-[11px] text-spot-secondary mt-0.5">theopenweb.press &middot; 2h ago</div>
4857 </div>
49- <div class="flex items-center gap-1 text-spot-green shrink-0">
50- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg>
51- <span class="text-xs font-medium">12</span>
58+ <div class="flex items-center gap-1 text-spot-green shrink-0 text-xs font-medium">
59+ <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"/></svg>
60+ 12
5261 </div>
5362 </div>
54- <div class="rounded-xl px-4 py-3.5 flex items-start gap-3 hover:bg-spot-hover transition cursor-default">
55- <div class="w-9 h-9 rounded-lg bg-spot-blue/15 shrink-0 flex items-center justify-center">
56- <svg class="w-4.5 h-4.5 text-spot-blue" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z"/></svg>
63+ <div class="rounded-xl px-4 py-3 border-l-2 border-spot-green/80 flex items-start gap-3">
64+ <div class="w-8 h-8 rounded-lg bg-spot-blue/15 shrink-0 flex items-center justify-center">
65+ <svg class="w-4 h-4 text-spot-blue" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z"/></svg>
5766 </div>
5867 <div class="flex-1 min-w-0">
59- <div class="text-sm font-semibold text-spot-text leading-tight">How to take back control of your reading list</div>
60- <div class="text-xs text-spot-secondary mt-1">readwrite.cafe &middot; 5h ago</div>
68+ <div class="text-[13px] font-bold text-spot-text leading-tight">How to take back control of your reading list</div>
69+ <div class="text-[11px] text-spot-secondary mt-0.5">readwrite.cafe &middot; 5h ago</div>
6170 </div>
6271 </div>
63- <div class="rounded-xl px-4 py-3.5 flex items-start gap-3 hover:bg-spot-hover transition cursor-default">
64- <div class="w-9 h-9 rounded-lg bg-spot-orange/15 shrink-0 flex items-center justify-center">
65- <svg class="w-4.5 h-4.5 text-spot-orange" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"/></svg>
72+ <div class="rounded-xl px-4 py-3 flex items-start gap-3">
73+ <div class="w-8 h-8 rounded-lg bg-spot-orange/15 shrink-0 flex items-center justify-center">
74+ <svg class="w-4 h-4 text-spot-orange" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"/></svg>
6675 </div>
6776 <div class="flex-1 min-w-0">
68- <div class="text-sm font-semibold text-spot-text leading-tight">RSS is not dead, it was just resting</div>
69- <div class="text-xs text-spot-secondary mt-1">syndication.xyz &middot; 8h ago</div>
77+ <div class="text-[13px] font-bold text-spot-text leading-tight">RSS is not dead, it was just resting</div>
78+ <div class="text-[11px] text-spot-secondary mt-0.5">syndication.xyz &middot; 8h ago</div>
7079 </div>
71- <div class="flex items-center gap-1 text-spot-secondary shrink-0">
72- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
73- <span class="text-xs">3</span>
80+ <div class="flex items-center gap-1 text-spot-secondary shrink-0 text-xs">
81+ <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
82+ 3
7483 </div>
7584 </div>
76- <div class="rounded-xl px-4 py-3.5 flex items-start gap-3 hover:bg-spot-hover transition cursor-default">
77- <div class="w-9 h-9 rounded-lg bg-spot-green/15 shrink-0 flex items-center justify-center">
78- <svg class="w-4.5 h-4.5 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
85+ <div class="rounded-xl px-4 py-3 flex items-start gap-3">
86+ <div class="w-8 h-8 rounded-lg bg-spot-green/15 shrink-0 flex items-center justify-center">
87+ <svg class="w-4 h-4 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
7988 </div>
8089 <div class="flex-1 min-w-0">
81- <div class="text-sm font-semibold text-spot-text leading-tight">The case for owning your reading history</div>
82- <div class="text-xs text-spot-secondary mt-1">protocolweekly.io &middot; 1d ago</div>
90+ <div class="text-[13px] font-bold text-spot-text leading-tight">The case for owning your reading history</div>
91+ <div class="text-[11px] text-spot-secondary mt-0.5">protocolweekly.io &middot; 1d ago</div>
8392 </div>
8493 </div>
8594 </div>
86- <div class="px-5 py-3.5 border-t border-spot-divider flex items-center justify-between bg-spot-hover/30">
87- <div class="flex items-center gap-2 text-xs text-spot-muted">
88- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"/></svg>
95+ <div class="px-4 py-2.5 border-t border-spot-divider flex items-center justify-between bg-spot-hover/30">
96+ <div class="flex items-center gap-2 text-[11px] text-spot-muted">
97+ <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
8998 4 trending in your network
9099 </div>
91- <span class="text-xs text-spot-green font-bold">42 unread</span>
100+ <span class="text-[11px] text-spot-green font-bold">42 unread</span>
92101 </div>
93102 </div>
94103 </div>
@@ -96,60 +105,155 @@
96105 </div>
97106 </section>
98107
99-<section class="max-w-6xl mx-auto px-6 py-16">
100- <div class="text-center mb-12">
101- <h2 class="text-2xl md:text-3xl font-bold text-spot-text mb-3" style="letter-spacing: -0.025em;">Reading, reimagined</h2>
102- <p class="text-spot-secondary max-w-lg mx-auto">Everything you need to stay informed, discover great writing, and connect with fellow readers.</p>
103- </div>
104- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
105- <div class="text-center md:text-left">
106- <div class="w-10 h-10 rounded-xl bg-spot-green/15 flex items-center justify-center mb-4 mx-auto md:mx-0">
107- <svg class="w-5 h-5 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-7-1a1 1 0 11-2 0 1 1 0 012 0z"/></svg>
108+<section class="py-16 md:py-24">
109+ <div class="w-full h-px bg-gradient-to-r from-transparent via-spot-divider to-transparent mb-16 md:mb-20"></div>
110+ <div class="max-w-6xl mx-auto px-6">
111+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
112+ <div>
113+ <h2 class="text-2xl md:text-3xl font-bold text-spot-text mb-4" style="letter-spacing: -0.025em;">Read with intent</h2>
114+ <p class="text-spot-secondary leading-relaxed mb-6">
115+ Highlight a passage that resonates. Write a note to your future self or friends. Tag it, come back to it later. Your annotations live in your personal data repository.
116+ </p>
117+ <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
118+ <span class="flex items-center gap-2 text-spot-secondary">
119+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
120+ Highlight passages
121+ </span>
122+ <span class="flex items-center gap-2 text-spot-secondary">
123+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
124+ Notes &amp; tags
125+ </span>
126+ <span class="flex items-center gap-2 text-spot-secondary">
127+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
128+ Save articles
129+ </span>
130+ </div>
108131 </div>
109- <h3 class="font-bold text-spot-text mb-2">Subscribe</h3>
110- <p class="text-sm text-spot-secondary leading-relaxed">Add any RSS or Atom feed. Import your existing subscriptions from another reader via OPML. Highlight passages and leave notes on articles.</p>
111- </div>
112- <div class="text-center md:text-left">
113- <div class="w-10 h-10 rounded-xl bg-spot-green/15 flex items-center justify-center mb-4 mx-auto md:mx-0">
114- <svg class="w-5 h-5 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
132+ <div class="bg-spot-surface rounded-2xl shadow-spot-heavy overflow-hidden">
133+ <div class="px-5 py-3.5 border-b border-spot-divider flex items-center gap-3">
134+ <div class="w-6 h-6 rounded-full bg-spot-green/15 flex items-center justify-center">
135+ <svg class="w-3 h-3 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/></svg>
136+ </div>
137+ <div>
138+ <div class="text-[13px] font-semibold text-spot-text leading-tight">The architecture of attention</div>
139+ <div class="text-[11px] text-spot-secondary">readingdesign.org</div>
140+ </div>
141+ </div>
142+ <div class="px-5 py-4 text-sm text-spot-body leading-[1.75]">
143+ <p>The real problem isn't information overload &mdash; it's that we've <span class="landing-annotation-highlight">lost the habit of reading deeply</span>. Scrolling replaces absorbing. Skimming replaces understanding. The feed never ends, but comprehension does.</p>
144+ </div>
145+ <div class="px-5 pb-4">
146+ <div class="bg-spot-hover rounded-xl p-3.5 border-l-2 border-spot-green">
147+ <p class="text-sm text-spot-text italic leading-relaxed">"lost the habit of reading deeply"</p>
148+ <p class="text-xs text-spot-secondary mt-2">This is exactly what I've been feeling. The shift happened so gradually I didn't notice.</p>
149+ <div class="flex gap-1.5 mt-2">
150+ <span class="text-[11px] bg-spot-surface text-spot-secondary px-2 py-0.5 rounded-pill">reading</span>
151+ <span class="text-[11px] bg-spot-surface text-spot-secondary px-2 py-0.5 rounded-pill">attention</span>
152+ </div>
153+ </div>
154+ </div>
115155 </div>
116- <h3 class="font-bold text-spot-text mb-2">Discover</h3>
117- <p class="text-sm text-spot-secondary leading-relaxed">Find new articles and feeds through personalized recommendations based on what your circle and readers with similar tastes are subscribing to.</p>
118156 </div>
119- <div class="text-center md:text-left">
120- <div class="w-10 h-10 rounded-xl bg-spot-green/15 flex items-center justify-center mb-4 mx-auto md:mx-0">
121- <svg class="w-5 h-5 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
157+ </div>
158+</section>
159+
160+<section class="py-16 md:py-24 border-t border-spot-divider">
161+ <div class="max-w-6xl mx-auto px-6">
162+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
163+ <div class="order-2 lg:order-1">
164+ <div class="space-y-2">
165+ <div class="bg-spot-surface rounded-xl px-4 py-3.5 flex items-start gap-3 shadow-spot">
166+ <div class="w-8 h-8 rounded-lg bg-spot-green/15 shrink-0 flex items-center justify-center">
167+ <svg class="w-4 h-4 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"/></svg>
168+ </div>
169+ <div class="flex-1 min-w-0">
170+ <div class="text-[13px] font-semibold text-spot-text leading-tight">Why the open web is making a comeback</div>
171+ <div class="text-[11px] text-spot-secondary mt-0.5">theopenweb.press</div>
172+ </div>
173+ <div class="flex items-center gap-1 text-spot-green shrink-0 text-xs font-medium">
174+ <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"/></svg>
175+ 12
176+ </div>
177+ </div>
178+ <div class="bg-spot-surface rounded-xl px-4 py-3.5 flex items-start gap-3 shadow-spot">
179+ <div class="w-8 h-8 rounded-lg bg-spot-orange/15 shrink-0 flex items-center justify-center">
180+ <svg class="w-4 h-4 text-spot-orange" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"/></svg>
181+ </div>
182+ <div class="flex-1 min-w-0">
183+ <div class="text-[13px] font-semibold text-spot-text leading-tight">RSS is not dead, it was just resting</div>
184+ <div class="text-[11px] text-spot-secondary mt-0.5">syndication.xyz</div>
185+ </div>
186+ <div class="flex items-center gap-1 text-spot-secondary shrink-0 text-xs">
187+ <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
188+ 3
189+ </div>
190+ </div>
191+ <div class="bg-spot-surface rounded-xl px-4 py-3.5 flex items-start gap-3 shadow-spot">
192+ <div class="w-8 h-8 rounded-lg bg-spot-blue/15 shrink-0 flex items-center justify-center">
193+ <svg class="w-4 h-4 text-spot-blue" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z"/></svg>
194+ </div>
195+ <div class="flex-1 min-w-0">
196+ <div class="text-[13px] font-semibold text-spot-text leading-tight">How to take back control of your reading list</div>
197+ <div class="text-[11px] text-spot-secondary mt-0.5">readwrite.cafe</div>
198+ </div>
199+ </div>
200+ </div>
201+ </div>
202+ <div class="order-1 lg:order-2">
203+ <h2 class="text-2xl md:text-3xl font-bold text-spot-text mb-4" style="letter-spacing: -0.025em;">See what your circle reads</h2>
204+ <p class="text-spot-secondary leading-relaxed mb-6">
205+ Trending articles from your network. Feed recommendations based on overlapping subscriptions. Discover people who read what you read. Social discovery, not algorithmic manipulation.
206+ </p>
207+ <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
208+ <span class="flex items-center gap-2 text-spot-secondary">
209+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
210+ Trending articles
211+ </span>
212+ <span class="flex items-center gap-2 text-spot-secondary">
213+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
214+ Article suggestions
215+ </span>
216+ <span class="flex items-center gap-2 text-spot-secondary">
217+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
218+ Feed suggestions
219+ </span>
220+ <span class="flex items-center gap-2 text-spot-secondary">
221+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
222+ Reader suggestions
223+ </span>
224+ </div>
122225 </div>
123- <h3 class="font-bold text-spot-text mb-2">Connect</h3>
124- <p class="text-sm text-spot-secondary leading-relaxed">Find and follow people with similar reading tastes. See what they read and share. Build your circle on the Atmosphere.</p>
125226 </div>
126227 </div>
127228 </section>
128229
129230 <section class="bg-spot-green-house">
130- <div class="max-w-6xl mx-auto px-6 py-16">
131- <div class="max-w-2xl">
231+ <div class="max-w-6xl mx-auto px-6 py-16 md:py-20">
232+ <div class="max-w-2xl mb-10">
132233 <h2 class="text-2xl md:text-3xl font-bold text-white mb-4" style="letter-spacing: -0.025em;">Your feeds. Your data. Yours.</h2>
133- <p class="text-[rgba(255,255,255,0.70)] leading-relaxed mb-8">
134- Glean stores subscriptions and annotations in your personal data repository (PDS) on the AT Protocol. Your social graph comes from your existing Bluesky or Atmosphere connections. Take your data anywhere. Glean will never show you ads or track you.
234+ <p class="text-[rgba(255,255,255,0.70)] leading-relaxed mb-3">
235+ Glean is part of the Atmosphere. Annotations are compatible with <a href="https://margin.at" target="_blank" class="text-spot-green hover:brightness-110 transition">Margin.at</a> notes, feeds with <a href="https://skyreader.app" target="_blank" class="text-spot-green hover:brightness-110 transition">Skyreader</a> subscriptions, and your social graph travels with you from <a href="https://bsky.social" target="_blank" class="text-spot-green hover:brightness-110 transition">Bluesky</a> and <a href="https://tangled.org" target="_blank" class="text-spot-green hover:brightness-110 transition">Tangled</a>. All on AT Protocol.
135236 </p>
136- <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
137- <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]">
138- <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
139- AT Protocol identity
140- </div>
141- <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]">
142- <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
143- Portable data
144- </div>
145- <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]">
146- <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
147- <a href="https://tangled.org/julien.rbrt.fr/glean" class="hover:text-white transition">Open source</a>
148- </div>
149- <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]">
150- <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
151- Self-hostable
152- </div>
237+ <p class="text-[rgba(255,255,255,0.50)] text-sm leading-relaxed">
238+ Privacy-first. No ads. No tracking.
239+ </p>
240+ </div>
241+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
242+ <div class="flex items-center gap-2.5 text-[rgba(255,255,255,0.70)] text-sm">
243+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
244+ AT Protocol identity
245+ </div>
246+ <div class="flex items-center gap-2.5 text-[rgba(255,255,255,0.70)] text-sm">
247+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
248+ Portable data
249+ </div>
250+ <div class="flex items-center gap-2.5 text-[rgba(255,255,255,0.70)] text-sm">
251+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
252+ <a href="https://tangled.org/julien.rbrt.fr/glean" class="hover:text-white transition">Open source</a>
253+ </div>
254+ <div class="flex items-center gap-2.5 text-[rgba(255,255,255,0.70)] text-sm">
255+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
256+ <a href="https://tangled.org/julien.rbrt.fr/glean" target="_blank" class="hover:text-white transition">Self-hostable</a>
153257 </div>
154258 </div>
155259 </div>
@@ -157,8 +261,9 @@
157261
158262 <section class="py-16 text-center">
159263 <div class="max-w-md mx-auto px-6">
264+ <div class="w-14 h-14 mx-auto mb-6">{{template "logo-icon"}}</div>
160265 <h2 class="text-2xl md:text-3xl font-bold text-spot-text mb-3" style="letter-spacing: -0.025em;">Start reading</h2>
161- <p class="text-spot-secondary mb-6 text-sm leading-relaxed">Sign in with your Bluesky handle or any Atmosphere account. Your network is already waiting.</p>
266+ <p class="text-spot-secondary mb-6 text-sm leading-relaxed">Sign in with your Bluesky handle or any Atmosphere account.</p>
162267 <a href="/auth/login" class="bg-spot-green text-white rounded-pill px-10 py-3.5 text-sm font-bold uppercase tracking-button hover:brightness-110 transition active:scale-[0.98] inline-flex items-center justify-center gap-2 shadow-spot">
163268 Get started
164269 </a>
@@ -1,8 +1,15 @@
1 {{define "index.html"}}1 {{define "index.html"}}
2 <style>2 <style>
3-.landing-hero { padding-top: 4rem; padding-bottom: 3rem; }3+.landing-hero { padding-top: 3rem; padding-bottom: 2.5rem; }
4-@media (min-width: 768px) { .landing-hero { padding-top: 6rem; padding-bottom: 5rem; } }4+@media (min-width: 768px) { .landing-hero { padding-top: 5rem; padding-bottom: 4rem; } }
5-@media (min-width: 1024px) { .landing-hero { padding-top: 7rem; padding-bottom: 6rem; } }5+@media (min-width: 1024px) { .landing-hero { padding-top: 6rem; padding-bottom: 5rem; } }
6+
7+.landing-annotation-highlight {
8+ background: rgba(0,117,74,0.20);
9+ border-bottom: 2px solid rgba(0,117,74,0.45);
10+ padding: 1px 2px;
11+ border-radius: 2px;
12+}
6 </style>13 </style>
7 14
8 <section class="landing-hero">15 <section class="landing-hero">
@@ -31,64 +38,66 @@
31 38
32 <div class="hidden lg:block">39 <div class="hidden lg:block">
33 <div class="bg-spot-surface rounded-2xl shadow-spot-heavy overflow-hidden">40 <div class="bg-spot-surface rounded-2xl shadow-spot-heavy overflow-hidden">
34- <div class="px-5 py-3.5 border-b border-spot-divider flex items-center gap-2">41+ <div class="px-4 py-2.5 border-b border-spot-divider flex items-center gap-2 bg-spot-bg/50">
35- <div class="w-2.5 h-2.5 rounded-full bg-spot-red/80"></div>42+ <div class="flex gap-1.5">
36- <div class="w-2.5 h-2.5 rounded-full bg-spot-orange/80"></div>43+ <div class="w-2.5 h-2.5 rounded-full bg-spot-red/80"></div>
37- <div class="w-2.5 h-2.5 rounded-full bg-spot-green/80"></div>44+ <div class="w-2.5 h-2.5 rounded-full bg-spot-orange/80"></div>
38- <span class="text-xs text-spot-muted ml-3 font-medium">Dashboard</span>45+ <div class="w-2.5 h-2.5 rounded-full bg-spot-green/80"></div>
46+ </div>
47+ <span class="text-[11px] text-spot-muted ml-2 font-medium">Glean &mdash; Dashboard</span>
39 </div>48 </div>
40- <div class="p-3.5 space-y-1.5">49+ <div class="p-3 space-y-1.5">
41- <div class="rounded-xl px-4 py-3.5 flex items-start gap-3 hover:bg-spot-hover transition cursor-default">50+ <div class="rounded-xl px-4 py-3 bg-spot-hover/40 flex items-start gap-3">
42- <div class="w-9 h-9 rounded-lg bg-spot-green/15 shrink-0 flex items-center justify-center">51+ <div class="w-8 h-8 rounded-lg bg-spot-green/15 shrink-0 flex items-center justify-center">
43- <svg class="w-4.5 h-4.5 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"/></svg>52+ <svg class="w-4 h-4 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"/></svg>
44 </div>53 </div>
45 <div class="flex-1 min-w-0">54 <div class="flex-1 min-w-0">
46- <div class="text-sm font-semibold text-spot-text leading-tight">Why the open web is making a comeback</div>55+ <div class="text-[13px] font-bold text-spot-text leading-tight">Why the open web is making a comeback</div>
47- <div class="text-xs text-spot-secondary mt-1">theopenweb.press &middot; 2h ago</div>56+ <div class="text-[11px] text-spot-secondary mt-0.5">theopenweb.press &middot; 2h ago</div>
48 </div>57 </div>
49- <div class="flex items-center gap-1 text-spot-green shrink-0">58+ <div class="flex items-center gap-1 text-spot-green shrink-0 text-xs font-medium">
50- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg>59+ <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"/></svg>
51- <span class="text-xs font-medium">12</span>60+ 12
52 </div>61 </div>
53 </div>62 </div>
54- <div class="rounded-xl px-4 py-3.5 flex items-start gap-3 hover:bg-spot-hover transition cursor-default">63+ <div class="rounded-xl px-4 py-3 border-l-2 border-spot-green/80 flex items-start gap-3">
55- <div class="w-9 h-9 rounded-lg bg-spot-blue/15 shrink-0 flex items-center justify-center">64+ <div class="w-8 h-8 rounded-lg bg-spot-blue/15 shrink-0 flex items-center justify-center">
56- <svg class="w-4.5 h-4.5 text-spot-blue" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z"/></svg>65+ <svg class="w-4 h-4 text-spot-blue" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z"/></svg>
57 </div>66 </div>
58 <div class="flex-1 min-w-0">67 <div class="flex-1 min-w-0">
59- <div class="text-sm font-semibold text-spot-text leading-tight">How to take back control of your reading list</div>68+ <div class="text-[13px] font-bold text-spot-text leading-tight">How to take back control of your reading list</div>
60- <div class="text-xs text-spot-secondary mt-1">readwrite.cafe &middot; 5h ago</div>69+ <div class="text-[11px] text-spot-secondary mt-0.5">readwrite.cafe &middot; 5h ago</div>
61 </div>70 </div>
62 </div>71 </div>
63- <div class="rounded-xl px-4 py-3.5 flex items-start gap-3 hover:bg-spot-hover transition cursor-default">72+ <div class="rounded-xl px-4 py-3 flex items-start gap-3">
64- <div class="w-9 h-9 rounded-lg bg-spot-orange/15 shrink-0 flex items-center justify-center">73+ <div class="w-8 h-8 rounded-lg bg-spot-orange/15 shrink-0 flex items-center justify-center">
65- <svg class="w-4.5 h-4.5 text-spot-orange" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"/></svg>74+ <svg class="w-4 h-4 text-spot-orange" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"/></svg>
66 </div>75 </div>
67 <div class="flex-1 min-w-0">76 <div class="flex-1 min-w-0">
68- <div class="text-sm font-semibold text-spot-text leading-tight">RSS is not dead, it was just resting</div>77+ <div class="text-[13px] font-bold text-spot-text leading-tight">RSS is not dead, it was just resting</div>
69- <div class="text-xs text-spot-secondary mt-1">syndication.xyz &middot; 8h ago</div>78+ <div class="text-[11px] text-spot-secondary mt-0.5">syndication.xyz &middot; 8h ago</div>
70 </div>79 </div>
71- <div class="flex items-center gap-1 text-spot-secondary shrink-0">80+ <div class="flex items-center gap-1 text-spot-secondary shrink-0 text-xs">
72- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>81+ <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
73- <span class="text-xs">3</span>82+ 3
74 </div>83 </div>
75 </div>84 </div>
76- <div class="rounded-xl px-4 py-3.5 flex items-start gap-3 hover:bg-spot-hover transition cursor-default">85+ <div class="rounded-xl px-4 py-3 flex items-start gap-3">
77- <div class="w-9 h-9 rounded-lg bg-spot-green/15 shrink-0 flex items-center justify-center">86+ <div class="w-8 h-8 rounded-lg bg-spot-green/15 shrink-0 flex items-center justify-center">
78- <svg class="w-4.5 h-4.5 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>87+ <svg class="w-4 h-4 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
79 </div>88 </div>
80 <div class="flex-1 min-w-0">89 <div class="flex-1 min-w-0">
81- <div class="text-sm font-semibold text-spot-text leading-tight">The case for owning your reading history</div>90+ <div class="text-[13px] font-bold text-spot-text leading-tight">The case for owning your reading history</div>
82- <div class="text-xs text-spot-secondary mt-1">protocolweekly.io &middot; 1d ago</div>91+ <div class="text-[11px] text-spot-secondary mt-0.5">protocolweekly.io &middot; 1d ago</div>
83 </div>92 </div>
84 </div>93 </div>
85 </div>94 </div>
86- <div class="px-5 py-3.5 border-t border-spot-divider flex items-center justify-between bg-spot-hover/30">95+ <div class="px-4 py-2.5 border-t border-spot-divider flex items-center justify-between bg-spot-hover/30">
87- <div class="flex items-center gap-2 text-xs text-spot-muted">96+ <div class="flex items-center gap-2 text-[11px] text-spot-muted">
88- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"/></svg>97+ <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
89 4 trending in your network98 4 trending in your network
90 </div>99 </div>
91- <span class="text-xs text-spot-green font-bold">42 unread</span>100+ <span class="text-[11px] text-spot-green font-bold">42 unread</span>
92 </div>101 </div>
93 </div>102 </div>
94 </div>103 </div>
@@ -96,60 +105,155 @@
96 </div>105 </div>
97 </section>106 </section>
98 107
99-<section class="max-w-6xl mx-auto px-6 py-16">108+<section class="py-16 md:py-24">
100- <div class="text-center mb-12">109+ <div class="w-full h-px bg-gradient-to-r from-transparent via-spot-divider to-transparent mb-16 md:mb-20"></div>
101- <h2 class="text-2xl md:text-3xl font-bold text-spot-text mb-3" style="letter-spacing: -0.025em;">Reading, reimagined</h2>110+ <div class="max-w-6xl mx-auto px-6">
102- <p class="text-spot-secondary max-w-lg mx-auto">Everything you need to stay informed, discover great writing, and connect with fellow readers.</p>111+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
103- </div>112+ <div>
104- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">113+ <h2 class="text-2xl md:text-3xl font-bold text-spot-text mb-4" style="letter-spacing: -0.025em;">Read with intent</h2>
105- <div class="text-center md:text-left">114+ <p class="text-spot-secondary leading-relaxed mb-6">
106- <div class="w-10 h-10 rounded-xl bg-spot-green/15 flex items-center justify-center mb-4 mx-auto md:mx-0">115+ Highlight a passage that resonates. Write a note to your future self or friends. Tag it, come back to it later. Your annotations live in your personal data repository.
107- <svg class="w-5 h-5 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-7-1a1 1 0 11-2 0 1 1 0 012 0z"/></svg>116+ </p>
117+ <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
118+ <span class="flex items-center gap-2 text-spot-secondary">
119+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
120+ Highlight passages
121+ </span>
122+ <span class="flex items-center gap-2 text-spot-secondary">
123+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
124+ Notes &amp; tags
125+ </span>
126+ <span class="flex items-center gap-2 text-spot-secondary">
127+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
128+ Save articles
129+ </span>
130+ </div>
108 </div>131 </div>
109- <h3 class="font-bold text-spot-text mb-2">Subscribe</h3>132+ <div class="bg-spot-surface rounded-2xl shadow-spot-heavy overflow-hidden">
110- <p class="text-sm text-spot-secondary leading-relaxed">Add any RSS or Atom feed. Import your existing subscriptions from another reader via OPML. Highlight passages and leave notes on articles.</p>133+ <div class="px-5 py-3.5 border-b border-spot-divider flex items-center gap-3">
111- </div>134+ <div class="w-6 h-6 rounded-full bg-spot-green/15 flex items-center justify-center">
112- <div class="text-center md:text-left">135+ <svg class="w-3 h-3 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/></svg>
113- <div class="w-10 h-10 rounded-xl bg-spot-green/15 flex items-center justify-center mb-4 mx-auto md:mx-0">136+ </div>
114- <svg class="w-5 h-5 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>137+ <div>
138+ <div class="text-[13px] font-semibold text-spot-text leading-tight">The architecture of attention</div>
139+ <div class="text-[11px] text-spot-secondary">readingdesign.org</div>
140+ </div>
141+ </div>
142+ <div class="px-5 py-4 text-sm text-spot-body leading-[1.75]">
143+ <p>The real problem isn't information overload &mdash; it's that we've <span class="landing-annotation-highlight">lost the habit of reading deeply</span>. Scrolling replaces absorbing. Skimming replaces understanding. The feed never ends, but comprehension does.</p>
144+ </div>
145+ <div class="px-5 pb-4">
146+ <div class="bg-spot-hover rounded-xl p-3.5 border-l-2 border-spot-green">
147+ <p class="text-sm text-spot-text italic leading-relaxed">"lost the habit of reading deeply"</p>
148+ <p class="text-xs text-spot-secondary mt-2">This is exactly what I've been feeling. The shift happened so gradually I didn't notice.</p>
149+ <div class="flex gap-1.5 mt-2">
150+ <span class="text-[11px] bg-spot-surface text-spot-secondary px-2 py-0.5 rounded-pill">reading</span>
151+ <span class="text-[11px] bg-spot-surface text-spot-secondary px-2 py-0.5 rounded-pill">attention</span>
152+ </div>
153+ </div>
154+ </div>
115 </div>155 </div>
116- <h3 class="font-bold text-spot-text mb-2">Discover</h3>
117- <p class="text-sm text-spot-secondary leading-relaxed">Find new articles and feeds through personalized recommendations based on what your circle and readers with similar tastes are subscribing to.</p>
118 </div>156 </div>
119- <div class="text-center md:text-left">157+ </div>
120- <div class="w-10 h-10 rounded-xl bg-spot-green/15 flex items-center justify-center mb-4 mx-auto md:mx-0">158+</section>
121- <svg class="w-5 h-5 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>159+
160+<section class="py-16 md:py-24 border-t border-spot-divider">
161+ <div class="max-w-6xl mx-auto px-6">
162+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
163+ <div class="order-2 lg:order-1">
164+ <div class="space-y-2">
165+ <div class="bg-spot-surface rounded-xl px-4 py-3.5 flex items-start gap-3 shadow-spot">
166+ <div class="w-8 h-8 rounded-lg bg-spot-green/15 shrink-0 flex items-center justify-center">
167+ <svg class="w-4 h-4 text-spot-green" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"/></svg>
168+ </div>
169+ <div class="flex-1 min-w-0">
170+ <div class="text-[13px] font-semibold text-spot-text leading-tight">Why the open web is making a comeback</div>
171+ <div class="text-[11px] text-spot-secondary mt-0.5">theopenweb.press</div>
172+ </div>
173+ <div class="flex items-center gap-1 text-spot-green shrink-0 text-xs font-medium">
174+ <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"/></svg>
175+ 12
176+ </div>
177+ </div>
178+ <div class="bg-spot-surface rounded-xl px-4 py-3.5 flex items-start gap-3 shadow-spot">
179+ <div class="w-8 h-8 rounded-lg bg-spot-orange/15 shrink-0 flex items-center justify-center">
180+ <svg class="w-4 h-4 text-spot-orange" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"/></svg>
181+ </div>
182+ <div class="flex-1 min-w-0">
183+ <div class="text-[13px] font-semibold text-spot-text leading-tight">RSS is not dead, it was just resting</div>
184+ <div class="text-[11px] text-spot-secondary mt-0.5">syndication.xyz</div>
185+ </div>
186+ <div class="flex items-center gap-1 text-spot-secondary shrink-0 text-xs">
187+ <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
188+ 3
189+ </div>
190+ </div>
191+ <div class="bg-spot-surface rounded-xl px-4 py-3.5 flex items-start gap-3 shadow-spot">
192+ <div class="w-8 h-8 rounded-lg bg-spot-blue/15 shrink-0 flex items-center justify-center">
193+ <svg class="w-4 h-4 text-spot-blue" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z"/></svg>
194+ </div>
195+ <div class="flex-1 min-w-0">
196+ <div class="text-[13px] font-semibold text-spot-text leading-tight">How to take back control of your reading list</div>
197+ <div class="text-[11px] text-spot-secondary mt-0.5">readwrite.cafe</div>
198+ </div>
199+ </div>
200+ </div>
201+ </div>
202+ <div class="order-1 lg:order-2">
203+ <h2 class="text-2xl md:text-3xl font-bold text-spot-text mb-4" style="letter-spacing: -0.025em;">See what your circle reads</h2>
204+ <p class="text-spot-secondary leading-relaxed mb-6">
205+ Trending articles from your network. Feed recommendations based on overlapping subscriptions. Discover people who read what you read. Social discovery, not algorithmic manipulation.
206+ </p>
207+ <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
208+ <span class="flex items-center gap-2 text-spot-secondary">
209+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
210+ Trending articles
211+ </span>
212+ <span class="flex items-center gap-2 text-spot-secondary">
213+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
214+ Article suggestions
215+ </span>
216+ <span class="flex items-center gap-2 text-spot-secondary">
217+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
218+ Feed suggestions
219+ </span>
220+ <span class="flex items-center gap-2 text-spot-secondary">
221+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
222+ Reader suggestions
223+ </span>
224+ </div>
122 </div>225 </div>
123- <h3 class="font-bold text-spot-text mb-2">Connect</h3>
124- <p class="text-sm text-spot-secondary leading-relaxed">Find and follow people with similar reading tastes. See what they read and share. Build your circle on the Atmosphere.</p>
125 </div>226 </div>
126 </div>227 </div>
127 </section>228 </section>
128 229
129 <section class="bg-spot-green-house">230 <section class="bg-spot-green-house">
130- <div class="max-w-6xl mx-auto px-6 py-16">231+ <div class="max-w-6xl mx-auto px-6 py-16 md:py-20">
131- <div class="max-w-2xl">232+ <div class="max-w-2xl mb-10">
132 <h2 class="text-2xl md:text-3xl font-bold text-white mb-4" style="letter-spacing: -0.025em;">Your feeds. Your data. Yours.</h2>233 <h2 class="text-2xl md:text-3xl font-bold text-white mb-4" style="letter-spacing: -0.025em;">Your feeds. Your data. Yours.</h2>
133- <p class="text-[rgba(255,255,255,0.70)] leading-relaxed mb-8">234+ <p class="text-[rgba(255,255,255,0.70)] leading-relaxed mb-3">
134- Glean stores subscriptions and annotations in your personal data repository (PDS) on the AT Protocol. Your social graph comes from your existing Bluesky or Atmosphere connections. Take your data anywhere. Glean will never show you ads or track you.235+ Glean is part of the Atmosphere. Annotations are compatible with <a href="https://margin.at" target="_blank" class="text-spot-green hover:brightness-110 transition">Margin.at</a> notes, feeds with <a href="https://skyreader.app" target="_blank" class="text-spot-green hover:brightness-110 transition">Skyreader</a> subscriptions, and your social graph travels with you from <a href="https://bsky.social" target="_blank" class="text-spot-green hover:brightness-110 transition">Bluesky</a> and <a href="https://tangled.org" target="_blank" class="text-spot-green hover:brightness-110 transition">Tangled</a>. All on AT Protocol.
135 </p>236 </p>
136- <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">237+ <p class="text-[rgba(255,255,255,0.50)] text-sm leading-relaxed">
137- <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]">238+ Privacy-first. No ads. No tracking.
138- <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>239+ </p>
139- AT Protocol identity240+ </div>
140- </div>241+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
141- <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]">242+ <div class="flex items-center gap-2.5 text-[rgba(255,255,255,0.70)] text-sm">
142- <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>243+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
143- Portable data244+ AT Protocol identity
144- </div>245+ </div>
145- <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]">246+ <div class="flex items-center gap-2.5 text-[rgba(255,255,255,0.70)] text-sm">
146- <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>247+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
147- <a href="https://tangled.org/julien.rbrt.fr/glean" class="hover:text-white transition">Open source</a>248+ Portable data
148- </div>249+ </div>
149- <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]">250+ <div class="flex items-center gap-2.5 text-[rgba(255,255,255,0.70)] text-sm">
150- <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>251+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
151- Self-hostable252+ <a href="https://tangled.org/julien.rbrt.fr/glean" class="hover:text-white transition">Open source</a>
152- </div>253+ </div>
254+ <div class="flex items-center gap-2.5 text-[rgba(255,255,255,0.70)] text-sm">
255+ <svg class="w-4 h-4 text-spot-green shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
256+ <a href="https://tangled.org/julien.rbrt.fr/glean" target="_blank" class="hover:text-white transition">Self-hostable</a>
153 </div>257 </div>
154 </div>258 </div>
155 </div>259 </div>
@@ -157,8 +261,9 @@
157 261
158 <section class="py-16 text-center">262 <section class="py-16 text-center">
159 <div class="max-w-md mx-auto px-6">263 <div class="max-w-md mx-auto px-6">
264+ <div class="w-14 h-14 mx-auto mb-6">{{template "logo-icon"}}</div>
160 <h2 class="text-2xl md:text-3xl font-bold text-spot-text mb-3" style="letter-spacing: -0.025em;">Start reading</h2>265 <h2 class="text-2xl md:text-3xl font-bold text-spot-text mb-3" style="letter-spacing: -0.025em;">Start reading</h2>
161- <p class="text-spot-secondary mb-6 text-sm leading-relaxed">Sign in with your Bluesky handle or any Atmosphere account. Your network is already waiting.</p>266+ <p class="text-spot-secondary mb-6 text-sm leading-relaxed">Sign in with your Bluesky handle or any Atmosphere account.</p>
162 <a href="/auth/login" class="bg-spot-green text-white rounded-pill px-10 py-3.5 text-sm font-bold uppercase tracking-button hover:brightness-110 transition active:scale-[0.98] inline-flex items-center justify-center gap-2 shadow-spot">267 <a href="/auth/login" class="bg-spot-green text-white rounded-pill px-10 py-3.5 text-sm font-bold uppercase tracking-button hover:brightness-110 transition active:scale-[0.98] inline-flex items-center justify-center gap-2 shadow-spot">
163 Get started268 Get started
164 </a>269 </a>