Rework landing page a bit - add recent mints for sale

[yangwao]

Spec

• remove from footer substack, telegram, reddit (as we don't maintain them right now) Pic1
• add to footer https://docs.kodadot.xyz as Documentation

query lastListed {
  events(limit: 20, where:{ interaction_eq: LIST }, orderBy: blockNumber_DESC) {
    meta
    nft {
      name
      meta {
        image
      }
    }
  }
}

Being done in #2172

• add shadows to the buttons [Create,...,What Are NFTs] -- buttons are gone meanwhile
• copy box Recent Sales over and add showing newest NFTs for sale in the same format
• put inside the last three NFT items previews where sales have happened once the user came to the site
• collection detail could be like is at gallery feed, check pt3
• in the recent sales box add the text "Recently Sold" so newcomers will know
• remove CTA text from homepage__box, make it extended, add shadow there as well
• remove background
• clicking on NFTs will lead you to NFT item detail

pt1

pt2

pt3

Ref

• Curation feed #876 bit start for this
• Add custom discord widget to landing page #1596
• Most bough collections for landing page component or curated feed #2180

[vikiival]

Hello fellow dev,
here is the graphql query you need

as the client for apollo please use 'subsquid'

query lastSold {
  events(limit: 3, where:{ interaction_eq: BUY }, orderBy: blockNumber_DESC) {
    meta
    nft {
      name
      meta {
        image
      }
    }
  }
}

the output from the graphql

{
  "data": {
    "events": [
      {
        "meta": "392000000000",
        "nft": {
          "name": "WolfAngryClub | #069",
          "meta": {
            "image": "ipfs://ipfs/bafybeidxbgx6ykhq4o6bdnygswcksn5vsyo4bcik6flf4ubr54kvelgzpu"
          }
        }
      },
      {
        "meta": "225400000000",
        "nft": {
          "name": "Spirit Key #2820",
          "meta": {
            "image": "ipfs://ipfs/bafybeicuuasrqnqndfw3k6rqacfpfil5sc5fhyjh63riqnd2imm5eucrk4"
          }
        }
      },
      {
        "meta": "5096000000000",
        "nft": {
          "name": "Kitty Paradise #155",
          "meta": {
            "image": "ipfs://ipfs/bafkreigdcisj4r6r7b6mpy4dlrivpd73iw6b5mivhswr6jmt2eq7al47jq"
          }
        }
      }
    ]
  }
}

[prachi00]

is there a design for this that we can reference?

[yangwao]

is there a design for this that we can reference?

Not any, but I can be helpful to guide you! :)

[prachi00]

@yangwao 1st point, remove background from where exactly?

[yangwao]

@yangwao 1st point, remove background from where exactly?

From /, I've now realized that I've already removed it at screenshot but haven't committed it tho :)
So yeah that big background picture could be removed.

[prachi00]

@yangwao can you explain this point as well
remove CTA text from homepage__box, make it extended, add shadow there as well

[XyloDrone]

Hey everyone, landing page design was here... #1619
https://www.figma.com/file/GeVzZKVORd9L8kAWrlKtZv/KodaDot-UX%2FUI?node-id=0%3A1

No feedback was left so far.

[prachi00]

@yangwao @XyloDrone should I reference this then? seems there are lot more changes than mentioned tho

[XyloDrone]

@yangwao @XyloDrone should I reference this then? seems there are lot more changes than mentioned tho

I suppose we'd need to wait for @yangwao to comment on the design, as mentioned there wasn't any feedback so far so I'm not sure.

[XyloDrone]

@prachi00

Seems like we are good to go with this one, Figma valid for reference :D + some extras that have been mentioned after :D

[XyloDrone]

@prachi00 , @yangwao I don't think it's very optimal for UX to have a carousel on the landing for displaying NFTs, any chance we could consider having 2 rows instead and "View all" button as per design? I think this is much more user friendly and it requires less interaction to view NFTs.

[prachi00]

@yangwao this ticket needs more clarity as to what exactly is to be done
Also, 2nd point
copy box Recent Sales over and add showing newest NFTs for sale in the same format
this is already been done right?

[yangwao]

Current state

• Recent mints are gone, subsquid issue seems, we are investigating, but majority people remember it was there and working :D

• I've updated the rest of the actionable tasks for this issue

• yes we had quick call w @XyloDrone about this and we need breakdown components and will be adding curation feed with hero probably and same fashion most bought NFTs Most bough collections for landing page component or curated feed #2180

I don't think it's very optimal for UX to have a carousel on the landing for displaying NFTs, any chance we could consider having 2 rows instead and "View all" button as per design? I think this is much more user friendly and it requires less interaction to view NFTs.

Yes and no. Having 2 rows is optimal for desktop, but despite we will want to target more mobile users till we have dedicated mobile app, we need some sacrifice. Like I was thinking for mobile have maybe instagram/fleet like component and thus we don't need horizontal, who knows, I'm really not UX/UI mobile, I'm just trying optimize way better. On this hand, would be actually cool to survey existing collectors using KodaDot what they think, or maybe where they see defects in Singular and we can take advantage in form of UX :)

I mean, @XyloDrone let's create/open issue to research and comparing best landing pages out there of NFT marketplaces? We can fund it if it could be done quickly! It would help us make way better decision based on data rather on intuition.

[yangwao]

@prachi00 do you want to finish this? :)

[prachi00]

@yangwao yes I will be working on this

[XyloDrone]

@yangwao Understood.
I've looked at quite a bit of NFT platforms for the purpose of redesigning Koda so I can post some of these up.
Shall I submit screenshots and notes on both desktop and mobile?

[yangwao]

last bits finished in #2412