Add course social cards

[terichadbourne]

Since we've enabled different metadata for each of our pages, resulting in different wording in social cards, let's also change the images associated with each to something more relevant based on the content. Braindump below of some initial ideas and will then request suggestions from our UX-y / design-y / SEO-y friends.

Here's a sample of a current social card with the image we're currently using across the board, even as the title and description below it change:

• Tutorials - more zoomed version of current (see above)

• Homepage - as is (above) but better zoomed, since our tutorials are are most important content? or some fun new graphic? logo?

• Each individual tutorial and its lessons - screenshot of the tutorial card that has the description, eg

• News - screenshot from signup form or a fun icon like the IPFS weekly uses (see below)

• Events (listings) - a couple of event cards, preferably including a live and a virtual one, eg? Or an image from a live event in progress (see options below under host)?

• Host (recruiting local event leaders) - An image of a live event in progress? We don't have many good ones but best contenders are probably:

• https://twitter.com/kk3wong/status/1164222313925160960 (just workshop leaders but interesting screen and shows people using laptops)

• https://twitter.com/kk3wong/status/1183585155883130882 (best audience shot but boring screen and misses the point that people should be using laptops at our events)

• Build (recruiting folks to create tutorials) - maybe a screenshot of the ProtoWizard to make it look easy to contribute?
  

• Contribute - this one's a mixed bag of ways to contribute, how to get in touch, etc., closest we have to an about page ¯_(ツ)_/¯

[jessicaschilling]

This is a great idea in terms of having some degree of personalization between topical pages, but also keep in mind the power of consistency and repetition - for example, seeing a prominent ProtoSchool logo and color scheme in each social card really drives home the repeat power of the ProtoSchool brand and its reliability/pervasiveness. Maybe consider having a prominent logo with other content displayed as a secondary element, for consistency.

Another thing to keep in mind is that social cards' aspect ratios and even possible truncation/clipping depends on the social platform that's using the card, and potentially even the context in which a card is appearing on the platform itself (i.e. just a preview?). Simpler tends to be better with these, so even just a prominent ProtoSchool logo with the words "events" or "tutorials" or whatnot might get you what you're aiming for.

[terichadbourne]

Moving discussion to the newly opened issue in the design shop repo so the pros can help. 🙏😂https://github.com/protocol/design-shop/issues/364

Will consider this issue blocked by that one but we can use this one to track actually getting them implemented in our code once created.

[terichadbourne]

We've completed most of this work thanks to Eric's awesome design work in Figma. We're putting the final touches on course cards now and will close this out when that work is done. @zebateira is updating logos in Figma and I'll come up with wording for the cards.