Load rule templates from API

app/(marketing)/MarketingRuleStackSection.tsx

@@ -0,0 +1,23 @@
+import dynamic from "next/dynamic";
+import { listRuleTemplatesFromDb } from "../../lib/server/ruleTemplates";
+import { GOVERNANCE_TEMPLATE_HOME_SLUGS } from "../../lib/templates/governanceTemplateCatalog";
+import { gridEntriesForSlugOrderWithCatalogFallback } from "../../lib/templates/templateGridPresentation";
+
+const RuleStack = dynamic(() => import("../components/sections/RuleStack"), {
+  loading: () => (
+    <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
+  ),
+  ssr: true,
+});
+
+/**
+ * Server-loaded “Popular templates” row so the first paint has card data without a client fetch.
+ */
+export async function MarketingRuleStackSection() {
+  const rows = await listRuleTemplatesFromDb();
+  const initialGridEntries = gridEntriesForSlugOrderWithCatalogFallback(
+    rows,
+    GOVERNANCE_TEMPLATE_HOME_SLUGS,
+  );
+  return <RuleStack initialGridEntries={initialGridEntries} />;
+}