Redesign Landing page

[yangwao]

We've been working quite a while on a new design, and we will start rolling with a new one as mentioned in #3710
This issue is in the draft, and I will gradually add descriptions of particular sections.

@exezbcz will drop some more wisdom I've forgot and help you guide through

• mobile description coming^soon

Figma export

• Readme
• Design
• Components + Prototypes

Navbar

Navbar will be functioning most likely nowadays, with some refreshment.

From left to right

• There will be a logo which takes you back home /.
• Search in the navbar, which will appear once you scroll the site.
• Explore, which will take you to global explorer -- I guess we don't have this one, so most likely skip it for now
• Stats - Rankings like series
• Connect -- this will stay the current one. Hopefully, it's already made as a component (?)

Search

We will have a multi-chain search including RMRK, Basilisk and other upcoming implementations.
Multichain search will support ¹
The search bar could be selected when pressing 'K'
On input focus, it will show trending collections
those trending collections could be fetched by default by most volume or most of buys per 7 days with the option to overwrite/add extra collections to list
Under search, we can show currently working chains , along with upcoming integrations ²
Each chain name would be linked to a particular explorer feed based on that chain. I.e. RMRK -> /rmrk/explore

The same search bar would go to the navbar once the user scrolls down
The majority of search is being done in

• SearchBar Refactor & Redesign #3763
• Refactor: SearchBar component #3360

Spotlight

This section would be a remake of our existing carousel component. The component will be still and without auto-play.
On this component, we will be showing collections from all chains. So having array with chain and address collection would be mandatory here.
As you see, we will be showing picture of collection with collection name. The link will take user to the collection view.
The spotlight will be horizontally scrollable, with at least 15 collection.
This feed will be a curated list by community picks.

Some work is being done here

• Refactor: Curated List - Vue Composition API #3772
• Curation feed #876

Top collections

The collection would receive a new look and feel.
Most data are already done in the series insights component, so expanding here should be a breeze.
The new functionality will be there, showing 24 hours, 7 days and 30 days time frame of data.
Default selected time frame should be 7 days.
On the upper right, "All" would change collection data based on supported chains: ¹.

Data

• name of collection
• floor of the collection
• total volume of collection in native token per selected period
• total volume of collection in USD per selected period
• difference within the selected period

Link will take the user to the collection view.

Some part of preparation is upcoming in this issue.

• 🎩 Top Collections #3869

New Listings

This section would work same as current listings.
The major difference is that we will pool data from various indexers into one component.
We will be showing user on which chain listing happened, like ¹ .

Data

• NFT name
• Collection name
• Listing price
• Supported chains: ¹

Latest Sales

This section would work same as current sales.
The major difference is that we will pool data from various indexers into one component.
We will be showing user on which chain sale happened, like supported chains: ¹ .

Data

• NFT name
• Collection name
• Sale price (the last buy happened)
• Supported chains: ¹

Featured Articles

We will have a list of articles, for now, three without scroll.

Data

• hero picture for the article
• Article title
• Short description
• Link to an article

More articles can go to either to Medium or Substack publications, whichever we will decide for

Footer

Here we will collect email address into our Substack.
Link Substack of our Kodadot publication, can drop code for button
Other links are to

• FAQ -> https://kodadot.xyz/rmrk/faq -> probably we should move FAQ to root, like https://kodadot.xyz/faq
• Grants -> link to current grants form
• Documentation -> https://docs.kodadot.xyz/
• Contribute -> https://kodadot.xyz/contribute

Socials

• Twitter -> https://twitter.com/kodadot
• Instagram -> https://instagram/kodadot.xyz
• Discord -> https://discord.gg/u6ymnbz4PR
• Youtube
• Telegram

Legend

• Landing page redesign #2792

Currently working chains

• RMRKv1
• Basilisk Rococo

Upcoming working chains

• MoonRiver
• MoonBeam
• Astar (RMRK)

Footnotes

1. RMRK 1.0, Basilisk ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶

2. Currently supported chains are RMRKv1 and Basilisk Rococo. Upcoming integrated chains will be MoonRiver, MoonBeam and Astar(RMRK) ↩

[preschian]

Hi, because some ordering components are a little bit different in the new design, I will prepare a new landing-page component with a query parameter approach #3710 (comment). Hopefully, everyone can start to redesign new components in that layout. And, it would be nice if the new components were written with Vue Compose API

Ref:

• https://v3.nuxtjs.org/bridge/overview
• https://vuejs.org/guide/typescript/composition-api.html
• https://v3.nuxtjs.org/guide/directory-structure/composables/
• https://v3.nuxtjs.org/guide/features/state-management

Task:

• Redesign: prepare separate landing page redesign: prepare landing page for new design #3895

Currently, I'm still in progress redesigning the carousel for the spotlight, new listing, and the latest sales

• redesign: Carousel component #3889

The other components maybe can be started:

• Redesign: navbar
• Redesign: featured articles
• Redesign: footer

[prachi00]

@preschian @yangwao can I start working on the footer design?

[preschian]

@preschian @yangwao can I start working on the footer design?

of course, yes, I guess 👍
you can start by creating a new branch from this branch https://github.com/kodadot/nft-gallery/pull/3895/files (while this branch is still in review)
for the new footer put the component in here components/TheFooter.vue

[prachi00]

@preschian @yangwao can I start working on the footer design?

of course, yes, I guess 👍 you can start by creating a new branch from this branch https://github.com/kodadot/nft-gallery/pull/3895/files (while this branch is still in review) for the new footer put the component in here components/TheFooter.vue

sounds good, thank you, I'll start on this one

[yangwao]

Hey since #3895 is merged others can help with this? 👀

[Jarsen136]

I will start working on bringing searchBar to landing page once #3894 is merged

[yangwao]

I will start working on bringing searchBar to landing page once #3894 is merged

the stage is yours @Jarsen136 🤩

[yangwao]

let's continue to

• Redesign: Landing page feedback #4090