Update layout, navigation, and content for documentation pages

Enhanced the documentation pages by updating the layout with aesthetic adjustments and adding better navigation elements. New documentation content was added: 'Authentication', 'Getting Started', and their child pages. This ensures users have a clearer path when viewing, navigating, and accessing the information they need. "Read more" fallback label was added to the documentation cards for better accessibility.

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 
 import { ContentRenderer, createCmsClient } from '@kit/cms';
 import { If } from '@kit/ui/if';
+import { Separator } from '@kit/ui/separator';
 
 import { withI18n } from '~/lib/i18n/with-i18n';
 
@@ -56,7 +57,9 @@ async function DocumentationPage({ params }: PageParams) {
           <ContentRenderer content={page.content} />
         </article>
 
-        <If condition={page.children}>
+        <If condition={page.children.length > 0}>
+          <Separator />
+
           <DocsCards cards={page.children ?? []} />
         </If>
       </div>

apps/web/app/(marketing)/docs/_components/docs-card.tsx

@@ -2,11 +2,13 @@ import Link from 'next/link';
 
 import { ChevronRight } from 'lucide-react';
 
+import { Trans } from '@kit/ui/trans';
+
 export const DocsCard: React.FC<
   React.PropsWithChildren<{
     title: string;
     subtitle?: string | null;
-    link: { url: string; label: string };
+    link: { url: string; label?: string };
   }>
 > = ({ title, subtitle, children, link }) => {
   return (
@@ -35,7 +37,7 @@ export const DocsCard: React.FC<
               className={'text-sm font-medium hover:underline'}
               href={link.url}
             >
-              {link.label}
+              {link.label ?? <Trans i18nKey={'marketing:readMore'} />}
             </Link>
 
             <ChevronRight className={'h-4'} />

apps/web/app/(marketing)/docs/_components/docs-cards.tsx

@@ -3,9 +3,11 @@ import { Cms } from '@kit/cms';
 import { DocsCard } from './docs-card';
 
 export function DocsCards({ cards }: { cards: Cms.ContentItem[] }) {
+  const cardsSortedByOrder = [...cards].sort((a, b) => a.order - b.order);
+
   return (
-    <div className={'grid grid-cols-1 gap-8 lg:grid-cols-2'}>
-      {cards.map((item) => {
+    <div className={'grid grid-cols-1 gap-6 lg:grid-cols-2'}>
+      {cardsSortedByOrder.map((item) => {
         return (
           <DocsCard
             key={item.title}
@@ -13,7 +15,6 @@ export function DocsCards({ cards }: { cards: Cms.ContentItem[] }) {
             subtitle={item.description}
             link={{
               url: `/docs/${item.slug}`,
-              label: 'Read more',
             }}
           />
         );

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -12,6 +12,7 @@ import { isBrowser } from '@kit/shared/utils';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
 import { cn, isRouteActive } from '@kit/ui/utils';
 
 const DocsNavLink: React.FC<{
@@ -24,14 +25,20 @@ const DocsNavLink: React.FC<{
   const isFirstLevel = level === 0;
 
   return (
-    <div className={getNavLinkClassName(isCurrent, isFirstLevel)}>
+    <Button
+      className={cn('w-full', {
+        ['font-semibold']: isFirstLevel,
+      })}
+      variant={isCurrent ? 'secondary' : 'ghost'}
+      size={isFirstLevel ? 'default' : 'sm'}
+    >
       <Link
         className="flex h-full max-w-full grow items-center space-x-2"
         href={url}
       >
         <span className="block max-w-full truncate">{label}</span>
       </Link>
-    </div>
+    </Button>
   );
 };
 
@@ -73,7 +80,11 @@ function Tree({
   activePath: string;
 }) {
   return (
-    <div className={cn('w-full space-y-1 pl-3')}>
+    <div
+      className={cn('w-full space-y-1', {
+        ['pl-3']: level > 0,
+      })}
+    >
       {pages.map((treeNode, index) => (
         <Node
           key={index}
@@ -110,19 +121,6 @@ export function DocsNavigation({ pages }: { pages: Cms.ContentItem[] }) {
   );
 }
 
-function getNavLinkClassName(isCurrent: boolean, isFirstLevel: boolean) {
-  return cn(
-    'group flex min-h-8 items-center justify-between space-x-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors',
-    {
-      [`bg-muted`]: isCurrent,
-      [`hover:bg-muted`]: !isCurrent,
-      [`font-semibold`]: isFirstLevel,
-      [`font-normal`]: !isFirstLevel && isCurrent,
-      [`hover:text-foreground-muted`]: !isFirstLevel && !isCurrent,
-    },
-  );
-}
-
 function FloatingDocumentationNavigation({
   pages,
   activePath,
@@ -173,8 +171,6 @@ function FloatingDocumentationNavigation({
             ' flex flex-col space-y-4 overflow-auto bg-white dark:bg-background'
           }
         >
-          <Heading level={1}>Table of Contents</Heading>
-
           <Tree pages={pages} level={0} activePath={activePath} />
         </div>
       </If>

apps/web/app/(marketing)/docs/page.tsx

@@ -27,14 +27,16 @@ async function DocsPage() {
 
   return (
     <PageBody>
-      <div className={'flex flex-col space-y-12 xl:space-y-24'}>
+      <div className={'flex flex-col space-y-8 xl:space-y-16'}>
         <SitePageHeader
           title={t('marketing:documentation')}
           subtitle={t('marketing:documentationSubtitle')}
         />
 
-        <div className={'container mx-auto flex flex-col items-center'}>
-          <DocsCards cards={cards} />
+        <div className={'flex flex-col items-center'}>
+          <div className={'container mx-auto max-w-5xl'}>
+            <DocsCards cards={cards} />
+          </div>
         </div>
       </div>
     </PageBody>