Global-Chem / global-chem-website

Global Chem Landing Page
https://globalchemistry.org/
2 stars 2 forks source link

SS-4: Gallery and links to our NFTs. #11

Open Sulstice opened 1 year ago

Sulstice commented 1 year ago

https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/59647742786579120677436249866021342788577962640534514836066617017435441594369/

Screenshot 2023-05-25 at 7 10 27 AM

I would like to put a gallery of our software on the site with links to NFT collection

LadyBluenotes commented 1 year ago

@MarvinCorro

This could be a good first thing to dive into the project with. I believe what we are going to do is just add a button, as opposed to a whole gallery at the moment.

Explanation of what to do

In an effort to make the code more reusable / consistent in case we add buttons into the future, you should make a component for the button alone and import it into the hero section.

The to the NFT gallery is https://opensea.io/collection/global-chem, which would need to be passed as a prop to the button component.

The buttons, ideally, should be side-by-side on larger screens and, on smaller screens, should be stacked.

If you make a PR and get started on this, just let me know via any comments if you need help, or feel free to reach out to me on discord.

MarvinCorro commented 1 year ago

@MarvinCorro

This could be a good first thing to dive into the project with. I believe what we are going to do is just add a button, as opposed to a whole gallery at the moment.

Explanation of what to do

In an effort to make the code more reusable / consistent in case we add buttons into the future, you should make a component for the button alone and import it into the hero section.

The to the NFT gallery is https://opensea.io/collection/global-chem, which would need to be passed as a prop to the button component.

The buttons, ideally, should be side-by-side on larger screens and, on smaller screens, should be stacked.

If you make a PR and get started on this, just let me know via any comments if you need help, or feel free to reach out to me on discord.

This sounds fun @LadyBluenotes! I'm not sure what you mean by a button instead of a gallery. Do we have a figma? Is there a way to get a mock up of what you mean even if its in like MS paint so I know im building towards your vision of it

LadyBluenotes commented 1 year ago

This sounds fun @LadyBluenotes! I'm not sure what you mean by a button instead of a gallery. Do we have a figma? Is there a way to get a mock up of what you mean even if its in like MS paint so I know im building towards your vision of it

Screen Shot 2023-05-25 at 3 57 44 PM

This is the current page in desktop. We just want to ensure that the buttons stack on mobile, and are side-by-side on larger screens (you can determine when it's appropriate to stack vs have side-by-side). If you need me to show you it better, I can tho!

Also, I added to the readme how to go about creating a new component, so you can follow that (and ofc ask any questions if you run into them) to make a "Button" component that can be imported into the file. The code is already there (meaning, I've already made the button component) so you'd just import it into the file twice and pass the link to each button as a prop. Does that make sense? I can further elaborate, if need be @MarvinCorro.

MarvinCorro commented 1 year ago

Thanks for clarification, but im still a bit lost. What do you mean add a button instead of a gallery? Are you asking to make a button that links to our NFT page instead? If so what should the button say? what color should it be, etc etc. Sorry im used to working with designers who typically give me a mock and I go build that mock.

LadyBluenotes commented 1 year ago

Thanks for clarification, but im still a bit lost. What do you mean add a button instead of a gallery? Are you asking to make a button that links to our NFT page instead? If so what should the button say? what color should it be, etc etc. Sorry im used to working with designers who typically give me a mock and I go build that mock.

We're going to link to the NFT page. Button will stay exactly as is (design wise)!

Sulstice commented 1 year ago

Ah maybe I should start drawing a mock design. @MarvinCorro what software do they use to design stuff?