Improving the UI / UX of Flowbite. It looks just like Tailwind css website but worse.

Gitstar-OC commented 1 month ago

Is your feature request related to a problem? Please describe.

Whenever I visit the website for components, I see some good looking components surrounded by too much text that is not useful and links along with 3 scrool bars with huge navbar filled with various icons and links, not proper loading of images.

Describe the solution you'd like

I would like to work on various improvements and features in the below order

1. Improving the navbar.

Firstly what I see most of the time is banner, which can be disabled via a cross icon so the navbar looks good at top.
There are various navbar for various pages in flowbite. But what I see is same page 2 times Pro Version and Pricing & Faq which a new person would not care if he has not seen the components, which he cannot see because there is no component page link in the navbar There should be one.
I believe one link to github is enough in the navbar and for the link for youtube can be added in the footer, and the social media icons can be shown when someone hovers over the github in navbar.
I don't know the use of the sign in section, what it does but is there any need to login ? I don't know the longer term goals of flowbite. So I cannot comment if the sign in button is not good there.
Making the navbar a bit transparent might help in UI too.
The placement can be rearranged like all the icon to one corner side, logo to one corner side, and the other things in between or to each side like the one shadcn have.

2. Improving the code block component.

I recently searched for a decent footer component and before I get to see the component properly and tell if I like it or not I get to see the code and then I have to search, for what component this code is, a little confusing isn't it ?

The design can be improved in various forms, like adding a preview or see code button which will show the code when the developer want to see. Saving rendering time if they are loaded from server.
Removing the edit on github for each block or component in a component as they point toward same thing. This can be done by adding an edit link above the table of contents.
Removing the RTL / LTR and Change theme of component because the RTL or LTR is not making any change in the code block so no use, the developer has to do it and for the theme, there is already change theme icon so the developer can go there and check this theme.
After adding the preview code button, when the developer clicks on preview we should not show the html and copy text as they are taking additional place making the component ugly, what we should do instead is just add a copy icon above the preview component and remove the html text as it can be used as it is in any framework. Saving space and improving design.
The code block should be written in a way that there should be no horizontal overflow or if there is we can make a custom scroller matching with the accent color of flowbite that can be used here, and for the table of content along with the sidebar. It would improve the design drastically

3. Modifications for the docs / components / get started page.

The content is more to the left of the page which will be improved if added margin left and right and given some space.
The table of contents could be shifted towards the right and as flowbite is marketing the book teach me design there is a more better way to do that we can add a scroller just for the table of contents and the book teach me design will be always there for more details on this visit https://fumadocs.vercel.app/docs/ui/markdown and see the table of contents and the book can be shown like the edit on github button which is always there and a scroller for the table of contents. Similarly above the book there can be a edit this page on github option.

4. Editing the homepage ( a little bit )

The youtube video could be shown the get started page not on the homepage instead the top work and component should be shown, visit https://nextui.org/ , look at their homepage no developer would like to do a crash course right away but at first we should intrigue the developer to get started.
Gradient color should be added for better look of the website along with minor animation that will not increase the loading time.

5. The images are not loading properly in the /figma page. It can be fixed using the component.

Should I work on this issues, I have described it in this issue because some top repositories are not maintained very well and I don't know my work will be added if I pull requests

Describe alternatives you've considered N / A