Add hero images to kit.svelte.dev

[Rich-Harris]

Includes #33, #34, #168, but I mostly wanted to raise this catch-all issue so we have a convenient place for @vedam's gorgeous work: https://www.figma.com/file/f87psJnCeqMbUPAQABmCrN/svelte

[vedam]

OK,
I've refined things a bit more, especially a better OpenCollective-Render.
Updated figma-file
Maybe someone can tell me if you're able to comment on the figma-file?
First figma-experience, so I don't know if it's setup correctly.
I don't want to risk something going public until we're ready.

[Rich-Harris]

These are looking better and better! I was able to add a comment

[vedam]

Great, then just comment if you have further need for action, criticism or suggestions for improvement.
It should even be possible to make a copy and move the elements around yourself to your like.
You see, svelte is also fun in areas you never thought of. 😄

[benmccann]

I'm wondering where to integrate these. One idea would be in the three boxes on the SvelteKit homepage. "Powered by Svelte" could be the power plant looking thing, "Best of both worlds" could be the two streams colliding, "Build fast" could be the factory pumping out machines from boxes. Maybe the background of those three sections would change to the image when hovered over

[vedam]

Yes, when I made them I didn't know that SvelteKit would get its own site. IMO the illus are rather meant as a replacement for the relatively simple outline-S. Large background images as eyecandy (see figma-layout). One for Svelte itself and one for SvelteKit. As a result, the SvelteKit site is then also visually more distinct from the Svelte site. I think degrading them into the three boxes would make them very small-scale and petty after all.

[edit]
I updated the figma-file

[Rich-Harris]

100%, definitely hero images. I absolutely love these mockups and can't wait for us to start implementing them

[benmccann]

Oh, nice! Yeah, much better usage to have them more prominent! I just sort of thought it was funny how well the images matched the captions for the boxes and wasn't sure how to blend the backgrounds, but the Figma mockups look much better than what I suggested 😄

[rodshtein]

Maybe someone can tell me if you're able to comment on the figma-file?
First figma-experience, so I don't know if it's setup correctly.
I don't want to risk something going public until we're ready.

@vedam Actually is already public
To make it private:

1. First you need to make the file a private
   

2. Then remove access from all non-team members
   

[vedam]

@zamkevich Thx for enlightening me.
I have now made the figma file accessible only to maintainers. If I have removed one of you from the viewlist accidentally (most likely because i can't assign the shown username), please let me know.
If you don't mind that the file is public, let me know too, and I'll reopen it again to everyone.

[MTyson]

I'd like to be able to see the files.

[benmccann]

I have no issues with the files being public. It's up to @vedam whether he wants to be getting comments on them or not 😁

Anyway, the most interesting ones are already included in the description of this issue

[MTyson]

What is the license for these? Can we use them when promoting Svelte to the general public?
Just to repeat the obvious - they are really impressive.

[benmccann]

See https://github.com/sveltejs/branding

[vedam]

OK then, if public viewing isn't a concern: reopened to view for everyone. ;-)

[simonlayfield]

Just seen these - really awesome work.

[benmccann]

Making a note here for anyone that would want to work on this. The code lives in https://github.com/sveltejs/sites/tree/master/sites/kit.svelte.dev

[rafaelcamaram]

I just created the first PR related to it: sveltejs/sites#17.

It's updating the existing components to match with the new design (adding the new hero image) -- I'll create a new PR in order to add the new sections soon :)

CC: @benmccann