[Website] Improve sharing cards

[tobias-tengler]

No description provided.

[Copilot]

Pull request overview

This PR upgrades the website’s Open Graph (OG) sharing cards to better match the landing-page hero artwork, adds a dedicated docs share card layout, and introduces shared helpers/Storybook previews to make the cards easier to maintain and iterate on.

Changes:

• Refactors the marketing share card (ShareCard) to reuse the landing hero artwork and adds per-page titles via a shared createPageShareCardImage helper.
• Adds a new docs-focused share card (DocsShareCard) that can render a product “drink” icon, plus shared product-icon lookup.
• Improves local/dev OG URL resolution and adds Storybook stories + font loading to preview share cards.

Reviewed changes

Copilot reviewed 37 out of 39 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
website-next/src/theme/colors.ts	Adds ccDarkSurface gradient token for share card backgrounds.
website-next/src/og/ShareCard.tsx	Rebuilds marketing share card to mirror hero artwork; optional pageTitle.
website-next/src/og/ShareCard.stories.tsx	Adds Storybook stories to preview marketing share cards.
website-next/src/og/productDrinks.ts	Adds product slug → drink icon map for docs share cards.
website-next/src/og/pageShareCardImage.tsx	Adds helper to generate per-page marketing share card OG images from page metadata.
website-next/src/og/fonts.ts	Replaces Inter-only loader with share-card font loader (Inter + Josefin Sans).
website-next/src/og/DocsShareCard.tsx	Adds dedicated docs share card layout with optional product icon + background.
website-next/src/og/DocsShareCard.stories.tsx	Adds Storybook stories to preview docs share cards across products/titles.
website-next/src/icons/Skillz.tsx	Adds Skillz product logo icon for use in share cards/docs cards.
website-next/src/helpers/siteUrl.ts	Improves dev/staging/prod site URL resolution used for absolute metadata URLs.
website-next/src/components/home/HomeHero.tsx	Refactors hero to consume shared heroArtwork composition constants.
website-next/src/components/home/heroArtwork.ts	Introduces single source of truth for hero artwork + headline + accent gradient.
website-next/app/opengraph-image.tsx	Updates default site OG image to use new marketing ShareCard + new font loader.
website-next/app/docs-og/[id]/opengraph-image.tsx	Switches docs OG image to new DocsShareCard and new font loader.
website-next/app/(content)/services/training/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/services/support/thank-you/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/services/support/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/services/support/contact/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/services/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/services/advisory/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/resources/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/products/strawberryshake/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/products/nitro/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/products/hotchocolate/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/pricing/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/platform/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/platform/ecosystem/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/platform/continuous-integration/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/platform/analytics/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/licensing/chillicream-license/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/legal/terms-of-service/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/legal/privacy-policy/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/legal/cookie-policy/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/legal/acceptable-use-policy/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/app/(content)/help/opengraph-image.tsx	Adds per-route marketing share card OG image via createPageShareCardImage.
website-next/.storybook/preview-head.html	Loads Inter + Josefin Sans in Storybook so share-card previews match Satori output.
website-next/.storybook/main.ts	Registers src/og stories in Storybook.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.