di usage in website

apps/website/app/races/RacesStatic.tsx

@@ -1,16 +1,19 @@
 import { RacesTemplate } from '@/templates/RacesTemplate';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { ContainerManager } from '@/lib/di/container';
+import { RACE_SERVICE_TOKEN } from '@/lib/di/tokens';
 import type { RaceListItemViewModel } from '@/lib/view-models/RaceListItemViewModel';
+import type { RaceService } from '@/lib/services/races/RaceService';
 
 // This is a server component that fetches data and passes it to the template
 export async function RacesStatic() {
-  const { raceService } = useServices();
+  const container = ContainerManager.getInstance().getContainer();
+  const raceService = container.get<RaceService>(RACE_SERVICE_TOKEN);
   
   // Fetch race data server-side
   const pageData = await raceService.getRacesPageData();
   
   // Extract races from the response
-  const races = pageData.races.map(race => ({
+  const races = pageData.races.map((race: RaceListItemViewModel) => ({
     id: race.id,
     track: race.track,
     car: race.car,
@@ -27,7 +30,7 @@ export async function RacesStatic() {
 
   // Transform the categorized races as well
   const transformRaces = (raceList: RaceListItemViewModel[]) =>
-    raceList.map(race => ({
+    raceList.map((race: RaceListItemViewModel) => ({
       id: race.id,
       track: race.track,
       car: race.car,