feat(website): rework the website hero + animated taiko image

[wolfderechter]

This is my take on issue #399. I also added an animation on the TaikoGeom image upon scroll, would love to hear thoughts on this but can always be removed. See the picture for how it looks on an Iphone 11 Pro.

[vercel]

@wolfderechter is attempting to deploy a commit to the taikoxyz Team on Vercel.

A member of the Team first needs to authorize it.

[dionysuzx]

i am seeing a vercel error @wolfderechter , do you know why? this looks great at least from the screenshot, thank you for your contribution! ❤️‍🔥

ReferenceError: window is not defined

EDIT: possibly more info here: https://github.com/taikoxyz/taiko-mono/actions/runs/3669719093/jobs/6203750534

[wolfderechter]

There was a problem with the window usage, resolved now

[dionysuzx]

There was a problem with the window usage, resolved now

this looks awesome, thank you again @wolfderechter ! two small comments:
1: is it possible to brighten the hue / saturation in the default view (scrolled all the way to the top)
brighter/more saturated before:

less saturated after:

2. can we put this behind the text? it looks like on mobile view that it goes "in front". also is it possible to make it any smaller on the mobile view / out of the way?

[ghost]

Noted! Digesting it all, thanks for that!

…

On Mon, Dec 12, 2022, 5:43 PM dave | d1onys1us ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In packages/website/src/components/Hero/index.tsx <#414 (comment)>: > + // Smaller screens need a faster decrease + if (1 - elementHeight * 0.003 >= 0) { + taikoGeom.style.opacity = `${ + (1 - elementHeight * 0.003) * (1 - elementHeight * 0.003) * 0.8 + }`; + } + } else { + taikoGeomParent.style.width = `${ + window.innerWidth.valueOf() / 2 + elementHeight * 9 + }px`; + + // Lower the TaikoGeom opacity on scroll + taikoGeom.style.opacity = `${(1 - elementHeight / 250) * 0.8}`; + } + }; + window.addEventListener("scroll", changeTaikoGeom); this is not using svelte fyi, it is using react. (we use svelte on our Bridge UI, this is docusaurus + React). @WormydogDOTeth <https://github.com/WormydogDOTeth> — Reply to this email directly, view it on GitHub <#414 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A4WB5KKNV463OESNNJHFXADWM6TBXANCNFSM6AAAAAAS3B2GZM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[gitpoap-bot]

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

GitPOAP: 2022 Taiko Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.

[dionysuzx]

hi @wolfderechter I noticed there is a gap / overflow on the right side, i'm only noticing this on mobile view. do you know what the fix for it is?

screenshot

[wolfderechter]

hi @wolfderechter I noticed there is a gap / overflow on the right side, i'm only noticing this on mobile view. do you know what the fix for it is?

screenshot

Oh snap, you're right. Just fixed it on #443, there was still an overflow to the right that I overlooked

[dionysuzx]

hi @wolfderechter I noticed there is a gap / overflow on the right side, i'm only noticing this on mobile view. do you know what the fix for it is?

screenshot

Oh snap, you're right. Just fixed it on #443, there was still an overflow to the right that I overlooked

looks like there is a merge conflict @wolfderechter