grain.social is a photo sharing platform built on atproto. grain.social
atproto photography appview
48
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
+265
marketing/banner.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 — banner</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@800&family=Plus+Jakarta+Sans:wght@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: hidden; 28 + width: 1500px; 29 + height: 500px; 30 + position: relative; 31 + background-image: 32 + radial-gradient(ellipse 900px 500px at 92% -10%, rgba(133, 161, 255, 0.14), transparent 60%), 33 + radial-gradient(ellipse 700px 400px at 4% 110%, rgba(107, 139, 239, 0.08), transparent 60%); 34 + } 35 + 36 + .stage { 37 + width: 100%; 38 + height: 100%; 39 + position: relative; 40 + padding: 36px 60px; 41 + } 42 + 43 + /* ─── Cards ───────────────────────────────── */ 44 + 45 + .card { 46 + position: absolute; 47 + background: #ffffff; 48 + border-radius: 12px; 49 + overflow: hidden; 50 + box-shadow: 51 + 0 28px 56px -14px rgba(0, 0, 0, 0.7), 52 + 0 6px 18px -6px rgba(0, 0, 0, 0.5), 53 + 0 0 0 1px rgba(255, 255, 255, 0.06); 54 + color: #171717; 55 + transform: rotate(var(--rot, 0deg)); 56 + } 57 + .card-photo { 58 + display: block; 59 + width: 100%; 60 + height: 100%; 61 + object-fit: cover; 62 + background: #161d27; 63 + } 64 + .card-foot { 65 + display: flex; 66 + align-items: center; 67 + gap: 8px; 68 + padding: 9px 12px; 69 + background: #ffffff; 70 + } 71 + .card-foot .avatar { 72 + width: 24px; 73 + height: 24px; 74 + border-radius: 50%; 75 + object-fit: cover; 76 + background: #e5e7eb; 77 + flex-shrink: 0; 78 + } 79 + .card-text { 80 + flex: 1; 81 + min-width: 0; 82 + display: flex; 83 + flex-direction: column; 84 + gap: 1px; 85 + } 86 + .card-title { 87 + font-size: 11px; 88 + font-weight: 700; 89 + color: #171717; 90 + letter-spacing: -0.005em; 91 + white-space: nowrap; 92 + overflow: hidden; 93 + text-overflow: ellipsis; 94 + } 95 + .card-handle { 96 + font-size: 9.5px; 97 + color: #525252; 98 + white-space: nowrap; 99 + overflow: hidden; 100 + text-overflow: ellipsis; 101 + } 102 + .card-actions { 103 + display: flex; 104 + align-items: center; 105 + gap: 7px; 106 + flex-shrink: 0; 107 + color: #525252; 108 + } 109 + .card-actions svg { 110 + width: 14px; 111 + height: 14px; 112 + stroke-width: 2; 113 + } 114 + 115 + /* Five cards across, varied Y + rotation, all footers visible */ 116 + .card-1 { 117 + top: 50px; 118 + left: 2%; 119 + width: 200px; 120 + --rot: -7deg; 121 + z-index: 1; 122 + } 123 + .card-1 .card-photo { aspect-ratio: 2/3; } 124 + 125 + .card-2 { 126 + top: 12px; 127 + left: 19%; 128 + width: 234px; 129 + --rot: 3deg; 130 + z-index: 2; 131 + } 132 + .card-2 .card-photo { aspect-ratio: 4/3; } 133 + 134 + .card-3 { 135 + top: 46px; 136 + left: 38%; 137 + width: 208px; 138 + --rot: -3deg; 139 + z-index: 3; 140 + } 141 + .card-3 .card-photo { aspect-ratio: 3/4; } 142 + 143 + .card-4 { 144 + top: 22px; 145 + left: 56%; 146 + width: 200px; 147 + --rot: 5deg; 148 + z-index: 4; 149 + } 150 + .card-4 .card-photo { aspect-ratio: 3/4; } 151 + 152 + .card-5 { 153 + top: 60px; 154 + right: 2%; 155 + width: 230px; 156 + --rot: -4deg; 157 + z-index: 5; 158 + } 159 + .card-5 .card-photo { aspect-ratio: 4/3; } 160 + </style> 161 + </head> 162 + <body> 163 + 164 + <section class="stage"> 165 + 166 + <!-- Card 1: jctenton — Tokyo, Fujifilm X-T5 --> 167 + <div class="card card-1"> 168 + <img class="card-photo" loading="lazy" 169 + src="https://cdn.grain.social/U0hI2MkRNxc6wlGd3f7aG68tJhU9noapwtlMaJoDnL0/feed_fullsize/plain/did:plc:jbirfe7p6rieftcr3wuxtlpc/bafkreihjefs2r37v5gmekztouy7j67447oeslkm4hlv36sedevq5x5lumi" 170 + alt="Donki, Tokyo" /> 171 + <div class="card-foot"> 172 + <img class="avatar" src="https://cdn.grain.social/1srn3DX0j4BZLoOudYM_wqs6Tq3tNXWaxcZoZ8s54PQ/avatar/plain/did:plc:jbirfe7p6rieftcr3wuxtlpc/bafkreigh3pkp7p4ri35na7hwifd34bzjggktj66l3ar7jcfeggrusfgp2m" alt="" /> 173 + <div class="card-text"> 174 + <div class="card-title">They have everything at Donki</div> 175 + <div class="card-handle">@jctenton.bsky.social</div> 176 + </div> 177 + <div class="card-actions"> 178 + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 179 + <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"/> 180 + </svg> 181 + </div> 182 + </div> 183 + </div> 184 + 185 + <!-- Card 2: chadtmiller — Yosemite, Sony A7 III (heart filled) --> 186 + <div class="card card-2"> 187 + <img class="card-photo" loading="lazy" 188 + src="https://cdn.grain.social/s_ap7n-FeCkYciMMZ2E_ljP1-VXb2Zq2Wmy0HXU_LoU/feed_fullsize/plain/did:plc:bcgltzqazw5tb6k2g3ttenbj/bafkreifgjwnhk2v3t4tuctbx7hrugdjzvj37q6umgpg3ggpmdruei2otiu" 189 + alt="El Capitan, Yosemite" /> 190 + <div class="card-foot"> 191 + <img class="avatar" src="https://cdn.grain.social/21KJHYjNu7KeL7XHuxS2W3eszDxHaJycMnTnn3oMYGI/avatar/plain/did:plc:bcgltzqazw5tb6k2g3ttenbj/bafkreicjj6r6ibejlagmf6zhiaje2esnlxqvesigbgegkdmmin2brlyvye" alt="" /> 192 + <div class="card-text"> 193 + <div class="card-title">el cap</div> 194 + <div class="card-handle">@chadtmiller.com</div> 195 + </div> 196 + <div class="card-actions"> 197 + <svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 198 + <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"/> 199 + </svg> 200 + </div> 201 + </div> 202 + </div> 203 + 204 + <!-- Card 3: oblachek — Venice, Pixel 8 Pro --> 205 + <div class="card card-3"> 206 + <img class="card-photo" loading="lazy" 207 + src="https://cdn.grain.social/KsBHYS4KO-8WqPifFgidzr7cNUrMND96N4_U-vro7N8/feed_fullsize/plain/did:plc:xfd6rbdcmbesdjrumyxdlipp/bafkreie244itqieccvyp4rq7mrto34kj5ltddoszvmklgfvjnw3ttp5r2q" 208 + alt="Roberto, Venice" /> 209 + <div class="card-foot"> 210 + <img class="avatar" src="https://cdn.grain.social/PbYXcUEB5VmxODXYt_VttIruF_LovCdaZVB4BCV-tNo/avatar/plain/did:plc:xfd6rbdcmbesdjrumyxdlipp/bafkreigxcoaaohsqclalqvgk24ie5dicnptcaihju4bn3cepawu46bomue" alt="" /> 211 + <div class="card-text"> 212 + <div class="card-title">Ciao, Roberto, come stai?</div> 213 + <div class="card-handle">@oblachek.eu</div> 214 + </div> 215 + <div class="card-actions"> 216 + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 217 + <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"/> 218 + </svg> 219 + </div> 220 + </div> 221 + </div> 222 + 223 + <!-- Card 4: olivier — Nancy, iPhone 16 Pro (heart filled) --> 224 + <div class="card card-4"> 225 + <img class="card-photo" loading="lazy" 226 + src="https://cdn.grain.social/fYS7EMPKJTsyQRAo9bfGHxD48uBDR4ilX5mcMZoBEhA/feed_fullsize/plain/did:plc:esmiuxk53vmsllayghrq676w/bafkreigiynzsqttojde2gkonezennxdw43zdzxxma5avxkcdspxscxk2vy" 227 + alt="Basilique Saint-Epvre, Nancy" /> 228 + <div class="card-foot"> 229 + <img class="avatar" src="https://cdn.grain.social/Sugn4cEvvglqiCoAb4c2vNdmG6N_e0dbJrxo2oo0fUo/avatar/plain/did:plc:esmiuxk53vmsllayghrq676w/bafkreigr2o27dsolhdhw32aptpznpsafimvld62twg7zd5qdc6rv46v6wq" alt="" /> 230 + <div class="card-text"> 231 + <div class="card-title">Basilique Saint-Epvre</div> 232 + <div class="card-handle">@o.simardcasanova.net</div> 233 + </div> 234 + <div class="card-actions"> 235 + <svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 236 + <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"/> 237 + </svg> 238 + </div> 239 + </div> 240 + </div> 241 + 242 + <!-- Card 5: timtrautmann — Portland, Fujifilm X-T3 --> 243 + <div class="card card-5"> 244 + <img class="card-photo" loading="lazy" 245 + src="https://cdn.grain.social/n5KxnOqdc-P5oGxiVJ7fEi4d0AjjromUNdwW86w9Fyg/feed_fullsize/plain/did:plc:z5efhtji4vfiutzqquvx3w7o/bafkreidgoafnmrg2zw6s4jx22gkpl3p4b6vnvso4a7pfsxd2dvudxjnhye" 246 + alt="Portland Chinatown" /> 247 + <div class="card-foot"> 248 + <img class="avatar" src="https://cdn.grain.social/ISLKG28i9qQKsbUYtWD1c6YrnQ3MTX-faiuNDRfa16I/avatar/plain/did:plc:z5efhtji4vfiutzqquvx3w7o/bafkreigxwsnjzv5najzidvliawlg5ip6jussrbcnlvgzbq7ihfsw7qh4gi" alt="" /> 249 + <div class="card-text"> 250 + <div class="card-title">Portland Chinatown Crosswalk</div> 251 + <div class="card-handle">@timtrautmann.com</div> 252 + </div> 253 + <div class="card-actions"> 254 + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 255 + <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"/> 256 + </svg> 257 + </div> 258 + </div> 259 + </div> 260 + 261 + </section> 262 + 263 + </body> 264 + </html> 265 + </parameter>
marketing/banner.png

This is a binary file and will not be displayed.

marketing/hero-16x9.png

This is a binary file and will not be displayed.

+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

This is a binary file and will not be displayed.