4. Tweak the main page

[edakturk14]

Goal

Discuss with your peers what you would like the homepage to show! It can be a good opportunity to tweak the app colors/layout etc.

As in #9, keep it simple (no big images, external assets, etc)

This can be an ongoing issue while you all keep implementing things.

[vzaporozky]

I propose to add two blocks. The first block includes mentors, the second block includes students.

Add these two blocks between ‘Welcome to batch’ and ‘Debug and search’ blocks

P.s. That's one idea, of course we can do something else

[arjanjohan]

Great idea @vzaporozky! To show the students, we can combine it with this issue https://github.com/BuidlGuidl/batch9.buidlguidl.com/issues/4 I think. We can read the addresses and link to their builder profile

Also I'd like to play around with changing the colors. In other projects I change it up sometimes, see here for a green Scaffold-ETH project and here for a yellow Scaffold-ETH project. But when changing it in tailwind.config.js, I always have some issues where things are not having proper contrast, or dark mode not looking as nice as the default.

I propose we try to make it red instead of blue, what do you think?

[vzaporozky]

@arjanjohan Cool idea!

• we also can make pop up menu with different colors style like in etherscan website

example:

But it maybe it will be difficult to write class for all components in the project...(

[guidoPeirano]

@vzaporozky I've tweaked a bit your proposal, removing the card of debugger and block explorer alltogether, I though we could block exporer to a button on the navbar, and as @arjanjohan maybe we could add the card that counts the amount of studetns checked in.

WDYT?

[arjanjohan]

@guidoPeirano I like that the counter is also showing the total amount of students (including not checked in). It looks great! I would like to show also the address/ens below each pfp.

And when making the students component, we should make it (partially) reusable. On the /builders/page.tsx that we must make (described here https://github.com/BuidlGuidl/batch9.buidlguidl.com/issues/4) we will also need to show an overview of students. So we can either reuse the component on both pages, or just reuse the fetching logic.

[derrekcoleman]

Really loving the screenshots, @vzaporozky and @guidoPeirano. That makes it so much easier for us to imagine the same thing and refine it. Arjan makes a good point that there's overlap here with the Builder page, so I look forward to seeing which part(s) are reusable across both issues! As usual, this is a common scenario to navigate in OSS.

[danitome24]

Woah! good start idea @vzaporozky and nice screenshots @guidoPeirano. I like it a lot!

I would reorganize your idea a bit. I think that having the screen divided into two columns, with one dedicated to the number of checked-in students, takes up too much space that could be used to display the students/mentors.

What I propose is to do the same thing but with rows. In the first row, display the mentors, with their description under each "bubble" and in the second row, the builders, in a similar format to the mentors. In the Builders title, you could indicate something like: "We are already X builders!" and then display all the builder bubbles below.

This way, we may avoid horizontal or vertical scrolling to show all the builders.

I’m not sure what you think of this idea. My proposal is simply to reorganize the main concept a little.

The inspiration:

[ishtails]

how about we create a simple figma before coding anything up? we could reimagine the entire page and distribute work if needed.

[ishtails]

so i sketched this figma design based on whatever i could think of and your ideas that i read above: https://www.figma.com/design/seNI23ZcuP6mMLY84D2Qb4/BUIDLGUIDL-BATCH9-HOMEPAGE?node-id=0-1&t=TBjUMjPrfNOx1u0R-1

i believe this could unify multiple PRs and we could all work together on different features of this. let me know what do you guys think... is it too far fetched? cause every other batch's layout seems to stick to the same base theme... are we allowed to create something like this?

screenshot: