chore: heygermany customer project

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

@@ -0,0 +1,139 @@
+import { useState } from 'react'
+import {
+  Box,
+  Container,
+  Grid,
+  Stack,
+  Text,
+  Group,
+  Button,
+  rem,
+  Drawer,
+  Alert,
+} from '@pikku/mantine/core'
+import { IconInfoCircle } from '@tabler/icons-react'
+import { useI18n } from '@/context/i18n-provider'
+import { asI18n } from '@pikku/react'
+import GetHelp from './GetHelp'
+import ApplicantProfile from './ApplicantProfile'
+import ConnectWithEmployers from './ConnectWithEmployers'
+
+interface CTASectionProps {
+  joinTalentPool: boolean
+  publicMode?: boolean
+}
+
+export const CTASection: React.FunctionComponent<CTASectionProps> = ({
+  joinTalentPool,
+  publicMode = false,
+}) => {
+  const t = useI18n()
+  const [drawerOpened, setDrawerOpened] = useState(false)
+  const [drawerTitle, setDrawerTitle] = useState('')
+  const [drawerContent, setDrawerContent] = useState<'getHelp' | 'connect'>('connect')
+
+  const openDrawer = (contentType: 'getHelp' | 'connect', title: string) => {
+    setDrawerTitle(title)
+    setDrawerContent(contentType)
+    setDrawerOpened(true)
+  }
+
+  const renderDrawerContent = () => {
+    switch (drawerContent) {
+      case 'getHelp':
+        return <GetHelp />
+      case 'connect':
+        if (publicMode) {
+          return <ConnectWithEmployers />
+        }
+        return (
+          <Stack gap="md">
+            {!joinTalentPool && (
+              <Alert variant="light" color="blue" icon={<IconInfoCircle />}>
+                <Text size="sm" fw={500}>
+                  {t('jobs.improveyourprofile.optin.title')}
+                </Text>
+                <Text size="sm" mt="xs">
+                  {t('jobs.improveyourprofile.optin.description')}
+                </Text>
+              </Alert>
+            )}
+            <ApplicantProfile />
+          </Stack>
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <>
+      <Box bg="white" py="xl">
+        <Container size="xl" p={0}>
+          <Grid gutter={0}>
+            <Grid.Col span={{ base: 12, lg: 6 }}>
+              <Stack gap="xl" p="xl" me={rem(40)}>
+                <Stack gap="xs">
+                  <Text size="xxxl" fw={700} lh={1.2}>
+                    {t('jobs.ctasection.ready.prefix')}
+                  </Text>
+                  <Text size="xxxl" fw={700} c="primary" lh={1.2}>
+                    {t('jobs.ctasection.ready.suffix')}
+                  </Text>
+                </Stack>
+
+                <Text size="xl" maw={rem(500)}>
+                  {t('jobs.ctasection.description')}
+                </Text>
+
+                <Group>
+                  <Button
+                    size="md"
+                    color="primary"
+                    onClick={() => openDrawer('connect', t('jobs.ctasection.buttons.connect'))}
+                  >
+                    {t('jobs.ctasection.buttons.connect')}
+                  </Button>
+                  <Button
+                    size="md"
+                    variant="outline"
+                    color="gray"
+                    onClick={() => openDrawer('getHelp', t('jobs.ctasection.buttons.contact'))}
+                  >
+                    {t('jobs.ctasection.buttons.contact')}
+                  </Button>
+                </Group>
+              </Stack>
+            </Grid.Col>
+
+            <Grid.Col span={{ base: 12, lg: 6 }}>
+              <Box pos="relative" h={{ base: '300px', lg: '100%' }}>
+                <img
+                  src="https://media.istockphoto.com/id/998313080/photo/smiling-medical-team-standing-together-outside-a-hospital.jpg?s=612x612&w=0&k=20&c=fXzbjAoStQ_8jTM4TQxbHBEjhETI3vq5_7d_JL19eCA="
+                  alt="Smiling medical team standing together outside a hospital"
+                  style={{
+                    height: '100%',
+                    width: '100%',
+                    objectFit: 'cover',
+                    objectPosition: 'center',
+                    clipPath: 'polygon(12% 0, 100% 0%, 100% 100%, 0 100%)',
+                  }}
+                />
+              </Box>
+            </Grid.Col>
+          </Grid>
+        </Container>
+      </Box>
+
+      <Drawer
+        opened={drawerOpened}
+        onClose={() => setDrawerOpened(false)}
+        title={asI18n(drawerTitle)}
+        size="lg"
+        position="right"
+      >
+        {renderDrawerContent()}
+      </Drawer>
+    </>
+  )
+}