feat(marketing): replace the screenshot crop with a designed social card

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

ELI5

When someone shares a t3.codes link, the preview image was just a cropped screenshot of the app. This swaps in a designed card with the headline and the agents we support.

Problem

The link preview image (og:image / twitter:image) was the hero screenshot, cropped from the top. At link-preview size it reads as a blur of UI, with no headline and no brand beyond the tiny sidebar logo.

Fix

• Adds a designed 1200×630 card in the site's style: the dark background with the site's grid and grain, the homepage headline, and the six agent tiles from the hero, laid over the app screenshot.
• The source is a 2400×1260 WebP export (apps/marketing/src/assets/social-card.webp, 182KB). Layout.astro still runs it through getImage, so it ships as a 1200×630 JPG (111KB) with a hashed filename, which also makes platforms fetch the new card instead of reusing a cached one.
• The same image serves X, iMessage, Slack, Discord and LinkedIn. They all show large cards at about 1.91:1.
• Updates the image alt text to describe the card, and sets it on twitter:image:alt as well as og:image:alt.

UI Changes

Before

After

Both are the exact JPGs the site build produces.

Made with Claude Opus 5.5 in Claude Code.

Summary by CodeRabbit

• Bug Fixes
  • Updated social previews to use the designated social card image and descriptive image text.

[macroscopeapp]

Approvability

Verdict: Approved at 9a024d6

Macroscope's review found this PR approvable — This is a contained marketing change that replaces the existing social-preview image with a designed static asset and improves its accessibility metadata. The existing Astro image pipeline and page behavior remain intact, with no sensitive, schema, infrastructure, or product-default changes.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: cbc1cab9-9d60-4b2a-997b-eee59390f356

📥 Commits

Reviewing files that changed from the base of the PR and between 53456bc and 9a024d6.

📒 Files selected for processing (2)

• apps/marketing/src/assets/social-card.webp
• apps/marketing/src/layouts/Layout.astro

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The marketing layout now generates social preview images from social-card.webp at 1200×630 in JPG format. Open Graph and Twitter metadata use shared descriptive alt text.

Changes

Social preview metadata

Layer / File(s)	Summary
Generate and describe the social preview apps/marketing/src/layouts/Layout.astro	The layout uses social-card.webp to generate the preview image without the prior fit and crop settings. Open Graph and Twitter image metadata use shared descriptive alt text.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Feature

Suggested reviewers: t3dotgg

Merge Risk: ⚪ Minimal · up to 9a024

The new social preview image is sized for link-preview use and shared consistently across Open Graph and Twitter. No identified issue blocks merging.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly and concisely describes the main change: replacing the screenshot crop with a designed social card.
Description check	✅ Passed	The description explains what changed, why it changed, and includes before/after UI screenshots. It does not include the template Checklist section, but the core required information is present.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

_{Comment @coderabbitai help to get the list of available commands.}