Give each service its own page

A service now has its address, like a project: icon, tagline, what the
collective does and how, the projects it was delivered on, what the
people it was for said, and the technologies behind it. The landing's
service cards link to it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

landing/src/app/core/api.ts

@@ -233,6 +233,9 @@ export const pireonApi = {
   member: (lang: Locale, slug: string) =>
     get<PublicMember>(`/members/${encodeURIComponent(slug)}`, { lang }),
 
+  service: (lang: Locale, slug: string) =>
+    get<PublicService>(`/services/${encodeURIComponent(slug)}`, { lang }),
+
   call: (lang: Locale, slug: string) =>
     get<PublicCall>(`/calls/${encodeURIComponent(slug)}`, { lang }),
 } as const;

landing/src/app/core/copy.ts

@@ -114,6 +114,12 @@ export interface Copy {
     links: string;
     since: string;
   };
+  service: {
+    eyebrow: string;
+    projects: string;
+    testimonials: string;
+    technologies: string;
+  };
   radar: {
     eyebrow: string;
     lead: string;
@@ -261,6 +267,12 @@ const es: Copy = {
     links: 'Enlaces',
     since: 'En el colectivo desde',
   },
+  service: {
+    eyebrow: 'Servicio',
+    projects: 'Trabajo relacionado',
+    testimonials: 'Qué dicen',
+    technologies: 'Con qué lo hacemos',
+  },
   radar: {
     eyebrow: 'Radar tecnológico',
     lead: 'Las herramientas con las que trabajamos y lo que opinamos de cada una: qué usamos sin dudar, qué estamos probando y qué preferimos evitar.',
@@ -421,6 +433,12 @@ const en: Copy = {
     links: 'Links',
     since: 'In the collective since',
   },
+  service: {
+    eyebrow: 'Service',
+    projects: 'Related work',
+    testimonials: 'What people say',
+    technologies: 'What we use',
+  },
   radar: {
     eyebrow: 'Tech radar',
     lead: 'The tools we work with and what we think of each: what we use without a second thought, what we are trying out and what we would rather avoid.',
@@ -581,6 +599,12 @@ const ca: Copy = {
     links: 'Enllaços',
     since: 'Al col·lectiu des de',
   },
+  service: {
+    eyebrow: 'Servei',
+    projects: 'Feina relacionada',
+    testimonials: 'Què en diuen',
+    technologies: 'Amb què ho fem',
+  },
   radar: {
     eyebrow: 'Radar tecnològic',
     lead: "Les eines amb què treballem i què en pensem de cadascuna: què fem servir sense dubtar, què estem provant i què preferim evitar.",

landing/src/app/core/routed-page.ts

@@ -18,6 +18,7 @@ import type {
   PublicMember,
   PublicPage,
   PublicProject,
+  PublicService,
   PublicTechnology,
 } from './api.types';
 import { resolveRoute, type RouteMatch } from './routes';
@@ -28,6 +29,7 @@ export type RoutedRecord =
   | { type: 'project'; record: PublicProject }
   | { type: 'member'; record: PublicMember }
   | { type: 'call'; record: PublicCall }
+  | { type: 'service'; record: PublicService }
   | { type: 'radar'; record: PublicTechnology[] };
 
 export interface RoutedPageData {
@@ -81,6 +83,10 @@ async function fetchRecord(route: RouteMatch): Promise<RoutedRecord | null> {
       const { data } = await pireonApi.call(locale, slug);
       return data ? { type: 'call', record: data } : null;
     }
+    case 'service': {
+      const { data } = await pireonApi.service(locale, slug);
+      return data ? { type: 'service', record: data } : null;
+    }
     case 'radar': {
       // An empty radar is still the radar: the page says so rather than 404.
       const { data, error } = await pireonApi.radar(locale);