revamp homepage and docs styles (#1442)

* revamp homepage and docs styles, closer look to the core website/library

* homepage: fix section Y padding

* navbar: fix version badge styles

* navbar: fix icons tooltip + open external links in new tab

* docs: fixed too much X padding on mobile

* docs: fix footer X and bottom padding

Author: SutuSebastian

apps/web/app/docs/[[...slug]]/page.tsx

@@ -55,7 +55,7 @@ export default function DocPage({ params }: Props) {
 
   return (
     <div className="flex">
-      <div className="mx-auto flex min-w-0 max-w-4xl flex-col px-4 pb-12 pt-6 lg:px-8 lg:pb-16 lg:pt-8 xl:pb-24">
+      <div className="flex min-w-0 flex-col px-4 pb-12 pt-6 lg:px-8 lg:pb-16 lg:pt-8 xl:pb-24">
         <main>
           <ContentLayout title={doc.title} description={doc.description}>
             <Mdx code={doc.body.code} />
@@ -152,7 +152,7 @@ function DocsPager({ doc }: { doc: Doc }) {
 
 function DocFooter() {
   return (
-    <Footer className="rounded-none px-4 pb-8 pt-16 shadow-none lg:px-0 dark:bg-gray-900">
+    <Footer className="rounded-none pt-16 shadow-none lg:px-0 dark:bg-gray-900">
       <div className="w-full">
         <div className="grid w-full justify-between md:grid-cols-2">
           <div className="mb-4 max-w-sm lg:mb-0">
@@ -249,10 +249,10 @@ function DocFooter() {
 
 function ToC({ doc }: { doc: Doc }) {
   return (
-    <div className="right-0 hidden w-64 flex-none pl-8 xl:block xl:text-sm">
+    <div className="hidden w-64 flex-none px-8 xl:block xl:text-sm">
       <div className="sticky top-20 flex h-[calc(100vh-5rem)] flex-col justify-between overflow-y-auto pb-6">
         <div className="mb-8">
-          <h4 className="my-4 pl-2.5 text-sm font-semibold uppercase tracking-wide text-gray-900 dark:text-white">
+          <h4 className="mb-4 mt-5 pl-2.5 text-sm font-semibold uppercase tracking-wide text-gray-900 lg:text-xs dark:text-white">
             On this page
           </h4>
           <nav id="visible-table-of-contents">

apps/web/app/docs/layout.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import { Accordion, Badge, Navbar, Sidebar } from "flowbite-react";
+import { Navbar } from "flowbite-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import type { PropsWithChildren } from "react";
 import { useEffect, useState } from "react";
 import { HiMenuAlt1, HiX } from "react-icons/hi";
 import { twMerge } from "tailwind-merge";
-import { Banner } from "~/components/banner";
 import { DocSearchInput } from "~/components/docsearch-input";
 import { NavbarIcons, NavbarLinks } from "~/components/navbar";
 import { DOCS_SIDEBAR, type DocsSidebarItem } from "~/data/docs-sidebar";
@@ -31,9 +30,9 @@ export default function DocsLayout({ children }: PropsWithChildren) {
   return (
     <div className="w-full min-w-0 flex-auto">
       <div className="relative">
-        <Banner />
+        {/* <Banner /> */}
         <DocsNavbar {...state} />
-        <div className="lg:flex">
+        <div className="mx-auto w-full max-w-8xl lg:flex lg:px-4">
           <DocsSidebar {...state} />
           <div className="w-full min-w-0">{children}</div>
         </div>
@@ -48,9 +47,9 @@ function DocsNavbar({ isCollapsed, setCollapsed }: DocsLayoutState) {
       fluid
       theme={{
         root: {
-          base: "sticky top-0 z-[60] mx-auto flex w-full items-center justify-between border-b border-gray-200 bg-white px-4 py-2.5 text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400",
+          base: "sticky top-0 z-[60] mx-auto flex w-full items-center justify-between border-b border-gray-200 bg-white text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400",
           inner: {
-            base: "mx-auto flex w-full flex-wrap items-center justify-between",
+            base: "mx-auto flex w-full max-w-8xl flex-wrap items-center justify-between px-4 py-2.5 lg:px-4",
           },
         },
       }}
@@ -80,7 +79,7 @@ function DocsNavbar({ isCollapsed, setCollapsed }: DocsLayoutState) {
           <Image alt="" height={32} src="/favicon.svg" width={32} className="size-8" />
           <span>Flowbite React</span>
         </Link>
-        <div className="ml-4 hidden lg:flex xl:ml-14">
+        <div className="hidden lg:ml-[4.5rem] lg:flex">
           <DocSearchInput />
         </div>
       </div>
@@ -106,29 +105,28 @@ function DocsSidebar({ isCollapsed, setCollapsed }: DocsLayoutState) {
     <>
       <div
         className={twMerge(
-          "fixed inset-0 z-50 h-full w-64 flex-none border-r border-gray-200 lg:static lg:block lg:h-auto lg:overflow-y-visible lg:pt-6 dark:border-gray-600",
+          "fixed inset-0 z-50 size-full max-w-64 overflow-y-auto bg-white lg:sticky lg:top-[61px] lg:block lg:h-[calc(100vh-4rem)] dark:bg-gray-900",
           isCollapsed && "hidden",
         )}
       >
-        <Sidebar
-          theme={{
-            root: {
-              base: "h-full border-r border-gray-200 dark:border-gray-600",
-              inner:
-                "top-20 h-full overflow-y-auto bg-white px-4 pt-20 text-base font-normal lg:sticky lg:mr-0 lg:block lg:h-[calc(100vh-8rem)] lg:pt-0 lg:text-sm dark:bg-gray-900",
-            },
-          }}
+        <nav
+          aria-label="Docs navigation"
+          className="px-1 pb-8 pl-3 pt-16 text-base font-normal lg:pl-0 lg:pt-2 lg:text-sm"
         >
-          <Sidebar.Items className="grid grid-cols-1 gap-2">
+          <ul>
             {DOCS_SIDEBAR.map((section) => (
-              <SidebarSection key={section.title} title={section.title} href={section.href}>
+              <SidebarSection key={section.title} title={section.title}>
                 {section.items.map((item) => (
-                  <SidebarItem key={`section-${section.title}_item-${item.title}`} {...item} />
+                  <SidebarItem
+                    key={`section-${section.title}_item-${item.title}`}
+                    onClick={() => setCollapsed(true)}
+                    {...item}
+                  />
                 ))}
               </SidebarSection>
             ))}
-          </Sidebar.Items>
-        </Sidebar>
+          </ul>
+        </nav>
       </div>
       {!isCollapsed && (
         <div
@@ -141,70 +139,59 @@ function DocsSidebar({ isCollapsed, setCollapsed }: DocsLayoutState) {
   );
 }
 
-function SidebarSection({ title, href, children }: PropsWithChildren<{ title: string; href: string }>) {
-  const pathname = usePathname();
-
+function SidebarSection({ title, children }: PropsWithChildren<{ title: string }>) {
   return (
-    <Accordion className="border-none" collapseAll={!pathname.includes(href)} flush>
-      <Accordion.Panel>
-        <Accordion.Title
-          theme={{
-            open: {
-              on: "mb-2 text-primary-700 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-500",
-              off: "mb-1 text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500",
-            },
-          }}
-          className={twMerge(
-            "flex w-full items-center justify-between bg-transparent p-0 text-sm font-semibold uppercase tracking-wide",
-            pathname.includes(href) &&
-              "text-primary-700 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-500",
-          )}
-        >
-          {title}
-        </Accordion.Title>
-        <Accordion.Content className="mb-2 border-none p-0">
-          <Sidebar.ItemGroup className="space-y-3 border-none">{children}</Sidebar.ItemGroup>
-        </Accordion.Content>
-      </Accordion.Panel>
-    </Accordion>
+    <li className="mt-8">
+      <h5 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-900 lg:text-xs dark:text-white">
+        {title}
+      </h5>
+      <ul className="py-1">{children}</ul>
+    </li>
   );
 }
 
-function SidebarItem({ title, href, isNew, isExternal }: DocsSidebarItem) {
+function SidebarItem({ title, href, isNew, isExternal, onClick }: DocsSidebarItem & { onClick(): void }) {
   return (
-    <SidebarLink href={href} isExternal={isExternal}>
-      {isNew ? <NewBadge>{title}</NewBadge> : title}
-    </SidebarLink>
+    <li>
+      <SidebarLink href={href} isExternal={isExternal} onClick={onClick}>
+        {isNew ? <NewBadge>{title}</NewBadge> : title}
+      </SidebarLink>
+    </li>
   );
 }
 
-function SidebarLink({ children, href, isExternal }: PropsWithChildren<{ href: string; isExternal?: boolean }>) {
+function SidebarLink({
+  children,
+  href,
+  isExternal,
+  onClick,
+}: PropsWithChildren<{ href: string; isExternal?: boolean; onClick(): void }>) {
   const pathname = usePathname();
 
   return (
-    <Sidebar.Item
-      as={Link}
+    <Link
       href={href}
-      target={isExternal && "_blank"}
+      target={isExternal ? "_blank" : undefined}
       className={twMerge(
-        "p-0 font-medium transition-all hover:bg-transparent lg:text-sm dark:hover:bg-transparent [&>*]:px-0",
+        "flex flex-wrap items-center py-2 font-medium",
         pathname === href
           ? "text-primary-700 hover:text-primary-700 dark:text-primary-500"
           : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white",
       )}
+      onClick={onClick}
     >
       {children}
-    </Sidebar.Item>
+    </Link>
   );
 }
 
 function NewBadge({ children }: PropsWithChildren) {
   return (
     <span className="flex items-center gap-2">
       {children}
-      <Badge color="cyan" className="h-4 px-1.5">
-        New
-      </Badge>
+      <span className="ml-2 inline-flex h-[1.1rem] items-center rounded border border-cyan-100 bg-cyan-100 px-1.5 text-[10px] font-semibold uppercase text-cyan-800 dark:border-cyan-400 dark:bg-gray-700 dark:text-cyan-400">
+        new
+      </span>
     </span>
   );
 }

apps/web/app/page.tsx

@@ -16,7 +16,7 @@ import {
 export default function HomePage() {
   return (
     <div className="relative">
-      <Banner />
+      {/* <Banner /> */}
       <HomeNavbar />
       <main className="min-w-0 flex-auto divide-y dark:divide-gray-700">
         <HeroSection />

apps/web/components/homepage/components-section.tsx

@@ -8,7 +8,7 @@ import { COMPONENTS_DATA } from "~/data/components";
 export function ComponentsSection() {
   return (
     <section>
-      <div className="mx-auto flex max-w-8xl flex-col gap-8 px-4 py-8 sm:gap-12 lg:px-20 lg:pt-24">
+      <div className="mx-auto flex max-w-8xl flex-col gap-8 px-4 py-8 sm:gap-12 lg:pt-24">
         <div className="flex flex-col items-center gap-4 sm:gap-4">
           <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 lg:text-4xl dark:text-white">
             React UI Components

apps/web/components/homepage/contributors-section.tsx

@@ -25,7 +25,7 @@ export async function ContributorsSection() {
 
   return (
     <section>
-      <div className="mx-auto max-w-8xl px-4 py-8 lg:px-20 lg:py-24">
+      <div className="mx-auto max-w-8xl px-4 py-8 lg:py-24">
         <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-12">
           <div className="flex max-w-2xl flex-col items-center justify-center gap-4">
             <h2 className="text-center text-3xl font-extrabold tracking-tight text-gray-900 lg:text-4xl dark:text-white">

apps/web/components/homepage/dark-mode-section/dark-mode-section.tsx

@@ -12,7 +12,7 @@ const feature_list = [
 export function DarkModeSection() {
   return (
     <section className="bg-gray-50 dark:bg-gray-800">
-      <div className="mx-auto w-full max-w-8xl px-4 py-8 lg:px-20 lg:py-24">
+      <div className="mx-auto w-full max-w-8xl px-4 py-8 lg:py-24">
         <div className="flex w-full flex-row-reverse self-stretch py-6 lg:gap-16 lg:py-10">
           <div className="hidden w-1/2 items-center lg:flex">
             <Image

apps/web/components/homepage/featured-section.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 export function FeaturedSection() {
   return (
     <section>
-      <div className="mx-auto max-w-8xl px-4 py-8 lg:px-20">
+      <div className="mx-auto max-w-8xl px-4 py-8">
         <div className="flex flex-col items-center justify-center gap-2 lg:flex-row lg:gap-8">
           <div className="mx-auto mb-4 text-base tracking-tight lg:mx-0 lg:mb-0">Featured in:</div>
           <div className="flex flex-wrap items-center justify-center gap-8">

apps/web/components/homepage/figma-section.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 export function FigmaSection() {
   return (
     <section className="bg-gray-50 dark:bg-gray-800">
-      <div className="mx-auto max-w-8xl px-4 py-8 lg:px-20 lg:py-24">
+      <div className="mx-auto max-w-8xl px-4 py-8 lg:py-24">
         <div className="mx-auto grid max-w-8xl grid-cols-1 items-start justify-between gap-24 py-1 lg:grid-cols-2">
           <div className="flex flex-col gap-8">
             <div className="flex w-full flex-col items-start justify-center gap-6">

apps/web/components/homepage/hero-section/hero-section.tsx

@@ -6,9 +6,9 @@ import { CopyPackageInput } from "./copy-package-input";
 
 export function HeroSection() {
   return (
-    <section className="mx-auto flex max-w-8xl flex-col overflow-hidden px-4 py-6 sm:py-8 lg:px-20 lg:pb-24 lg:pt-16">
+    <section className="mx-auto flex max-w-8xl flex-col overflow-hidden px-4 py-6 sm:py-8 lg:pb-24 lg:pt-16">
       <div className="flex flex-col gap-20">
-        <div className="grid gap-10 md:grid-cols-2">
+        <div className="grid gap-10 lg:grid-cols-2">
           <div className="flex flex-col justify-start gap-4 xl:max-w-[676px]">
             <div className="flex flex-col gap-4 text-left lg:gap-6">
               <h1 className="max-w-3xl text-4xl font-extrabold leading-none text-gray-900 lg:text-5xl xl:text-6xl dark:text-white">
@@ -36,7 +36,7 @@ export function HeroSection() {
               </div>
             </div>
           </div>
-          <div className="hidden items-center p-0 md:flex">
+          <div className="hidden items-center p-0 lg:flex">
             <div className="relative dark:hidden">
               <Image className="h-auto max-w-full" src="/images/gallery.png" alt="Header" width={620} height={416} />
             </div>

apps/web/components/homepage/home-navbar.tsx

@@ -11,7 +11,7 @@ export function HomeNavbar() {
         root: {
           base: "sticky top-0 z-40 mx-auto flex w-full items-center justify-between border-b border-gray-200 bg-white py-0 text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400",
           inner: {
-            base: "mx-auto flex w-full max-w-none flex-wrap items-center justify-between px-4 py-2.5 xl:max-w-8xl xl:px-20",
+            base: "mx-auto flex w-full max-w-none flex-wrap items-center justify-between px-4 py-2.5 xl:max-w-8xl",
           },
         },
       }}