emaui/apps/portal/src/app/features/dashboard/components/DashboardHero.tsx

import { Box, Button, Group, Stack, Text, Title } from '@mantine/core';
import { IconFilePlus, IconCategory, IconAnchor } from '@tabler/icons-react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

export function DashboardHero({ name }: { name?: string }) {
  const { t } = useTranslation();
  const navigate = useNavigate();

  return (
    <Box
      p={{ base: 'lg', sm: 'xl' }}
      style={{
        position: 'relative',
        overflow: 'hidden',
        borderRadius: 'var(--mantine-radius-lg)',
        background: 'linear-gradient(135deg, #2453a2 0%, #3160b7 45%, #1fc29d 130%)',
        color: 'white',
        boxShadow: 'var(--mantine-shadow-md)',
      }}
    >
      {/* decorative wash */}
      <IconAnchor
        size={220}
        stroke={1}
        aria-hidden
        style={{
          position: 'absolute',
          right: -30,
          bottom: -50,
          opacity: 0.12,
        }}
      />
      <div
        aria-hidden
        style={{
          position: 'absolute',
          top: -60,
          right: 120,
          width: 200,
          height: 200,
          borderRadius: '50%',
          background: 'rgba(255,255,255,0.08)',
        }}
      />

      <Stack gap="md" style={{ position: 'relative', maxWidth: 620 }}>
        <Stack gap={4}>
          <Text fz="sm" fw={600} style={{ opacity: 0.85 }}>
            {t('dashboard.hero.greeting')}
            {name ? ',' : ''}
          </Text>
          {name && (
            <Title order={2} c="white">
              {name}
            </Title>
          )}
          <Text fz={{ base: 'sm', sm: 'md' }} style={{ opacity: 0.92 }} maw={520}>
            {t('dashboard.hero.subtitle')}
          </Text>
        </Stack>

        <Group gap="sm">
          <Button
            variant="white"
            c="emaPrimary.7"
            leftSection={<IconFilePlus size={18} />}
            onClick={() => navigate('/apply')}
          >
            {t('dashboard.newApplication')}
          </Button>
          <Button
            leftSection={<IconCategory size={18} />}
            onClick={() => navigate('/services')}
            styles={{
              root: {
                background: 'rgba(255,255,255,0.16)',
                color: 'white',
                border: '1px solid rgba(255,255,255,0.35)',
                backdropFilter: 'blur(4px)',
              },
            }}
          >
            {t('dashboard.hero.browse')}
          </Button>
        </Group>
      </Stack>
    </Box>
  );
}