chore: heygermany customer project

apps/website/components/jobs/results/CompareOptionsRecognition.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { Stack, Text, List, Divider } from '@pikku/mantine/core'
+import { useI18n } from '@/context/i18n-provider'
+import { mKey } from '@/i18n/messages'
+import { compareRecognitionOptionKeys } from '@/framework/content/compare-recognition-options'
+
+export default function CompareOptionsRecognition() {
+  const t = useI18n()
+
+  // Structure (which options, ordering) is data; text comes from messages.
+  const options = compareRecognitionOptionKeys.map((key) => ({
+    key,
+    name: mKey(`jobs.compareoptionsrecognition.options.${key}.name`),
+    description: mKey(`jobs.compareoptionsrecognition.options.${key}.description`),
+    duration: mKey(`jobs.compareoptionsrecognition.options.${key}.duration`),
+  }))
+
+  return (
+    <Stack gap="md">
+      <Text mt="md" mb="md">
+        {t('jobs.compareoptionsrecognition.context')}
+      </Text>
+
+      <Text fw="bold" mb="xs">
+        {t('jobs.compareoptionsrecognition.choose')}
+      </Text>
+      <List withPadding spacing="xs" mb="md">
+        {options.map((option: any) => (
+          <List.Item key={option.key}>
+            <Text fw="bold">{option.name}:</Text> {option.description}
+          </List.Item>
+        ))}
+      </List>
+
+      <Divider />
+
+      <Text fw="bold" mt="md" mb="xs">
+        {t('jobs.compareoptionsrecognition.duration')}
+      </Text>
+      <List withPadding spacing="xs" mb="md">
+        {options.map((option: any) => (
+          <List.Item key={option.key + '-duration'}>
+            <Text fw="bold">{option.name}:</Text> {option.duration}
+          </List.Item>
+        ))}
+      </List>
+
+      <Text mt="md">
+        {t('jobs.compareoptionsrecognition.requirementsaftercompletion')}
+      </Text>
+
+      <Text fw="bold" mt="md">
+        {t('jobs.compareoptionsrecognition.professionaltitleintro')}
+      </Text>
+      <Text fw="bold" fz="md">
+        {t('jobs.compareoptionsrecognition.professionaltitle')}
+      </Text>
+
+      <Text mt="sm" lineBreaks>{t('jobs.compareoptionsrecognition.outcome')}</Text>
+    </Stack>
+  )
+}