# RMRK tech test

Your task is to create a landing page with multiple carousels displaying NFTs

The end goal we are looking for is an UI that displays a Hero section and 3 carousels.

Create 3 carousels of these types:
- Latest NFTs
- Latest NFTs for sale
- Composable NFTs

Each carousel must contain:
- Slider controls (arrows + paging)
- Display 4 items per slide
- Display total items in the carousel.
- Mobile carousel controls should be swipeable and display 1 NFT per slide with the next slide partially peaking out

Structure your app in such way that each NFT is clickable and opens a simple page for each nft atleast containing a name and a media
`/nfts/${nftId}`

Bonus additional requirement:

Have a simple dropdown for user to select how many NFTs to display per carousel slide (3, 4, 5). Use [zustand](https://github.com/pmndrs/zustand) with zustand persist middleware (localstorage) as a state-management to save user's choice.

**Data**: https://singular.app/api/rmrk2/account/CdA62JpyfEyEASA5XKYJAyYZmdQPqe5X9x8MLnoTWtc9rNn

**Data for a single NFT page**
https://singular.app/api/rmrk2/nft/11683527-74494d37fc53428637-NFKUSAMA-1_NFK-00000021

Keep in mind that some of the data, like cover image are containened within the metadata of each entry. This can be retrieved by taking the CID from `metadata` and fetched through our gateway

**CID from metadata example** -
"metadata": "ipfs://ipfs/`bafkreidv77pyz37zl7lge5kpds77jmewrhdgnlefkxsu7spehqeads5a5a`", last part of this is the CID

So gateway url would look like this
https://rmrk.mypinata.cloud/ipfs/bafkreidv77pyz37zl7lge5kpds77jmewrhdgnlefkxsu7spehqeads5a5a

### Tech requirements

- Use Next.js - https://nextjs.org/
- Use Chakra UI - https://chakra-ui.com/
- Use Typescript