Add landing page for Svelte UI project [Do not merge until landing pages for all supported frameworks are complete]

[ymekuria]

Closes #371

A landing page was added to the ui projects created with Svelte. The goal of adding this landing page is to provide users with guidance on next steps after generating a zkApp project with an accompanying ui. This page gives users practical immediate next steps as well as guidance on where to dig deeper.

This PR should be merged when the landing pages for Next and Nuxt are also ready to be merged.

[MartinMinkov]

Great job on the PR so far! I just have a few suggestions regarding the button styles that might help improve the overall look:

1. It seems like the hover background color on the buttons is slightly off. Currently, it has an orange background, but maybe we could adjust it to match the design more closely?
2. When hovering over the button, it would be nice if the background could transition to the dark styles used in Mina Protocol instead of staying white. This way, it'll be more consistent with the overall theme.
3. I noticed that the arrow icons move a bit on hover. Perhaps we could keep them stationary to maintain a cleaner appearance?

This can also be applied to the NextJS changes too :D

Here's a comparison of the current implementation and the Mina Protocol design for reference:

Current:

MinaProtocol:

[ymekuria]

1. It seems like the hover background color on the buttons is slightly off. Currently, it has an orange background, but maybe we could adjust it to match the design more closely?
2. When hovering over the button, it would be nice if the background could transition to the dark styles used in Mina Protocol instead of staying white. This way, it'll be more consistent with the overall theme.
3. I noticed that the arrow icons move a bit on hover. Perhaps we could keep them stationary to maintain a cleaner appearance?

This can also be applied to the NextJS changes too :D

Here's a comparison of the current implementation and the Mina Protocol design for reference:

Current: MinaProtocol:

Thanks for the suggestions @martin! I was following this design, but I am open to all suggestions:

[MartinMinkov]

Thanks for the suggestions @martin! I was following this design, but I am open to all suggestions:

That's a good point! Aligning with the overall theme does seem valuable, and I recommend making the changes. However, I'll leave the final decision and prioritization up to you and @jasongitmail. 😄

[jasongitmail]

Good catch @MartinMinkov

Although we can technically use whatever here, it probably makes sense to try the button hover state from Mina's brand guidelines. The implementation follows the design, but I didn't notice hover styles in the design review and that aspect of the design feels like something we could maybe improve.
@ymekuria I'll send you a link to Mina's brand guidelines, but Martin's doc's button design on the homepage probably have the best example to try a hover state like it:

[ymekuria]

Although we can technically use whatever here, it probably makes sense to try the button hover state from Mina's brand guidelines.

@jasongitmail and @MartinMinkov I changed the hover state to follow the guidelines. This is what it currently looks like.

Do you think we should also change the arrow color in the non hover state?

Current:

Option B:

[jasongitmail]

Option A looks nicer imo, because it makes the button feel more enabled, whereas option B almost has a disabled feel to it.

Requested a full screenshot via DM. But I think I like the black hover.