nice

I am curious to hear Taylor and the team's thoughts on color variables. I used pretty much all JIT colors here since the styles are inlined and we don't have a Tailwind config. With Breeze and Jetstream, there is a Tailwind config and I suppose we might want to update the auth/dashboard/profile views to match the new colors? Or do we just leave those as is and let the welcome page use slightly different colors? I'm open to thoughts and suggestions.

@jasonlbeggs could you provide screenshots before and after?

we can upload the two screenshots to a CDN and I'll replace the links

Can we make sure to have a fallback here in case of CDN failure, i.e., an onerror hook that replaces the image tag with something else so that it looks good or re-styles the block in some way? This will ensure that the page looks good offline as well.

I also note that the size of the background SVG means that, at least on my machine (M1, 2020 Mac mini) in both Firefox and Safari, the browser is noticeably sluggish when resizing the browser window. It is usually only developers dragging browser widow corners, so usually I don't care about that kinda thing too much, but as this page is targeted at developers it feels important to leave a good first impression. We don't want a sluggish "basic" welcome page IMO. Maybe we should just capture the SVG as a PNG?

I also note that the SVG background image renders differently across Safari, Chrome, and Firefox.

Desktop screenshots

Firefox

Chrome

Safari

Lastly, due to the white Laravel logo and the way Safari renders the background it means the logo is rather hard to make out on mobile.

Thanks for the feedback @timacdonald! Ugh I thought I fixed the background image rendering differently in each browser. Yeah a PNG would probably be the easiest option for that. We can upload it to the CDN too.

I'll experiment with adding an onerror listener and see what looks best.

Do you have any opinions on the color naming that I mentioned in my previous comment?

I don't love the use of all inline colors, but I don't think it is a problem - just a feeling.

I don't think we should have different colors between the welcome page, Breeze, and Jetstream. The skeleton's welcome page becomes part of Breeze and Jetstream. A fresh Breeze install would see one color scheme for the homepage clicking the "login" link would have you land on a login screen with a different color scheme. We had that previously and it felt janky.

I standardised the colors for this reason: #6002

I can try refactoring to default Tailwind colors (except maybe the brand red) if @taylorotwell is cool with the design not matching perfectly. I'll also have to adjust the colors on the docs site screenshots to match.

Maybe will be good to convert images to data uri so there are no additional files.

Ok @timacdonald I've updated the design to use the default Tailwind colors and added an onerror hook to one of the screenshots so if it doesn't load, the page will adjust layout.

Normal circumstances:

Images don't load:

I also moved the background image to a real <img> tag to get around the sluggishness and browser differences.

Check it out and let me know if we're ready to move on to adding it to Breeze and Jetstream!

The images for images do not load show that the arrows are not aligned. (I like the new design)

I couldn’t find where to write, I thought you would notice it here. Is there a need to make this repository as a template? For example, the repository of Django (https://github.com/django/django) is a template.

@avinmaster no need for that

@driesvints why? Maybe we have more reasons to make it so.