chore: heygermany customer project
This commit is contained in:
e2e
377
apps/website/components/home/HomePage.tsx
Normal file
377
apps/website/components/home/HomePage.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
import { Link, useParams } from '@tanstack/react-router'
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Group,
|
||||
Space,
|
||||
} from '@pikku/mantine/core'
|
||||
import { IconCheck } from '@tabler/icons-react'
|
||||
import { useI18n } from '@/context/i18n-provider'
|
||||
import { HomeResultsPreview } from '@/components/home/HomeResultsPreview'
|
||||
import React from 'react'
|
||||
import { asI18n, type I18nString } from '@pikku/react'
|
||||
|
||||
const FeatureCard: React.FunctionComponent<{
|
||||
title: I18nString
|
||||
description: I18nString
|
||||
}> = ({ title, description }) => {
|
||||
return (
|
||||
<Stack gap={0}>
|
||||
<Group align="center" gap="xs" mb={{ base: 0, lg: 'xs' }}>
|
||||
<Box
|
||||
w={32}
|
||||
h={32}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: '50%',
|
||||
border: '1px solid'
|
||||
}}
|
||||
c={{ base: 'white', lg: 'black' }}
|
||||
bd={{ base: 'white', lg: 'black' }}
|
||||
>
|
||||
<IconCheck size={16} />
|
||||
</Box>
|
||||
<Title
|
||||
order={2}
|
||||
style={{
|
||||
fontSize: 'clamp(1.25rem, 2vw, 2.25rem)',
|
||||
lineHeight: 1.2
|
||||
}}
|
||||
c={{ base: 'white', lg: 'gray.8' }}
|
||||
>
|
||||
{asI18n(title)}
|
||||
</Title>
|
||||
</Group>
|
||||
<Text
|
||||
ml={44}
|
||||
ta="left"
|
||||
c={{ base: 'white', lg: 'gray.6' }}
|
||||
style={{ lineHeight: 1.5 }}
|
||||
>
|
||||
{asI18n(description)}
|
||||
</Text>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
const Features: React.FunctionComponent = () => {
|
||||
const t = useI18n()
|
||||
const features = [
|
||||
{ title: t('website.features.fast.title'), description: t('website.features.fast.description') },
|
||||
{ title: t('website.features.free.title'), description: t('website.features.free.description') },
|
||||
{ title: t('website.features.easy.title'), description: t('website.features.easy.description') },
|
||||
]
|
||||
|
||||
return (
|
||||
<Grid gutter={{ base: 'sm', lg: 'lg' }} p={{ base: 'sm', lg: 'lg' }}>
|
||||
{features.map((feature) => (
|
||||
<Grid.Col key={feature.title} span={{ base: 12, md: 4 }}>
|
||||
<FeatureCard
|
||||
title={feature.title}
|
||||
description={feature.description}
|
||||
/>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
const HeroSection: React.FunctionComponent = () => {
|
||||
const t = useI18n()
|
||||
const { lang } = useParams({ strict: false }) as { lang: string }
|
||||
const isRtl = t.locale === 'ar'
|
||||
|
||||
return (
|
||||
<Box pos="relative" mih={{ base: '40rem', lg: 0 }}>
|
||||
<Container size="xl" h="100%" style={{ position: 'relative', zIndex: 20 }}>
|
||||
<Flex
|
||||
direction={{ base: 'column', lg: 'row' }}
|
||||
justify={{ base: 'center', md: 'normal' }}
|
||||
h="100%"
|
||||
>
|
||||
<Box maw={{ base: '100%', lg: '50%' }}>
|
||||
<Box
|
||||
py={{ base: 'md', lg: 'xl', xl: '4rem' }}
|
||||
ta="start"
|
||||
>
|
||||
<Title
|
||||
order={1}
|
||||
c={{ base: 'white', lg: 'gray.9' }}
|
||||
mb={{ base: 'sm', lg: 'lg', xl: '3.5rem' }}
|
||||
mt={{ base: 'md' }}
|
||||
style={{
|
||||
fontSize: 'clamp(2rem, 4vw, 3rem)',
|
||||
lineHeight: 1.3,
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
<span style={{ display: 'block' }}>{t('website.hero.title')}</span>
|
||||
</Title>
|
||||
|
||||
<Box mt={{ base: 'md', lg: '2.5rem' }}>
|
||||
<Flex
|
||||
wrap="wrap"
|
||||
align="center"
|
||||
justify={{ base: 'flex-start', lg: 'center' }}
|
||||
fw={700}
|
||||
c={{ base: 'white', lg: 'black' }}
|
||||
style={{
|
||||
fontSize: 'clamp(2.5rem, 6vw, 3rem)',
|
||||
lineHeight: 1.26,
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
{t('website.hero.checkqualification')}
|
||||
</Flex>
|
||||
<Flex
|
||||
wrap="nowrap"
|
||||
align="center"
|
||||
justify={{ base: 'flex-start', lg: 'center' }}
|
||||
mb={{ base: '2rem', lg: '2.5rem' }}
|
||||
mih={{ base: 0, lg: 80 }}
|
||||
>
|
||||
<Flex align="center" justify={{ base: 'flex-start', lg: 'center' }} mb="xs" pos="relative">
|
||||
<Text
|
||||
fw={700}
|
||||
me="md"
|
||||
c={{ base: 'white', lg: 'black' }}
|
||||
style={{
|
||||
fontSize: 'clamp(2.5rem, 6vw, 3rem)',
|
||||
lineHeight: 1.26
|
||||
}}
|
||||
>
|
||||
{t('website.hero.in')}
|
||||
</Text>
|
||||
<Box pos="relative" display="inline-block">
|
||||
<Box
|
||||
component="span"
|
||||
pos="absolute"
|
||||
display="flex"
|
||||
style={{
|
||||
top: '1.75em',
|
||||
left: '-0.25em',
|
||||
width: 'calc(100% + 0.5em)',
|
||||
justifyContent: 'center',
|
||||
zIndex: 5
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="100%"
|
||||
height="0.57em"
|
||||
viewBox="0 0 250 10"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<rect y="4" width="250" height="6" rx="2" fill="#ebb305" />
|
||||
</svg>
|
||||
</Box>
|
||||
<Text
|
||||
component="span"
|
||||
fw={700}
|
||||
pos="relative"
|
||||
c={{ base: 'white', lg: 'black' }}
|
||||
style={{
|
||||
fontSize: 'clamp(2.5rem, 6vw, 3rem)',
|
||||
lineHeight: 1.26,
|
||||
zIndex: 3
|
||||
}}
|
||||
>
|
||||
{t('website.hero.months')}
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Space w={{ base: '1rem', lg: '1.75rem' }} />
|
||||
<Flex align="center" justify={{ base: 'flex-start', lg: 'center' }} style={{ position: 'relative', top: -2, whiteSpace: 'nowrap' }}>
|
||||
<Box component="span">
|
||||
<svg
|
||||
width="42"
|
||||
height="37"
|
||||
viewBox="0 0 42 37"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ width: 'clamp(28px, 4vw, 42px)', height: 'auto' }}
|
||||
>
|
||||
<path d="M25.772 8.644C26.19 8.19 26.159 7.485 25.702 7.069L18.252 0.293C17.794 -0.123 17.084 -0.092 16.666 0.362C16.247 0.816 16.278 1.522 16.736 1.937L23.358 7.961L17.295 14.54C16.876 14.995 16.908 15.7 17.365 16.116C17.822 16.532 18.532 16.5 18.951 16.046Z M2.795 34.253C1.714 29.036 2.066 22.916 5.271 18.019C8.441 13.175 14.554 9.301 25.49 8.822L25.391 6.594C13.93 7.096 7.052 11.208 3.389 16.803C-0.238 22.346 -0.56 29.12 0.597 34.703Z" fill="#ebb305" transform="translate(7.348 4.299) rotate(33 13 17.25)" />
|
||||
</svg>
|
||||
</Box>
|
||||
<Text
|
||||
fw={700}
|
||||
ml="xs"
|
||||
c="#ebb305"
|
||||
style={{
|
||||
fontSize: 'clamp(2.5rem, 6vw, 3rem)',
|
||||
lineHeight: 1.26,
|
||||
letterSpacing: '-0.01em'
|
||||
}}
|
||||
>
|
||||
{t('website.hero.days')}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
<Text
|
||||
mb='sm'
|
||||
c={{ base: 'rgba(255, 255, 255, 0.9)', lg: 'gray.7' }}
|
||||
style={{
|
||||
fontSize: 'clamp(1rem, 1.5vw, 1.125rem)',
|
||||
lineHeight: 1.5,
|
||||
maxWidth: '100%'
|
||||
}}
|
||||
>
|
||||
{t('website.hero.subtitle')}
|
||||
</Text>
|
||||
<Text
|
||||
mb="lg"
|
||||
c={{ base: 'rgba(255, 255, 255, 0.9)', lg: 'gray.7' }}
|
||||
style={{
|
||||
fontSize: 'clamp(1rem, 1.5vw, 1.125rem)',
|
||||
lineHeight: 1.5,
|
||||
maxWidth: '100%'
|
||||
}}
|
||||
>
|
||||
{t('website.hero.description')}
|
||||
</Text>
|
||||
<Features />
|
||||
<Flex align="center" justify="center" gap="md">
|
||||
<Link to={`/${lang}/jobs/apply`}>
|
||||
<Button type="button" m="md" mb="2.5rem">
|
||||
{t('website.hero.cta')}
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Container>
|
||||
|
||||
<Box
|
||||
pos="absolute"
|
||||
top={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
hiddenFrom="base"
|
||||
visibleFrom="lg"
|
||||
style={{
|
||||
width: '50%',
|
||||
zIndex: 10
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/home_nurse.webp"
|
||||
alt="Nurse reviewing qualifications for a healthcare role in Germany"
|
||||
loading="eager"
|
||||
sizes="(max-width: 62em) 0vw, 50vw"
|
||||
style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
objectFit: 'cover',
|
||||
clipPath: isRtl ? 'none' : 'polygon(12% 0, 100% 0%, 100% 100%, 0 100%)',
|
||||
transform: isRtl ? 'scaleX(-1)' : 'none'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
pos="absolute"
|
||||
inset={0}
|
||||
hiddenFrom="lg"
|
||||
style={{ zIndex: 1 }}
|
||||
>
|
||||
<Box
|
||||
pos="absolute"
|
||||
inset={0}
|
||||
bg="rgba(0, 0, 0, 0.85)"
|
||||
style={{ zIndex: 10 }}
|
||||
/>
|
||||
<img
|
||||
src="/home_nurse.webp"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
sizes="100vw"
|
||||
style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
const CallToActionSection: React.FunctionComponent = () => {
|
||||
const t = useI18n()
|
||||
const { lang } = useParams({ strict: false }) as { lang: string }
|
||||
return (
|
||||
<Box component="section">
|
||||
<Container size="xl" w="100%" py="5rem">
|
||||
<Stack align="center">
|
||||
<Title
|
||||
order={2}
|
||||
fw={700}
|
||||
mb="md"
|
||||
ta="center"
|
||||
style={{
|
||||
fontSize: 'clamp(1.5rem, 3vw, 1.875rem)',
|
||||
lineHeight: 1.2
|
||||
}}
|
||||
>
|
||||
{t('website.cta.title')}
|
||||
</Title>
|
||||
<Container size="sm" px={0}>
|
||||
<Text
|
||||
mb="md"
|
||||
ta="left"
|
||||
style={{
|
||||
fontSize: 'clamp(0.875rem, 1.5vw, 1rem)',
|
||||
lineHeight: 1.5
|
||||
}}
|
||||
>
|
||||
{t('website.cta.description')}
|
||||
</Text>
|
||||
</Container>
|
||||
<Flex align="center" justify="center">
|
||||
<Stack pt="md" align="center">
|
||||
<Link to={`/${lang}/jobs/apply`}>
|
||||
<Button>{t('website.cta.button')}</Button>
|
||||
</Link>
|
||||
<Text
|
||||
ta="center"
|
||||
c="dimmed"
|
||||
mt="xs"
|
||||
style={{
|
||||
fontSize: 'clamp(0.75rem, 1.2vw, 0.875rem)',
|
||||
lineHeight: 1.4
|
||||
}}
|
||||
>
|
||||
{t('website.cta.disclaimer')}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Box mt="2.5rem" mb="4rem" w="100%">
|
||||
<HomeResultsPreview />
|
||||
</Box>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<CallToActionSection />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user