hero section tweaks

[technophile-04]

Description

Adding changes for "Hero", and "Mobile Version" sections which Andrea suggested in her "Web tweaks" notion docs 🙌

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
buidlguidl	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 20, 2023 11:02am

[technophile-04]

Also just pushed ae8a91c smaller the font-size a bit which we missed at #14

[Pabl0cks]

Looks very good! Good job Shiv 🙌

I think everything is OK, except I feel that now the Header and the Hero text are too close to each other on mobile, here is a pic:

If we don't want the text to be on top of the drawing, maybe we can add some space/sky so we can move the hero text and not overlap

[Pabl0cks]

With the new padding bottom I think Hero looks nice on mobile 🙌

[technophile-04]

Just pushed minor tweak Andrea suggested at c95c39b: decreased the title font-size on mobile and removed distracting arrow animation

[Pabl0cks]

Just pushed minor tweak Andrea suggested at c95c39b: decreased the title font-size on mobile and removed distracting arrow animation

New title font-size looks better on mobile, yep! 🙌

For the animation I have strange feelings, I liked the arrow animation, gave it videogame quest vibes 🥺

Maybe 24/7 animation was a bit too much, but when removing it totally I see the arrow a bit strange there now 😂 Perhaps doing the animation 3-4 times after X seconds in the page or something like that could work?

[technophile-04]

Perhaps doing the animation 3-4 times after X seconds in the page or something like that could work?

Love this idea will update 🙌

[technophile-04]

Added the logic at 6ccf279, it runs animation 4 times every 5 seconds

Also added .env to .gitignore and also noticed we don't have it in SE-2 main I think we should add it right @carletex ? I remember discussing about this but was not able to find the discussion

[Pabl0cks]

Added the logic at 6ccf279, it runs animation 4 times every 5 seconds

I see it cool! 🙌🔥
At first was thinking that maybe we could stop the animation when you scroll down a certain amount, but then thought probably was useless and not worth it the extra logic, since I don't think users will get "stuck" in the middle of scrolling 😂

[carletex]

This looks great! Amazing job @technophile-04 . And thanks @Pabl0cks for the feedback.

The only thing that I think we can improve is the hero mobile view:

The height is set with h-[70vh] md:min-h-screen. The idea of the 70% was to be able to see that there was more content below. But I don't think it's needed now (with the arrow)

So options:

1. Remove the arrow on mobile
2. Increase the 70vh. Doing 100vh won't work (since it doesn't compute the browser navbar height on mobile). Maybe we could try -webkit-fill-available or just increase it to 80 / 90 vh.

Thoughts?

In any case, no need to wait for this in order to merge.

[andrealbiac]

Hey everyone!! :D (yes- I have a GitHub account!- since the hackathon) First comment I ever write. Carlos asked for thoughts on this so thought it might be easier to just reply here

• Height & next section: Okay so about the height on mobile: The idea of decreasing the height to 70% (in mobile) was to show a wider part of the illustration if possible, like in ethereum.org site (below). We can do 75% or 80% if you think it's too much, but 90% is too little illustration imo.

Either way it's true that the sneak peak to the next section is weird. I think it's bc of the shape of SRE illustration (the top it's uncentered) and there's no title there so it's confusing. We could fix this by swapping the title and the illustration so you'd see the title first. What do you think?

• Arrow: I agree that if the hero is shorter maybe there's no need for the arrow anymore (though I liked Pablo's idea with the delayed animation). We can remove it and see how it looks.

• Line jump: This is me being picky but can we add a line jump in the title? So it reads 'learn, build and/ thrive on Ethereum' - thank you C:

[carletex]

Thanks @andrealbiac !

Removed the arrow for mobile, and flipped the order in the first section. I kept the same height