forked from
joebasser.com/atmosphere-account
this repo has no description
chore: remove unused HowItWorks; trim provider tile copy
- Delete HowItWorks.tsx (superseded by Your account section)
- Apps / Independent providers: drop last sentences per copy edit
Made-with: Cursor
+55
-62
+55
-20
components/BlueskySection.tsx
+55
-20
components/BlueskySection.tsx
···
5
5
<div class="text-center">
6
6
<h2 class="text-section">Choose your provider.</h2>
7
7
<div class="divider" />
8
-
<p class="text-body mt-2" style={{ maxWidth: "640px", margin: "1rem auto 0" }}>
9
-
Your Atmosphere account lives with a <strong>provider</strong> — a service
10
-
that stores your data and keeps it available across every app. That
11
-
provider might be an app you already use, or a host that only holds
12
-
accounts. You pick who hosts your account, and you can switch any time.
8
+
<p
9
+
class="text-body mt-2"
10
+
style={{ maxWidth: "640px", margin: "1rem auto 0" }}
11
+
>
12
+
Your Atmosphere account lives with a <strong>provider</strong>{" "}
13
+
— a service that stores your data and keeps it available across
14
+
every app. That provider might be an app you already use, or a host
15
+
that only holds accounts. You pick who hosts your account, and you
16
+
can switch any time.
13
17
</p>
14
18
</div>
15
19
···
17
21
<div class="glass provider-card provider-card-featured">
18
22
<div class="provider-card-badge font-mono">Most popular</div>
19
23
<div class="provider-logo-row">
20
-
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
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
+
aria-hidden="true"
34
+
>
21
35
<rect x="2" y="3" width="20" height="18" rx="2" />
22
36
<path d="M6 8h12M8 12h5M8 16h8" />
23
37
</svg>
···
44
58
<path d="M135.72 44.03C202.216 93.951 273.74 195.17 300 249.49C326.26 195.17 397.784 93.951 464.28 44.03C512.378 8.502 588 -22.418 588 69.85C588 90.97 576.42 192.07 570 213.89C548.2 284.29 472.94 303.23 405.91 292.28C521.44 315.16 549.46 397.65 489.46 480.13C377.23 634.08 316.03 475.75 302.29 436.08C300.83 431.89 300.16 429.94 300 429.94C299.84 429.94 299.17 431.89 297.71 436.08C283.97 475.76 222.77 634.08 110.54 480.13C50.54 397.65 78.56 315.16 194.09 292.28C127.06 303.23 51.8 284.29 30 213.89C23.58 192.07 12 90.97 12 69.85C12 -22.418 87.622 8.502 135.72 44.03Z" />
45
59
</svg>
46
60
</a>{" "}
47
-
are also account providers. When you sign up, they provide an account for
48
-
you and your data is hosted by them. Some apps are not account providers:
49
-
they are just apps, and you sign in with an account hosted somewhere
50
-
else. If you already use Bluesky, you have an Atmosphere-ready account
51
-
with no extra sign-up.
61
+
are also account providers. When you sign up, they provide an
62
+
account for you and your data is hosted by them. Some apps are not
63
+
account providers: they are just apps, and you sign in with an
64
+
account hosted somewhere else.
52
65
</p>
53
66
</div>
54
67
55
68
<div class="glass provider-card">
56
69
<div class="provider-logo-row">
57
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
70
+
<svg
71
+
width="24"
72
+
height="24"
73
+
viewBox="0 0 24 24"
74
+
fill="none"
75
+
stroke="currentColor"
76
+
stroke-width="1.5"
77
+
stroke-linecap="round"
78
+
stroke-linejoin="round"
79
+
>
58
80
<rect x="3" y="3" width="7" height="7" rx="1" />
59
81
<rect x="14" y="3" width="7" height="7" rx="1" />
60
82
<rect x="14" y="14" width="7" height="7" rx="1" />
···
63
85
<span class="provider-name font-mono">Independent providers</span>
64
86
</div>
65
87
<p class="text-body-sm">
66
-
Independent providers are account hosts — they are not apps themselves,
67
-
they only hold your account and data. A growing number of them offer
68
-
Atmosphere accounts: some are community-run, some focus on privacy, and
69
-
new ones are launching all the time.
88
+
Independent providers are account hosts — they are not apps
89
+
themselves, they only hold your account and data. A growing number
90
+
of them offer Atmosphere accounts: some are community-run, some
91
+
focus on privacy.
70
92
</p>
71
93
</div>
72
94
73
95
<div class="glass provider-card">
74
96
<div class="provider-logo-row">
75
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
97
+
<svg
98
+
width="24"
99
+
height="24"
100
+
viewBox="0 0 24 24"
101
+
fill="none"
102
+
stroke="currentColor"
103
+
stroke-width="1.5"
104
+
stroke-linecap="round"
105
+
stroke-linejoin="round"
106
+
>
76
107
<path d="M12 2L2 7l10 5 10-5-10-5z" />
77
108
<path d="M2 17l10 5 10-5" />
78
109
<path d="M2 12l10 5 10-5" />
···
89
120
90
121
<p
91
122
class="text-body-sm text-center mt-3"
92
-
style={{ maxWidth: "520px", margin: "1.5rem auto 0", fontStyle: "italic" }}
123
+
style={{
124
+
maxWidth: "520px",
125
+
margin: "1.5rem auto 0",
126
+
fontStyle: "italic",
127
+
}}
93
128
>
94
-
No matter which provider you choose, your account works everywhere and you can
95
-
move to a different provider at any time — no data lost.
129
+
No matter which provider you choose, your account works everywhere and
130
+
you can move to a different provider at any time — no data lost.
96
131
</p>
97
132
</div>
98
133
</section>
-42
components/HowItWorks.tsx
-42
components/HowItWorks.tsx
···
1
-
export default function HowItWorks() {
2
-
const pillars = [
3
-
{
4
-
number: "1",
5
-
title: "Identity",
6
-
description:
7
-
"One universal account that belongs to you. Your handle is a domain — even one you already own. No platform can take it away.",
8
-
},
9
-
{
10
-
number: "2",
11
-
title: "Connections",
12
-
description:
13
-
"Your social graph travels with you. Creators keep their audiences. Find the same people across every app. No more starting over.",
14
-
},
15
-
{
16
-
number: "3",
17
-
title: "Choice",
18
-
description:
19
-
"Choose your apps, algorithms, and moderation. Don't like something? Switch and pick up where you left off. It's your call, always.",
20
-
},
21
-
];
22
-
23
-
return (
24
-
<section class="section reveal">
25
-
<div class="container">
26
-
<div class="text-center">
27
-
<h2 class="text-section">How it works.</h2>
28
-
<div class="divider" />
29
-
</div>
30
-
<div class="pillars-grid">
31
-
{pillars.map((p) => (
32
-
<div key={p.title} class="glass pillar-card">
33
-
<div class="pillar-number">{p.number}</div>
34
-
<h3 class="text-subsection mb-2">{p.title}</h3>
35
-
<p class="text-body-sm">{p.description}</p>
36
-
</div>
37
-
))}
38
-
</div>
39
-
</div>
40
-
</section>
41
-
);
42
-
}