From ba413763c0216a3611e2f1b45f0c6f041639cb64 Mon Sep 17 00:00:00 2001
From: Md Ariful Islam <73895992+Arifulislam5577@users.noreply.github.com>
Date: Wed, 27 Dec 2023 20:43:25 +0600
Subject: [PATCH] Documentation Page Design Updated. (#116)

---
 app/components/CodePreview.tsx                |  10 +-
 app/components/Navbar.tsx                     |  52 +++---
 app/docs.css                                  |  22 +++
 .../variant/DefaultNotification.tsx           |   3 +-
 .../variant/NotificationWithIcon.tsx          |   2 +-
 app/docs/layout.tsx                           | 154 +++++++++---------
 app/globals.css                               |  13 +-
 app/page.tsx                                  |   6 +-
 mdx-components.tsx                            |   2 +-
 9 files changed, 148 insertions(+), 116 deletions(-)

diff --git a/app/components/CodePreview.tsx b/app/components/CodePreview.tsx
index b8dae092..a26c9944 100644
--- a/app/components/CodePreview.tsx
+++ b/app/components/CodePreview.tsx
@@ -15,16 +15,16 @@ interface CodePreviewProps {
 const CodePreview = ({ children, code, github }: CodePreviewProps) => {
   const [active, setActive] = useState(0)
   const { copy, copyToClipboard } = useCopy()
-  const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/src/components/${github}`
+  const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/app/src/components/${github}`
 
   return (
     <div className="my-10 w-full overflow-hidden rounded-md border border-metal-200 shadow-small">
-      <div className="-mb-px flex flex-wrap border-b border-metal-200 bg-white px-5 text-center">
+      <div className="-mb-px flex flex-wrap border-b border-metal-200 bg-metal-900 px-5 text-center">
         <button
           type="button"
           onClick={() => setActive(0)}
           className={`-mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium text-metal-400 first:ml-0 ${
-            active === 0 ? '!border-b-metal-900 text-metal-900' : ''
+            active === 0 ? '!border-b-white text-white' : ''
           }`}
           id="preview-btn">
           Preview
@@ -33,7 +33,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
           id="code-btn"
           onClick={() => setActive(1)}
           className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium  text-metal-400 first:ml-0 ${
-            active === 1 ? '!border-b-metal-900 text-metal-900' : ''
+            active === 1 ? '!border-b-metal-100 text-white' : ''
           }`}>
           Code
         </button>
@@ -81,7 +81,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
             </SyntaxHighlighter>
           </div>
         ) : (
-          <div className="flex w-full items-center justify-center px-2 py-3 md:p-6">
+          <div className="flex w-full items-center justify-center bg-white px-2 py-3 md:p-6">
             <div className="h-full w-full overflow-auto">{children}</div>
           </div>
         )}
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 1863bfe5..1d6c2b45 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -6,7 +6,7 @@ import { usePathname } from 'next/navigation'
 import { List, MagnifyingGlass, X } from 'phosphor-react'
 import Search from './Search'
 import { gettingStartedRoutes, navbarRoutes, routes } from '../../routes/routes'
-import { Accordion } from '../src'
+import { Accordion, Typography } from '../src'
 
 const Navbar = () => {
   const [active, setActive] = useState(false)
@@ -143,77 +143,71 @@ const Navbar = () => {
               active ? 'translate-x-0' : 'translate-x-full'
             }`}>
             <div className="mt-5 space-y-3 pr-4">
-              <Accordion flush className="border-none bg-transparent">
+              <Accordion flush>
                 <Accordion.Panel>
                   <Accordion.Container className="p-0">
-                    <Accordion.Title className="text-body-5 font-semibold text-metal-900">Quick Link</Accordion.Title>
+                    <Accordion.Title className="text-body-4 font-semibold text-metal-900">Quick Link</Accordion.Title>
                   </Accordion.Container>
                   <Accordion.Content className="p-0">
-                    <ul className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
+                    <Typography variant="ul" className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
                       {navbarRoutes.map((route) => (
-                        <li key={route.id}>
+                        <Typography variant="li" key={route.id}>
                           <Link
-                            className={`-ml-px border-l border-l-transparent pl-3 text-body-5  leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
-                              IsActive(route.href)
-                                ? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
-                                : ''
+                            className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
+                              IsActive(route.href) ? 'border-l !border-primary-500 !text-primary-500' : ''
                             }`}
                             href={route.href}>
                             {route.name}
                           </Link>
-                        </li>
+                        </Typography>
                       ))}
-                    </ul>
+                    </Typography>
                   </Accordion.Content>
                 </Accordion.Panel>
               </Accordion>
               <Accordion flush className="border-none bg-transparent">
                 <Accordion.Panel>
                   <Accordion.Container className="p-0">
-                    <Accordion.Title className="text-body-5 font-semibold text-metal-900">
+                    <Accordion.Title className="text-body-4 font-semibold text-metal-900">
                       Getting Started
                     </Accordion.Title>
                   </Accordion.Container>
                   <Accordion.Content className="p-0">
-                    <ul className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
+                    <Typography variant="ul" className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
                       {gettingStartedRoutes.map((route) => (
-                        <li key={route.id}>
+                        <Typography variant="li" key={route.id}>
                           <Link
-                            className={`-ml-px border-l border-l-transparent pl-3 text-body-5  leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
-                              IsActive(route.href)
-                                ? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
-                                : ''
+                            className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
+                              IsActive(route.href) ? 'border-l !border-primary-500 !text-primary-500' : ''
                             }`}
                             href={route.href}>
                             {route.name}
                           </Link>
-                        </li>
+                        </Typography>
                       ))}
-                    </ul>
+                    </Typography>
                   </Accordion.Content>
                 </Accordion.Panel>
               </Accordion>
               <Accordion flush className="border-none bg-transparent">
                 <Accordion.Panel>
                   <Accordion.Container className="p-0">
-                    <Accordion.Title className="text-body-5 font-semibold text-metal-900">Components</Accordion.Title>
+                    <Accordion.Title className="text-body-4 font-semibold text-metal-900">Components</Accordion.Title>
                   </Accordion.Container>
                   <Accordion.Content className="p-0">
-                    <ul className="mt-3 space-y-2 border-l border-l-metal-100 pb-24">
+                    <Typography variant="ul" className="mt-3 space-y-2 border-l border-l-metal-100 pb-24">
                       {routes.map((route) => (
-                        <li key={route.id}>
+                        <Typography variant="li" key={route.id}>
                           <Link
-                            className={`-ml-px border-l border-l-transparent pl-3 text-body-5  leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
-                              IsActive(route.href)
-                                ? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
-                                : ''
+                            className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
+                              IsActive(route.href) ? 'border-l !border-primary-500 !text-primary-500' : ''
                             }`}
                             href={route.href}>
                             {route.name}
                           </Link>
-                        </li>
+                        </Typography>
                       ))}
-                    </ul>
+                    </Typography>
                   </Accordion.Content>
                 </Accordion.Panel>
               </Accordion>
diff --git a/app/docs.css b/app/docs.css
index 417aba24..10366297 100644
--- a/app/docs.css
+++ b/app/docs.css
@@ -63,7 +63,12 @@
   @apply border-l-metal-900 text-metal-900 transition-colors  duration-300 hover:text-metal-900 active:text-metal-900;
 }
 
+#componentListSidebar::-webkit-scrollbar {
+  display: none;
+}
+
 #linkPage::-webkit-scrollbar {
+  display: none;
   width: 4px !important;
 }
 #linkPage::-webkit-scrollbar-track {
