fix: address docs page review feedback

Co-Authored-By: Glinr <bot@glincker.com>

Author: thegdsks

src/components/docs/docs-code-block.tsx

@@ -1,17 +1,29 @@
 "use client";
 
-import { useCallback, useState } from "react";
-import { Check, Copy } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Check, Copy, X } from "lucide-react";
 import { colorizeSnippet } from "@/components/icons/shared/syntax-highlight";
 import type { DocsSnippet } from "@/lib/docs-content";
 
+type CopyStatus = "idle" | "copied" | "failed";
+
 export function DocsCodeBlock({ snippet }: { snippet: DocsSnippet }) {
-  const [copied, setCopied] = useState(false);
+  const [status, setStatus] = useState<CopyStatus>("idle");
+  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => {
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+  }, []);
 
   const handleCopy = useCallback(async () => {
-    await navigator.clipboard.writeText(snippet.code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+    try {
+      await navigator.clipboard.writeText(snippet.code);
+      setStatus("copied");
+    } catch {
+      setStatus("failed");
+    }
+    resetTimer.current = setTimeout(() => setStatus("idle"), 1500);
   }, [snippet.code]);
 
   return (
@@ -22,13 +34,21 @@ export function DocsCodeBlock({ snippet }: { snippet: DocsSnippet }) {
           type="button"
           onClick={handleCopy}
           className={`flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium transition-colors ${
-            copied
+            status === "copied"
               ? "bg-green-500/10 text-green-600 dark:text-green-400"
-              : "bg-orange-500/15 text-orange-500 hover:bg-orange-500/25 hover:text-orange-400"
+              : status === "failed"
+                ? "bg-red-500/10 text-red-600 dark:text-red-400"
+                : "bg-orange-500/15 text-orange-500 hover:bg-orange-500/25 hover:text-orange-400"
           }`}
         >
-          {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-          {copied ? "Copied" : "Copy"}
+          {status === "copied" ? (
+            <Check className="h-3 w-3" />
+          ) : status === "failed" ? (
+            <X className="h-3 w-3" />
+          ) : (
+            <Copy className="h-3 w-3" />
+          )}
+          {status === "copied" ? "Copied" : status === "failed" ? "Couldn't copy" : "Copy"}
         </button>
       </div>
       <div className="bg-zinc-950">

src/components/docs/faq-section.tsx

@@ -5,7 +5,7 @@ import type { FaqItem } from "@/lib/docs-content";
  * static export's HTML) whether or not it's expanded, no JS required. */
 export function FaqSection({ items }: { items: FaqItem[] }) {
   return (
-    <section id="faq" className="scroll-mt-24">
+    <section id="faq" className="scroll-mt-32">
       <h2 className="mb-4 flex items-center gap-2 text-lg font-semibold">
         <HelpCircle className="h-4 w-4 text-orange-500" />
         FAQ
@@ -16,7 +16,7 @@ export function FaqSection({ items }: { items: FaqItem[] }) {
             <summary className="cursor-pointer list-none text-sm font-medium marker:content-none">
               <span className="flex items-center justify-between gap-3">
                 {item.question}
-                <span className="text-muted-foreground transition-transform group-open:rotate-45">+</span>
+                <span aria-hidden="true" className="text-muted-foreground transition-transform group-open:rotate-45">+</span>
               </span>
             </summary>
             <p className="mt-2 text-xs leading-relaxed text-muted-foreground">{item.answer}</p>