forked from
joebasser.com/atmosphere-account
this repo has no description
fix(og): match Explore social preview to homepage style
Regenerate og-explore from og-hero layout with Explore headline and
Atmosphere subtext. Regenerate PNG for embeds.
Made-with: Cursor
+58
-252
static/og-explore.png
static/og-explore.png
This is a binary file and will not be displayed.
+58
-252
static/og-explore.svg
+58
-252
static/og-explore.svg
···
15
15
gradientUnits="userSpaceOnUse"
16
16
>
17
17
<stop stop-color="#e8f0fe" />
18
-
<stop offset="0.28" stop-color="#c9d8f5" />
19
-
<stop offset="0.58" stop-color="#a8c4f0" />
18
+
<stop offset="0.25" stop-color="#c9d8f5" />
19
+
<stop offset="0.5" stop-color="#a8c4f0" />
20
+
<stop offset="0.75" stop-color="#c0d4f5" />
20
21
<stop offset="1" stop-color="#ebe4f5" />
21
22
</linearGradient>
22
23
<radialGradient
···
25
26
cy="0"
26
27
r="1"
27
28
gradientUnits="userSpaceOnUse"
28
-
gradientTransform="translate(250 115) rotate(90) scale(460 360)"
29
+
gradientTransform="translate(620 120) rotate(90) scale(520 340)"
29
30
>
30
-
<stop stop-color="#fff7d8" stop-opacity="0.92" />
31
-
<stop offset="0.38" stop-color="#ffe5ac" stop-opacity="0.48" />
31
+
<stop stop-color="#fff6d8" stop-opacity="0.95" />
32
+
<stop offset="0.35" stop-color="#ffe8b8" stop-opacity="0.55" />
33
+
<stop offset="0.7" stop-color="#ffd8a0" stop-opacity="0.18" />
32
34
<stop offset="1" stop-color="#ffd8a0" stop-opacity="0" />
33
35
</radialGradient>
34
36
<linearGradient
35
-
id="card"
36
-
x1="0"
37
-
y1="0"
38
-
x2="1"
39
-
y2="1"
40
-
gradientUnits="objectBoundingBox"
41
-
>
42
-
<stop stop-color="#ffffff" stop-opacity="0.78" />
43
-
<stop offset="1" stop-color="#ffffff" stop-opacity="0.42" />
44
-
</linearGradient>
45
-
<linearGradient
46
37
id="cloudStroke"
47
38
x1="0"
48
39
y1="0"
···
55
46
<stop offset="1" stop-color="#E9FEFF" stop-opacity="0.42" />
56
47
</linearGradient>
57
48
<filter
58
-
id="blur"
49
+
id="cloudBlur"
59
50
x="-20%"
60
51
y="-20%"
61
52
width="140%"
62
53
height="140%"
63
54
color-interpolation-filters="sRGB"
64
55
>
65
-
<feGaussianBlur stdDeviation="10" result="b" />
56
+
<feGaussianBlur stdDeviation="12" result="b" />
66
57
<feMerge>
67
58
<feMergeNode in="b" />
68
59
<feMergeNode in="SourceGraphic" />
69
60
</feMerge>
70
61
</filter>
71
-
<filter
72
-
id="shadow"
73
-
x="-20%"
74
-
y="-20%"
75
-
width="140%"
76
-
height="140%"
77
-
color-interpolation-filters="sRGB"
78
-
>
79
-
<feDropShadow
80
-
dx="0"
81
-
dy="18"
82
-
stdDeviation="22"
83
-
flood-color="#0e1428"
84
-
flood-opacity="0.12"
85
-
/>
86
-
</filter>
87
62
</defs>
88
-
89
63
<rect width="1200" height="630" fill="url(#sky)" />
90
64
<rect width="1200" height="630" fill="url(#sun)" />
91
65
92
-
<g opacity="0.78" filter="url(#blur)">
93
-
<g transform="translate(-90 245) scale(0.45)">
66
+
<!-- Hero clouds (geometry from GlassClouds, scaled to frame) -->
67
+
<g opacity="0.92" filter="url(#cloudBlur)">
68
+
<g transform="translate(-80 -20) scale(0.42)">
69
+
<path
70
+
fill="#79CFFF"
71
+
fill-opacity="0.2"
72
+
stroke="url(#cloudStroke)"
73
+
stroke-width="4"
74
+
stroke-linejoin="round"
75
+
d="M430.377 323.959C431.455 323.986 432.536 324 433.621 324C495.134 324 545 279.795 545 225.266C545 172.442 498.203 129.307 439.355 126.661C424.209 88.0793 382.821 60.3905 334.137 60.3905C326.999 60.3905 320.017 60.9858 313.253 62.1233C296.847 25.72 256.703 0 209.782 0C148.269 0 98.4028 44.2046 98.4028 98.7337C98.4028 108.487 99.9982 117.911 102.97 126.81C45.3852 130.62 0 173.245 0 225.266C0 279.795 49.8661 324 111.379 324C113.192 324 114.994 323.962 116.786 323.886V324H430.377V323.959Z"
76
+
/>
77
+
</g>
78
+
<g transform="translate(720 40) scale(0.36)">
94
79
<path
95
80
fill="#79CFFF"
96
81
fill-opacity="0.16"
97
82
stroke="url(#cloudStroke)"
98
83
stroke-width="4"
99
84
stroke-linejoin="round"
85
+
d="M332 259.96C332.83 259.98 333.67 260 334.51 260C381.94 260 420 225.02 420 182.81C420 141.85 384.81 107.68 339.37 105.56C327.68 74.84 295.58 53 257.93 53C252.42 53 247.03 53.48 241.81 54.39C229.15 25.49 198.16 5 161.92 5C114.42 5 75.94 39.98 75.94 82.19C75.94 89.92 77.17 97.37 79.47 104.43C35.01 107.48 0 141.25 0 182.81C0 225.02 38.47 260 85.93 260C87.33 260 88.72 259.97 90.1 259.91V260H332V259.96Z"
86
+
/>
87
+
</g>
88
+
<g transform="translate(80 280) scale(0.48)">
89
+
<path
90
+
fill="#79CFFF"
91
+
fill-opacity="0.15"
92
+
stroke="url(#cloudStroke)"
93
+
stroke-width="4"
94
+
stroke-linejoin="round"
100
95
d="M490 369.95C491.23 369.98 492.47 370 493.71 370C563.73 370 620 319.6 620 257.3C620 197 564.63 147.7 500.67 144.68C483.44 100.58 436.3 68.93 380.85 68.93C372.72 68.93 364.78 69.61 357.08 70.9C338.4 29.33 292.67 0 238.87 0C168.85 0 112 50.41 112 112.71C112 123.83 113.82 134.58 117.2 144.73C51.65 149.08 0 197.73 0 257.3C0 319.6 56.78 370 126.79 370C128.85 370 130.9 369.96 132.94 369.87V370H490V369.95Z"
101
96
/>
102
97
</g>
103
-
<g transform="translate(790 50) scale(0.38)">
98
+
<g transform="translate(780 320) scale(0.4)">
99
+
<path
100
+
fill="#79CFFF"
101
+
fill-opacity="0.18"
102
+
stroke="url(#cloudStroke)"
103
+
stroke-width="4"
104
+
stroke-linejoin="round"
105
+
d="M300 229.96C300.75 229.98 301.51 230 302.27 230C345.13 230 380 198.09 380 159.26C380 121.6 347.21 90.52 305.59 88.58C295.05 60.39 266.03 40 232.03 40C227.05 40 222.18 40.43 217.47 41.26C206.05 14.95 178.07 -3 145.37 -3C102.5 -3 67.63 28.91 67.63 68.75C67.63 75.84 68.74 82.68 70.81 89.15C30.65 91.95 0 122.89 0 160.26C0 198.89 34.73 230 77.59 230C78.85 230 80.11 229.97 81.36 229.92V230H300V229.96Z"
106
+
/>
107
+
</g>
108
+
<g transform="translate(420 420) scale(0.38)">
104
109
<path
105
110
fill="#79CFFF"
106
111
fill-opacity="0.17"
···
112
117
</g>
113
118
</g>
114
119
115
-
<g filter="url(#shadow)">
116
-
<rect
117
-
x="96"
118
-
y="106"
119
-
width="1008"
120
-
height="418"
121
-
rx="42"
122
-
fill="url(#card)"
123
-
stroke="#ffffff"
124
-
stroke-opacity="0.64"
125
-
/>
126
-
<rect
127
-
x="139"
128
-
y="151"
129
-
width="340"
130
-
height="255"
131
-
rx="28"
132
-
fill="#ffffff"
133
-
fill-opacity="0.48"
134
-
stroke="#ffffff"
135
-
stroke-opacity="0.7"
136
-
/>
137
-
<rect x="169" y="181" width="92" height="92" rx="24" fill="#2a5aa8" />
138
-
<circle cx="215" cy="227" r="26" fill="#ffffff" fill-opacity="0.92" />
139
-
<rect
140
-
x="287"
141
-
y="183"
142
-
width="146"
143
-
height="16"
144
-
rx="8"
145
-
fill="#0e1428"
146
-
fill-opacity="0.72"
147
-
/>
148
-
<rect
149
-
x="287"
150
-
y="215"
151
-
width="112"
152
-
height="12"
153
-
rx="6"
154
-
fill="#0e1428"
155
-
fill-opacity="0.34"
156
-
/>
157
-
<rect
158
-
x="169"
159
-
y="310"
160
-
width="260"
161
-
height="13"
162
-
rx="7"
163
-
fill="#0e1428"
164
-
fill-opacity="0.32"
165
-
/>
166
-
<rect
167
-
x="169"
168
-
y="340"
169
-
width="215"
170
-
height="13"
171
-
rx="7"
172
-
fill="#0e1428"
173
-
fill-opacity="0.24"
174
-
/>
175
-
<rect
176
-
x="169"
177
-
y="377"
178
-
width="78"
179
-
height="28"
180
-
rx="14"
181
-
fill="#2a5aa8"
182
-
fill-opacity="0.15"
183
-
/>
184
-
<rect
185
-
x="260"
186
-
y="377"
187
-
width="122"
188
-
height="28"
189
-
rx="14"
190
-
fill="#2a5aa8"
191
-
fill-opacity="0.15"
192
-
/>
193
-
194
-
<rect
195
-
x="386"
196
-
y="247"
197
-
width="340"
198
-
height="255"
199
-
rx="28"
200
-
fill="#ffffff"
201
-
fill-opacity="0.38"
202
-
stroke="#ffffff"
203
-
stroke-opacity="0.58"
204
-
/>
205
-
<rect x="416" y="278" width="92" height="92" rx="24" fill="#d89a23" />
206
-
<circle cx="462" cy="324" r="25" fill="#ffffff" fill-opacity="0.9" />
207
-
<rect
208
-
x="534"
209
-
y="280"
210
-
width="145"
211
-
height="16"
212
-
rx="8"
213
-
fill="#0e1428"
214
-
fill-opacity="0.64"
215
-
/>
216
-
<rect
217
-
x="534"
218
-
y="312"
219
-
width="116"
220
-
height="12"
221
-
rx="6"
222
-
fill="#0e1428"
223
-
fill-opacity="0.28"
224
-
/>
225
-
<rect
226
-
x="416"
227
-
y="405"
228
-
width="260"
229
-
height="13"
230
-
rx="7"
231
-
fill="#0e1428"
232
-
fill-opacity="0.28"
233
-
/>
234
-
<rect
235
-
x="416"
236
-
y="435"
237
-
width="210"
238
-
height="13"
239
-
rx="7"
240
-
fill="#0e1428"
241
-
fill-opacity="0.22"
242
-
/>
243
-
244
-
<rect
245
-
x="632"
246
-
y="151"
247
-
width="340"
248
-
height="255"
249
-
rx="28"
250
-
fill="#ffffff"
251
-
fill-opacity="0.5"
252
-
stroke="#ffffff"
253
-
stroke-opacity="0.72"
254
-
/>
255
-
<rect x="662" y="181" width="92" height="92" rx="24" fill="#6b7fd7" />
256
-
<circle cx="708" cy="227" r="26" fill="#ffffff" fill-opacity="0.92" />
257
-
<rect
258
-
x="780"
259
-
y="183"
260
-
width="146"
261
-
height="16"
262
-
rx="8"
263
-
fill="#0e1428"
264
-
fill-opacity="0.72"
265
-
/>
266
-
<rect
267
-
x="780"
268
-
y="215"
269
-
width="110"
270
-
height="12"
271
-
rx="6"
272
-
fill="#0e1428"
273
-
fill-opacity="0.34"
274
-
/>
275
-
<rect
276
-
x="662"
277
-
y="310"
278
-
width="260"
279
-
height="13"
280
-
rx="7"
281
-
fill="#0e1428"
282
-
fill-opacity="0.32"
283
-
/>
284
-
<rect
285
-
x="662"
286
-
y="340"
287
-
width="205"
288
-
height="13"
289
-
rx="7"
290
-
fill="#0e1428"
291
-
fill-opacity="0.24"
292
-
/>
293
-
<rect
294
-
x="662"
295
-
y="377"
296
-
width="95"
297
-
height="28"
298
-
rx="14"
299
-
fill="#2a5aa8"
300
-
fill-opacity="0.15"
301
-
/>
302
-
</g>
303
-
304
120
<text
305
121
x="600"
306
-
y="286"
122
+
y="278"
307
123
text-anchor="middle"
308
-
fill="rgba(18,26,47,0.72)"
124
+
fill="rgba(18,26,47,0.68)"
309
125
font-family="ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace"
310
126
font-size="22"
311
-
font-weight="700"
312
-
letter-spacing="0.38em"
313
-
>EXPLORE THE ATMOSPHERE</text>
127
+
font-weight="600"
128
+
letter-spacing="0.42em"
129
+
>ATMOSPHERE ACCOUNT</text>
314
130
<text
315
131
x="600"
316
-
y="350"
317
-
text-anchor="middle"
318
-
fill="#0e1428"
319
-
font-family="ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace"
320
-
font-size="52"
321
-
font-weight="650"
322
-
letter-spacing="-0.035em"
323
-
>Apps, profiles, reviews</text>
324
-
<text
325
-
x="600"
326
-
y="410"
132
+
y="378"
327
133
text-anchor="middle"
328
134
fill="#0e1428"
329
135
font-family="ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace"
330
-
font-size="52"
331
-
font-weight="650"
332
-
letter-spacing="-0.035em"
333
-
>and updates.</text>
136
+
font-size="96"
137
+
font-weight="600"
138
+
letter-spacing="-0.03em"
139
+
>Explore</text>
334
140
<text
335
141
x="600"
336
-
y="468"
142
+
y="442"
337
143
text-anchor="middle"
338
-
fill="rgba(18,26,47,0.84)"
144
+
fill="rgba(18,26,47,0.93)"
339
145
font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif"
340
-
font-size="25"
341
-
font-weight="500"
342
-
>A registry for projects building across the ATmosphere.</text>
146
+
font-size="26"
147
+
font-weight="400"
148
+
>Discover apps and services in the Atmosphere.</text>
343
149
</svg>
