feat: separated landing background pictures

[samderanova]

Resolves #30 . There's a slight issue where on larger viewpoints, the background (and thus, the color transition to the deep blue) get cut off. I'm currently trying to figure out how to fix this.

[github-actions]

Deploy preview for irvinehacks-site-2024-sanity ready!

Name	Sanity Studio
Preview	Visit Preview
Commit	f6033dd

[github-actions]

Deploy preview for irvinehacks-site-2024 ready!

Name	IrvineHacks 2024 Site
Preview	Visit Preview
Commit	f6033dd

[waalbert]

LGTM

[taesungh]

I'm not seeing the benefit to the layered approach here: I thought the long term goal was having dynamic positioning of the pieces, but this stacked background doesn't make progress towards that. Mainly pointing this out since the asset size has dramatically increased to produce nearly the same end result.

[samderanova]

This is so we can eventually add on animations more easily. One of the animations, for example, is to have the boat slide up into the landing section on load.

[taesungh]

Hmm, animating the background position when there are so many backgrounds might be a bit cumbersome. Additionally, I thought the movement concepts would require some scroll-based parallax which wouldn't quite work when all of the backgrounds are on the same element.

[samderanova]

Most of the animations on Figma don't seem scroll related to me though, except maybe the fish swimming up the screen.

[taesungh]

Perhaps it was discussed briefly during the first sync but never formally noted. We can reconsult graphics.

[tyleryy]

I think the decomposed background image border shows when you shrink the window.

[samderanova]

Ok, I'll see if I can switch to a more fluid version of that background.

[tyleryy]

I might want to add a glTF Blender dragon so maybe it can fly through the layered background. So it could be useful to decouple the background assets.