refactor: extract hardcoded content into astro content collections

src/pages/[slug].astro

@@ -1,39 +1,40 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import '../styles/globals.css'
+import { getCollection, type CollectionEntry } from 'astro:content'
 import { Header } from '../components/Header'
 import { Footer } from '../components/Footer'
-import { CategoryRoute } from '../views/CategoryRoute'
+import { CategoryView } from '../views/CategoryView'
 
-export function getStaticPaths() {
-  return [
-    { params: { slug: 'cloud' } },
-    { params: { slug: 'russian-software' } },
-    { params: { slug: 'cybersecurity' } },
-    { params: { slug: 'ai-solutions' } },
-    { params: { slug: 'russian-hardware' } },
-    { params: { slug: 'hardware-solutions' } },
-    { params: { slug: 'cad-gis' } },
-    { params: { slug: 'industrial-solutions' } },
-    { params: { slug: 'government' } },
-    { params: { slug: 'business' } },
-    { params: { slug: 'consulting' } },
-    { params: { slug: 'implementation' } },
-    { params: { slug: 'managed-services' } },
-    { params: { slug: 'integration' } },
-    { params: { slug: 'specialized-services' } },
-    { params: { slug: 'support' } },
-    { params: { slug: 'subscription' } },
-  ]
+export async function getStaticPaths() {
+  const categories = await getCollection('categories')
+  return categories.map((entry: CollectionEntry<'categories'>) => ({
+    params: { slug: entry.id },
+    props: {
+      title: entry.data.title,
+      description: entry.data.description,
+      vendors: entry.data.vendors,
+    },
+  }))
 }
 
-const slug = Astro.params.slug!
+interface Props {
+  title: string
+  description: string
+  vendors: {
+    name: string
+    description: string
+    products?: string[]
+  }[]
+}
+
+const { title, description, vendors } = Astro.props as Props
 ---
 
 <Layout>
   <div class="min-h-screen bg-white w-full overflow-x-hidden">
     <Header client:load />
-    <CategoryRoute client:load slug={slug} />
+    <CategoryView client:load title={title} description={description} vendors={vendors} />
     <Footer client:load />
   </div>
 </Layout>