[📖] Redesign landing page for a more professional look

[maiieul]

Suggestion

This is relatively important as the landing page is the first impression people get when looking up the project.

Potential sources of inspiration:

• https://park-ui.com/
• https://ui.shadcn.com/
• https://daisyui.com/

I think because we are maintaining both headless and styled, we need a way to convey that we have both, while at the same time showcase the benefits of each.

Benefits of headless: accessibility (aria, etc.), functionality (headless APIs), performance (resumability)
Benefits of styled: variants (chosen constraints), customizability (css vars + copy/paste), maintainability (reusable pieces)

Ideas in order of preference:

1. Titles on left with a BIG FAT SWITCH to switch from styled to headless. On the right, an auto-scrolling carousel of components showcasing the styled variants stacked (a bit like sonner toasts https://ui.shadcn.com/docs/components/sonner where when you hover over it it shows every item, but stacked towards top-right corner). When switching from styled to headless, the stacked variants disappear.

   • can clearly showcase the benefits of styled AND headless
   • can showcase all the components from within the landing page
   • can add a few "make it yours" (switch to brutalist, change colors, radius, etc.) buttons directly on the page
   • can have a link to a /examples page 👀
   • might even be possible to put a playground tab for people to change the code live 👀 👀
   • for headless we could even showcase some of the UI features that don't exist in any other frameworks 👀👀👀
   • it's DIFFERENT

2. Similar to shadcn

   • doesn't really showcase the benefits of headless
   • makes it easy to see what kind of UI can be built (even on mobile)
   • can add a few "make it yours" (switch to brutalist, change colors, radius, etc.) buttons directly on the page
   • can have a BIG FAT SWITCH too but won't convey the advantage of cva variants

3. Similar to Park/Daisy

   • It looks cool, although it's probably the most popular type of landing page for component libraries
   • cannot add a few "make it yours" (switch to brutalist, change colors, radius, etc.) buttons directly on the page -> no place
   • can have a BIG FAT SWITCH too but won't convey the advantage of cva variants

[thejackshelton]

In our case I think taking inspiration from the park ui landing page (at least the components off-screen) probably wouldn't be ideal. Focus will actually move the page location, and if a keyboard is used on any of those components you will quickly have a broken landing page 😅 .

The design of it is awesome though.

[thejackshelton]

But yes, we definitely need a better homepage / landing page for Qwik UI 😄 . I think this is great 👍

[maiieul]

Focus will actually move the page location, and if a keyboard is used on any of those components you will quickly have a broken landing page 😅 .

Yes, also on mobile this pattern doesn't look great. Though you could argue a docs site shouldn't be mobile first, I still prefer having something that looks good both on desktop and mobile.

[cwoolum]

Interesting that both ShadCN and ParkUI have gone monochrome by default on their landing pages. IMO, they both feel a bit cold and utilitarian.

It would be nice to find balance between professional and spirited.