docs(docs): add ProblemBadges component, layout slot, and enrich pages with topics/video frontmatter, plus guide placeholders and topic‑landing map.

apps/docs/content/(04-relational)/graph-dfs/417-pacific-atlantic-water-flow.mdx

@@ -2,13 +2,16 @@
 title: '417. Pacific Atlantic Water Flow'
 description: There is an m x n rectangular island that borders both the Pacific Ocean and Atlantic Ocean. The Pacific Ocean touches the island's left and top edges, and the Atlantic Ocean touches the island's right and bottom edges
 icon: dot
+topics:
+  - { name: "Array", slug: "array" }
+  - { name: "Depth-First Search", slug: "depth-first-search" }
+  - { name: "Breadth-First Search", slug: "breadth-first-search" }
+  - { name: "Matrix", slug: "matrix" }
 sidebar:
   label: 'Pacific Atlantic Water Flow'
   badge: 'Medium'
 ---
 
-<Badge variant="accent">Array</Badge>
-
 ### Example 1:
 - Input: `heights = [[1,2,2,3,5],[3,2,3,4,4],[2,4,5,3,1],[6,7,1,4,5],[5,1,1,2,4]]`
 - Output: `[[0,4],[1,3],[1,4],[2,2],[3,0],[3,1],[4,0]]`