forked from
joebasser.com/atmosphere-account
this repo has no description
feat: unify 'Your account, your choice' section; three-column tiles
- Replace How it works + moderation blocks with one section (drop HowItWorks from page)
- Three cards: Moderation, Algorithms, Portability (creators folded into portability)
- Add your-choice-grid for side-by-side layout; stack below 900px
Made-with: Cursor
+101
-65
+15
assets/styles.css
+15
assets/styles.css
···
482
482
}
483
483
}
484
484
485
+
/* Your account, your choice — three tiles in one row */
486
+
.your-choice-grid {
487
+
display: grid;
488
+
grid-template-columns: repeat(3, minmax(0, 1fr));
489
+
gap: 1.25rem;
490
+
margin-top: 2rem;
491
+
align-items: stretch;
492
+
}
493
+
494
+
@media (max-width: 900px) {
495
+
.your-choice-grid {
496
+
grid-template-columns: 1fr;
497
+
}
498
+
}
499
+
485
500
.feature-card {
486
501
padding: 2rem;
487
502
transition: transform 0.3s ease, box-shadow 0.3s ease;
+84
-61
components/ModerationAndAlgorithms.tsx
+84
-61
components/ModerationAndAlgorithms.tsx
···
1
-
export default function ModerationAndAlgorithms() {
1
+
export default function YourChoice() {
2
+
const cards = [
3
+
{
4
+
icon: (
5
+
<svg
6
+
width="28"
7
+
height="28"
8
+
viewBox="0 0 24 24"
9
+
fill="none"
10
+
stroke="currentColor"
11
+
stroke-width="1.5"
12
+
stroke-linecap="round"
13
+
stroke-linejoin="round"
14
+
>
15
+
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
16
+
</svg>
17
+
),
18
+
title: "Moderation",
19
+
body:
20
+
"Subscribe to community-built moderation — labels, filters, and block lists made by the people who understand the problem best. Don't like an app's rules? Layer on your own, or switch apps entirely.",
21
+
},
22
+
{
23
+
icon: (
24
+
<svg
25
+
width="28"
26
+
height="28"
27
+
viewBox="0 0 24 24"
28
+
fill="none"
29
+
stroke="currentColor"
30
+
stroke-width="1.5"
31
+
stroke-linecap="round"
32
+
stroke-linejoin="round"
33
+
>
34
+
<line x1="4" y1="21" x2="4" y2="14" />
35
+
<line x1="4" y1="10" x2="4" y2="3" />
36
+
<line x1="12" y1="21" x2="12" y2="12" />
37
+
<line x1="12" y1="8" x2="12" y2="3" />
38
+
<line x1="20" y1="21" x2="20" y2="16" />
39
+
<line x1="20" y1="12" x2="20" y2="3" />
40
+
<circle cx="4" cy="12" r="2" />
41
+
<circle cx="12" cy="10" r="2" />
42
+
<circle cx="20" cy="14" r="2" />
43
+
</svg>
44
+
),
45
+
title: "Algorithms",
46
+
body:
47
+
"Feeds are open — anyone can build one. Switch between them like playlists: friends-only, indie art, slow news, or something deeply niche. No single algorithm quietly decides culture for everyone.",
48
+
},
49
+
{
50
+
icon: (
51
+
<svg
52
+
width="28"
53
+
height="28"
54
+
viewBox="0 0 24 24"
55
+
fill="none"
56
+
stroke="currentColor"
57
+
stroke-width="1.5"
58
+
stroke-linecap="round"
59
+
stroke-linejoin="round"
60
+
>
61
+
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
62
+
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
63
+
<path d="M2 8c0-3.31 2.69-6 6-6" />
64
+
<path d="M22 8c0-3.31-2.69-6-6-6" />
65
+
</svg>
66
+
),
67
+
title: "Portability",
68
+
body:
69
+
"Move between apps and providers while keeping your connections, posts, and followers — no more starting over. Creators can leave an app without losing their audience; your followers are yours, not rented from a platform.",
70
+
},
71
+
];
72
+
2
73
return (
3
74
<section class="section reveal">
4
75
<div class="container">
5
76
<div class="text-center">
6
-
<h2 class="text-section">You choose the rules.</h2>
77
+
<h2 class="text-section">Your account, your choice.</h2>
7
78
<div class="divider" />
8
79
<p
9
80
class="text-body mt-2"
10
81
style={{ maxWidth: "640px", margin: "1rem auto 0" }}
11
82
>
12
-
In the Atmosphere, no single company decides what you see or what
13
-
counts as acceptable. Moderation and algorithms are yours to choose.
83
+
No single company decides what you see, who you follow, or where you
84
+
go. Everything is yours to control.
14
85
</p>
15
86
</div>
16
87
17
-
<div class="mod-algo-grid">
18
-
<div class="glass mod-algo-card">
19
-
<div class="mod-algo-icon" aria-hidden="true">
20
-
<svg
21
-
width="28"
22
-
height="28"
23
-
viewBox="0 0 24 24"
24
-
fill="none"
25
-
stroke="currentColor"
26
-
stroke-width="1.5"
27
-
stroke-linecap="round"
28
-
stroke-linejoin="round"
29
-
>
30
-
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
31
-
</svg>
32
-
</div>
33
-
<h3 class="text-subsection mb-1">Moderation</h3>
34
-
<p class="text-body-sm">
35
-
Subscribe to community-built moderation — labels, filters, and
36
-
block lists made by the people who understand the problem best.
37
-
Don't like an app's rules? Layer on your own, or switch apps
38
-
entirely.
39
-
</p>
40
-
</div>
41
-
42
-
<div class="glass mod-algo-card">
43
-
<div class="mod-algo-icon" aria-hidden="true">
44
-
<svg
45
-
width="28"
46
-
height="28"
47
-
viewBox="0 0 24 24"
48
-
fill="none"
49
-
stroke="currentColor"
50
-
stroke-width="1.5"
51
-
stroke-linecap="round"
52
-
stroke-linejoin="round"
53
-
>
54
-
<line x1="4" y1="21" x2="4" y2="14" />
55
-
<line x1="4" y1="10" x2="4" y2="3" />
56
-
<line x1="12" y1="21" x2="12" y2="12" />
57
-
<line x1="12" y1="8" x2="12" y2="3" />
58
-
<line x1="20" y1="21" x2="20" y2="16" />
59
-
<line x1="20" y1="12" x2="20" y2="3" />
60
-
<circle cx="4" cy="12" r="2" />
61
-
<circle cx="12" cy="10" r="2" />
62
-
<circle cx="20" cy="14" r="2" />
63
-
</svg>
88
+
<div class="your-choice-grid">
89
+
{cards.map((c) => (
90
+
<div key={c.title} class="glass feature-card">
91
+
<div class="mod-algo-icon" aria-hidden="true">{c.icon}</div>
92
+
<h3 class="text-subsection mb-1">{c.title}</h3>
93
+
<p class="text-body-sm">{c.body}</p>
64
94
</div>
65
-
<h3 class="text-subsection mb-1">Algorithms</h3>
66
-
<p class="text-body-sm">
67
-
Feeds are open — anyone can build one. Switch between them like
68
-
playlists: friends-only, indie art, slow news, or something deeply
69
-
niche. No single algorithm quietly decides culture for everyone.
70
-
</p>
71
-
</div>
95
+
))}
72
96
</div>
73
97
74
98
<p
···
79
103
fontStyle: "italic",
80
104
}}
81
105
>
82
-
Together, account ownership, moderation, and algorithmic choice make
83
-
exploitation difficult to sustain. The system is locked open by
84
-
design.
106
+
Account ownership, moderation, and algorithmic choice — the system is
107
+
locked open by design.
85
108
</p>
86
109
</div>
87
110
</section>
+2
-4
routes/index.tsx
+2
-4
routes/index.tsx
···
6
6
import OnePlace from "../components/OnePlace.tsx";
7
7
import Features from "../components/Features.tsx";
8
8
import BlueskySection from "../components/BlueskySection.tsx";
9
-
import HowItWorks from "../components/HowItWorks.tsx";
10
9
import CrossPollination from "../components/CrossPollination.tsx";
11
-
import ModerationAndAlgorithms from "../components/ModerationAndAlgorithms.tsx";
10
+
import YourChoice from "../components/ModerationAndAlgorithms.tsx";
12
11
import SignInBadge from "../components/SignInBadge.tsx";
13
12
import Footer from "../components/Footer.tsx";
14
13
···
23
22
<OnePlace />
24
23
<Features />
25
24
<BlueskySection />
26
-
<HowItWorks />
27
25
<CrossPollination />
28
-
<ModerationAndAlgorithms />
26
+
<YourChoice />
29
27
<SignInBadge />
30
28
<Footer />
31
29
</div>