exezbcz commented 1 year ago

Basics

Figma file: handoff, page drop page: https://www.figma.com/file/JXNtryaNYhY0XJNArzvPQx/Handoff?type=design&node-id=394%3A6126&t=7EZVleqhUpHD3T6A-1

special for campaigns, we will look into the frontend w/ @daiagi
backend magic cc @vikiival

Game mechanics update

We are thinking that we will have only possible drops in that window for 10 waifus from each phase. So people can see which one they will claim and each waifu can have voucher to either claim one design (we risk that someone would not claim design they won) or we give them voucher for all five items artist collabs by @yangwao

Design

Top part

a copy of the collection UI, banner, name, pfp
infinity rolling banner with a countdown to the next phase, or phase ending

About the collection

some copy about the collection itself.
same functionality as on the collection page, the option to see more if the copy is longer
small button with a redirect to the collection (hover effect same as in profile sidebar)

Middle part

total count of nfts in this collection - In hand with a number of vouchers for merch shop, will be specified
an indicator that the nfts include unlockable content - in this case, its links with a 100% discount to the shop

Action part

the name of the phase and indicator that it's opened, in case of being sold out -
pulsing animation of the glow
progress bar of this mint phase
mint button with time left till the end of the phase
state when minted out:

Schedule

short copy with an explainer
there is an option to collapse and expand the phase view; the whole first row of the phase is clickable, serves as open/close - chevron
maximum of 4 phases displayed
this is what minted out phase looks like - only one always displayed
in progress phase is always expanded by default
a time when it opens and closes
number of mints available in phase
an indicator that there are more phases scheduled - this is not a button

Examples

displays possible drop options, only four previews. There are ten versions; some changes may be here, but I am not sure
arrows to go through the carousel
under the main image are also previews displayed - option to directly click on them - selected bottom image is shown as the main
around the selected image is a 3px blue stroke
hover effect same as on nft-cards (opacity)

Explainer

how unlockables work
learn more, redirect to: https://hello.kodadot.xyz/fandom-toolbox/audience-growth/unlockables
copy will be updated as well
cc @JustLuuuu

Other sections

there will also be a recently minted nft section and then footer

Mobile

next to the desktop design, little changes there, layout is similar to the collection page.

Thank you! 🚀

yangwao commented 1 year ago

Hey @daiagi is travelling bit these days. And as we really need it for our flagship conference events in Prague (cumulative 1k5 claimed tickets), I would like to see someone fast track it.

With Vik we are tinkering backend and for frontend we need someone sharp to be done best 1/6, ofc sooner as we can catch up lot of dragons. Currently this is most prio issue for KodaDot we should do in terms of new features.

I can promise some fast track bounty for this, i.e $200 ! 😎

Who is up to @kodadot/internal-dev ?

I believe some components here are already made up so we just need assemble all skelet and keep iterating there. We will be pushing it through mobile wallets so I believe testing it through NovaWallet is mandatory.

yangwao commented 1 year ago

Hey @Jarsen136 would you be keen to take this one and speed run? 😎

We won't judge your code, I promise, just want first PoC working for our event 😄

We can do it in numerous steps

Jarsen136 commented 1 year ago

Hey @Jarsen136 would you be keen to take this one and speed run? 😎

We won't judge your code, I promise, just want first PoC working for our event 😄

We can do it in numerous steps

I will take a try