chore: heygermany customer project

apps/website/components/home/HomeResultsPreview.tsx

@@ -0,0 +1,167 @@
+import type { ReactNode } from 'react'
+import type { QualificationCardStatus } from '@heygermany/sdk'
+import {
+  Box,
+  Flex,
+  Group,
+  SimpleGrid,
+  Text,
+  ThemeIcon,
+} from '@pikku/mantine/core'
+import {
+  IconBriefcase,
+  IconIdBadge2,
+  IconSchool,
+  IconWorld,
+} from '@tabler/icons-react'
+import { useI18n } from '@/context/i18n-provider'
+import { Qualification } from '@/components/jobs/results/Qualification'
+import { QualificationSectionStatusCard } from '@/components/jobs/results/QualificationSectionStatusCard'
+import { type I18nString } from '@pikku/react'
+
+type PreviewSection = {
+  key: 'education' | 'license' | 'language' | 'additional'
+  label: I18nString
+  status: QualificationCardStatus
+  color: 'education' | 'license' | 'language' | 'additional'
+  summaryIcon: ReactNode
+  sectionIcon?: ReactNode
+  qualification?: {
+    title: string
+    description: string
+    status: QualificationCardStatus
+    requirements: string[]
+    steps?: string[]
+    progress?: number
+  }
+}
+
+const buildPreviewSections = (t: ReturnType<typeof useI18n>): PreviewSection[] => [
+  {
+    key: 'education',
+    label: t('enums.qualificationsections.education'),
+    status: 'completed',
+    color: 'education',
+    summaryIcon: <IconSchool size={18} />,
+    sectionIcon: <IconSchool size={34} />,
+    qualification: {
+      title: t('jobs.qualifications.education.match.title'),
+      description: t('jobs.qualifications.education.match.description'),
+      status: 'completed',
+      requirements: [
+        t('jobs.qualifications.education.match.requirements.degree'),
+        t('jobs.qualifications.education.match.requirements.accredited'),
+        t('jobs.qualifications.education.match.requirements.structured'),
+      ],
+    },
+  },
+  {
+    key: 'license',
+    label: t('enums.qualificationsections.license'),
+    status: 'required',
+    color: 'license',
+    summaryIcon: <IconIdBadge2 size={18} />,
+    sectionIcon: <IconIdBadge2 size={34} />,
+    qualification: {
+      title: t('jobs.qualifications.license.nursing.title'),
+      description: t('jobs.qualifications.license.nursing.description'),
+      status: 'required',
+      requirements: [t('jobs.qualifications.license.nursing.requirements.license')],
+      steps: [t('jobs.qualifications.license.nursing.steps.obtain')],
+    },
+  },
+  {
+    key: 'language',
+    label: t('enums.qualificationsections.language'),
+    status: 'in-progress',
+    color: 'language',
+    summaryIcon: <IconWorld size={18} />,
+    sectionIcon: <IconWorld size={34} />,
+    qualification: {
+      title: t('jobs.qualifications.language.proficiency.title'),
+      description: t('jobs.qualifications.language.proficiency.description'),
+      status: 'in-progress',
+      progress: 75,
+      requirements: [
+        t('jobs.qualifications.language.proficiency.requirements.b2'),
+        t('jobs.qualifications.language.proficiency.requirements.certificate'),
+      ],
+      steps: [
+        t('jobs.qualifications.language.proficiency.steps.improve'),
+        t('jobs.qualifications.language.proficiency.steps.getcertificate'),
+      ],
+    },
+  },
+  {
+    key: 'additional',
+    label: t('enums.qualificationsections.additional'),
+    status: 'required',
+    color: 'additional',
+    summaryIcon: <IconBriefcase size={18} />,
+  },
+]
+
+export function HomeResultsPreview() {
+  const t = useI18n()
+  const sections = buildPreviewSections(t)
+  const detailedSections = sections.filter(
+    (section): section is PreviewSection & { qualification: NonNullable<PreviewSection['qualification']>; sectionIcon: ReactNode } =>
+      Boolean(section.qualification && section.sectionIcon)
+  )
+
+  return (
+    <>
+      <Box bg="white" px={{ base: 'md', md: 'xl' }} py={{ base: 'lg', md: 'xl' }}>
+        <Flex gap="md" justify="center" wrap="wrap">
+          {sections.map((section) => (
+            <QualificationSectionStatusCard
+              key={section.key}
+              label={section.label}
+              status={section.status}
+              color={`var(--mantine-color-${section.color}-6)`}
+              icon={section.summaryIcon}
+            />
+          ))}
+        </Flex>
+      </Box>
+
+      <Box
+        bg="gray.0"
+        px={{ base: 'md', md: 'xl' }}
+        pt={{ base: 'xl', md: '3rem' }}
+        pb={{ base: '3rem', md: '4.5rem' }}
+      >
+        <SimpleGrid cols={{ base: 1, md: 3 }} spacing={{ base: 0, md: 'xl' }}>
+          {detailedSections.map((section, index) => (
+            <Box
+              key={section.key}
+              display="flex"
+              h={{ base: 'auto', md: '100%' }}
+              pt={{ base: index === 0 ? 0 : 'xl', md: 0 }}
+              style={{ flexDirection: 'column' }}
+            >
+              <Group align="center" gap="xs" mb="lg" wrap="nowrap">
+                <ThemeIcon color={section.color} radius="md" size="xl" variant="transparent">
+                  {section.sectionIcon}
+                </ThemeIcon>
+                <Text c="gray.9" fw={700} size="xl">
+                  {section.label}
+                </Text>
+              </Group>
+
+              <Qualification
+                title={section.qualification.title}
+                description={section.qualification.description}
+                status={section.qualification.status}
+                requirements={section.qualification.requirements}
+                steps={section.qualification.steps}
+                progress={section.qualification.progress}
+                fillHeight={false}
+              />
+            </Box>
+          ))}
+        </SimpleGrid>
+      </Box>
+    </>
+  )
+}