4. Update metadata for improved social sharing and branding

[phipsae]

Goal

Currently, our metadata is the default from Scaffold-ETH 2. We want to customize it to better represent our batch by adding a proper title, description, and an eye-catching thumbnail. This will ensure that when we share our webpage on social media like Telegram or X, it displays our unique preview picture, title, and text. Additionally, the updated title will appear in the browser tab.

Instructions

1. Head to layout.tsx and update the title and description
2. Design a visually appealing thumbnail image (aligned with the logo from issue 3. Change the Logo / title / subtitle #10) and replace the existing thumbnail.jpeg in the Next.js public folder
3. Preview Your Metadata: Use a tool like the Open Graph Previewer Chrome Extension to test how your metadata will appear when shared. This helps ensure that your changes look like you want before deployment.

[NikolaiL]

Here is the proposed thumbnail:

If everyone is ok, will make a PR for it.

[phipsae]

@NikolaiL Would you mind leaving this issue for someone else to tackle since you're already working on #10? If no one picks it up in the next few days, feel free to proceed with it?

[NikolaiL]

Sure, please feel free to use the images if you want to use them or modify them for your PR. here is the link to figma: https://www.figma.com/design/SbCXg6z8E5Gv4TNkUZRVS3/BuidlGuidl-12?node-id=0-1&t=739QXOPnTggRDWOw-1

[FrankiePower]

@NikolaiL how do i edit this figma file, it appears that i need access from you to do it, so i sent a request or is there a way to clone it like a github repo? sorry i am not so familiar with figma