[IDEA] Let's make the UI more cooler! about khoj HOT 3 CLOSED

I think this page definitely deserves a better UI.
The scrolling inside of the div (that too with overflow not hidden) is not the best way to display content in my opinion.

1. In place of the normal divs, we can go with the 2024 trend of bento grid cards for each div. Using bento grids will give it a more fancy and relevant look for an ai tool website page providing decent amount of information.
2. To display the content of each card we can use modals, a modal would let a user click on a button which would open up a dialogue box/modal with all the important information.
3. We need to hide the scrollbar when reading the content, the scroll bar visibility reciprocates a very bad impression of the ui to a user.

LMK if I can help in any way to improve the UI too.

from khoj.

Thanks a ton for this discussion guys, this feedback is invaluable. The scrollbars seem to actually be a windows issue, but we should 100% fix that.

@amaan-bhati , would you have a UI reference for what you mean by bento cards?

from khoj.

Hello @sabaimran
Thanks for considering my input, glad my idea was appreciated here.
You can check the following websites for the UI reference :

https://necatikcl.dev
https://10xdesigners.co
https://wope.com
https://liam.is

The small cards that you see when you scroll through the above websites are examples of bento grids, bento grids can be of various sizes depending upon the content to be displayed and can be customised accordingly using own innovation.

You can also check js mastery's youtube video about the same:
https://www.youtube.com/watch?v=FTH6Dn3AyIQ&ab_channel=JavaScriptMastery

You can also check the shorter version of my portfolio website that i built using nextjs following the bento design trend at https://contact.amaanbhati.tech

Hope that helps, do let me know if you need more information or any further help.

from khoj.