[Docs][Content] - Rework overview page and slight updates to codeblocks (#1056)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->

## Changes
### overview Page Redesign
- Added centered hero section with Stack Auth logo and welcome message
- Replaced verbose "Why Stack Auth" section with a clean Quick start
guide for next.js
- added Components section with compact card links. 
- Streamlined QuickLinks and Apps sections
- Added lastModified frontmatter support

### Frontmatter schema extension
- Extended frontmatter schema to support optional lastModified field
- Enables pages to display when they were last updated

### Last Modified Display
- Added subtle "Last Updated" text at the bottom of pages that have the
lastModified frontmatter field

### Copy Button for Code Blocks
- Added copy-to-clipboard button to  all codeblocks
- Button appears on hover, shows checkmark feedback when copied
- Applies to all code blocks

### New Code Examples
- Added setup/overview examples for the overview page quick start
	- install - npx command
	- use-auth - useUser example




<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Code blocks gain a copy-to-clipboard button.
  * Docs pages now show "Last updated" timestamps when available.

* **Documentation**
* Overview page redesigned into a hero + quick-start, component
showcase, and explore sections with clearer links.
* Setup examples expanded to include an "install" quick-start and an
authentication "use" example.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

docs/src/app/docs/[[...slug]]/page.tsx

@@ -67,6 +67,12 @@ export default async function Page(props: {
           })}
         />
       </DocsBody>
+      {/* Show last modified date at the bottom, tucked away */}
+      {page.data.lastModified && (
+        <p className="text-xs text-fd-muted-foreground/50 mt-6">
+          Last updated {page.data.lastModified}
+        </p>
+      )}
     </DocsPage>
   );
 }

docs/src/components/mdx/base-codeblock.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';
+import { Check, Copy } from 'lucide-react';
 import { useEffect, useState, type ReactNode } from 'react';
 import { codeToHtml } from 'shiki';
+import { cn } from '../../lib/cn';
 
 export type BaseCodeblockProps = {
   code: string,
@@ -47,6 +49,17 @@ export function BaseCodeblock({
 }: BaseCodeblockProps) {
   const [highlightedCode, setHighlightedCode] = useState<string>('');
   const [isClient, setIsClient] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code.startsWith(' ') ? code.slice(1) : code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
 
   // Mark when we're on the client to avoid hydration mismatches
   useEffect(() => {
@@ -148,9 +161,24 @@ export function BaseCodeblock({
         )}
 
         {/* Code Content */}
-        <div className="relative bg-fd-background px-4 py-4 text-sm outline-none dark:bg-[#0A0A0A] rounded-b-xl">
+        <div className="group/code relative bg-fd-background px-4 py-4 text-sm outline-none dark:bg-[#0A0A0A] rounded-b-xl">
           {beforeCodeContent}
 
+          {/* Copy button - visible on hover or when copied */}
+          <button
+            onClick={() => runAsynchronously(handleCopy)}
+            className={cn(
+              "absolute top-3 right-3 z-10 p-1.5 rounded-md transition-all duration-150",
+              "text-fd-muted-foreground hover:text-fd-foreground",
+              "bg-fd-muted/50 hover:bg-fd-muted border border-fd-border/50",
+              "opacity-0 group-hover/code:opacity-100",
+              copied && "opacity-100 text-green-500 hover:text-green-500"
+            )}
+            title={copied ? "Copied!" : "Copy code"}
+          >
+            {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+          </button>
+
           <div className="rounded-lg overflow-auto max-h-[500px] relative">
             <div
               ref={codeContainerRef}