feat: Custom OG images for each page

[kempsterrrr]

#215 introduces a default meta image for every page across the site. While this is a significant improvement over no meta images, we still need custom meta images for each page. This is important because sharing links to lessons and tracks can deliver a much better UX. Examples below.

Current Default image

The image below appears on every page. In this image, we provide minimal information to the user.

Example of improved image This shows the user more info in the image about what they're clicking and provides some variability in the branding aligned with the platform's internal branding. This looks better in the feed and will make a noticeable difference to the number of people who click these links, thus improving the academy's impact.

How do we do this?

1. Automate the creation of this image via Vercel's of image generation lib
2. Create them all manually

The work to automate this is not that large, so I recommend we do that as it will reduce workload as the platform scales.