feat: add react-syntax-highlighter and update JSDoc cheatsheet layout

Integrate react-syntax-highlighter for improved code example rendering and enhance the JSDoc cheatsheet layout with a new navigation structure and quick reference section.

app/documentation/page.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Info } from "lucide-react"
+import CodeHighlighter from "@/components/SyntaxHighlighter"
+import Header from "@/components/Header"
+import Sidebar from "@/components/Sidebar"
+import TableOfContents from "@/components/TableOfContents"
+import { jsdocData } from "@/lib/jsdoc-data"
+
+const documentationData = jsdocData.documentation
+
+export default function DocumentationPage() {
+  // Generate TOC items from the data
+  const tocItems = documentationData.items.map((item, index) => ({
+    id: item.tag.replace("@", "").replace(/[^a-zA-Z0-9]/g, "-"),
+    title: item.tag,
+    level: 1
+  }))
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header /> 
+      <Sidebar />
+      <TableOfContents items={tocItems} />
+
+      <div className="lg:ml-64 xl:mr-72 px-6 py-8">
+        <div className="max-w-4xl mx-auto">
+          {/* Section Header */}
+          <div className="text-center mb-8">
+            <h2 className="text-3xl font-bold text-foreground mb-2">
+              {documentationData.title}
+            </h2>
+            <p className="text-muted-foreground text-lg">
+              {documentationData.description}
+            </p>
+          </div>
+
+          {/* Content Cards */}
+          <div className="grid gap-6">
+            {documentationData.items.map((item, index) => (
+              <Card
+                key={index}
+                id={item.tag.replace("@", "").replace(/[^a-zA-Z0-9]/g, "-")}
+                className="border-border hover:shadow-lg transition-all duration-300 hover:border-primary/50 hover:shadow-primary/5"
+              >
+                <CardHeader className="pb-3">
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-xl text-foreground flex items-center gap-2">
+                      <Badge variant="secondary" className="bg-primary text-primary-foreground font-mono">
+                        {item.tag}
+                      </Badge>
+                    </CardTitle>
+                  </div>
+                  <CardDescription className="text-muted-foreground text-base">{item.description}</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {/* Syntax */}
+                  <div>
+                    <h4 className="font-semibold text-foreground mb-2">Syntax:</h4>
+                    <code className="block bg-muted text-muted-foreground p-3 rounded-md text-sm font-mono border border-border">
+                      {item.syntax}
+                    </code>
+                  </div>
+
+                  <Separator />
+
+                  {/* Example with Syntax Highlighting */}
+                  <div>
+                    <h4 className="font-semibold text-foreground mb-2">Example:</h4>
+                    <CodeHighlighter code={item.example} />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="border-t border-border bg-card/50 mt-16">
+        <div className="w-full px-6 py-8">
+          <div className="text-center text-muted-foreground">
+            <p className="mb-2">
+              For more information, visit the{" "}
+              <a
+                href="https://jsdoc.app/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                official JSDoc documentation
+              </a>
+            </p>
+            <p className="text-sm">This cheatsheet covers the most commonly used JSDoc tags and patterns.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}