@@ -74,6 +79,23 @@
   background-color: #e9eff6 !important;
 }
 
+body::-webkit-scrollbar {
+  width: 8px !important;
+}
+body::-webkit-scrollbar-track {
+  background-color: transparent !important;
+}
+body::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-color: #333 !important;
+}
+
 .tabActive {
   @apply border-b-metal-900 !text-metal-900;
 }
+
+.docs-page {
+  position: relative;
+  border-radius: 16px;
+  background-image: linear-gradient(0deg, #f2f5ff 0%, #fff 100%);
+}
diff --git a/app/docs/components/notification/variant/DefaultNotification.tsx b/app/docs/components/notification/variant/DefaultNotification.tsx
index e20beeb7..8f88fc26 100644
--- a/app/docs/components/notification/variant/DefaultNotification.tsx
+++ b/app/docs/components/notification/variant/DefaultNotification.tsx
@@ -8,12 +8,13 @@ const DefaultNotification = () => {
   const onDismiss = () => {
     setShowNotification(!showNotification)
   }
+
   return (
     <div className="px-5 py-3">
       <Button onClick={onDismiss} type="primary">
         Show Notification
       </Button>
-      <Notification dismiss={showNotification} onDismiss={onDismiss}>
+      <Notification position="bottom-left" dismiss={showNotification} onDismiss={onDismiss}>
         <Notification.Body>
           <Notification.Title>Can we store cookies?</Notification.Title>
           <Notification.Description>
diff --git a/app/docs/components/notification/variant/NotificationWithIcon.tsx b/app/docs/components/notification/variant/NotificationWithIcon.tsx
index 32380ad3..858adc65 100644
--- a/app/docs/components/notification/variant/NotificationWithIcon.tsx
+++ b/app/docs/components/notification/variant/NotificationWithIcon.tsx
@@ -14,7 +14,7 @@ const NotificationWithIcon = () => {
       <Button type="primary" onClick={onDismiss}>
         Show Notification
       </Button>
-      <Notification dismiss={showNotification} onDismiss={onDismiss} className="max-w-[400px]" position="top-left">
+      <Notification dismiss={showNotification} onDismiss={onDismiss} className="max-w-[400px]" position="bottom-right">
         <Notification.Container className="grid grid-cols-12">
           <Notification.Icon className="col-span-2">
             <Cookie size={24} color="#3D4A5C" />
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx
index 2bb6391e..300eab06 100644
--- a/app/docs/layout.tsx
+++ b/app/docs/layout.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 'use client'
 import Link from 'next/link'
-import { Accordion } from '../src'
+import { Accordion, Typography } from '../src'
 import { ReactNode, useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
 import { gettingStartedRoutes, routes } from '../../routes/routes'
@@ -15,7 +15,6 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
   const pathname = usePathname()
   const [activeSection, setActiveSection] = useState<string>('')
   const [allSection, setAllSection] = useState<NodeListOf<Element> | []>([])
-
   const [tableOfContents, setTableOfContents] = useState<HTMLUListElement | null>(null)
 
   // get the table of contents
@@ -54,7 +53,6 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
     })
   }
 
-  // On this page active section html
   const innerHtml = tableOfContents?.innerHTML
 
   useEffect(() => {
@@ -80,81 +78,87 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
   }, [newIdArr])
 
   return (
-    <section className="pt-12 2xl:container">
-      <aside
-        id="linkPage"
-        className="fixed left-0 top-20 z-20 hidden  h-screen  overflow-y-auto border-r border-r-metal-100 bg-white pt-8  lg:block lg:w-[calc(100vw-75vw)] 2xl:w-[calc(100%-75%)] 4k:w-[calc(100%-78%)]">
-        <div className="ml-auto w-56 space-y-3 pr-3">
-          <Accordion flush openFirstPanel className="border-none bg-transparent">
-            <Accordion.Panel>
-              <Accordion.Container className="p-0">
-                <Accordion.Title className="text-body-5 font-semibold text-metal-900">Getting Started</Accordion.Title>
-              </Accordion.Container>
-              <Accordion.Content className="p-0">
-                <ul className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
-                  {gettingStartedRoutes.map((route) => (
-                    <li key={route.id}>
-                      <Link
-                        className={`-ml-px border-l border-l-transparent pl-3 text-body-5  leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
-                          IsActive(route.href)
-                            ? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
-                            : ''
-                        }`}
-                        href={route.href}>
-                        {route.name}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </Accordion.Content>
-            </Accordion.Panel>
-          </Accordion>
-          <Accordion openFirstPanel flush className="border-none bg-transparent">
-            <Accordion.Panel>
-              <Accordion.Container className="p-0">
-                <Accordion.Title className="text-body-5 font-semibold text-metal-900">Components</Accordion.Title>
-              </Accordion.Container>
-              <Accordion.Content className="p-0">
-                <ul className="mt-3 space-y-2 border-l border-l-metal-100 pb-24">
-                  {routes.map((route) => (
-                    <li key={route.id}>
-                      <Link
-                        className={`-ml-px border-l border-l-transparent pl-3 text-body-5  leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
-                          IsActive(route.href)
-                            ? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
-                            : ''
-                        }`}
-                        href={route.href}>
-                        {route.name}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </Accordion.Content>
-            </Accordion.Panel>
-          </Accordion>
+    <section>
+      <div className="sticky top-20 z-30 hidden h-20 w-full bg-white md:bg-primary-25 lg:block"></div>
+      <div className="docs-page fixed left-0 right-0 -z-0 mx-auto hidden h-2/3 lg:block xl:max-w-[1560px] 4k:max-w-[2000px]"></div>
+      <div className="container relative z-20 grid grid-cols-12 gap-5 md:pt-16">
+        <div className="hidden lg:col-span-3 lg:block xl:col-span-2">
+          <aside
+            id="componentListSidebar"
+            className="keep-shadow sticky top-56 h-[80vh] space-y-5 overflow-auto py-6 pl-8">
+            <Accordion flush openFirstPanel className="border-none bg-transparent">
+              <Accordion.Panel>
+                <Accordion.Container className="p-0">
+                  <Accordion.Title className="text-body-4 font-semibold text-metal-900">
+                    Getting Started
+                  </Accordion.Title>
+                </Accordion.Container>
+                <Accordion.Content className="p-0">
+                  <Typography variant="ul" className="-ml-px mt-3 space-y-1.5 border-l border-l-metal-100">
+                    {gettingStartedRoutes.map((route) => (
+                      <Typography variant="li" key={route.id}>
+                        <Link
+                          className={`duration-150' -ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 transition-colors hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
+                            IsActive(route.href) ? 'border-l !border-primary-500 text-primary-500' : ''
+                          }`}
+                          href={route.href}>
+                          {route.name}
+                        </Link>
+                      </Typography>
+                    ))}
+                  </Typography>
+                </Accordion.Content>
+              </Accordion.Panel>
+            </Accordion>
+            <Accordion openFirstPanel flush className="border-none bg-transparent">
+              <Accordion.Panel>
+                <Accordion.Container className="p-0">
+                  <Accordion.Title className="text-body-4 font-semibold text-metal-900">Components</Accordion.Title>
+                </Accordion.Container>
+                <Accordion.Content className="p-0">
+                  <Typography variant="ul" className="mb-4 mt-3 space-y-1.5 border-l border-l-metal-100">
+                    {routes.map((route) => (
+                      <Typography variant="li" key={route.id}>
+                        <Link
+                          className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
+                            IsActive(route.href)
+                              ? 'border-l !border-primary-500 text-primary-500 transition-colors duration-150'
+                              : ''
+                          }`}
+                          href={route.href}>
+                          {route.name}
+                        </Link>
+                      </Typography>
+                    ))}
+                  </Typography>
+                </Accordion.Content>
+              </Accordion.Panel>
+            </Accordion>
+          </aside>
         </div>
-      </aside>
-      <main className="mx-auto md:w-[calc(100vw-10vw)]  lg:w-[calc(100vw-5vw)] lg:pl-[calc(100vw-75vw)] xl:w-[calc(100vw-25vw)] xl:pl-[calc(100vw-85vw)] xl:pr-[calc(100vw-95vw)] 2xl:w-[calc(100vw-40vw)] 2xl:pl-[calc(100vw-93vw)] 2xl:pr-[calc(100vw-98vw)] 4k:w-[calc(100vw-49vw)] 4k:pl-[calc(100vw-100vw)] 4k:pr-[calc(100vw-95vw)]">
-        <div className="overflow-y-auto px-4 pb-10">{children}</div>
-      </main>
-      <aside
-        id="linkPage"
-        className="fixed bottom-0 right-[max(0px,calc(50%-51rem))] top-16 z-20 hidden h-[calc(100vh-3rem)] overflow-y-auto pt-12 lg:w-[calc(100vw-80vw)] xl:block xl:w-[calc(100vw-82vw)] 2xl:w-[calc(100vw-86vw)] 4k:w-[calc(100vw-88vw)]">
-        <div className="pl-5">
-          <div className="flex flex-col justify-between overflow-y-auto">
-            <h4 className="mb-2 text-body-5 font-semibold uppercase text-black/100">On this page</h4>
-            <nav id="visible-table-of-contents">
-              <ul
-                dangerouslySetInnerHTML={{
-                  __html: innerHtml ? innerHtml : '',
-                }}
-                className="border-l border-l-metal-100"
-              />
-            </nav>
+        <div className="col-span-12 p-4 md:p-4 lg:col-span-9 xl:col-span-8">
+          <div id="linkPage" className="overflow-y-auto">
+            {children}
           </div>
         </div>
-      </aside>
+        <div className="hidden lg:col-span-3 lg:block xl:col-span-2">
+          <aside id="linkPage" className="sticky top-56 h-[80vh]">
+            <div className="pl-5">
+              <div className="flex flex-col justify-between overflow-y-auto">
+                <h4 className="mb-2 text-body-5 font-semibold uppercase text-black/100">On this page</h4>
+                <nav id="visible-table-of-contents">
+                  <ul
+                    dangerouslySetInnerHTML={{
+                      __html: innerHtml ? innerHtml : '',
+                    }}
+                    className="border-l border-l-metal-100"
+                  />
+                </nav>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
     </section>
   )
 }
diff --git a/app/globals.css b/app/globals.css
index 7c49c413..b43563a2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -5,8 +5,9 @@ html {
 }
 
 body {
-  background-color: #f9fafb;
+  background-color: #f2f5ff;
   font-family: var(--font-inter), sans-serif;
+  @apply bg-white md:bg-primary-25;
 }
 
 .hero-text {
@@ -79,3 +80,13 @@ pre::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: #d7dfe9;
 }
+
+.keep-shadow {
+  box-shadow:
+    0px 1px 2px 0px rgba(45, 54, 67, 0.05),
+    0px -4px 0px 0px rgba(215, 223, 233, 0.5) inset,
+    0px -3px 0px 0px #f0f4f9 inset;
+  border: 1px solid #d7dfe9;
+  border-radius: 16px;
+  background: #fff;
+}
diff --git a/app/page.tsx b/app/page.tsx
index 60a6a6e0..ad5e9cb7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -198,7 +198,7 @@ const FAQ = () => {
       </div>
 
       <div className="mt-12 block w-full xl:hidden">
-        <Accordion>
+        <Accordion flush>
           {faqs.map((faq) => (
             <Accordion.Panel key={faq.id}>
               <Accordion.Container>
@@ -214,7 +214,7 @@ const FAQ = () => {
       </div>
       <div className="mt-12 hidden grid-cols-1 gap-5 xl:grid xl:grid-cols-2">
         <div className="w-full xl:col-span-1">
-          <Accordion openFirstPanel>
+          <Accordion openFirstPanel flush>
             {faqs.slice(0, 3).map((faq) => (
               <Accordion.Panel key={faq.id}>
                 <Accordion.Container>
@@ -229,7 +229,7 @@ const FAQ = () => {
           </Accordion>
         </div>
         <div className="w-full xl:col-span-1">
-          <Accordion openFirstPanel>
+          <Accordion openFirstPanel flush>
             {faqs.slice(3, 6).map((faq) => (
               <Accordion.Panel key={faq.id}>
                 <Accordion.Container>
diff --git a/mdx-components.tsx b/mdx-components.tsx
index 4ea8da02..7316427d 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -5,7 +5,7 @@ export const useMDXComponents: (components: MDXComponents) => MDXComponents = (c
   return {
     h2: (props) => (
       <h2
-        className="section-title group z-10 before:invisible before:-mt-20 before:block before:h-28 before:content-['']"
+        className="section-title group z-10 before:invisible before:block before:content-[''] sm:before:-mt-36 sm:before:h-[224px]"
         {...props}>
         {props.children}
         <a