Improve docs UI and Mermaid rendering (#125)

Refactor documentation for clarity and organization. Upgrade the
@biomejs/biome dependency to version 2.4.9. Clean up imports and improve
component structure in the documentation pages.

## Summary by Sourcery

Refine documentation rendering and UI components while updating tooling
dependencies.

New Features:
- Improve Mermaid diagram rendering in docs with explicit SVG rendering
and stricter security configuration.

Bug Fixes:
- Use stable keys for mapped feature and FAQ items on the docs home page
to avoid React key issues.
- Adjust field error list keys to avoid collisions and improve React
reconciliation.

Enhancements:
- Clean up and reorder exports, imports, and hook dependencies across UI
components for consistency and maintainability.
- Streamline docs routing and loader types by removing unused parameters
and simplifying language handling.
- Improve user-facing error and status messages with template literals
and clearer formatting.

Build:
- Upgrade @biomejs/biome to version 2.4.9 and consolidate Biome
configuration by removing redundant docs-specific settings.

Documentation:
- Tidy documentation page composition and table-of-contents handling for
clearer structure.

1 files changed, 5 insertions, 5 deletions

diff --git a/packages/docs/app/routes/home.tsx b/packages/docs/app/routes/home.tsx
index fe561e4..26c0f52 100644
--- a/packages/docs/app/routes/home.tsx
+++ b/packages/docs/app/routes/home.tsx
@@ -110,7 +110,7 @@ const texts = {
   },
 };
 
-export function meta({ params }: Route.MetaArgs) {
+export function meta() {
   return [
     { title: "DropOut - Modern Minecraft Launcher" },
     {
@@ -172,9 +172,9 @@ export default function Home({ params }: Route.ComponentProps) {
 
         {/* Features Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
-          {t.features.items.map((item, i) => (
+          {t.features.items.map((item) => (
             <div
-              key={i}
+              key={item.title}
               className="p-6 rounded-lg border border-blue-600/20 bg-fd-card hover:border-blue-600/50 transition-colors"
             >
               <h3 className="font-semibold text-lg mb-2">{item.title}</h3>
@@ -187,8 +187,8 @@ export default function Home({ params }: Route.ComponentProps) {
         <div className="text-center mb-16">
           <h2 className="text-3xl font-bold mb-6">{t.why.title}</h2>
           <div className="max-w-3xl mx-auto space-y-4 text-left">
-            {t.why.items.map((item, i) => (
-              <div key={i} className="p-4 rounded-lg bg-fd-muted/50">
+            {t.why.items.map((item) => (
+              <div key={item.q} className="p-4 rounded-lg bg-fd-muted/50">
                 <p className="text-fd-foreground">
                   <span className="font-semibold">{item.q}</span>
                   <br />