grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
chore: add marketing hero and bluesky banner assets
Two HTML templates + rendered PNGs for marketing/social use:
- hero.html / hero-16x9.png — 16:9 hero image (3840x2160) with gallery
card collage, "grain" wordmark, and "Share your photography" tagline
- banner.html / banner.png — 3:1 Bluesky banner (3000x1000) with
card collage only, no branding
Both use real galleries from the recent feed with proper attribution
(avatar + title + handle on each card), matching the OG card aesthetic.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+583
marketing/hero-16x9.png
marketing/hero-16x9.png
This is a binary file and will not be displayed.
+318
marketing/hero.html
+318
marketing/hero.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6
+
<title>grain — Share your photography</title>
7
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=block" rel="stylesheet" />
10
+
<style>
11
+
:root {
12
+
--bg-root: #080b12;
13
+
--bg-surface: #0f1419;
14
+
--grain: #85a1ff;
15
+
--text: #e2e8f0;
16
+
--text-muted: #64748b;
17
+
}
18
+
19
+
* { box-sizing: border-box; margin: 0; padding: 0; }
20
+
html, body { height: 100%; }
21
+
22
+
body {
23
+
font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
24
+
background: var(--bg-root);
25
+
color: var(--text);
26
+
-webkit-font-smoothing: antialiased;
27
+
overflow-x: hidden;
28
+
min-height: 100vh;
29
+
background-image:
30
+
radial-gradient(ellipse 1100px 700px at 90% -10%, rgba(133, 161, 255, 0.10), transparent 60%),
31
+
radial-gradient(ellipse 800px 600px at 5% 110%, rgba(107, 139, 239, 0.06), transparent 60%);
32
+
}
33
+
34
+
.stage {
35
+
max-width: 1400px;
36
+
margin: 0 auto;
37
+
padding: 80px 56px 64px;
38
+
position: relative;
39
+
}
40
+
41
+
/* ─── Gallery card collage ─────────────────── */
42
+
43
+
.collage {
44
+
position: relative;
45
+
height: 660px;
46
+
z-index: 1;
47
+
}
48
+
49
+
.card {
50
+
position: absolute;
51
+
background: #ffffff;
52
+
border-radius: 14px;
53
+
overflow: hidden;
54
+
box-shadow:
55
+
0 36px 72px -16px rgba(0, 0, 0, 0.65),
56
+
0 8px 22px -8px rgba(0, 0, 0, 0.5),
57
+
0 0 0 1px rgba(255, 255, 255, 0.06);
58
+
color: #171717;
59
+
transform: rotate(var(--rot, 0deg));
60
+
}
61
+
.card-photo {
62
+
display: block;
63
+
width: 100%;
64
+
height: 100%;
65
+
object-fit: cover;
66
+
background: #161d27;
67
+
}
68
+
.card-foot {
69
+
display: flex;
70
+
align-items: center;
71
+
gap: 10px;
72
+
padding: 11px 14px;
73
+
background: #ffffff;
74
+
}
75
+
.card-foot .avatar {
76
+
width: 30px;
77
+
height: 30px;
78
+
border-radius: 50%;
79
+
object-fit: cover;
80
+
background: #e5e7eb;
81
+
flex-shrink: 0;
82
+
}
83
+
.card-text {
84
+
flex: 1;
85
+
min-width: 0;
86
+
display: flex;
87
+
flex-direction: column;
88
+
gap: 1px;
89
+
}
90
+
.card-title {
91
+
font-size: 13px;
92
+
font-weight: 700;
93
+
color: #171717;
94
+
letter-spacing: -0.005em;
95
+
white-space: nowrap;
96
+
overflow: hidden;
97
+
text-overflow: ellipsis;
98
+
}
99
+
.card-handle {
100
+
font-size: 11.5px;
101
+
color: #525252;
102
+
white-space: nowrap;
103
+
overflow: hidden;
104
+
text-overflow: ellipsis;
105
+
}
106
+
.card-actions {
107
+
display: flex;
108
+
align-items: center;
109
+
gap: 10px;
110
+
flex-shrink: 0;
111
+
color: #525252;
112
+
}
113
+
.card-actions svg {
114
+
width: 18px;
115
+
height: 18px;
116
+
stroke-width: 2;
117
+
}
118
+
119
+
/* Card placements — spread horizontally so every footer is exposed.
120
+
Cards may overlap on photos but never on the white attribution footer. */
121
+
.card-1 {
122
+
top: 80px;
123
+
left: 1%;
124
+
width: 268px;
125
+
--rot: -7deg;
126
+
z-index: 1;
127
+
}
128
+
.card-1 .card-photo { aspect-ratio: 2/3; }
129
+
130
+
.card-2 {
131
+
top: 0;
132
+
left: 23%;
133
+
width: 320px;
134
+
--rot: 3deg;
135
+
z-index: 2;
136
+
}
137
+
.card-2 .card-photo { aspect-ratio: 4/3; }
138
+
139
+
.card-3 {
140
+
top: 64px;
141
+
left: 49%;
142
+
width: 280px;
143
+
--rot: -3deg;
144
+
z-index: 3;
145
+
}
146
+
.card-3 .card-photo { aspect-ratio: 3/4; }
147
+
148
+
.card-4 {
149
+
top: 32px;
150
+
right: 1%;
151
+
width: 280px;
152
+
--rot: 6deg;
153
+
z-index: 4;
154
+
}
155
+
.card-4 .card-photo { aspect-ratio: 3/4; }
156
+
157
+
/* ─── Hero text ────────────────────────────── */
158
+
159
+
.hero-text {
160
+
position: relative;
161
+
z-index: 2;
162
+
margin-top: -100px;
163
+
padding: 60px 4px 0;
164
+
max-width: 720px;
165
+
}
166
+
.hero-text::before {
167
+
content: "";
168
+
position: absolute;
169
+
top: 0;
170
+
left: -56px;
171
+
right: -56px;
172
+
bottom: 0;
173
+
background: linear-gradient(
174
+
to bottom,
175
+
rgba(8, 11, 18, 0) 0%,
176
+
rgba(8, 11, 18, 0.55) 25%,
177
+
rgba(8, 11, 18, 0.92) 60%,
178
+
rgba(8, 11, 18, 1) 100%
179
+
);
180
+
z-index: -1;
181
+
pointer-events: none;
182
+
}
183
+
.hero-logo {
184
+
font-family: "Syne", sans-serif;
185
+
font-size: 196px;
186
+
font-weight: 800;
187
+
letter-spacing: -0.05em;
188
+
line-height: 0.85;
189
+
color: var(--text);
190
+
margin-bottom: 44px;
191
+
}
192
+
.hero-tagline {
193
+
font-size: 38px;
194
+
font-weight: 600;
195
+
letter-spacing: -0.025em;
196
+
line-height: 1.15;
197
+
color: var(--text);
198
+
}
199
+
200
+
@media (max-width: 1024px) {
201
+
.stage { padding: 56px 28px 40px; }
202
+
.collage { height: 540px; }
203
+
.card-1 { width: 220px; left: 2%; }
204
+
.card-2 { width: 280px; left: 28%; }
205
+
.card-3 { width: 230px; right: 2%; }
206
+
.card-4 { width: 260px; left: 14%; }
207
+
.hero-logo { font-size: 130px; }
208
+
.hero-tagline { font-size: 30px; }
209
+
}
210
+
</style>
211
+
</head>
212
+
<body>
213
+
214
+
<section class="stage">
215
+
216
+
<!-- ─── Gallery card collage ─── -->
217
+
<div class="collage">
218
+
219
+
<!-- Card 1: jctenton — Tokyo, Fujifilm X-T5 -->
220
+
<div class="card card-1">
221
+
<img class="card-photo" loading="lazy"
222
+
src="https://cdn.grain.social/U0hI2MkRNxc6wlGd3f7aG68tJhU9noapwtlMaJoDnL0/feed_fullsize/plain/did:plc:jbirfe7p6rieftcr3wuxtlpc/bafkreihjefs2r37v5gmekztouy7j67447oeslkm4hlv36sedevq5x5lumi"
223
+
alt="Donki, Tokyo" />
224
+
<div class="card-foot">
225
+
<img class="avatar" src="https://cdn.grain.social/1srn3DX0j4BZLoOudYM_wqs6Tq3tNXWaxcZoZ8s54PQ/avatar/plain/did:plc:jbirfe7p6rieftcr3wuxtlpc/bafkreigh3pkp7p4ri35na7hwifd34bzjggktj66l3ar7jcfeggrusfgp2m" alt="" />
226
+
<div class="card-text">
227
+
<div class="card-title">They have everything at Donki</div>
228
+
<div class="card-handle">@jctenton.bsky.social</div>
229
+
</div>
230
+
<div class="card-actions">
231
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
232
+
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
233
+
</svg>
234
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
235
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
236
+
</svg>
237
+
</div>
238
+
</div>
239
+
</div>
240
+
241
+
<!-- Card 2: chadtmiller — Yosemite, Sony A7 III (landscape, hero) -->
242
+
<div class="card card-2">
243
+
<img class="card-photo" loading="lazy"
244
+
src="https://cdn.grain.social/s_ap7n-FeCkYciMMZ2E_ljP1-VXb2Zq2Wmy0HXU_LoU/feed_fullsize/plain/did:plc:bcgltzqazw5tb6k2g3ttenbj/bafkreifgjwnhk2v3t4tuctbx7hrugdjzvj37q6umgpg3ggpmdruei2otiu"
245
+
alt="El Capitan, Yosemite" />
246
+
<div class="card-foot">
247
+
<img class="avatar" src="https://cdn.grain.social/21KJHYjNu7KeL7XHuxS2W3eszDxHaJycMnTnn3oMYGI/avatar/plain/did:plc:bcgltzqazw5tb6k2g3ttenbj/bafkreicjj6r6ibejlagmf6zhiaje2esnlxqvesigbgegkdmmin2brlyvye" alt="" />
248
+
<div class="card-text">
249
+
<div class="card-title">el cap</div>
250
+
<div class="card-handle">@chadtmiller.com</div>
251
+
</div>
252
+
<div class="card-actions">
253
+
<svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
254
+
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
255
+
</svg>
256
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
257
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
258
+
</svg>
259
+
</div>
260
+
</div>
261
+
</div>
262
+
263
+
<!-- Card 3: oblachek — Venice, Pixel 8 Pro -->
264
+
<div class="card card-3">
265
+
<img class="card-photo" loading="lazy"
266
+
src="https://cdn.grain.social/KsBHYS4KO-8WqPifFgidzr7cNUrMND96N4_U-vro7N8/feed_fullsize/plain/did:plc:xfd6rbdcmbesdjrumyxdlipp/bafkreie244itqieccvyp4rq7mrto34kj5ltddoszvmklgfvjnw3ttp5r2q"
267
+
alt="Roberto, Venice" />
268
+
<div class="card-foot">
269
+
<img class="avatar" src="https://cdn.grain.social/PbYXcUEB5VmxODXYt_VttIruF_LovCdaZVB4BCV-tNo/avatar/plain/did:plc:xfd6rbdcmbesdjrumyxdlipp/bafkreigxcoaaohsqclalqvgk24ie5dicnptcaihju4bn3cepawu46bomue" alt="" />
270
+
<div class="card-text">
271
+
<div class="card-title">Ciao, Roberto, come stai?</div>
272
+
<div class="card-handle">@oblachek.eu</div>
273
+
</div>
274
+
<div class="card-actions">
275
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
276
+
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
277
+
</svg>
278
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
279
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
280
+
</svg>
281
+
</div>
282
+
</div>
283
+
</div>
284
+
285
+
<!-- Card 4: olivier — Nancy, iPhone 16 Pro -->
286
+
<div class="card card-4">
287
+
<img class="card-photo" loading="lazy"
288
+
src="https://cdn.grain.social/fYS7EMPKJTsyQRAo9bfGHxD48uBDR4ilX5mcMZoBEhA/feed_fullsize/plain/did:plc:esmiuxk53vmsllayghrq676w/bafkreigiynzsqttojde2gkonezennxdw43zdzxxma5avxkcdspxscxk2vy"
289
+
alt="Basilique Saint-Epvre, Nancy" />
290
+
<div class="card-foot">
291
+
<img class="avatar" src="https://cdn.grain.social/Sugn4cEvvglqiCoAb4c2vNdmG6N_e0dbJrxo2oo0fUo/avatar/plain/did:plc:esmiuxk53vmsllayghrq676w/bafkreigr2o27dsolhdhw32aptpznpsafimvld62twg7zd5qdc6rv46v6wq" alt="" />
292
+
<div class="card-text">
293
+
<div class="card-title">Basilique Saint-Epvre</div>
294
+
<div class="card-handle">@o.simardcasanova.net</div>
295
+
</div>
296
+
<div class="card-actions">
297
+
<svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
298
+
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
299
+
</svg>
300
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
301
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
302
+
</svg>
303
+
</div>
304
+
</div>
305
+
</div>
306
+
307
+
</div>
308
+
309
+
<!-- ─── Hero text ─── -->
310
+
<div class="hero-text">
311
+
<div class="hero-logo">grain</div>
312
+
<div class="hero-tagline">Share your photography</div>
313
+
</div>
314
+
315
+
</section>
316
+
317
+
</body>
318
+
</html>
marketing/hero.png
marketing/hero.png
This is a binary file and will not be displayed.