Redesign: Landing page feedback

[exezbcz]

Hello, I was looking at the https://beta.kodadot.xyz/?redesign=true and found a few things that need to be changed. I will mention everything I see as I open it. Some of these you may already know about, but I will try to highlight them all here.

Hero section

• There should not be that much margin between "Discover, Collect And Sell" and "Kusama NFTs" It's maybe something like 10 or fewer px.
• side graphics collapses into middle content.
  
• Links under the search bar when clicked should direct the user to explore the page with the chosen network
  
  Does the network in brackets have to be here? It's not looking great how it's not aligned vertically (or has the same width) as a search bar.

search bar/results

current status:

the design:

on page https://beta.kodadot.xyz/?page=1&redesign=true&search= there are no trading results when focusing on the search bar or pressing "K"

• Hover effect missing on all cards
• White mode hover effect: accent light 2
• dark mode hover effect: #363234
  demo:

search.results.video.mp4

Missing info on collections

• floor and units

Selection

how it should look like:

• there is no hover effect on the text. It's not the nav section. When active - bold text

"see all"

• it should have only the hover effect - bold, not changing any color.
  

Spotlight

• All of the cards in the carousel, including single nft cards in Newest lists, Latest sales, etc. should overflow over the edges of the content. They should scale up/down to show only 4 in the case of the spotlight and single nfts. Once it overflows, it should change its opacity to 30% and mode to luminosity. That means we see the content, but it's clear we can scroll. See the picture below.
  now:
  
  in the design file:
  
• heading should be white and also respect the font sizing of h2 - in this case, it's 39px, but that's a minor problem.
• also the images in the spotlight card should have a stroke of 1px. Like this:
  
• Then there's a slight problem with the drop shadow effect, but I think that will be solved with problem n. 1.
  

Top collections

• On the bigger screens, there are 3 columns next to each other of top/trending collection cards.
  
• In the design, there are only 2.
• content inside card:
  
  now it's missing network, USD volume, and % change.
  
• missing filters for the time period and network.
• "see more link" should be on hover similarly to the nav bar/footer links.

NFT carousel section

• Same issue as with the spotlight carousel.

All of the cards in the carousel, including single nft cards in Newest lists, Latest sales, etc. should overflow over the edges of the content. They should scale up/down to show only 4 in the case of the spotlight and single nfts. Once it overflows, it should change its opacity to 30% and mode to luminosity. That means we see the content, but it's clear we can scroll. See the picture below.

Footer

• We already discussed this one, but icons for socials in dark mode should have different hover effect. Icons should change to dark when hovering. See the picture below.
  
• Links have hover state - bold

Cards

the card breaks when there is no collection/nft name. Also, In this case, it would be great to make max name length and then only add 3 dots behind if it is over.
And I think that's it. If I see any more, I'll comment on the issue. If you have any questions, ping me anytime!

Ref

• Redesign Landing page #3844

[yangwao]

Any takers? I guess this could be made in parallel 👀

[preschian]

in the design file:

can someone fix this carousel style? I'm not really good with CSS stuff, haha 🙈

[roiLeo]

I think we should open separate issue for each component change

Regarding TopCollection component:

• I find it better to show 3 column on large/wide screen
• we don't have % change data yet
• some for filters, we need to improve Series resolver (ref Series resolver Volume data rubick#26)
• noted! will change hover link

[prachi00]

Just to keep track of these in separate issues:

• Heros
• Search Bar/results - Redesign Search bar/results leftover fixes #4136
• Spotlight - Redesign: Spotlight leftovers  #4153
• Top collections
• NFT carousel section
• Footer - Redesign Footer Leftovers #4139
• Cards - Redesign: Card leftovers #4155

[prachi00]

@exezbcz whats wrong with the hero section? seems fine to me on 14 inch, is it an issue on smaller screens?

[exezbcz]

its a problem with the smaller screens. On the resolution 1200px and lower the graphics collapse into the text.

Also, the graphics aren't aligned vertically with the hero container.

Then there is this:

There should not be that much margin between "Discover, Collect And Sell" and "Kusama NFTs" It's maybe something like 10 or fewer px.

[exezbcz]

Also, could someone please fix the .body color, which is currently set to something with a grey tone? It's not true white as it should be. Thanks!

[prachi00]

Also, could someone please fix the .body color, which is currently set to something with a grey tone? It's not true white as it should be. Thanks!

fixed in #4138

[yangwao]

Is there anything left in this issue that needs to be done?

[exezbcz]

Is there anything left in this issue that needs to be done?

Other than the data on the collection cards, it's finished.

[yangwao]

• Redesign: Top collection data on landing leftovers #4263