Merge pull request #133 from ncdai/improve/readme

style: enhance typography and layout in Prose component; adjust heade…

Author: ncdai

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

@@ -53,12 +53,12 @@ export default async function Page({
 
   return (
     <>
-      <div className="h-10" />
+      <div className="h-12" />
 
       <Prose>
-        <h1 className="font-heading mb-6">{post.metadata.title}</h1>
+        <h1 className="font-heading mb-2">{post.metadata.title}</h1>
 
-        <p className="lead">{post.metadata.description}</p>
+        <p className="lead mt-2 mb-6">{post.metadata.description}</p>
 
         <div>
           <LLMCopyButtonWithViewOptions

apps/web/src/components/header.tsx

@@ -33,7 +33,7 @@ export function Header() {
           href="https://shadcnstudio.com?utm_source=chanhdai&utm_medium=banner&utm_campaign=github"
           target="_blank"
           rel="noopener"
-          className="flex items-center gap-2.5 rounded-md bg-zinc-50 px-2.5 py-2 transition-colors duration-300 hover:bg-zinc-100 dark:bg-zinc-900 dark:hover:bg-zinc-800"
+          className="flex items-center gap-2.5 rounded-md bg-zinc-50 px-2.5 py-2 transition-colors duration-300 hover:bg-zinc-100 dark:bg-zinc-900/60 dark:hover:bg-zinc-900"
         >
           <svg
             viewBox="0 0 328 329"

apps/web/src/components/ui/typography.tsx

@@ -20,8 +20,10 @@ function Prose({
       data-slot="prose"
       className={cn(
         "prose max-w-none prose-zinc dark:prose-invert",
-        "prose-headings:font-heading prose-headings:text-balance",
-        "prose-h2:border-b prose-h2:pb-2",
+        "prose-headings:font-heading prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-balance",
+        "prose-h1:text-3xl",
+        "prose-h2:border-b prose-h2:pb-1",
+        "prose-lead:text-base",
         "prose-a:font-medium prose-a:wrap-break-word prose-a:text-foreground prose-a:underline prose-a:underline-offset-4",
         "prose-code:rounded-md prose-code:border prose-code:bg-muted/50 prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:text-sm prose-code:font-normal prose-code:before:content-none prose-code:after:content-none",
         "prose-strong:font-medium",