Exosphere is a set of small, modular, self-hostable community tools built on the AT Protocol.
app.exosphere.site
ui: improve homepage
+65
-34
+39
-20
packages/app/src/pages/dashboard.css.ts
+39
-20
packages/app/src/pages/dashboard.css.ts
···
1
-
import { style, globalStyle } from "@vanilla-extract/css";
1
+
import { style, styleVariants, globalStyle } from "@vanilla-extract/css";
2
2
import { vars } from "@exosphere/client/theme.css";
3
3
4
4
const bp = {
···
106
106
lineHeight: 1.5,
107
107
});
108
108
109
-
export const ctaCard = style({
109
+
export const ctaGrid = style({
110
+
display: "grid",
111
+
gap: vars.space.md,
112
+
marginBlock: vars.space.xxl,
113
+
"@media": {
114
+
[bp.md]: {
115
+
gridTemplateColumns: "1fr 1fr",
116
+
},
117
+
},
118
+
});
119
+
120
+
const ctaCardBase = style({
110
121
display: "flex",
111
122
flexDirection: "column",
112
-
alignItems: "center",
113
-
textAlign: "center",
114
123
gap: vars.space.sm,
115
-
backgroundColor: vars.color.primaryLight,
116
-
border: `1px solid ${vars.color.primary}`,
117
124
borderRadius: vars.radius.lg,
118
125
paddingBlock: vars.space.lg,
119
126
paddingInline: vars.space.lg,
120
-
textDecoration: "none",
121
-
color: "inherit",
122
-
transition: "box-shadow 0.2s",
123
-
":hover": {
124
-
boxShadow: `0 4px 12px ${vars.color.shadowStrong}`,
125
-
textDecoration: "none",
126
-
},
127
127
"@media": {
128
128
[bp.sm]: {
129
129
paddingBlock: vars.space.xl,
···
132
132
},
133
133
});
134
134
135
+
export const ctaCard = styleVariants({
136
+
primary: [
137
+
ctaCardBase,
138
+
{
139
+
backgroundImage: `linear-gradient(135deg, ${vars.color.primaryLight} 0%, ${vars.color.surface} 120%)`,
140
+
border: `1px solid ${vars.color.primary}`,
141
+
boxShadow: `0 6px 20px ${vars.color.shadowStrong}, 0 1px 2px ${vars.color.shadow}`,
142
+
},
143
+
],
144
+
neutral: [
145
+
ctaCardBase,
146
+
{
147
+
backgroundColor: vars.color.surface,
148
+
border: `1px solid ${vars.color.border}`,
149
+
boxShadow: `0 1px 3px ${vars.color.shadow}`,
150
+
},
151
+
],
152
+
});
153
+
135
154
export const ctaTitle = style({
136
155
fontFamily: vars.font.heading,
137
156
fontSize: "1.0625rem",
138
157
fontWeight: 600,
139
158
color: vars.color.text,
159
+
marginBlock: 0,
140
160
"@media": {
141
161
[bp.sm]: {
142
162
fontSize: "1.125rem",
···
146
166
147
167
export const ctaDesc = style({
148
168
color: vars.color.textMuted,
149
-
fontSize: "0.8125rem",
150
-
lineHeight: 1.5,
151
-
maxWidth: "360px",
169
+
fontSize: "0.875rem",
170
+
lineHeight: 1.55,
171
+
marginBlock: 0,
152
172
});
153
173
154
-
export const ctaArrow = style({
155
-
color: vars.color.primary,
156
-
fontSize: "0.875rem",
157
-
fontWeight: 500,
174
+
export const ctaActions = style({
175
+
marginBlockStart: "auto",
176
+
paddingBlockStart: vars.space.sm,
158
177
});
+26
-14
packages/app/src/pages/dashboard.tsx
+26
-14
packages/app/src/pages/dashboard.tsx
···
142
142
<>
143
143
<PendingInvitations />
144
144
<MySpheres />
145
-
<div class={ui.section}>
145
+
</>
146
+
)}
147
+
148
+
<div class={s.ctaGrid}>
149
+
<div class={s.ctaCard.primary}>
150
+
<h2 class={s.ctaTitle}>Run your own sphere</h2>
151
+
<p class={s.ctaDesc}>
152
+
A home for your community with a public roadmap, feature requests, and updates, all
153
+
under your own handle.
154
+
</p>
155
+
<div class={s.ctaActions}>
146
156
<a href="/spheres/new" class={ui.button}>
147
157
Create a sphere
148
158
</a>
149
159
</div>
150
-
</>
151
-
)}
160
+
</div>
161
+
162
+
<div class={s.ctaCard.neutral}>
163
+
<h2 class={s.ctaTitle}>Join the Exosphere community</h2>
164
+
<p class={s.ctaDesc}>
165
+
Follow how the project is built, request features, and help decide what we work on next.
166
+
</p>
167
+
<div class={s.ctaActions}>
168
+
<a href="https://app.exosphere.site/s/exosphere.site" class={ui.buttonSecondary}>
169
+
Visit the sphere →
170
+
</a>
171
+
</div>
172
+
</div>
173
+
</div>
152
174
153
175
<div class={ui.section}>
154
176
<h2 class={ui.sectionTitle}>Tools</h2>
···
176
198
<span class={s.toolCardLabelSoon}>Coming soon</span>
177
199
<h3 class={s.toolCardTitle}>Feeds & Discussions</h3>
178
200
<p class={s.toolCardDesc}>
179
-
A shared space for conversations — announcements, Q&A, and open-ended threads, all in
201
+
A shared space for conversations, announcements, Q&A, and open-ended threads, all in
180
202
one place.
181
203
</p>
182
204
</div>
···
189
211
</p>
190
212
</div>
191
213
</div>
192
-
</div>
193
-
194
-
<div class={ui.section}>
195
-
<a href="https://app.exosphere.site/s/exosphere.site" class={s.ctaCard}>
196
-
<span class={s.ctaTitle}>Join the Exosphere community</span>
197
-
<span class={s.ctaDesc}>
198
-
Follow the project's development, request features, and help shape what we build next.
199
-
</span>
200
-
<span class={s.ctaArrow}>Visit the sphere →</span>
201
-
</a>
202
214
</div>
203
215
</div>
204
216
);