authorgravatar for me@t3.ggTheo Browne <me@t3.gg> 2026-06-17 23:23:14-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-06-17 23:23:14-07:00
log3bdaa6e10046945ccc08264d2d6f3b81775efcb3
tree4df97faedf2d11160fe9fa2dd1f5a070bfa07c7f
parentb7b00bfb9dde73f1152dccab3b8e25919346700d
signature Signed by PGP key B5690EEEBB952194

Polish marketing homepage: nav, hero, and endorsements (#3137)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

3 files changed, 227 insertions(+), 78 deletions(-)

apps/marketing/src/layouts/Layout.astro+43-15
......@@ -1,4 +1,6 @@
11---
2import { GITHUB_REPOSITORY_URL, MARKETING_STATS } from "../lib/site";
3
24interface Props {
35 title?: string;
46 description?: string;
......@@ -36,17 +38,17 @@ const {
3638 </a>
3739 <div class="nav-right">
3840 <a
39 class="nav-gh"
40 href="https://github.com/pingdotgg/t3code"
41 class="nav-stars"
42 href={GITHUB_REPOSITORY_URL}
4143 target="_blank"
4244 rel="noopener noreferrer"
45 aria-label={`Star T3 Code on GitHub — ${MARKETING_STATS.githubStars} stars`}
4346 >
4447 <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
45 <path d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 007.86 10.93c.58.1.79-.25.79-.56v-2c-3.2.69-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.68 1.25 3.33.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.67 0-1.25.45-2.28 1.18-3.08-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.96 10.96 0 015.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.8 1.18 1.83 1.18 3.08 0 4.41-2.7 5.38-5.27 5.66.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0023.5 12C23.5 5.65 18.35.5 12 .5z"/>
48 <path d="M12 2.3l2.9 5.88 6.49.94-4.7 4.58 1.11 6.47L12 17.12l-5.8 3.05 1.11-6.47-4.7-4.58 6.49-.94L12 2.3z"/>
4649 </svg>
47 <span>GitHub</span>
50 <span><strong>{MARKETING_STATS.githubStars}</strong> GitHub stars</span>
4851 </a>
49 <a class="btn btn-primary" href="/#download">Download</a>
5052 </div>
5153 </div>
5254 </nav>
......@@ -62,7 +64,7 @@ const {
6264 <span>&copy; {new Date().getFullYear()} T3 Tools Inc · MIT licensed</span>
6365 </div>
6466 <div class="footer-links">
65 <a href="https://github.com/pingdotgg/t3code" target="_blank" rel="noopener noreferrer">GitHub</a>
67 <a href={GITHUB_REPOSITORY_URL} target="_blank" rel="noopener noreferrer">GitHub</a>
6668 <a href="https://discord.gg/jn4EGJjrvv" target="_blank" rel="noopener noreferrer">Discord</a>
6769 <a href="/download">Download</a>
6870 </div>
......@@ -329,23 +331,36 @@ const {
329331 gap: 8px;
330332 }
331333
332 .nav-gh {
334 .nav-stars {
333335 display: inline-flex;
334336 align-items: center;
335 gap: 6px;
336 padding: 7px 12px;
337 gap: 7px;
338 height: 36px;
339 padding: 0 14px;
337340 border: 1px solid var(--border);
338 border-radius: 8px;
341 border-radius: 999px;
342 background: rgba(255, 255, 255, 0.02);
339343 color: var(--fg-muted);
340 font-family: var(--font-mono);
341 font-size: 12px;
342 transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
344 font-size: 13px;
345 letter-spacing: -0.01em;
346 white-space: nowrap;
347 transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
343348 }
344349
345 .nav-gh:hover {
350 .nav-stars:hover {
346351 color: var(--fg);
347 background: rgba(255, 255, 255, 0.04);
348352 border-color: var(--border-strong);
353 background: rgba(255, 255, 255, 0.04);
354 }
355
356 .nav-stars strong {
357 color: var(--fg);
358 font-weight: 600;
359 }
360
361 .nav-stars svg {
362 color: var(--warn);
363 flex-shrink: 0;
349364 }
350365
351366 .main {
......@@ -407,4 +422,17 @@ const {
407422 padding-right: 20px;
408423 }
409424 }
425
426 @media (max-width: 420px) {
427 .nav-inner {
428 gap: 12px;
429 }
430
431 .nav-stars {
432 height: 34px;
433 gap: 6px;
434 padding: 0 12px;
435 font-size: 12px;
436 }
437 }
410438</style>
apps/marketing/src/lib/site.ts created+6
......@@ -0,0 +1,6 @@
1export const GITHUB_REPOSITORY_URL = "https://github.com/pingdotgg/t3code";
2
3export const MARKETING_STATS = {
4 githubStars: "12k+",
5 users: "100,000",
6} as const;
apps/marketing/src/pages/index.astro+178-63
......@@ -1,5 +1,6 @@
11---
22import Layout from "../layouts/Layout.astro";
3import { GITHUB_REPOSITORY_URL, MARKETING_STATS } from "../lib/site";
34import { tweets } from "../lib/tweets";
45
56const desktopEndorsementRows = [
......@@ -55,11 +56,12 @@ const mobileEndorsementRows = [
5556 <svg class="dl-icon dl-icon--linux" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.4-.12-1.025.056-1.69.176-.668.428-1.344.463-1.897.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.814.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.637.434.598.77 1.131.729 1.57v.006c-.057.744-.48 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.61-.2-.723-.4-.11-.2-.113-.602.123-1.23v-.004l.002-.003c.117-.334.03-.752-.027-1.118-.055-.401-.083-.71.043-.94.16-.334.396-.4.69-.533.294-.135.64-.202.915-.47h.002v-.002c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.28-.466-.154-.134-.28-.268-.373-.335-.164-.134-.144-.333-.074-.333.109.016.129.134.199.2.096.066.215.2.36.333.292.2.68.467 1.167.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.136.149-.267.279-.267.128.016.034.134-.147.332a8.097 8.097 0 01-.69.468zm-1.082-1.583V5.64c-.006-.02.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.14.068-.05 0-.13-.02-.136-.068-.01-.066.088-.133.15-.133.08-.031.184-.047.259-.005.019.009.036.03.03.05v.02h.003z"/></svg>
5657 <span id="download-label">Download for macOS</span>
5758 </a>
58 <a href="https://github.com/pingdotgg/t3code" target="_blank" rel="noopener noreferrer" class="btn btn-ghost btn-lg">
59 <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
59 <a class="hero-source-link" href={GITHUB_REPOSITORY_URL} target="_blank" rel="noopener noreferrer">
60 <svg class="hero-source-mark" width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
6061 <path d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 007.86 10.93c.58.1.79-.25.79-.56v-2c-3.2.69-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.68 1.25 3.33.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.67 0-1.25.45-2.28 1.18-3.08-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.96 10.96 0 015.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.8 1.18 1.83 1.18 3.08 0 4.41-2.7 5.38-5.27 5.66.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0023.5 12C23.5 5.65 18.35.5 12 .5z"/>
6162 </svg>
62 Star on GitHub
63 <span>Steal our code (legally)</span>
64 <svg class="hero-source-arrow" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg>
6365 </a>
6466 </div>
6567
......@@ -82,8 +84,8 @@ const mobileEndorsementRows = [
8284 <section id="endorsements" class="sec-endorsements" aria-labelledby="endorsements-title">
8385 <div class="container">
8486 <div class="endorsements-head">
85 <h2 id="endorsements-title">Developers love T3 Code</h2>
86 <p>Real reactions from people building with T3 Code today.</p>
87 <h2 id="endorsements-title">Tolerated by over <span class="endorsements-count">{MARKETING_STATS.users}</span> devs</h2>
88 <p>Some of them even tweeted about it.</p>
8789 </div>
8890 </div>
8991
......@@ -282,10 +284,6 @@ const mobileEndorsementRows = [
282284 <div class="section-head open-head">
283285 <div class="eyebrow">Open source</div>
284286 <h2>If you don't like something, fork it.</h2>
285 <p>
286 T3 Code is as open as they come. We built this app to be modifiable,
287 customizable, and forkable. Go nuts - that's the whole point.
288 </p>
289287 </div>
290288
291289 <div class="open-grid">
......@@ -305,43 +303,44 @@ const mobileEndorsementRows = [
305303 </div>
306304 </div>
307305
308 <div class="open-stats">
309 <div class="tile open-stat">
310 <div class="open-stat-val">MIT</div>
311 <div class="open-stat-lbl">License · commercial-friendly</div>
312 </div>
313 <div class="tile open-stat">
314 <div class="open-stat-val">TypeScript</div>
315 <div class="open-stat-lbl">End-to-end, strictly typed</div>
306 <div class="tile open-pitch">
307 <div class="open-pitch-copy">
308 <ul class="open-pitch-list">
309 <li>
310 <span class="open-pitch-mark" aria-hidden="true"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
311 <span><strong>Change the UI.</strong> Restyle every surface to match your taste.</span>
312 </li>
313 <li>
314 <span class="open-pitch-mark" aria-hidden="true"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
315 <span><strong>Add an agent.</strong> Wire in your own tools, models, and flows.</span>
316 </li>
317 <li>
318 <span class="open-pitch-mark" aria-hidden="true"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
319 <span><strong>Ship your own build.</strong> Self-host it or distribute it as your own.</span>
320 </li>
321 </ul>
316322 </div>
317 <div class="tile open-stat">
318 <div class="open-stat-val">1 monorepo</div>
319 <div class="open-stat-lbl">Desktop · web · server · harnesses</div>
320 </div>
321 <div class="tile open-stat">
322 <div class="open-stat-val">No telemetry</div>
323 <div class="open-stat-lbl">Unless you opt in. Full stop.</div>
323
324 <div class="open-pitch-footer">
325 <div class="open-pitch-meta">
326 <span>MIT licensed</span>
327 <span aria-hidden="true">·</span>
328 <span>{MARKETING_STATS.githubStars} stars</span>
329 </div>
330
331 <div class="open-pitch-actions">
332 <a class="btn btn-primary" href="https://github.com/pingdotgg/t3code/fork" target="_blank" rel="noopener noreferrer">
333 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="5" r="2.2"/><circle cx="18" cy="5" r="2.2"/><circle cx="12" cy="19" r="2.2"/><path d="M6 7.2v2A3 3 0 009 12.2h6A3 3 0 0018 9.2v-2M12 14v2.8"/></svg>
334 Fork on GitHub
335 </a>
336 <a class="open-source-link" href={GITHUB_REPOSITORY_URL} target="_blank" rel="noopener noreferrer">
337 Browse source
338 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg>
339 </a>
340 </div>
324341 </div>
325342 </div>
326343 </div>
327
328 <div class="open-ctas">
329 <a class="btn btn-ghost" href="https://github.com/pingdotgg/t3code" target="_blank" rel="noopener noreferrer">
330 <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 007.86 10.93c.58.1.79-.25.79-.56v-2c-3.2.69-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.68 1.25 3.33.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.67 0-1.25.45-2.28 1.18-3.08-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.96 10.96 0 015.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.8 1.18 1.83 1.18 3.08 0 4.41-2.7 5.38-5.27 5.66.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0023.5 12C23.5 5.65 18.35.5 12 .5z"/></svg>
331 Star on GitHub
332 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg>
333 </a>
334 <a class="btn btn-ghost" href="https://github.com/pingdotgg/t3code/fork" target="_blank" rel="noopener noreferrer">
335 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="5" r="2.2"/><circle cx="18" cy="5" r="2.2"/><circle cx="12" cy="19" r="2.2"/><path d="M6 7.2v2A3 3 0 009 12.2h6A3 3 0 0018 9.2v-2M12 14v2.8"/></svg>
336 Fork the repo
337 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg>
338 </a>
339 <a class="btn btn-ghost" href="https://github.com/pingdotgg/t3code/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">
340 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4.5" width="19" height="15" rx="2"/><path d="M7 10l3 2-3 2M12 16h5"/></svg>
341 Read CONTRIBUTING.md
342 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg>
343 </a>
344 </div>
345344 </div>
346345 </section>
347346
......@@ -515,7 +514,7 @@ const mobileEndorsementRows = [
515514
516515 .hero-title {
517516 font-size: clamp(38px, 5.6vw, 76px);
518 margin: 28px auto 22px;
517 margin: 48px auto 22px;
519518 max-width: 20ch;
520519 text-wrap: balance;
521520 }
......@@ -531,12 +530,42 @@ const mobileEndorsementRows = [
531530
532531 .hero-actions {
533532 display: flex;
534 gap: 10px;
535 justify-content: center;
536 flex-wrap: wrap;
533 flex-direction: column;
534 align-items: center;
535 gap: 16px;
537536 margin-bottom: 56px;
538537 }
539538
539 .hero-source-link {
540 display: inline-flex;
541 align-items: center;
542 gap: 8px;
543 color: var(--fg-muted);
544 font-size: 14px;
545 font-weight: 500;
546 letter-spacing: -0.01em;
547 transition: color 0.18s ease;
548 }
549
550 .hero-source-link:hover {
551 color: var(--fg);
552 }
553
554 .hero-source-mark {
555 flex-shrink: 0;
556 }
557
558 .hero-source-arrow {
559 flex-shrink: 0;
560 opacity: 0.6;
561 transition: transform 0.18s ease, opacity 0.18s ease;
562 }
563
564 .hero-source-link:hover .hero-source-arrow {
565 transform: translate(2px, -2px);
566 opacity: 1;
567 }
568
540569 /* Download button icons (platform-aware) */
541570 .dl-icon {
542571 display: none;
......@@ -656,6 +685,30 @@ const mobileEndorsementRows = [
656685 }
657686 }
658687
688 @media (max-width: 340px) {
689 .hero-float-mark.hf-opencode,
690 .hero-float-mark.hf-cursor {
691 top: 580px;
692 width: 52px;
693 height: 52px;
694 border-radius: 14px;
695 }
696
697 .hero-float-mark.hf-opencode {
698 left: 0;
699 }
700
701 .hero-float-mark.hf-cursor {
702 right: 0;
703 }
704
705 .hero-float-mark.hf-opencode img,
706 .hero-float-mark.hf-cursor img {
707 width: 30px;
708 height: 30px;
709 }
710 }
711
659712 .hero-preview {
660713 max-width: 1180px;
661714 margin: 0 auto;
......@@ -759,6 +812,11 @@ const mobileEndorsementRows = [
759812 margin-bottom: 18px;
760813 }
761814
815 .endorsements-count {
816 font-weight: 600;
817 font-variant-numeric: tabular-nums;
818 }
819
762820 .endorsements-head p {
763821 color: var(--fg-muted);
764822 font-size: 18px;
......@@ -962,12 +1020,11 @@ const mobileEndorsementRows = [
9621020 text-align: center;
9631021 margin: 0 auto 56px;
9641022 }
965 .open-head p { margin: 0 auto; }
9661023
9671024 .open-grid {
9681025 display: grid;
9691026 grid-template-columns: 1.25fr 1fr;
970 gap: 20px; margin-bottom: 32px;
1027 gap: 20px;
9711028 }
9721029
9731030 .open-term { padding: 0; overflow: hidden; }
......@@ -1009,27 +1066,85 @@ const mobileEndorsementRows = [
10091066 animation: blink 1s steps(2) infinite;
10101067 }
10111068
1012 .open-stats {
1013 display: grid;
1014 grid-template-columns: 1fr 1fr;
1069 .open-pitch {
1070 padding: 32px;
1071 display: flex;
1072 flex-direction: column;
1073 justify-content: center;
1074 gap: 32px;
1075 background:
1076 radial-gradient(110% 75% at 100% 0%, var(--accent-dim), transparent 60%),
1077 linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
1078 }
1079
1080 .open-pitch-list {
1081 list-style: none;
1082 display: flex;
1083 flex-direction: column;
1084 gap: 16px;
1085 }
1086
1087 .open-pitch-list li {
1088 display: flex;
1089 align-items: flex-start;
10151090 gap: 12px;
1091 font-size: 15px;
1092 line-height: 1.5;
1093 color: var(--fg-muted);
1094 }
1095
1096 .open-pitch-list strong {
1097 color: var(--fg);
1098 font-weight: 600;
1099 }
1100
1101 .open-pitch-mark {
1102 flex: none;
1103 display: grid;
1104 place-items: center;
1105 width: 22px;
1106 height: 22px;
1107 margin-top: 1px;
1108 border-radius: 7px;
1109 color: var(--accent);
1110 background: var(--accent-dim);
1111 border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
10161112 }
1017 .open-stat {
1018 padding: 22px;
1019 display: flex; flex-direction: column; gap: 6px;
1113
1114 .open-pitch-footer {
1115 display: flex;
1116 flex-direction: column;
1117 gap: 18px;
10201118 }
1021 .open-stat-val {
1022 font-size: 22px; font-weight: 500;
1023 letter-spacing: -0.015em;
1119
1120 .open-pitch-meta {
1121 display: flex;
1122 align-items: center;
1123 gap: 8px;
1124 color: var(--fg-dim);
1125 font-family: var(--font-mono);
1126 font-size: 11px;
10241127 }
1025 .open-stat-lbl {
1026 font-family: var(--font-mono); font-size: 10.5px;
1027 color: var(--fg-dim); letter-spacing: 0.04em;
1128
1129 .open-pitch-actions {
1130 display: flex;
1131 align-items: center;
1132 gap: 16px;
1133 flex-wrap: wrap;
10281134 }
10291135
1030 .open-ctas {
1031 display: flex; gap: 10px;
1032 justify-content: center; flex-wrap: wrap;
1136 .open-source-link {
1137 display: inline-flex;
1138 align-items: center;
1139 gap: 6px;
1140 color: var(--fg-muted);
1141 font-size: 13px;
1142 font-weight: 500;
1143 transition: color 0.18s ease;
1144 }
1145
1146 .open-source-link:hover {
1147 color: var(--fg);
10331148 }
10341149
10351150 /* ── Final CTA ────────────────────────────────────────── */