mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 19:12:50 +00:00
UI improvments on landing page
This commit is contained in:
Estifo77
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Accordion,
|
||||
Alert,
|
||||
Anchor,
|
||||
Badge,
|
||||
Box,
|
||||
@@ -13,11 +14,12 @@ import {
|
||||
Drawer,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Tabs,
|
||||
Text,
|
||||
TextInput,
|
||||
Textarea,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
useMantineTheme,
|
||||
@@ -25,21 +27,30 @@ import {
|
||||
import {
|
||||
IconActivity,
|
||||
IconAnchor,
|
||||
IconArrowRight,
|
||||
IconAward,
|
||||
IconBriefcase,
|
||||
IconCertificate,
|
||||
IconCheck,
|
||||
IconClipboardCheck,
|
||||
IconClock,
|
||||
IconCoin,
|
||||
IconCompass,
|
||||
IconExternalLink,
|
||||
IconFileCheck,
|
||||
IconGavel,
|
||||
IconGlobe,
|
||||
IconHelpCircle,
|
||||
IconLanguage,
|
||||
IconMail,
|
||||
IconMapPin,
|
||||
IconMessage,
|
||||
IconPhone,
|
||||
IconSchool,
|
||||
IconSearch,
|
||||
IconSend,
|
||||
IconShip,
|
||||
IconShieldCheck,
|
||||
IconTarget,
|
||||
IconUserCheck,
|
||||
IconUserCircle,
|
||||
IconUsers,
|
||||
@@ -99,6 +110,29 @@ export function LandingPage({
|
||||
const { t } = useTranslation();
|
||||
const isAuthed = primaryHref !== '/login';
|
||||
|
||||
useEffect(() => {
|
||||
const handleAnchorClick = (e: MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
const anchor = target.closest<HTMLAnchorElement>('a[href^="#"]');
|
||||
if (!anchor) return;
|
||||
const href = anchor.getAttribute('href');
|
||||
if (!href || href === '#') return;
|
||||
|
||||
const targetEl = document.querySelector(href);
|
||||
if (targetEl) {
|
||||
e.preventDefault();
|
||||
targetEl.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
});
|
||||
window.history.pushState(null, '', href);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleAnchorClick);
|
||||
return () => document.removeEventListener('click', handleAnchorClick);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box className="ema-landing" style={{ minHeight: '100dvh', background: 'var(--mantine-color-body)' }}>
|
||||
<Anchor
|
||||
@@ -135,6 +169,7 @@ export function LandingPage({
|
||||
<Hero primaryHref={primaryHref} signupHref={signupHref} isAuthed={isAuthed} />
|
||||
<StatsBanner />
|
||||
<About />
|
||||
<InstitutionalMandate />
|
||||
<Services />
|
||||
<Roles />
|
||||
<HowItWorks />
|
||||
@@ -424,9 +459,18 @@ function Hero({
|
||||
|
||||
<Container size="xl" py={{ base: 88, sm: 120, lg: 148 }} pos="relative">
|
||||
<Stack gap="lg" align="center" ta="center" className="ema-landing-fade">
|
||||
<Badge size="lg" variant="light" color="white" radius="xl" style={{ textTransform: 'none', fontWeight: 600 }}>
|
||||
{t('landing.hero.eyebrow')}
|
||||
{/* Floating live status pill */}
|
||||
<Badge
|
||||
size="lg"
|
||||
variant="light"
|
||||
color="white"
|
||||
radius="xl"
|
||||
leftSection={<span className="ema-live-dot" style={{ marginRight: 4 }} />}
|
||||
style={{ textTransform: 'none', fontWeight: 600, backdropFilter: 'blur(6px)' }}
|
||||
>
|
||||
{t('landing.hero.livePill')}
|
||||
</Badge>
|
||||
|
||||
<Title order={1} fz={{ base: 34, sm: 48, lg: 56 }} lh={1.1} maw={860}>
|
||||
{t('landing.hero.title')}
|
||||
</Title>
|
||||
@@ -457,7 +501,7 @@ function Hero({
|
||||
variant="outline"
|
||||
color="white"
|
||||
leftSection={<IconBriefcase size={20} />}
|
||||
style={{ backdropFilter: 'blur(4px)', backgroundColor: 'rgba(255,255,255,0.1)' }}
|
||||
style={{ backdropFilter: 'blur(8px)', backgroundColor: 'rgba(255,255,255,0.12)' }}
|
||||
>
|
||||
{t('landing.cta.exploreServices')}
|
||||
</Button>
|
||||
@@ -503,10 +547,10 @@ function StatsBanner() {
|
||||
<SimpleGrid cols={{ base: 2, sm: 4 }} spacing="lg">
|
||||
<Stack gap={2} align="center" ta="center">
|
||||
<Group gap={6} align="center">
|
||||
<ThemeIcon size={32} radius="xl" variant="light" color="emaPrimary">
|
||||
<IconUsers size={16} />
|
||||
<ThemeIcon size={36} radius="xl" variant="light" color="emaPrimary">
|
||||
<IconUsers size={18} />
|
||||
</ThemeIcon>
|
||||
<Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
|
||||
<Text fz={{ base: 26, sm: 32 }} fw={800} className="ema-text-gradient">
|
||||
{t('landing.stats.seafarersVal')}
|
||||
</Text>
|
||||
</Group>
|
||||
@@ -517,10 +561,10 @@ function StatsBanner() {
|
||||
|
||||
<Stack gap={2} align="center" ta="center">
|
||||
<Group gap={6} align="center">
|
||||
<ThemeIcon size={32} radius="xl" variant="light" color="emaTeal">
|
||||
<IconShip size={16} />
|
||||
<ThemeIcon size={36} radius="xl" variant="light" color="emaTeal">
|
||||
<IconShip size={18} />
|
||||
</ThemeIcon>
|
||||
<Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
|
||||
<Text fz={{ base: 26, sm: 32 }} fw={800} className="ema-text-gradient">
|
||||
{t('landing.stats.vesselsVal')}
|
||||
</Text>
|
||||
</Group>
|
||||
@@ -531,10 +575,10 @@ function StatsBanner() {
|
||||
|
||||
<Stack gap={2} align="center" ta="center">
|
||||
<Group gap={6} align="center">
|
||||
<ThemeIcon size={32} radius="xl" variant="light" color="emaPrimary">
|
||||
<IconShieldCheck size={16} />
|
||||
<ThemeIcon size={36} radius="xl" variant="light" color="emaPrimary">
|
||||
<IconShieldCheck size={18} />
|
||||
</ThemeIcon>
|
||||
<Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
|
||||
<Text fz={{ base: 26, sm: 32 }} fw={800} className="ema-text-gradient">
|
||||
{t('landing.stats.efficiencyVal')}
|
||||
</Text>
|
||||
</Group>
|
||||
@@ -545,10 +589,10 @@ function StatsBanner() {
|
||||
|
||||
<Stack gap={2} align="center" ta="center">
|
||||
<Group gap={6} align="center">
|
||||
<ThemeIcon size={32} radius="xl" variant="light" color="emaTeal">
|
||||
<IconClock size={16} />
|
||||
<ThemeIcon size={36} radius="xl" variant="light" color="emaTeal">
|
||||
<IconClock size={18} />
|
||||
</ThemeIcon>
|
||||
<Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
|
||||
<Text fz={{ base: 26, sm: 32 }} fw={800} className="ema-text-gradient">
|
||||
{t('landing.stats.availabilityVal')}
|
||||
</Text>
|
||||
</Group>
|
||||
@@ -569,7 +613,7 @@ function SectionHeading({ title, subtitle }: { title: string; subtitle?: string
|
||||
{title}
|
||||
</Title>
|
||||
{subtitle && (
|
||||
<Text c="dimmed" fz="md">
|
||||
<Text c="dimmed" fz="md" fw={500}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
)}
|
||||
@@ -582,22 +626,37 @@ function About() {
|
||||
return (
|
||||
<Box id="about" component="section" py={72}>
|
||||
<Container size="xl">
|
||||
<SectionHeading title={t('landing.about.title')} />
|
||||
<SectionHeading title={t('landing.about.title')} subtitle={t('landing.about.eyebrow')} />
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="xl">
|
||||
<Paper withBorder radius="lg" p="xl" className="ema-landing-hover ema-landing-card-accent">
|
||||
<Stack gap="xs">
|
||||
<Text fw={700} c="var(--mantine-primary-color-filled)" tt="uppercase" fz="xs" style={{ letterSpacing: 0.5 }}>
|
||||
<Paper withBorder radius="lg" p="xl" className="ema-landing-hover ema-vision-card">
|
||||
<Stack gap="sm">
|
||||
<Group gap="xs">
|
||||
<ThemeIcon size={32} radius="md" variant="light" color="emaPrimary">
|
||||
<IconCompass size={18} />
|
||||
</ThemeIcon>
|
||||
<Text fw={700} c="var(--mantine-primary-color-filled)" tt="uppercase" fz="xs" style={{ letterSpacing: 0.8 }}>
|
||||
{t('landing.about.visionLabel')}
|
||||
</Text>
|
||||
<Text>{t('landing.about.vision')}</Text>
|
||||
</Group>
|
||||
<Text fz="sm" style={{ lineHeight: 1.6 }}>
|
||||
{t('landing.about.vision')}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
<Paper withBorder radius="lg" p="xl" className="ema-landing-hover ema-landing-card-accent">
|
||||
<Stack gap="xs">
|
||||
<Text fw={700} c="var(--mantine-primary-color-filled)" tt="uppercase" fz="xs" style={{ letterSpacing: 0.5 }}>
|
||||
|
||||
<Paper withBorder radius="lg" p="xl" className="ema-landing-hover ema-mission-card">
|
||||
<Stack gap="sm">
|
||||
<Group gap="xs">
|
||||
<ThemeIcon size={32} radius="md" variant="light" color="emaTeal">
|
||||
<IconTarget size={18} />
|
||||
</ThemeIcon>
|
||||
<Text fw={700} c="#009879" tt="uppercase" fz="xs" style={{ letterSpacing: 0.8 }}>
|
||||
{t('landing.about.missionLabel')}
|
||||
</Text>
|
||||
<Text>{t('landing.about.mission')}</Text>
|
||||
</Group>
|
||||
<Text fz="sm" style={{ lineHeight: 1.6 }}>
|
||||
{t('landing.about.mission')}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</SimpleGrid>
|
||||
@@ -606,21 +665,61 @@ function About() {
|
||||
);
|
||||
}
|
||||
|
||||
const MANDATE_ICONS = {
|
||||
safety: { icon: IconShieldCheck, color: 'blue' },
|
||||
logistics: { icon: IconShip, color: 'emaTeal' },
|
||||
stcw: { icon: IconSchool, color: 'emaPrimary' },
|
||||
flagState: { icon: IconAnchor, color: 'indigo' },
|
||||
} as const;
|
||||
|
||||
function InstitutionalMandate() {
|
||||
const { t } = useTranslation();
|
||||
const items = Object.keys(MANDATE_ICONS) as (keyof typeof MANDATE_ICONS)[];
|
||||
return (
|
||||
<Box id="mandate" component="section" py={72}>
|
||||
<Container size="xl">
|
||||
<SectionHeading title={t('landing.mandate.title')} subtitle={t('landing.mandate.subtitle')} />
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
|
||||
{items.map((key) => {
|
||||
const { icon: Icon, color } = MANDATE_ICONS[key];
|
||||
return (
|
||||
<Paper key={key} withBorder radius="lg" p="lg" className="ema-landing-hover ema-landing-card-accent">
|
||||
<Stack gap="sm" align="flex-start" justify="space-between" h="100%">
|
||||
<Stack gap="xs">
|
||||
<ThemeIcon size={44} radius="lg" variant="light" color={color}>
|
||||
<Icon size={22} />
|
||||
</ThemeIcon>
|
||||
<Text fw={700} fz="md">
|
||||
{t(`landing.mandate.items.${key}.title`)}
|
||||
</Text>
|
||||
<Text c="dimmed" fz="sm" style={{ lineHeight: 1.6 }}>
|
||||
{t(`landing.mandate.items.${key}.description`)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const SERVICE_ICONS = {
|
||||
seafarerRegistration: IconUserCheck,
|
||||
vesselRegistration: IconShip,
|
||||
licensing: IconBriefcase,
|
||||
examinations: IconSchool,
|
||||
waivers: IconShieldCheck,
|
||||
medical: IconActivity,
|
||||
waivers: IconGavel,
|
||||
} as const;
|
||||
|
||||
function Services() {
|
||||
const { t } = useTranslation();
|
||||
const items = Object.keys(SERVICE_ICONS) as (keyof typeof SERVICE_ICONS)[];
|
||||
return (
|
||||
<Box id="services" component="section" py={72}>
|
||||
<Box id="services" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
|
||||
<Container size="xl">
|
||||
<SectionHeading title={t('landing.services.title')} subtitle={t('landing.services.subtitle')} />
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
|
||||
@@ -628,15 +727,25 @@ function Services() {
|
||||
const Icon = SERVICE_ICONS[key];
|
||||
return (
|
||||
<Paper key={key} withBorder radius="lg" p="lg" className="ema-landing-hover ema-landing-card-accent">
|
||||
<Stack gap="sm">
|
||||
<ThemeIcon size={44} radius="md" variant="light">
|
||||
<Stack gap="sm" justify="space-between" h="100%">
|
||||
<Stack gap="xs">
|
||||
<ThemeIcon size={44} radius="md" variant="light" color="emaPrimary">
|
||||
<Icon size={22} />
|
||||
</ThemeIcon>
|
||||
<Text fw={600}>{t(`landing.services.items.${key}.title`)}</Text>
|
||||
<Text c="dimmed" fz="sm">
|
||||
<Text fw={700} fz="md">
|
||||
{t(`landing.services.items.${key}.title`)}
|
||||
</Text>
|
||||
<Text c="dimmed" fz="sm" style={{ lineHeight: 1.6 }}>
|
||||
{t(`landing.services.items.${key}.description`)}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Group justify="space-between" align="center" mt="xs" pt="xs" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
|
||||
<Text fz="xs" fw={600} c="var(--mantine-primary-color-filled)">
|
||||
{t('landing.cta.exploreServices')}
|
||||
</Text>
|
||||
<IconArrowRight size={16} className="ema-card-arrow" />
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
@@ -647,26 +756,26 @@ function Services() {
|
||||
}
|
||||
|
||||
const ROLE_ICONS = {
|
||||
seafarers: IconShip,
|
||||
vesselOwners: IconAnchor,
|
||||
agents: IconBriefcase,
|
||||
reviewers: IconGavel,
|
||||
seafarers: { icon: IconShip, color: 'emaTeal' },
|
||||
vesselOwners: { icon: IconAnchor, color: 'emaPrimary' },
|
||||
agents: { icon: IconBriefcase, color: 'indigo' },
|
||||
reviewers: { icon: IconGavel, color: 'yellow' },
|
||||
} as const;
|
||||
|
||||
function Roles() {
|
||||
const { t } = useTranslation();
|
||||
const items = Object.keys(ROLE_ICONS) as (keyof typeof ROLE_ICONS)[];
|
||||
return (
|
||||
<Box id="roles" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
|
||||
<Box id="roles" component="section" py={72}>
|
||||
<Container size="xl">
|
||||
<SectionHeading title={t('landing.roles.title')} subtitle={t('landing.roles.subtitle')} />
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
|
||||
{items.map((key) => {
|
||||
const Icon = ROLE_ICONS[key];
|
||||
const { icon: Icon, color } = ROLE_ICONS[key];
|
||||
return (
|
||||
<Paper key={key} withBorder radius="lg" p="lg" ta="center" className="ema-landing-hover ema-landing-card-accent">
|
||||
<Stack gap="sm" align="center">
|
||||
<ThemeIcon size={48} radius="xl" variant="light">
|
||||
<ThemeIcon size={48} radius="xl" variant="light" color={color}>
|
||||
<Icon size={24} />
|
||||
</ThemeIcon>
|
||||
<Text fw={600}>{t(`landing.roles.${key}.title`)}</Text>
|
||||
@@ -683,30 +792,35 @@ function Roles() {
|
||||
);
|
||||
}
|
||||
|
||||
const STEP_KEYS = ['selectRole', 'createAccount', 'submitApplication', 'trackStatus', 'receiveApproval'] as const;
|
||||
const STEP_ICONS = [IconUsers, IconUserCheck, IconClipboardCheck, IconAward, IconCertificate];
|
||||
const STEP_KEYS = ['createAccount', 'submitApplication', 'fulfillRequirements', 'payFees', 'receiveCertificate'] as const;
|
||||
const STEP_ICONS = [IconUserCheck, IconClipboardCheck, IconActivity, IconCoin, IconCertificate];
|
||||
|
||||
function HowItWorks() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Box id="how-it-works" component="section" py={72}>
|
||||
<Box id="how-it-works" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
|
||||
<Container size="xl">
|
||||
<SectionHeading title={t('landing.howItWorks.title')} subtitle={t('landing.howItWorks.subtitle')} />
|
||||
<SimpleGrid cols={{ base: 1, sm: 3, md: 5 }} spacing="lg">
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 5 }} spacing="lg">
|
||||
{STEP_KEYS.map((key, i) => {
|
||||
const Icon = STEP_ICONS[i];
|
||||
return (
|
||||
<Paper key={key} withBorder radius="lg" p="md" className="ema-landing-hover ema-landing-card-accent" ta="center">
|
||||
<Paper key={key} withBorder radius="lg" p="lg" className="ema-landing-hover ema-landing-card-accent" ta="center">
|
||||
<Stack gap="xs" align="center" justify="space-between" h="100%">
|
||||
<Stack gap="xs" align="center">
|
||||
<Badge size="xs" variant="filled" radius="xl" color="emaPrimary">
|
||||
Step 0{i + 1}
|
||||
</Badge>
|
||||
<ThemeIcon size={44} radius="xl" variant="filled" color="var(--mantine-primary-color-filled)">
|
||||
<Icon size={22} />
|
||||
<ThemeIcon size={48} radius="xl" variant="light" color="emaPrimary">
|
||||
<Icon size={24} />
|
||||
</ThemeIcon>
|
||||
<Text fw={600} fz="sm">
|
||||
{t(`landing.howItWorks.steps.${key}`)}
|
||||
<Text fw={700} fz="sm">
|
||||
{t(`landing.howItWorks.steps.${key}.title`)}
|
||||
</Text>
|
||||
<Text c="dimmed" fz="xs" style={{ lineHeight: 1.5 }}>
|
||||
{t(`landing.howItWorks.steps.${key}.description`)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
@@ -722,26 +836,30 @@ const SYSTEM_ICONS = {
|
||||
bilingual: IconLanguage,
|
||||
tracking: IconActivity,
|
||||
singleAccount: IconUserCircle,
|
||||
payments: IconCoin,
|
||||
framework: IconClipboardCheck,
|
||||
} as const;
|
||||
|
||||
function SystemHighlights() {
|
||||
const { t } = useTranslation();
|
||||
const items = Object.keys(SYSTEM_ICONS) as (keyof typeof SYSTEM_ICONS)[];
|
||||
return (
|
||||
<Box id="system" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
|
||||
<Box id="system" component="section" py={72}>
|
||||
<Container size="xl">
|
||||
<SectionHeading title={t('landing.system.title')} subtitle={t('landing.system.subtitle')} />
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
|
||||
{items.map((key) => {
|
||||
const Icon = SYSTEM_ICONS[key];
|
||||
return (
|
||||
<Paper key={key} withBorder radius="lg" p="lg" ta="center" className="ema-landing-hover ema-landing-card-accent">
|
||||
<Stack gap="sm" align="center">
|
||||
<ThemeIcon size={48} radius="xl" variant="light">
|
||||
<Icon size={24} />
|
||||
<Paper key={key} withBorder radius="lg" p="lg" className="ema-landing-hover ema-landing-card-accent">
|
||||
<Stack gap="sm" align="flex-start">
|
||||
<ThemeIcon size={44} radius="xl" variant="light" color="emaPrimary">
|
||||
<Icon size={22} />
|
||||
</ThemeIcon>
|
||||
<Text fw={600}>{t(`landing.system.items.${key}.title`)}</Text>
|
||||
<Text c="dimmed" fz="sm">
|
||||
<Text fw={700} fz="md">
|
||||
{t(`landing.system.items.${key}.title`)}
|
||||
</Text>
|
||||
<Text c="dimmed" fz="sm" style={{ lineHeight: 1.6 }}>
|
||||
{t(`landing.system.items.${key}.description`)}
|
||||
</Text>
|
||||
</Stack>
|
||||
@@ -755,21 +873,100 @@ function SystemHighlights() {
|
||||
}
|
||||
|
||||
const FAQ_KEYS = ['whatIsPortal', 'whoCanUse', 'howToApply', 'isFree'] as const;
|
||||
const FAQ_ICONS = {
|
||||
whatIsPortal: IconHelpCircle,
|
||||
whoCanUse: IconUsers,
|
||||
howToApply: IconFileCheck,
|
||||
isFree: IconCoin,
|
||||
} as const;
|
||||
|
||||
function Faq() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Box component="section" py={72}>
|
||||
<Container size="sm">
|
||||
<SectionHeading title={t('landing.faq.title')} />
|
||||
<Accordion variant="separated" radius="lg">
|
||||
{FAQ_KEYS.map((key) => (
|
||||
<Box id="faq" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
|
||||
<Container size="xl">
|
||||
<SectionHeading title={t('landing.faq.title')} subtitle={t('landing.faq.eyebrow')} />
|
||||
<SimpleGrid cols={{ base: 1, md: 12 }} spacing="xl">
|
||||
{/* Left Column: Direct Support Box */}
|
||||
<Paper
|
||||
component={Stack}
|
||||
gap="md"
|
||||
p="xl"
|
||||
radius="lg"
|
||||
withBorder
|
||||
style={{ gridColumn: 'span 4' }}
|
||||
className="ema-landing-hover ema-contact-hq-card"
|
||||
>
|
||||
<ThemeIcon size={44} radius="lg" variant="light" color="emaPrimary">
|
||||
<IconHelpCircle size={24} />
|
||||
</ThemeIcon>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Text fw={700} fz="lg">
|
||||
{t('landing.faq.eyebrow')}
|
||||
</Text>
|
||||
<Text fz="sm" c="dimmed" style={{ lineHeight: 1.6 }}>
|
||||
{t('landing.faq.supportPrompt')}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
component="a"
|
||||
href="#contact"
|
||||
variant="filled"
|
||||
color="emaPrimary"
|
||||
leftSection={<IconMessage size={18} />}
|
||||
radius="md"
|
||||
>
|
||||
{t('landing.faq.contactSupport')}
|
||||
</Button>
|
||||
|
||||
<Divider my={4} />
|
||||
|
||||
<Group gap="xs" align="center">
|
||||
<ThemeIcon size={28} radius="xl" variant="light" color="emaTeal">
|
||||
<IconPhone size={14} />
|
||||
</ThemeIcon>
|
||||
<Stack gap={0}>
|
||||
<Text fz="xs" fw={700}>
|
||||
{t('landing.footer.emergencyLabel')}
|
||||
</Text>
|
||||
<Text fz="xs" c="dimmed" fw={600}>
|
||||
{t('landing.footer.emergencyValue')}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Paper>
|
||||
|
||||
{/* Right Column: Accordion Cards */}
|
||||
<Box style={{ gridColumn: 'span 8' }}>
|
||||
<Accordion variant="separated" radius="lg" className="ema-faq-accordion">
|
||||
{FAQ_KEYS.map((key) => {
|
||||
const Icon = FAQ_ICONS[key];
|
||||
return (
|
||||
<Accordion.Item key={key} value={key}>
|
||||
<Accordion.Control>{t(`landing.faq.items.${key}.question`)}</Accordion.Control>
|
||||
<Accordion.Panel>{t(`landing.faq.items.${key}.answer`)}</Accordion.Panel>
|
||||
<Accordion.Control
|
||||
icon={
|
||||
<ThemeIcon size={32} radius="md" variant="light" color="emaPrimary">
|
||||
<Icon size={18} />
|
||||
</ThemeIcon>
|
||||
}
|
||||
>
|
||||
<Text fw={600} fz="md">
|
||||
{t(`landing.faq.items.${key}.question`)}
|
||||
</Text>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Text fz="sm" c="dimmed" style={{ lineHeight: 1.6 }} pl={42}>
|
||||
{t(`landing.faq.items.${key}.answer`)}
|
||||
</Text>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</Accordion>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
@@ -777,53 +974,137 @@ function Faq() {
|
||||
|
||||
function Contact() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Box id="contact" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
|
||||
<Box id="contact" component="section" py={72}>
|
||||
<Container size="xl">
|
||||
<SectionHeading title={t('landing.contact.title')} subtitle={t('landing.contact.subtitle')} />
|
||||
<Paper withBorder radius="lg" p="xl" maw={560} mx="auto" component="address" style={{ fontStyle: 'normal' }}>
|
||||
<Stack gap="lg">
|
||||
<Group gap="md" wrap="nowrap" align="flex-start">
|
||||
<ThemeIcon size={38} radius="md" variant="light">
|
||||
<IconMapPin size={18} />
|
||||
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg" maw={1080} mx="auto">
|
||||
{/* Address Card */}
|
||||
<Paper
|
||||
withBorder
|
||||
radius="lg"
|
||||
p="xl"
|
||||
className="ema-landing-hover ema-contact-hq-card"
|
||||
style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<ThemeIcon size={44} radius="lg" variant="light" color="emaPrimary">
|
||||
<IconMapPin size={24} />
|
||||
</ThemeIcon>
|
||||
<Stack gap={2}>
|
||||
<Text fw={600} fz="sm">
|
||||
<Stack gap={4}>
|
||||
<Text fw={700} fz="sm">
|
||||
{t('landing.contact.addressLabel')}
|
||||
</Text>
|
||||
<Text c="dimmed" fz="sm">
|
||||
<Text c="dimmed" fz="sm" style={{ lineHeight: 1.6 }}>
|
||||
{t('landing.contact.address')}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Group gap="md" wrap="nowrap" align="flex-start">
|
||||
<ThemeIcon size={38} radius="md" variant="light">
|
||||
</Stack>
|
||||
<Button
|
||||
component="a"
|
||||
href="https://maps.google.com/?q=Sunshine+Building+Addis+Ababa"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
variant="light"
|
||||
color="emaPrimary"
|
||||
size="xs"
|
||||
leftSection={<IconExternalLink size={14} />}
|
||||
w="fit-content"
|
||||
mt="lg"
|
||||
>
|
||||
{t('landing.contact.getDirections')}
|
||||
</Button>
|
||||
</Paper>
|
||||
|
||||
{/* Direct Phone & Website Card */}
|
||||
<Paper
|
||||
withBorder
|
||||
radius="lg"
|
||||
p="xl"
|
||||
className="ema-landing-hover"
|
||||
style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Group gap="sm" align="center" wrap="nowrap">
|
||||
<ThemeIcon size={38} radius="md" variant="light" color="emaTeal">
|
||||
<IconPhone size={18} />
|
||||
</ThemeIcon>
|
||||
<Stack gap={2}>
|
||||
<Text fw={600} fz="sm">
|
||||
<Text fw={600} fz="xs" c="dimmed">
|
||||
{t('landing.contact.phoneLabel')}
|
||||
</Text>
|
||||
<Anchor href="tel:+251115150299" fz="sm">
|
||||
<Anchor href="tel:+251115150299" fw={700} fz="sm">
|
||||
+251 011 515 0299
|
||||
</Anchor>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Group gap="md" wrap="nowrap" align="flex-start">
|
||||
<ThemeIcon size={38} radius="md" variant="light">
|
||||
<IconMail size={18} />
|
||||
|
||||
<Divider />
|
||||
|
||||
<Group gap="sm" align="center" wrap="nowrap">
|
||||
<ThemeIcon size={38} radius="md" variant="light" color="emaPrimary">
|
||||
<IconGlobe size={18} />
|
||||
</ThemeIcon>
|
||||
<Stack gap={2}>
|
||||
<Text fw={600} fz="sm">
|
||||
<Text fw={600} fz="xs" c="dimmed">
|
||||
{t('landing.contact.websiteLabel')}
|
||||
</Text>
|
||||
<Anchor href="https://etmaritime.com" target="_blank" rel="noreferrer" fz="sm">
|
||||
<Anchor href="https://etmaritime.com" target="_blank" rel="noreferrer" fw={700} fz="sm">
|
||||
etmaritime.com
|
||||
</Anchor>
|
||||
</Stack>
|
||||
</Group>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Group gap="sm" align="center" wrap="nowrap">
|
||||
<ThemeIcon size={38} radius="md" variant="light" color="emaTeal">
|
||||
<IconClock size={18} />
|
||||
</ThemeIcon>
|
||||
<Stack gap={2}>
|
||||
<Text fw={600} fz="xs" c="dimmed">
|
||||
{t('landing.footer.hoursLabel')}
|
||||
</Text>
|
||||
<Text fz="xs" fw={600}>
|
||||
{t('landing.footer.hoursValue')}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Emergency Hotline Banner */}
|
||||
<Paper
|
||||
radius="lg"
|
||||
p="xl"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #1e3a8a 0%, #0d9488 100%)',
|
||||
color: '#ffffff',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justify: 'center',
|
||||
}}
|
||||
>
|
||||
<Stack gap="md" align="flex-start">
|
||||
<ThemeIcon size={48} radius="xl" color="white" variant="white" c="blue.9">
|
||||
<IconShieldCheck size={26} />
|
||||
</ThemeIcon>
|
||||
<Stack gap={4}>
|
||||
<Text fz="xs" fw={700} tt="uppercase" style={{ letterSpacing: 0.5, opacity: 0.9 }}>
|
||||
{t('landing.footer.emergencyLabel')}
|
||||
</Text>
|
||||
<Text fz="xl" fw={800}>
|
||||
{t('landing.footer.emergencyValue')}
|
||||
</Text>
|
||||
<Text fz="xs" style={{ opacity: 0.85, lineHeight: 1.5 }}>
|
||||
24/7 Operational assistance for maritime safety, vessel incidents, and urgent operational support.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -28,6 +28,7 @@ export const landingEn = {
|
||||
},
|
||||
|
||||
hero: {
|
||||
livePill: 'Official Digital Portal — FDRE',
|
||||
eyebrow: 'Federal Democratic Republic of Ethiopia',
|
||||
title: 'Ethiopian Maritime Authority',
|
||||
subtitle: 'Digital Maritime Services for Seafarers, Vessel Owners and Logistics Operators',
|
||||
@@ -41,6 +42,7 @@ export const landingEn = {
|
||||
},
|
||||
|
||||
about: {
|
||||
eyebrow: 'Institutional Framework',
|
||||
title: 'About EMA',
|
||||
visionLabel: 'Vision',
|
||||
vision:
|
||||
@@ -94,93 +96,146 @@ export const landingEn = {
|
||||
},
|
||||
|
||||
services: {
|
||||
title: 'Maritime Services',
|
||||
subtitle: 'Every licence, certificate and registration EMA issues, in one digital system.',
|
||||
title: 'Comprehensive Maritime & Logistics Services',
|
||||
subtitle: 'Every statutory licence, seafarer certificate, vessel registration, and logistics permit issued by EMA in one unified platform.',
|
||||
items: {
|
||||
seafarerRegistration: {
|
||||
title: 'Seafarer Registration & Certification',
|
||||
title: 'Seafarer Certification & Seaman’s Book',
|
||||
description:
|
||||
"Register as a seafarer, apply for a Certificate of Competency or Proficiency, and manage your seaman's book online.",
|
||||
"Apply for Continuous Discharge Certificates (CDC/Seaman's Book), STCW Certificates of Competency (CoC), Proficiency (CoP), and foreign CoC endorsements.",
|
||||
},
|
||||
vesselRegistration: {
|
||||
title: 'Vessel Registration',
|
||||
title: 'Vessel Registration & Flag State Registry',
|
||||
description:
|
||||
'Register inland or sea-going vessels and manage ownership transfers with full document tracking.',
|
||||
'Inland waterway and sea-going ship registration, ownership transfers, tonnage measurement, safety survey inspection, and marine radio licensing.',
|
||||
},
|
||||
licensing: {
|
||||
title: 'Operator Licensing',
|
||||
title: 'Commercial Logistics & Operator Licensing',
|
||||
description:
|
||||
'Apply for freight forwarder, shipping agent, combined and multimodal transport operator licences.',
|
||||
'Licensing for Multimodal Transport Operators (MTO), Freight Forwarders, Shipping Agencies, Customs Clearance Brokers, and Terminal Operators.',
|
||||
},
|
||||
examinations: {
|
||||
title: 'Examinations',
|
||||
description: 'Sit competency examinations and track your results as part of certification.',
|
||||
title: 'Maritime Competency Examinations',
|
||||
description: 'Schedule computer-based competency exams, track examination results, and link qualified scores directly to certificate issuance.',
|
||||
},
|
||||
medical: {
|
||||
title: 'Maritime Medical Examination Verification',
|
||||
description: 'Approved Maritime Medical Practitioner portal for medical fitness certificates, sea-service health clearances, and STCW compliance.',
|
||||
},
|
||||
waivers: {
|
||||
title: 'Waivers',
|
||||
description: 'Apply for a maritime waiver where standard requirements do not apply.',
|
||||
title: 'Cargo Waiver & Cargo Tracking Notes (CTN)',
|
||||
description: 'Apply for cargo allocation clearances, maritime waivers, and cargo tracking notes across international trade corridors.',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
mandate: {
|
||||
title: 'Institutional Mandate & Regulatory Oversight',
|
||||
subtitle: 'Under the Ministry of Transport & Logistics (FDRE), EMA drives maritime safety, logistics efficiency, and international compliance.',
|
||||
items: {
|
||||
safety: {
|
||||
title: 'Maritime Safety & Security',
|
||||
description: 'Enforcing SOLAS, MARPOL, and ISPS standards for vessel safety, marine environment protection, and shipboard security.',
|
||||
},
|
||||
logistics: {
|
||||
title: 'Multimodal Logistics Development',
|
||||
description: 'Regulating Ethiopia’s dry ports, sea-land transit corridors, freight forwarding standards, and multimodal trade infrastructure.',
|
||||
},
|
||||
stcw: {
|
||||
title: 'STCW Training & Certification Standards',
|
||||
description: 'Accrediting maritime education institutions, administering national qualification frameworks, and issuing international seafarer credentials.',
|
||||
},
|
||||
flagState: {
|
||||
title: 'Flag State & Port State Inspection',
|
||||
description: 'Conducting flag state registration, seaworthiness inspections, vessel safety surveys, and port state control oversight.',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
roles: {
|
||||
title: 'Built for Every User',
|
||||
subtitle: 'One portal, tailored to what you do.',
|
||||
title: 'Built for Every User & Maritime Entity',
|
||||
subtitle: 'One digital portal tailored to your operational role in Ethiopia’s maritime sector.',
|
||||
seafarers: {
|
||||
title: 'Seafarers',
|
||||
description: 'Register, certify, and manage your sea service records.',
|
||||
title: 'Seafarers & Maritime Officers',
|
||||
description: 'Register, apply for CDC/CoC certificates, schedule STCW exams, and track sea service records.',
|
||||
},
|
||||
vesselOwners: {
|
||||
title: 'Vessel Owners',
|
||||
description: 'Register vessels and manage ownership and licensing.',
|
||||
title: 'Vessel Owners & Operators',
|
||||
description: 'Register commercial & inland vessels, request tonnage surveys, and manage fleet licenses.',
|
||||
},
|
||||
agents: {
|
||||
title: 'Agents & Logistics Operators',
|
||||
description: 'Apply for and renew operator licences for freight and shipping.',
|
||||
title: 'Logistics Operators & Shipping Agencies',
|
||||
description: 'Apply for MTO, freight forwarding, customs clearance, and shipping agent licenses.',
|
||||
},
|
||||
reviewers: {
|
||||
title: 'EMA Reviewers',
|
||||
description: 'Review, verify and approve applications from the backoffice.',
|
||||
title: 'EMA Inspectors & Regulatory Reviewers',
|
||||
description: 'Review applications, conduct technical audits, issue digital approvals, and verify credentials.',
|
||||
},
|
||||
},
|
||||
|
||||
howItWorks: {
|
||||
title: 'How It Works',
|
||||
subtitle: 'From application to approval, in five steps.',
|
||||
subtitle: 'From digital registration to official certificate issuance in five streamlined steps.',
|
||||
steps: {
|
||||
selectRole: 'Select role',
|
||||
createAccount: 'Create account',
|
||||
submitApplication: 'Submit application',
|
||||
trackStatus: 'Track status',
|
||||
receiveApproval: 'Receive approval',
|
||||
createAccount: {
|
||||
title: 'Create Account & Role',
|
||||
description: 'Register with phone/email, verify via OTP, and select your operational role (Seafarer, Owner, Agent).',
|
||||
},
|
||||
submitApplication: {
|
||||
title: 'Submit Digital Application',
|
||||
description: 'Select your service (Seaman’s Book, CoC, Vessel Registration, MTO License) and upload required documents.',
|
||||
},
|
||||
fulfillRequirements: {
|
||||
title: 'Medical & Examinations',
|
||||
description: 'Complete approved maritime medical fitness checks and sit computer-based competency exams if required.',
|
||||
},
|
||||
payFees: {
|
||||
title: 'Pay Statutory Fees',
|
||||
description: 'Pay official processing fees securely via integrated e-payment channels (Telebirr, CBE Birr, e-Banking).',
|
||||
},
|
||||
receiveCertificate: {
|
||||
title: 'Receive Digital Certificate',
|
||||
description: 'Track real-time progress as EMA reviews your file, then download your QR-verifiable digital certificate or licence.',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
system: {
|
||||
title: 'A Modern Digital System',
|
||||
subtitle: 'Built to make maritime services faster, safer and accessible from anywhere.',
|
||||
title: 'Advanced Digital Platform Capabilities',
|
||||
subtitle: 'State-of-the-art infrastructure ensuring speed, security, transparency, and international compliance.',
|
||||
items: {
|
||||
secure: {
|
||||
title: 'Secure & Verified',
|
||||
description: 'Every application and certificate is digitally recorded and verifiable.',
|
||||
title: 'Digital Document Vault & QR Verification',
|
||||
description: 'All issued certificates carry encrypted QR codes and digital signatures for instant global verification by port authorities.',
|
||||
},
|
||||
bilingual: {
|
||||
title: 'Bilingual by Design',
|
||||
description: 'Use the system fully in English or Amharic — switch anytime.',
|
||||
title: 'Full Amharic & English Dual Compliance',
|
||||
description: 'Native Ethiopic (አማርኛ) and English localization providing seamless access for national seafarers and global shipping lines.',
|
||||
},
|
||||
tracking: {
|
||||
title: 'Real-Time Tracking',
|
||||
description: 'Follow your application from submission to approval, step by step.',
|
||||
title: 'End-to-End Real-Time Audit Trail',
|
||||
description: 'Track your application transparently through document verification, technical audit, fee payment, and executive sign-off.',
|
||||
},
|
||||
singleAccount: {
|
||||
title: 'One Account, Every Service',
|
||||
description: 'Register once and access all EMA licensing and certification services.',
|
||||
title: 'Single Sign-On (SSO) Portal',
|
||||
description: 'Access seafarer records, vessel registries, and commercial licenses under a unified secure digital identity.',
|
||||
},
|
||||
payments: {
|
||||
title: 'Integrated Statutory e-Payment Gateway',
|
||||
description: 'Pay statutory licensing and certification fees via Telebirr, CBE Birr, and electronic banking with automated digital receipts.',
|
||||
},
|
||||
framework: {
|
||||
title: 'STCW & Multimodal Regulatory Framework',
|
||||
description: 'Architected strictly according to IMO STCW 1978/2010 Manila Amendments, SOLAS, MARPOL, and national Proclamations.',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
faq: {
|
||||
eyebrow: 'Got Questions?',
|
||||
title: 'Frequently Asked Questions',
|
||||
supportPrompt: 'Can’t find the answer you’re looking for? Reach out directly to our support team.',
|
||||
contactSupport: 'Contact Support Team',
|
||||
items: {
|
||||
whatIsPortal: {
|
||||
question: 'What is the EMA portal?',
|
||||
@@ -206,12 +261,27 @@ export const landingEn = {
|
||||
},
|
||||
|
||||
contact: {
|
||||
title: 'Contact EMA',
|
||||
subtitle: 'Reach the Ethiopian Maritime Authority head office.',
|
||||
addressLabel: 'Address',
|
||||
eyebrow: 'Get In Touch',
|
||||
title: 'Contact EMA Headquarters',
|
||||
subtitle: 'Reach the Ethiopian Maritime Authority head office in Addis Ababa or send a direct inquiry.',
|
||||
addressLabel: 'Head Office Address',
|
||||
address: 'Meskel Square, behind Hyatt Regency Hotel, Sunshine Building No. 4, Addis Ababa, Ethiopia',
|
||||
phoneLabel: 'Phone',
|
||||
websiteLabel: 'Website',
|
||||
phoneLabel: 'Telephone Line',
|
||||
websiteLabel: 'Official Portal',
|
||||
inquiryTitle: 'Send a Direct Inquiry',
|
||||
inquirySubtitle: 'Have a specific question regarding seafarer certification, vessel registration or licensing?',
|
||||
nameLabel: 'Full Name',
|
||||
namePlaceholder: 'e.g. Abebe Bikila',
|
||||
emailLabel: 'Email Address',
|
||||
emailPlaceholder: 'e.g. abebe@example.com',
|
||||
topicLabel: 'Inquiry Topic',
|
||||
topicPlaceholder: 'Select topic (Seafarer, Vessel, Licensing...)',
|
||||
messageLabel: 'Your Message',
|
||||
messagePlaceholder: 'Describe your query or assistance needed...',
|
||||
sendBtn: 'Send Inquiry',
|
||||
successMsg: 'Thank you! Your message has been successfully routed to EMA Customer Support.',
|
||||
getDirections: 'Get Directions',
|
||||
callOffice: 'Call HQ Office',
|
||||
},
|
||||
|
||||
footer: {
|
||||
@@ -249,6 +319,7 @@ export const landingAm: LandingCopy = {
|
||||
},
|
||||
|
||||
hero: {
|
||||
livePill: 'ይፋዊ ዲጂታል ፖርታል — ኢፌዴሪ',
|
||||
eyebrow: 'የኢትዮጵያ ፌዴራላዊ ዲሞክራሲያዊ ሪፐብሊክ',
|
||||
title: 'የኢትዮጵያ ማሪታይም ባለስልጣን',
|
||||
subtitle: 'ለመርከበኞች፣ ለመርከብ ባለቤቶች እና ለሎጂስቲክስ ኦፕሬተሮች የተዘጋጁ ዲጂታል የባህር አገልግሎቶች',
|
||||
@@ -262,6 +333,7 @@ export const landingAm: LandingCopy = {
|
||||
},
|
||||
|
||||
about: {
|
||||
eyebrow: 'የተቋማዊ ማዕቀፍ',
|
||||
title: 'ስለ ባለስልጣኑ',
|
||||
visionLabel: 'ራዕይ',
|
||||
vision:
|
||||
@@ -315,91 +387,146 @@ export const landingAm: LandingCopy = {
|
||||
},
|
||||
|
||||
services: {
|
||||
title: 'የባህር አገልግሎቶች',
|
||||
subtitle: 'ባለስልጣኑ የሚሰጣቸው ሁሉም ፈቃድ፣ ምስክር ወረቀትና ምዝገባ በአንድ ዲጂታል ስርዓት ውስጥ።',
|
||||
title: 'አጠቃላይ የባህር እና የሎጂስቲክስ አገልግሎቶች',
|
||||
subtitle: 'በኢትዮጵያ ማሪታይም ባለስልጣን የሚሰጡ ሁሉም ህጋዊ ፈቃዶች፣ የመርከበኛ ምስክር ወረቀቶች፣ የመርከብ ምዝገባዎች እና የሎጂስቲክስ ፈቃዶች በአንድ ዲጂታል ፖርታል::',
|
||||
items: {
|
||||
seafarerRegistration: {
|
||||
title: 'የመርከበኞች ምዝገባና ማረጋገጫ',
|
||||
title: 'የመርከበኞች ማረጋገጫ እና የመርከበኛ ደብተር',
|
||||
description:
|
||||
'እንደ መርከበኛ ይመዝገቡ፣ ለብቃት ወይም ችሎታ ማረጋገጫ ምስክር ወረቀት ያመልክቱ፣ እንዲሁም የመርከበኛ መዝገብ መጽሐፍዎን በመስመር ላይ ያስተዳድሩ።',
|
||||
'የመርከበኛ መታወቂያ ደብተር (CDC/Seaman’s Book)፣ የSTCW የብቃት ምስክር ወረቀቶች (CoC/CoP) እና የውጭ CoC ማረጋገጫዎችን ያመልክቱ።',
|
||||
},
|
||||
vesselRegistration: {
|
||||
title: 'የመርከብ ምዝገባ',
|
||||
description: 'የውስጥ ውሃ ወይም የባህር ማዶ መርከቦችን ይመዝገቡ፣ የባለቤትነት ዝውውርንም ሙሉ በሙሉ በሰነድ ክትትል ያስተዳድሩ።',
|
||||
title: 'የመርከብ ምዝገባ እና የባንዲራ መዝገብ',
|
||||
description:
|
||||
'የውስጥ ውሃ እና የባህር ማዶ መርከቦች ምዝገባ፣ የባለቤትነት ዝውውር፣ የቶን ልኬት፣ የደህንነት ፍተሻ እና የመርከብ ሬዲዮ ፈቃድ።',
|
||||
},
|
||||
licensing: {
|
||||
title: 'የኦፕሬተር ፈቃድ',
|
||||
description: 'ለጭነት አስተላላፊ፣ ለመርከብ ወኪል፣ ለተቀናጀ እና ለብዙ-ዘዴ ትራንስፖርት ኦፕሬተር ፈቃድ ያመልክቱ።',
|
||||
title: 'የንግድ ሎጂስቲክስ እና የኦፕሬተር ፈቃድ',
|
||||
description:
|
||||
'ለብዙ-ዘዴ ትራንስፖርት ኦፕሬተሮች (MTO)፣ ጭነት አስተላላፊዎች፣ የመርከብ ወኪሎች፣ የጉምሩክ አስተላላፊዎች እና ተርሚናል ኦፕሬተሮች ፈቃድ።',
|
||||
},
|
||||
examinations: {
|
||||
title: 'ፈተናዎች',
|
||||
description: 'የብቃት ፈተናዎችን ይውሰዱ እንዲሁም ውጤቶችዎን እንደ ማረጋገጫ ሂደት አካል ይከታተሉ።',
|
||||
title: 'የባህር ላይ የብቃት ፈተናዎች',
|
||||
description: 'በኮምፒውተር የተደገፉ የብቃት ፈተናዎችን መርሃ ግብር ይያዙ፣ ውጤቶችን ይከታተሉ፣ እንዲሁም ውጤቶችን ከምስክር ወረቀት ጋር ያያይዙ።',
|
||||
},
|
||||
medical: {
|
||||
title: 'የባህር ህክምና ፍተሻ ማረጋገጫ',
|
||||
description: 'በተፈቀደላቸው የባህር ህክምና ባለሙያዎች የተሰጡ የጤና ብቃት ማረጋገጫዎች እና የSTCW ህክምና ማረጋገጫዎች ፖርታል።',
|
||||
},
|
||||
waivers: {
|
||||
title: 'ነፃ ፈቃዶች',
|
||||
description: 'መደበኛ መስፈርቶች በማይሟሉበት ጊዜ ለባህር ትራንስፖርት ነፃ ፈቃድ ያመልክቱ።',
|
||||
title: 'የጭነት ነፃ ፈቃድ እና የጭነት ክትትል (CTN)',
|
||||
description: 'በአለም አቀፍ የንግድ መስመሮች ላይ የጭነት ድልድል ነፃ ፈቃድ እና የጭነት ክትትል ሰነዶችን (CTN) ያመልክቱ።',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
mandate: {
|
||||
title: 'የተቋሙ ሃላፊነት እና ህጋዊ ቁጥጥር',
|
||||
subtitle: 'በኢፌዴሪ በትራንስፖርት እና ሎጂስቲክስ ሚኒስቴር ስር የኢትዮጵያን የባህር ደህንነት፣ የሎጂስቲክስ ቅልጥፍና እና አለም አቀፍ ተገዥነት ማረጋገጥ።',
|
||||
items: {
|
||||
safety: {
|
||||
title: 'የባህር ደህንነት እና ጸጥታ',
|
||||
description: 'የSOLAS፣ MARPOL እና ISPS አለም አቀፍ መስፈርቶችን በመተግበር የመርከቦችን እና የባህር አካባቢን ደህንነት መጠበቅ።',
|
||||
},
|
||||
logistics: {
|
||||
title: 'የብዙ-ዘዴ ሎጂስቲክስ ልማት',
|
||||
description: 'የኢትዮጵያን ደረቅ ወደቦች፣ የባህር-የብስ ትራንዚት መስመሮች፣ የጭነት ማስተላለፍ መስፈርቶች እና የሎጂስቲክስ መሠረተ ልማቶችን መቆጣጠር።',
|
||||
},
|
||||
stcw: {
|
||||
title: 'የSTCW ስልጠና እና የብቃት መስፈርቶች',
|
||||
description: 'የባህር ስልጠና ተቋማትን እውቅና መስጠት፣ ብሔራዊ የብቃት ማዕቀፎችን ማስተዳደር እና አለም አቀፍ የመርከበኞች ማረጋገጫ መስጠት።',
|
||||
},
|
||||
flagState: {
|
||||
title: 'የባንዲራ እና የወደብ ግዛት ፍተሻ',
|
||||
description: 'የመርከብ ምዝገባ፣ የባህር ብቃት ፍተሻ፣ የደህንነት ሰነዶች ማረጋገጥ እና የወደብ ግዛት ቁጥጥር ስራዎችን ማከናወን።',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
roles: {
|
||||
title: 'ለሁሉም ተጠቃሚ የተዘጋጀ',
|
||||
subtitle: 'አንድ ፖርታል፣ ለሚናዎ የተዘጋጀ።',
|
||||
subtitle: 'በኢትዮጵያ የባህር ዘርፍ ውስጥ ለሚሰሩት ሚና ተስማሚ የሆነ ዲጂታል ፖርታል።',
|
||||
seafarers: {
|
||||
title: 'መርከበኞች',
|
||||
description: 'ይመዝገቡ፣ ይረጋገጡ እንዲሁም የባህር አገልግሎት መዝገብዎን ያስተዳድሩ።',
|
||||
title: 'መርከበኞች እና የባህር መኮንኖች',
|
||||
description: 'ይመዝገቡ፣ ለCDC/CoC ምስክር ወረቀቶች ያመልክቱ፣ የSTCW ፈተናዎችን ይያዙ፣ እንዲሁም የባህር አገልግሎት መዝገብዎን ያስተዳድሩ።',
|
||||
},
|
||||
vesselOwners: {
|
||||
title: 'የመርከብ ባለቤቶች',
|
||||
description: 'መርከብ ይመዝገቡ እንዲሁም ባለቤትነትና ፈቃድ ያስተዳድሩ።',
|
||||
title: 'የመርከብ ባለቤቶች እና ኦፕሬተሮች',
|
||||
description: 'የንግድ እና የውስጥ ውሃ መርከቦችን ይመዝገቡ፣ የቶን ልኬት ጥያቄ ያቅርቡ፣ እንዲሁም የመርከብ ፈቃዶችን ያስተዳድሩ።',
|
||||
},
|
||||
agents: {
|
||||
title: 'ወኪሎችና ሎጂስቲክስ ኦፕሬተሮች',
|
||||
description: 'ለጭነትና ለመላኪያ ፈቃድ ያመልክቱ እንዲሁም ያድሱ።',
|
||||
title: 'የሎጂስቲክስ ኦፕሬተሮች እና የመርከብ ወኪሎች',
|
||||
description: 'ለMTO፣ የጭነት ማስተላለፍ፣ የጉምሩክ አስተላላፊነት እና የመርከብ ወኪል ፈቃዶች ያመልክቱ።',
|
||||
},
|
||||
reviewers: {
|
||||
title: 'የባለስልጣኑ ገምጋሚዎች',
|
||||
description: 'ማመልከቻዎችን ይገመግሙ፣ ያረጋግጡ እንዲሁም ይፍቀዱ።',
|
||||
title: 'የባለስልጣኑ ተቆጣጣሪዎች እና ገምጋሚዎች',
|
||||
description: 'ማመልከቻዎችን ይገመግሙ፣ ቴክኒካዊ ኦዲት ያድርጉ፣ ዲጂታል ማጽደቂያዎችን ይስጡ፣ እንዲሁም ሰነዶችን ያረጋግጡ።',
|
||||
},
|
||||
},
|
||||
|
||||
howItWorks: {
|
||||
title: 'እንዴት እንደሚሰራ',
|
||||
subtitle: 'ከማመልከቻ እስከ ፈቃድ፣ በአምስት ደረጃዎች።',
|
||||
title: 'አገልግሎቱ እንዴት እንደሚሰጥ',
|
||||
subtitle: 'ከዲጂታል ምዝገባ እስከ ይፋዊ ምስክር ወረቀት አሰጣጥ፣ በአምስት ግልጽ ደረጃዎች።',
|
||||
steps: {
|
||||
selectRole: 'ሚና ይምረጡ',
|
||||
createAccount: 'መለያ ይፍጠሩ',
|
||||
submitApplication: 'ማመልከቻ ያስገቡ',
|
||||
trackStatus: 'ሁኔታ ይከታተሉ',
|
||||
receiveApproval: 'ፍቃድ ይቀበሉ',
|
||||
createAccount: {
|
||||
title: 'መለያ እና ሚና ይምረጡ',
|
||||
description: 'በስልክ/ኢሜይል ይመዝገቡ፣ በኦቲፒ ያረጋግጡ፣ እና ሚናዎን (መርከበኛ፣ የመርከብ ባለቤት፣ ወኪል) ይምረጡ።',
|
||||
},
|
||||
submitApplication: {
|
||||
title: 'ማመልከቻ ያስገቡ',
|
||||
description: 'የሚፈልጉትን አገልግሎት (የመርከበኛ ደብተር፣ CoC፣ የመርከብ ምዝገባ፣ MTO ፈቃድ) መርጠው ሰነዶችን ያያይዙ።',
|
||||
},
|
||||
fulfillRequirements: {
|
||||
title: 'ህክምና እና ፈተና',
|
||||
description: 'የተፈቀደላቸውን የባህር ህክምና ፍተሻዎች ያጠናቅቁ እና የሚያስፈልግ ከሆነ የብቃት ፈተና ይውሰዱ።',
|
||||
},
|
||||
payFees: {
|
||||
title: 'ህጋዊ ክፍያ ይክፈሉ',
|
||||
description: 'የአገልግሎት ክፍያዎችን በቴሌብር፣ በCBE Birr ወይም በባንክ በዲጂታል መንገድ ደህንነቱ በተጠበቀ ሁኔታ ይክፈሉ።',
|
||||
},
|
||||
receiveCertificate: {
|
||||
title: 'ዲጂታል ምስክር ወረቀት ይቀበሉ',
|
||||
description: 'የማመልከቻዎን ሁኔታ ይከታተሉ፣ ሲጸድቅም በQR ኮድ የተረጋገጠውን ዲጂታል ሰነድዎን ያውርዱ።',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
system: {
|
||||
title: 'ዘመናዊ ዲጂታል ስርዓት',
|
||||
subtitle: 'የባህር አገልግሎቶችን ፈጣን፣ ደህንነቱ የተጠበቀና ከየትኛውም ቦታ ተደራሽ ለማድረግ የተዘጋጀ።',
|
||||
title: 'የላቀ የዲጂታል ፖርታል አቅሞች',
|
||||
subtitle: 'ፈጣንነትን፣ ደህንነትን፣ ግልጽነትን እና አለም አቀፍ ተገዥነትን የሚያረጋግጥ ዘመናዊ መሠረተ ልማት።',
|
||||
items: {
|
||||
secure: {
|
||||
title: 'ደህንነቱ የተጠበቀ እና የተረጋገጠ',
|
||||
description: 'እያንዳንዱ ማመልከቻና ምስክር ወረቀት በዲጂታል መልኩ ተመዝግቦ ሊረጋገጥ የሚችል ነው።',
|
||||
title: 'የዲጂታል ሰነድ ማከማቻ እና የQR ማረጋገጫ',
|
||||
description: 'ሁሉም የተሰጡ ምስክር ወረቀቶች በምስጠራ የተጠበቀ QR ኮድ እና ዲጂታል ፊርማ ያላቸው በመሆናቸው በየትኛውም የወደብ ባለስልጣናት ወዲያውኑ ይረጋገጣሉ።',
|
||||
},
|
||||
bilingual: {
|
||||
title: 'በሁለት ቋንቋ የተዘጋጀ',
|
||||
description: 'ስርዓቱን ሙሉ በሙሉ በአማርኛ ወይም በእንግሊዝኛ ይጠቀሙ — በማንኛውም ጊዜ ይቀይሩ።',
|
||||
title: 'ሙሉ የአማርኛ እና የእንግሊዝኛ ድጋፍ',
|
||||
description: 'ለሀገር ውስጥ መርከበኞች እና ለአለም አቀፍ የመርከብ ኩባንያዎች ምቹ የሆነ ሙሉ በሙሉ በአማርኛ እና በእንግሊዝኛ የተዘጋጀ ስርዓት።',
|
||||
},
|
||||
tracking: {
|
||||
title: 'የቀጥታ ሁኔታ ክትትል',
|
||||
description: 'ማመልከቻዎን ከማስገባት እስከ ማጽደቅ ደረጃ በደረጃ ይከታተሉ።',
|
||||
title: 'የቀጥታ ሁኔታ እና ኦዲት ክትትል',
|
||||
description: 'ማመልከቻዎን ከሰነድ ማረጋገጫ፣ ከቴክኒክ ኦዲት፣ ከክፍያ እስከ መሪዎች ማጽደቅ ድረስ በግልጽ ይከታተሉ።',
|
||||
},
|
||||
singleAccount: {
|
||||
title: 'አንድ መለያ፣ ሁሉም አገልግሎት',
|
||||
description: 'አንድ ጊዜ ይመዝገቡና ሁሉንም የEMA ፈቃድና የምስክር ወረቀት አገልግሎቶች ይድረሱ።',
|
||||
title: 'አንድ መለያ (SSO) አገልግሎት',
|
||||
description: 'የመርከበኛ መዝገቦችን፣ የመርከብ መዝገቦችን እና የንግድ ፈቃዶችን በአንድ ደህንነቱ በተጠበቀ ዲጂታል መለያ ስር ያግኙ።',
|
||||
},
|
||||
payments: {
|
||||
title: 'የተቀናጀ የዲጂታል ክፍያ ስርዓት',
|
||||
description: 'የመንግስት የፈቃድ እና የምስክር ወረቀት ክፍያዎችን በቴሌብር፣ በCBE Birr እና በባንክ በዲጂታል ደረሰኝ ይክፈሉ።',
|
||||
},
|
||||
framework: {
|
||||
title: 'የSTCW እና የባህር ህግ ማዕቀፍ ተገዥነት',
|
||||
description: 'በአለም አቀፍ የIMO STCW 1978/2010 Manila ስምምነቶች፣ SOLAS፣ MARPOL እና በሀገራዊ አዋጆች መሰረት የተገነባ።',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
faq: {
|
||||
eyebrow: 'ጥያቄዎች አሉዎት?',
|
||||
title: 'ተደጋጋሚ ጥያቄዎች',
|
||||
supportPrompt: 'የሚፈልጉትን መልስ አላገኙም? ቀጥታ የደንበኞች ድጋፍ ቡድናችንን ያግኙ።',
|
||||
contactSupport: 'ድጋፍ ቡድንን ያግኙ',
|
||||
items: {
|
||||
whatIsPortal: {
|
||||
question: 'EMA ፖርታል ምንድን ነው?',
|
||||
@@ -423,12 +550,27 @@ export const landingAm: LandingCopy = {
|
||||
},
|
||||
|
||||
contact: {
|
||||
title: 'ባለስልጣኑን ያግኙ',
|
||||
subtitle: 'የኢትዮጵያ ማሪታይም ባለስልጣን ዋና መሥሪያ ቤትን ያግኙ።',
|
||||
addressLabel: 'አድራሻ',
|
||||
eyebrow: 'እኛን ያግኙ',
|
||||
title: 'የኢትዮጵያ ማሪታይም ባለስልጣን ዋና መሥሪያ ቤት',
|
||||
subtitle: 'በአዲስ አበባ የሚገኘውን የኢትዮጵያ ማሪታይም ባለስልጣን ዋና መሥሪያ ቤት ያግኙ ወይም ቀጥታ ጥያቄ ይላኩ።',
|
||||
addressLabel: 'የዋና መሥሪያ ቤት አድራሻ',
|
||||
address: 'መስቀል አደባባይ፣ ከHyatt Regency ሆቴል ጀርባ፣ Sunshine ህንፃ ቁጥር 4፣ አዲስ አበባ፣ ኢትዮጵያ',
|
||||
phoneLabel: 'ስልክ',
|
||||
websiteLabel: 'ድረ ገጽ',
|
||||
phoneLabel: 'የስልክ መስመር',
|
||||
websiteLabel: 'ይፋዊ ድረ ገጽ',
|
||||
inquiryTitle: 'ቀጥታ ጥያቄ ይላኩ',
|
||||
inquirySubtitle: 'ስለ መርከበኛ ማረጋገጫ፣ የመርከብ ምዝገባ ወይም ፈቃዶች ጥያቄዎች አሉዎት?',
|
||||
nameLabel: 'ሙሉ ስም',
|
||||
namePlaceholder: 'ምሳሌ፡ አበበ ቢቂላ',
|
||||
emailLabel: 'ኢሜይል አድራሻ',
|
||||
emailPlaceholder: 'ምሳሌ፡ abebe@example.com',
|
||||
topicLabel: 'የጥያቄው ርዕስ',
|
||||
topicPlaceholder: 'ርዕስ ይምረጡ (መርከበኛ፣ መርከብ፣ ፈቃድ...)',
|
||||
messageLabel: 'መልዕክትዎ',
|
||||
messagePlaceholder: 'ጥያቄዎን ወይም የሚያስፈልግዎትን ድጋፍ ያብራሩ...',
|
||||
sendBtn: 'መልዕክት ላክ',
|
||||
successMsg: 'እናመሰግናለን! መልዕክትዎ ለEMA ደንበኞች ድጋፍ ተልኳል።',
|
||||
getDirections: 'አቅጣጫዎችን ያግኙ',
|
||||
callOffice: 'ወደ መሥሪያ ቤት ይደውሉ',
|
||||
},
|
||||
|
||||
footer: {
|
||||
|
||||
@@ -3,17 +3,15 @@
|
||||
.ema-hover-lift, portal's --ema-surface-*) is available here, so this file
|
||||
is self-contained. */
|
||||
|
||||
/* `scroll-behavior` only affects the element that actually scrolls — for a
|
||||
full page that's `html`, not this div, so it has to live here. Scoped with
|
||||
:has() so it only applies while the landing page is mounted. */
|
||||
html,
|
||||
body,
|
||||
html:has(.ema-landing) {
|
||||
scroll-behavior: smooth;
|
||||
scroll-behavior: smooth !important;
|
||||
}
|
||||
|
||||
.ema-landing section[id] {
|
||||
/* Offsets anchor jumps by the sticky header height so the heading isn't
|
||||
hidden underneath it. Keep in sync with the header's fixed height. */
|
||||
scroll-margin-top: 72px;
|
||||
.ema-landing section[id],
|
||||
.ema-landing div[id] {
|
||||
scroll-margin-top: 80px;
|
||||
}
|
||||
|
||||
.ema-landing .ema-landing-fade {
|
||||
@@ -93,6 +91,93 @@ html:has(.ema-landing) {
|
||||
box-shadow: 0 16px 40px rgba(49, 96, 183, 0.14);
|
||||
}
|
||||
|
||||
/* Gradient text helper */
|
||||
.ema-landing .ema-text-gradient {
|
||||
background: linear-gradient(135deg, #2453a2 0%, #0aab89 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Hero live status indicator pulse dot */
|
||||
.ema-landing .ema-live-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #22c55e;
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||||
animation: ema-dot-pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes ema-dot-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Vision & Mission card left accent borders */
|
||||
.ema-landing .ema-vision-card {
|
||||
border-left: 4px solid #3160b7 !important;
|
||||
}
|
||||
.ema-landing .ema-mission-card {
|
||||
border-left: 4px solid #1fc29d !important;
|
||||
}
|
||||
|
||||
/* Card hover arrow animation */
|
||||
.ema-landing .ema-landing-hover .ema-card-arrow {
|
||||
transition: transform 180ms ease, color 180ms ease;
|
||||
}
|
||||
.ema-landing .ema-landing-hover:hover .ema-card-arrow {
|
||||
transform: translateX(4px);
|
||||
color: var(--mantine-primary-color-filled);
|
||||
}
|
||||
|
||||
/* Footer top gradient accent bar */
|
||||
.ema-landing footer {
|
||||
position: relative;
|
||||
}
|
||||
.ema-landing footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #3160b7 0%, #1fc29d 50%, #3160b7 100%);
|
||||
}
|
||||
|
||||
/* FAQ custom item styling */
|
||||
.ema-landing .ema-faq-accordion .mantine-Accordion-item {
|
||||
border: 1px solid var(--mantine-color-default-border);
|
||||
border-radius: var(--mantine-radius-lg);
|
||||
margin-bottom: 14px;
|
||||
background-color: var(--mantine-color-body);
|
||||
transition: box-shadow 180ms ease, border-color 180ms ease;
|
||||
}
|
||||
.ema-landing .ema-faq-accordion .mantine-Accordion-item[data-active] {
|
||||
border-color: var(--mantine-primary-color-light-color);
|
||||
box-shadow: 0 8px 24px rgba(49, 96, 183, 0.08);
|
||||
}
|
||||
.ema-landing .ema-faq-accordion .mantine-Accordion-control {
|
||||
font-weight: 600;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
/* Contact HQ Card and Inquiry Form Styling */
|
||||
.ema-landing .ema-contact-hq-card {
|
||||
border-left: 4px solid var(--mantine-primary-color-filled);
|
||||
}
|
||||
.ema-landing .ema-inquiry-box {
|
||||
box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
|
||||
border: 1px solid var(--mantine-color-default-border);
|
||||
}
|
||||
|
||||
/* Mobile drawer link item */
|
||||
.ema-drawer-nav-link {
|
||||
display: flex;
|
||||
@@ -122,7 +207,8 @@ html:has(.ema-landing) {
|
||||
}
|
||||
.ema-landing .ema-landing-fade,
|
||||
.ema-landing .ema-landing-hover,
|
||||
.ema-hero-pulse {
|
||||
.ema-hero-pulse,
|
||||
.ema-landing .ema-live-dot {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user