Skip to content

Commit fbefe8d

Browse files
SutuSebastianSutuSebastian
committed
revamp homepage and docs styles, closer look to the core website/library
1 parent 2d4d4ce commit fbefe8d

16 files changed

+64
-84
lines changed

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default function DocPage({ params }: Props) {
5555

5656
return (
5757
<div className="flex">
58-
<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">
58+
<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">
5959
<main>
6060
<ContentLayout title={doc.title} description={doc.description}>
6161
<Mdx code={doc.body.code} />
@@ -249,10 +249,10 @@ function DocFooter() {
249249

250250
function ToC({ doc }: { doc: Doc }) {
251251
return (
252-
<div className="right-0 hidden w-64 flex-none pl-8 xl:block xl:text-sm">
252+
<div className="hidden w-64 flex-none px-8 xl:block xl:text-sm">
253253
<div className="sticky top-20 flex h-[calc(100vh-5rem)] flex-col justify-between overflow-y-auto pb-6">
254254
<div className="mb-8">
255-
<h4 className="my-4 pl-2.5 text-sm font-semibold uppercase tracking-wide text-gray-900 dark:text-white">
255+
<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">
256256
On this page
257257
</h4>
258258
<nav id="visible-table-of-contents">

‎apps/web/app/docs/layout.tsx

+46-59
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
"use client";
22

3-
import { Accordion, Badge, Navbar, Sidebar } from "flowbite-react";
3+
import { Navbar } from "flowbite-react";
44
import Image from "next/image";
55
import Link from "next/link";
66
import { usePathname } from "next/navigation";
77
import type { PropsWithChildren } from "react";
88
import { useEffect, useState } from "react";
99
import { HiMenuAlt1, HiX } from "react-icons/hi";
1010
import { twMerge } from "tailwind-merge";
11-
import { Banner } from "~/components/banner";
1211
import { DocSearchInput } from "~/components/docsearch-input";
1312
import { NavbarIcons, NavbarLinks } from "~/components/navbar";
1413
import { DOCS_SIDEBAR, type DocsSidebarItem } from "~/data/docs-sidebar";
@@ -31,9 +30,9 @@ export default function DocsLayout({ children }: PropsWithChildren) {
3130
return (
3231
<div className="w-full min-w-0 flex-auto">
3332
<div className="relative">
34-
<Banner />
33+
{/* <Banner /> */}
3534
<DocsNavbar {...state} />
36-
<div className="lg:flex">
35+
<div className="mx-auto w-full max-w-8xl px-4 lg:flex">
3736
<DocsSidebar {...state} />
3837
<div className="w-full min-w-0">{children}</div>
3938
</div>
@@ -48,9 +47,9 @@ function DocsNavbar({ isCollapsed, setCollapsed }: DocsLayoutState) {
4847
fluid
4948
theme={{
5049
root: {
51-
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",
50+
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",
5251
inner: {
53-
base: "mx-auto flex w-full flex-wrap items-center justify-between",
52+
base: "mx-auto flex w-full max-w-8xl flex-wrap items-center justify-between px-4 py-2.5 lg:px-4",
5453
},
5554
},
5655
}}
@@ -80,7 +79,7 @@ function DocsNavbar({ isCollapsed, setCollapsed }: DocsLayoutState) {
8079
<Image alt="" height={32} src="/favicon.svg" width={32} className="size-8" />
8180
<span>Flowbite React</span>
8281
</Link>
83-
<div className="ml-4 hidden lg:flex xl:ml-14">
82+
<div className="hidden lg:ml-[4.5rem] lg:flex">
8483
<DocSearchInput />
8584
</div>
8685
</div>
@@ -106,29 +105,28 @@ function DocsSidebar({ isCollapsed, setCollapsed }: DocsLayoutState) {
106105
<>
107106
<div
108107
className={twMerge(
109-
"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",
108+
"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",
110109
isCollapsed && "hidden",
111110
)}
112111
>
113-
<Sidebar
114-
theme={{
115-
root: {
116-
base: "h-full border-r border-gray-200 dark:border-gray-600",
117-
inner:
118-
"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",
119-
},
120-
}}
112+
<nav
113+
aria-label="Docs navigation"
114+
className="px-1 pb-8 pl-3 pt-16 text-base font-normal lg:pl-0 lg:pt-2 lg:text-sm"
121115
>
122-
<Sidebar.Items className="grid grid-cols-1 gap-2">
116+
<ul>
123117
{DOCS_SIDEBAR.map((section) => (
124-
<SidebarSection key={section.title} title={section.title} href={section.href}>
118+
<SidebarSection key={section.title} title={section.title}>
125119
{section.items.map((item) => (
126-
<SidebarItem key={`section-${section.title}_item-${item.title}`} {...item} />
120+
<SidebarItem
121+
key={`section-${section.title}_item-${item.title}`}
122+
onClick={() => setCollapsed(true)}
123+
{...item}
124+
/>
127125
))}
128126
</SidebarSection>
129127
))}
130-
</Sidebar.Items>
131-
</Sidebar>
128+
</ul>
129+
</nav>
132130
</div>
133131
{!isCollapsed && (
134132
<div
@@ -141,70 +139,59 @@ function DocsSidebar({ isCollapsed, setCollapsed }: DocsLayoutState) {
141139
);
142140
}
143141

144-
function SidebarSection({ title, href, children }: PropsWithChildren<{ title: string; href: string }>) {
145-
const pathname = usePathname();
146-
142+
function SidebarSection({ title, children }: PropsWithChildren<{ title: string }>) {
147143
return (
148-
<Accordion className="border-none" collapseAll={!pathname.includes(href)} flush>
149-
<Accordion.Panel>
150-
<Accordion.Title
151-
theme={{
152-
open: {
153-
on: "mb-2 text-primary-700 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-500",
154-
off: "mb-1 text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500",
155-
},
156-
}}
157-
className={twMerge(
158-
"flex w-full items-center justify-between bg-transparent p-0 text-sm font-semibold uppercase tracking-wide",
159-
pathname.includes(href) &&
160-
"text-primary-700 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-500",
161-
)}
162-
>
163-
{title}
164-
</Accordion.Title>
165-
<Accordion.Content className="mb-2 border-none p-0">
166-
<Sidebar.ItemGroup className="space-y-3 border-none">{children}</Sidebar.ItemGroup>
167-
</Accordion.Content>
168-
</Accordion.Panel>
169-
</Accordion>
144+
<li className="mt-8">
145+
<h5 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-900 lg:text-xs dark:text-white">
146+
{title}
147+
</h5>
148+
<ul className="py-1">{children}</ul>
149+
</li>
170150
);
171151
}
172152

173-
function SidebarItem({ title, href, isNew, isExternal }: DocsSidebarItem) {
153+
function SidebarItem({ title, href, isNew, isExternal, onClick }: DocsSidebarItem & { onClick(): void }) {
174154
return (
175-
<SidebarLink href={href} isExternal={isExternal}>
176-
{isNew ? <NewBadge>{title}</NewBadge> : title}
177-
</SidebarLink>
155+
<li>
156+
<SidebarLink href={href} isExternal={isExternal} onClick={onClick}>
157+
{isNew ? <NewBadge>{title}</NewBadge> : title}
158+
</SidebarLink>
159+
</li>
178160
);
179161
}
180162

181-
function SidebarLink({ children, href, isExternal }: PropsWithChildren<{ href: string; isExternal?: boolean }>) {
163+
function SidebarLink({
164+
children,
165+
href,
166+
isExternal,
167+
onClick,
168+
}: PropsWithChildren<{ href: string; isExternal?: boolean; onClick(): void }>) {
182169
const pathname = usePathname();
183170

184171
return (
185-
<Sidebar.Item
186-
as={Link}
172+
<Link
187173
href={href}
188-
target={isExternal && "_blank"}
174+
target={isExternal ? "_blank" : undefined}
189175
className={twMerge(
190-
"p-0 font-medium transition-all hover:bg-transparent lg:text-sm dark:hover:bg-transparent [&>*]:px-0",
176+
"flex flex-wrap items-center py-2 font-medium",
191177
pathname === href
192178
? "text-primary-700 hover:text-primary-700 dark:text-primary-500"
193179
: "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white",
194180
)}
181+
onClick={onClick}
195182
>
196183
{children}
197-
</Sidebar.Item>
184+
</Link>
198185
);
199186
}
200187

201188
function NewBadge({ children }: PropsWithChildren) {
202189
return (
203190
<span className="flex items-center gap-2">
204191
{children}
205-
<Badge color="cyan" className="h-4 px-1.5">
206-
New
207-
</Badge>
192+
<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">
193+
new
194+
</span>
208195
</span>
209196
);
210197
}

‎apps/web/app/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
export default function HomePage() {
1717
return (
1818
<div className="relative">
19-
<Banner />
19+
{/* <Banner /> */}
2020
<HomeNavbar />
2121
<main className="min-w-0 flex-auto divide-y dark:divide-gray-700">
2222
<HeroSection />

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { COMPONENTS_DATA } from "~/data/components";
88
export function ComponentsSection() {
99
return (
1010
<section>
11-
<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">
11+
<div className="mx-auto flex max-w-8xl flex-col gap-8 px-4 py-8 sm:gap-12 lg:pt-24">
1212
<div className="flex flex-col items-center gap-4 sm:gap-4">
1313
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 lg:text-4xl dark:text-white">
1414
React UI Components

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export async function ContributorsSection() {
2525

2626
return (
2727
<section>
28-
<div className="mx-auto max-w-8xl px-4 py-8 lg:px-20 lg:py-24">
28+
<div className="mx-auto max-w-8xl px-4 py-8 lg:py-24">
2929
<div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-12">
3030
<div className="flex max-w-2xl flex-col items-center justify-center gap-4">
3131
<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

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

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

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

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

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

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { CopyPackageInput } from "./copy-package-input";
66

77
export function HeroSection() {
88
return (
9-
<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">
9+
<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">
1010
<div className="flex flex-col gap-20">
11-
<div className="grid gap-10 md:grid-cols-2">
11+
<div className="grid gap-10 lg:grid-cols-2">
1212
<div className="flex flex-col justify-start gap-4 xl:max-w-[676px]">
1313
<div className="flex flex-col gap-4 text-left lg:gap-6">
1414
<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() {
3636
</div>
3737
</div>
3838
</div>
39-
<div className="hidden items-center p-0 md:flex">
39+
<div className="hidden items-center p-0 lg:flex">
4040
<div className="relative dark:hidden">
4141
<Image className="h-auto max-w-full" src="/images/gallery.png" alt="Header" width={620} height={416} />
4242
</div>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function HomeNavbar() {
1111
root: {
1212
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",
1313
inner: {
14-
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",
14+
base: "mx-auto flex w-full max-w-none flex-wrap items-center justify-between px-4 py-2.5 xl:max-w-8xl",
1515
},
1616
},
1717
}}

‎apps/web/components/homepage/main-footer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Link from "next/link";
55
export function MainFooter() {
66
return (
77
<Footer className="rounded-none bg-gray-50 pb-8 pt-16 shadow-none">
8-
<div className="mx-auto w-full max-w-8xl px-4 lg:px-20">
8+
<div className="mx-auto w-full max-w-8xl px-4">
99
<div className="grid w-full justify-between gap-8 md:grid-cols-2">
1010
<div className="mb-4 max-w-sm lg:mb-0">
1111
<Link href="/" className="flex items-center gap-3">

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const feature_list = [
1515
export function ReactSection() {
1616
return (
1717
<section className="bg-gray-50 dark:bg-gray-800">
18-
<div className="mx-auto w-full max-w-8xl px-4 py-8 lg:px-20 lg:py-24">
18+
<div className="mx-auto w-full max-w-8xl px-4 py-8 lg:py-24">
1919
<div className="flex w-full flex-row self-stretch py-6 lg:gap-16 lg:py-10">
2020
<div className="hidden w-1/2 items-center lg:flex">
2121
<Image

‎apps/web/components/homepage/social-proof-section.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export async function SocialProofSection() {
5252

5353
return (
5454
<section>
55-
<div className="mx-auto max-w-8xl px-4 py-8 lg:px-20">
55+
<div className="mx-auto max-w-8xl px-4 py-8">
5656
<div className="flex flex-col gap-4 lg:flex-row lg:gap-20">
5757
<div className="mb-4 flex w-full flex-col items-start justify-center gap-3 md:gap-5 lg:mb-0">
5858
<div className="flex w-full flex-col items-start justify-center gap-6">

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Link from "next/link";
44
export function TailwindSection() {
55
return (
66
<section className="bg-gray-50 dark:bg-gray-800">
7-
<div className="mx-auto w-full max-w-8xl px-4 py-8 lg:px-20 lg:py-24">
7+
<div className="mx-auto w-full max-w-8xl px-4 py-8 lg:py-24">
88
<div className="flex w-full flex-row self-stretch py-6 lg:gap-16 lg:py-10">
99
<div className="hidden w-1/2 items-center lg:flex">
1010
<Image

‎apps/web/components/navbar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DocSearchInput } from "./docsearch-input";
77

88
export function NavbarLinks() {
99
return (
10-
<div className="hidden items-center gap-1 lg:flex">
10+
<div className="hidden items-center gap-1 xl:flex">
1111
<Link
1212
href="/docs/getting-started/introduction"
1313
className="rounded-lg p-2.5 text-sm font-medium text-gray-900 hover:text-cyan-700 dark:text-gray-300 dark:hover:text-cyan-500"

‎apps/web/data/docs-sidebar.ts

-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
export interface DocsSidebarSection {
22
title: string;
3-
href: string;
43
items: DocsSidebarItem[];
54
}
65

@@ -14,7 +13,6 @@ export interface DocsSidebarItem {
1413
export const DOCS_SIDEBAR: DocsSidebarSection[] = [
1514
{
1615
title: "getting started",
17-
href: "/getting-started/",
1816
items: [
1917
{ title: "Introduction", href: "/docs/getting-started/introduction" },
2018
{ title: "Quickstart", href: "/docs/getting-started/quickstart" },
@@ -28,7 +26,6 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
2826
},
2927
{
3028
title: "integration guides",
31-
href: "/guides/",
3229
items: [
3330
{ title: "Next.js", href: "/docs/guides/next-js" },
3431
{ title: "Remix", href: "/docs/guides/remix" },
@@ -44,15 +41,13 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
4441
},
4542
{
4643
title: "customize",
47-
href: "/customize/",
4844
items: [
4945
{ title: "Theme", href: "/docs/customize/theme" },
5046
{ title: "Dark Mode", href: "/docs/customize/dark-mode" },
5147
],
5248
},
5349
{
5450
title: "components",
55-
href: "/components/",
5651
items: [
5752
{ title: "Accordion", href: "/docs/components/accordion" },
5853
{ title: "Alert", href: "/docs/components/alert" },
@@ -90,15 +85,13 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
9085
},
9186
{
9287
title: "forms",
93-
href: "/forms/",
9488
items: [
9589
{ title: "File Input", href: "/docs/forms/file-input" },
9690
{ title: "Floating Label", href: "/docs/forms/floating-label" },
9791
],
9892
},
9993
{
10094
title: "typography",
101-
href: "/typography/",
10295
items: [
10396
{ title: "Blockquote", href: "/docs/typography/blockquote" },
10497
{ title: "List", href: "/docs/typography/list" },

0 commit comments

Comments
 (0)