feat: add more integration pages

components/CodeBlock.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+/**
+ * @file Reusable code block component for integration guide pages.
+ *
+ * Renders a VS-Code-style code block with a filename tab header.
+ */
+
+interface CodeBlockProps {
+  /** Filename displayed in the tab header */
+  filename: string
+  /** The code string to render inside the block */
+  children: string
+}
+
+/**
+ * Renders a dark-themed code snippet with a filename tab.
+ */
+export function CodeBlock({ filename, children }: CodeBlockProps) {
+  return (
+    <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
+      <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+        <span className="text-xs text-neutral-400 font-mono">{filename}</span>
+      </div>
+      <div className="p-4 overflow-x-auto">
+        <pre className="text-sm font-mono text-neutral-300">{children}</pre>
+      </div>
+    </div>
+  )
+}