\r\n\r\n## Figma export \r\n- [Readme](https://www.figma.com/file/3iOjW12ERFRDSVnpLuhQmf/landing-page-handoff?node-id=1305%3A5612) \r\n- [Design](https://www.figma.com/file/3iOjW12ERFRDSVnpLuhQmf/landing-page-handoff?node-id=798%3A3662)\r\n- [Components + Prototypes](https://www.figma.com/file/3iOjW12ERFRDSVnpLuhQmf/landing-page-handoff?node-id=1305%3A5613)\r\n\r\n\r\n\r\n## Navbar \r\nNavbar will be functioning most likely nowadays, with some refreshment.\r\n\r\n### From left to right\r\n- There will be a logo which takes you back home `/`.\r\n- Search in the navbar, which will appear once you scroll the site.\r\n- Explore, which will take you to global explorer -- I guess we don't have this one, so most likely skip it for now \r\n- Stats - Rankings like series \r\n- Connect -- this will stay the current one. Hopefully, it's already made as a component (?)\r\n\r\n## Search\r\nWe will have a multi-chain search including RMRK, Basilisk and other upcoming implementations.\r\nMultichain search will support [^supportedchain]\r\nThe search bar could be selected when pressing 'K' \r\nOn input focus, it will show trending collections\r\nthose 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\r\nUnder search, we can show currently working chains , along with upcoming integrations [^chains]\r\nEach chain name would be linked to a particular explorer feed based on that chain. I.e. RMRK -> `/rmrk/explore`\r\n\r\nThe same search bar would go to the navbar once the user scrolls down\r\nThe majority of search is being done in \r\n- #3763 \r\n- #3360\r\n\r\n## Spotlight \r\n\r\nThis section would be a remake of our existing carousel component. The component will be still and without auto-play. \r\nOn this component, we will be showing collections from all chains. So having array with chain and address collection would be mandatory here. \r\nAs you see, we will be showing picture of collection with collection name. The link will take user to the collection view.\r\nThe spotlight will be horizontally scrollable, with at least 15 collection. \r\nThis feed will be a curated list by community picks. \r\n\r\nSome work is being done here\r\n- #3772 \r\n- #876\r\n\r\n## Top collections\r\nThe collection would receive a new look and feel. \r\nMost data are already done in the series insights component, so expanding here should be a breeze. \r\nThe new functionality will be there, showing 24 hours, 7 days and 30 days time frame of data.\r\nDefault selected time frame should be 7 days.\r\nOn the upper right, \"All\" would change collection data based on supported chains: [^supportedchain]. \r\n\r\n### Data\r\n- name of collection\r\n- floor of the collection \r\n- total volume of collection in native token per selected period\r\n- total volume of collection in USD per selected period\r\n- difference within the selected period\r\n\r\nLink will take the user to the collection view.\r\n\r\nSome part of preparation is upcoming in this issue.\r\n\r\n- #3869 \r\n\r\n## New Listings\r\nThis section would work same as current listings. \r\nThe major difference is that we will pool data from various indexers into one component. \r\nWe will be showing user on which chain listing happened, like [^supportedchain] .\r\n\r\n### Data\r\n- NFT name\r\n- Collection name\r\n- Listing price \r\n- Supported chains: [^supportedchain]\r\n\r\n## Latest Sales \r\nThis section would work same as current sales. \r\nThe major difference is that we will pool data from various indexers into one component. \r\nWe will be showing user on which chain sale happened, like supported chains: [^supportedchain] .\r\n\r\n### Data\r\n- NFT name\r\n- Collection name\r\n- Sale price (the last buy happened)\r\n- Supported chains: [^supportedchain]\r\n\r\n## Featured Articles\r\nWe will have a list of articles, for now, three without scroll. \r\n\r\n### Data\r\n- hero picture for the article \r\n- Article title\r\n- Short description\r\n- Link to an article\r\n\r\nMore articles can go to either to Medium or Substack publications, whichever we will decide for \r\n\r\n## Footer \r\nHere we will collect email address into our Substack. \r\nLink Substack of our Kodadot publication, can drop code for button\r\nOther links are to\r\n- FAQ -> https://kodadot.xyz/rmrk/faq -> probably we should move FAQ to root, like https://kodadot.xyz/faq \r\n- Grants -> link to current grants form \r\n- Documentation -> https://docs.kodadot.xyz/\r\n- Contribute -> https://kodadot.xyz/contribute\r\n#### Socials \r\n- Twitter -> https://twitter.com/kodadot\r\n- Instagram -> https://instagram/kodadot.xyz\r\n- Discord -> https://discord.gg/u6ymnbz4PR \r\n- Youtube \r\n- Telegram \r\n\r\n## Legend\r\n\r\n- https://github.com/kodadot/nft-gallery/issues/2792\r\n\r\n[^chains]: Currently supported chains are RMRKv1 and Basilisk Rococo. Upcoming integrated chains will be MoonRiver, MoonBeam and Astar(RMRK) \r\n\r\n[^supportedchain]: RMRK 1.0, Basilisk\r\n\r\n### Currently working chains\r\n- RMRKv1 \r\n- Basilisk Rococo\r\n### Upcoming working chains\r\n- MoonRiver\r\n- MoonBeam\r\n- Astar (RMRK)",[2004,2007,2009,2012],{"name":2005,"color":2006},"p2","D4C5F9",{"name":2008,"color":1992},"A-landing",{"name":2010,"color":2011},"chief","67EA1F",{"name":2013,"color":2014},"redesign","227120",3844,"Redesign Landing page","2022-10-19T15:38:37Z","https://github.com/kodadot/nft-gallery/issues/3844",0.6940611,{"description":2021,"labels":2022,"number":2028,"owner":1994,"repository":1995,"state":1996,"title":2029,"updated_at":2030,"url":2031,"score":2032},"This can be fixed in this issue as it's for the non-mobile devices but on 600px width. \r\n\r\n\r\n\r\nOn 600px width non-mobile, I see this \r\n\r\n\r\n\r\n\r\nAddress select dialogue\r\nbut I guess that's going to be resolved in #4405 \r\n\r\n\r\n_Originally posted by @yangwao in https://github.com/kodadot/nft-gallery/issues/4483#issuecomment-1354745469_\r\n ",[2023,2024,2025,2026],{"name":1985,"color":1986},{"name":2005,"color":2006},{"name":1991,"color":1992},{"name":2027,"color":1992},"A-navbar",4513,"Broken navbar on non-mobile narrow device","2022-12-19T16:39:09Z","https://github.com/kodadot/nft-gallery/issues/4513",0.70483845,{"description":2034,"labels":2035,"number":2042,"owner":1994,"repository":1995,"state":1996,"title":2043,"updated_at":2044,"url":2045,"score":2046},"New redesign item mobile cuts image?\r\n\r\nhttps://beta.kodadot.xyz/bsx/gallery/3579963603-32?redesign=true\r\n\u003Cimg width=\"780\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5887929/211328231-3b6a5324-0792-4d30-93e7-0b7fdd1f679f.png\">\r\n\r\nold whole picture\r\n\r\n\u003Cimg width=\"780\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5887929/211328372-3191de3b-a687-4ae2-8c5d-e69570a27880.png\">\r\n\r\n",[2036,2037,2039,2041],{"name":1985,"color":1986},{"name":2038,"color":2006},"p3",{"name":2040,"color":1992},"A-item",{"name":2013,"color":2014},4647,"Mobile design on redesigned item","2023-01-17T12:58:39Z","https://github.com/kodadot/nft-gallery/issues/4647",0.7128715,{"description":2048,"labels":2049,"number":2054,"owner":1994,"repository":1995,"state":1996,"title":2055,"updated_at":2056,"url":2057,"score":2058},"Hey I've been testing kodadot redesign on foldable phone Samsung fold 4 (which is getting popular) would be nice to address few mobile issues we have currently\r\n\r\nOn cover screen (narrow one), would be nice to put creator and owner under each other\r\n\u003Cimg width=\"328\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5887929/206866713-55aa1b81-faa0-4e43-8bb9-2ea72ecb9dab.png\">\r\n\r\nOn cover screen, can't log in because connect button/profile is below viewport and can't scroll there\r\n\u003Cimg width=\"328\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5887929/206866738-501e8f4c-7437-4314-821a-e6601fcec879.png\">\r\n\r\nOn chart time range select, dropdown appears at different location\r\n\u003Cimg width=\"328\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5887929/206866716-160583a7-05ea-4fe2-93c9-c881503fd62c.png\">\r\n\r\n## Ref\r\n- #4443 \r\n- #4125 ",[2050,2051,2053],{"name":1985,"color":1986},{"name":2052,"color":2006},"p4",{"name":1991,"color":1992},4471,"New item redesign on foldable phone","2022-12-11T20:02:06Z","https://github.com/kodadot/nft-gallery/issues/4471",0.7218754,{"description":2060,"labels":2061,"number":2068,"owner":1994,"repository":1995,"state":1996,"title":2069,"updated_at":2070,"url":2071,"score":2072}," > @exezbcz how exactly the search on mobile should look? I cant find the designs for that\r\n\r\nokay, so we are going to keep the version that is currently on beta.kodadot.xyz with few changes. \r\n- Stretch the search results to 100% vw, so there is no gap. We can do that because we finally have the close button when you focus on searchbar. \r\n\u003Cimg width=\"461\" alt=\"image\" src=\"https://user-images.githubusercontent.com/90852205/207857033-17f9bce8-1c8f-424e-b4ea-0d3088c4e6f2.png\">\r\n\r\nlike this: \r\n\u003Cimg width=\"394\" alt=\"image\" src=\"https://user-images.githubusercontent.com/90852205/207858322-cc6858b6-4351-43b4-8048-23e000780b84.png\">\r\n- while keeping the margin left and right. To be exact - 20px \r\n\r\nIs this okay?\r\n\r\n_Originally posted by @exezbcz in https://github.com/kodadot/nft-gallery/issues/4483#issuecomment-1352985451_\r\n ",[2062,2063,2064,2066,2067],{"name":1985,"color":1986},{"name":2005,"color":2006},{"name":2065,"color":1992},"A-search",{"name":1991,"color":1992},{"name":2027,"color":1992},4514,"Stretch search results on mobile navbar ","2022-12-21T17:29:45Z","https://github.com/kodadot/nft-gallery/issues/4514",0.7254622,{"description":2074,"labels":2075,"number":2084,"owner":1994,"repository":1995,"state":1996,"title":2085,"updated_at":2086,"url":2087,"score":2088},"> So is that oki? Bit confused that you wrote oki and removed label @exezbcz\r\n> \r\n> \r\n\r\nnope, the bug is still there. \r\n\r\n\r\n\r\n- the navbar on big touch devices is broken. \r\n\r\nProbably it was fixed in\r\n- #4622\r\n\r\nClose if done so\r\n\r\n_Originally posted by @exezbcz in https://github.com/kodadot/nft-gallery/issues/4580#issuecomment-1381939698_\r\n ",[2076,2079,2080,2081,2082,2083],{"name":2077,"color":2078},"UX first","7057ff",{"name":1985,"color":1986},{"name":2005,"color":2006},{"name":1991,"color":1992},{"name":2027,"color":1992},{"name":2013,"color":2014},4685,"Navbar at big touch devices is broken","2023-01-16T11:23:45Z","https://github.com/kodadot/nft-gallery/issues/4685",0.72893673,{"description":2090,"labels":2091,"number":2098,"owner":1994,"repository":1995,"state":1996,"title":2099,"updated_at":2100,"url":2101,"score":2102},"Tbh I really don't recall how this is called but would be nice to play around with the navbar once the user is scrolling down to compress it to a smaller size?\r\n\r\nGoal is to save precious vertical pixels on smaller devices, like 13\" notebooks and mobile phones. \r\nSo I would like to see, smaller logo and text in navbar plus less vertical space for navbar \r\n\r\nMaybe shrink it's called ? https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_shrink_scroll\r\nhttps://codepen.io/thegrid/pen/ZQxLbb\r\n\r\nBest if we can use CSS only and no js on this \r\nhmm https://github.com/buefy/buefy/issues/3313\r\nhttps://stackoverflow.com/questions/51563270/nuxt-vue-bootstrap-vue-shrink-navbar-on-scroll\r\nhttps://user-images.githubusercontent.com/5887929/153710644-8b5f72cd-194d-49d0-a1a1-33e06be7694f.mov\r\n\r\n",[2092,2093,2094,2095],{"name":1985,"color":1986},{"name":2005,"color":2006},{"name":1991,"color":1992},{"name":2096,"color":2097},"css","8F33D1",2341,"Navbar transformation during scrolling","2022-02-28T09:08:22Z","https://github.com/kodadot/nft-gallery/issues/2341",0.7303088,{"description":2104,"labels":2105,"number":2112,"owner":1994,"repository":1995,"state":1996,"title":2113,"updated_at":2114,"url":2115,"score":2116}," I'm not sure if this is tracked elsewhere but there's a lot of funky stuff going on with mobile menu, such as:\r\n\r\n1. you have to double tap to cancel selected option\r\n2. now the UI is a bit off and needs rethinking, it would be nice to have unified look for create/stats and chain\r\n3. connect button basically hidden for me on iPhone, possible to scroll down to it in dev view on chrome\r\n\r\nI'd like to start working on these tomorrow.\r\n\r\n_Originally posted by @petersopko in https://github.com/kodadot/nft-gallery/issues/4446#issuecomment-1340148441_\r\n ",[2106,2109,2110,2111],{"name":2107,"color":2108},"bug","d73a4a",{"name":1985,"color":1986},{"name":2005,"color":2006},{"name":1991,"color":1992},4451,"mobile menu (navbar)","2022-12-08T14:55:52Z","https://github.com/kodadot/nft-gallery/issues/4451",0.7324173,{"description":2118,"labels":2119,"number":2123,"owner":1994,"repository":1995,"state":1996,"title":2124,"updated_at":2125,"url":2126,"score":2127},"We should rework and refactor the navbar code in a much more sensible way and what's should be merged and exclude on different widths.\r\n\r\nHidding least popular buttons from first, hence we don't have any UX research I can only bet.\r\n- language\r\n- chain/protocol selector\r\n- create\r\n- history\r\n- stats\r\n- profile\r\n\r\nWith search bar should be flexible and fill up the rest space next to the buttons.\r\n\r\n_Originally posted by @yangwao in https://github.com/kodadot/nft-gallery/issues/2769#issuecomment-1088467364_",[2120,2121,2122],{"name":1985,"color":1986},{"name":2038,"color":2006},{"name":2027,"color":1992},2770,"Rework+Refactor the navbar code","2022-04-06T14:11:31Z","https://github.com/kodadot/nft-gallery/issues/2770",0.7344698,["Reactive",2129],{},["Set"],["ShallowReactive",2132],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"-ZBLp15R_J6EuxBH6ZWHyhd6bcyCN565yMwcRRd0-gU":-1},"/kodadot/nft-gallery/4125"]