Center title and links in README.md

[matchai]

This is intended to improve accessibility of documentation and better UI. But, this comes at cost of including HTML directly inside markdown due to limitations of markdown syntax and affects readability of README.

Description

• Title, tagline and badges centered
• Quick link to website, install instructions, features, options and API. Centered and separated with vertical bar (|)
• Moved preview to top, So user don't have to scroll the lengthy features list to see how beautiful the prompt looks
• Link to contributors pages
• Link to preview setup just below preview (It have been asked so.. many times)

Motivation and Context

Mirrors spaceship-prompt/spaceship-prompt#505

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Screenshots (if appropriate):

Before

After

How Has This Been Tested?

• I have tested using MacOS
• I have tested using Linux

Checklist:

• I have checked that no other PR duplicates mine
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have updated the tests accordingly.

[Snuggle]

This looks beautiful, but perhaps it would be better to somehow merge the current banner into the title? Maybe remove the background and move things around a little.
(Awesome banner, by the way! I think it should still be kept somewhere prominent on the page.)

Have a look at Electron's GitHub page for inspiration?
https://github.com/electron/electron

[matchai]

@Snuggle Thank you for the kind words regarding the banner! 😄
I, too, was thinking that the banner needed a little reworking.

I playing around with it and seeing if there's any way we could better integrate it. I think replacing the existing one for the top left version would be better. Thoughts?

[Snuggle]

Yeah, I agree the top left one looks the nicest by far, with the top right one in second place - not quite a fan of the split bottom two.

Is there an SVG available of the top-left or...? It looks awesome!

[matchai]

Oh whoops! I was meaning to say the top right! 😅
Because it has thinner dimensions, the title would look less removed from the banner.

I'm making them all in Figma as vectors, so they're available as svgs:
https://www.figma.com/file/OHv3PPmBNfFuBhVYt7w7qS8h/Banner

[matchai]

Thoughts on using this?

[Snuggle]

Yeah! I like it! 🙂

I think I prefer the emojis on the right, though. It looks a bit weird otherwise.