diff --git a/libs/ui/src/lib/landing/LandingPage.tsx b/libs/ui/src/lib/landing/LandingPage.tsx index 57516f753..4cde230b6 100644 --- a/libs/ui/src/lib/landing/LandingPage.tsx +++ b/libs/ui/src/lib/landing/LandingPage.tsx @@ -251,51 +251,132 @@ function Header({ ); } +const HERO_BADGE_ICONS = { + secure: IconShieldCheck, + bilingual: IconLanguage, + tracking: IconActivity, +} as const; + function Hero({ primaryHref, isAuthed }: { primaryHref: string; isAuthed: boolean }) { const { t } = useTranslation(); const theme = useMantineTheme(); + const badgeKeys = Object.keys(HERO_BADGE_ICONS) as (keyof typeof HERO_BADGE_ICONS)[]; return ( - - + {/* Decorative glow circles — same device as AuthShell's hero panel. */} + + + + + + {t('landing.hero.eyebrow')} - + <Title order={1} fz={{ base: 34, sm: 48, lg: 56 }} lh={1.1} maw={860}> {t('landing.hero.title')} - + {t('landing.hero.subtitle')} - - - + + {t('landing.hero.description')} + + + + {isAuthed ? ( + + ) : ( + <> + + + + )} + + + + {badgeKeys.map((key) => { + const Icon = HERO_BADGE_ICONS[key]; + return ( + + + + {t(`landing.hero.badges.${key}`)} + + + ); + })} diff --git a/libs/ui/src/lib/landing/landing-copy.ts b/libs/ui/src/lib/landing/landing-copy.ts index 522a36d88..443a1b162 100644 --- a/libs/ui/src/lib/landing/landing-copy.ts +++ b/libs/ui/src/lib/landing/landing-copy.ts @@ -31,6 +31,13 @@ export const landingEn = { eyebrow: 'Federal Democratic Republic of Ethiopia', title: 'Ethiopian Maritime Authority', subtitle: 'Digital Maritime Services for Seafarers, Vessel Owners and Logistics Operators', + description: + 'Apply, upload documents and track every application from one secure account — built for seafarers, vessel owners and logistics operators across Ethiopia.', + badges: { + secure: 'Secure & Verified', + bilingual: 'English & አማርኛ', + tracking: 'Real-Time Tracking', + }, }, about: { @@ -44,8 +51,8 @@ export const landingEn = { }, cta: { - seafarerPortal: 'Seafarer Portal', - vesselOwnerPortal: 'Vessel Owner Portal', + iAmSeafarer: "I'm a Seafarer", + iAmVesselOwner: "I'm a Vessel Owner", }, quickAccess: { @@ -212,6 +219,13 @@ export const landingAm: LandingCopy = { eyebrow: 'የኢትዮጵያ ፌዴራላዊ ዲሞክራሲያዊ ሪፐብሊክ', title: 'የኢትዮጵያ ማሪታይም ባለስልጣን', subtitle: 'ለመርከበኞች፣ ለመርከብ ባለቤቶች እና ለሎጂስቲክስ ኦፕሬተሮች የተዘጋጁ ዲጂታል የባህር አገልግሎቶች', + description: + 'ከመለያዎ ማመልከቻ ያስገቡ፣ ሰነድ ይስቀሉ እንዲሁም ሁኔታ ይከታተሉ — ለመርከበኞች፣ ለመርከብ ባለቤቶችና ለሎጂስቲክስ ኦፕሬተሮች የተዘጋጀ ነው።', + badges: { + secure: 'ደህንነቱ የተጠበቀ', + bilingual: 'አማርኛና እንግሊዝኛ', + tracking: 'የቀጥታ ክትትል', + }, }, about: { @@ -225,8 +239,8 @@ export const landingAm: LandingCopy = { }, cta: { - seafarerPortal: 'የመርከበኞች ፖርታል', - vesselOwnerPortal: 'የመርከብ ባለቤቶች ፖርታል', + iAmSeafarer: 'መርከበኛ ነኝ', + iAmVesselOwner: 'የመርከብ ባለቤት ነኝ', }, quickAccess: { diff --git a/libs/ui/src/lib/landing/landing.css b/libs/ui/src/lib/landing/landing.css index e1173d306..8720f9d46 100644 --- a/libs/ui/src/lib/landing/landing.css +++ b/libs/ui/src/lib/landing/landing.css @@ -3,7 +3,10 @@ .ema-hover-lift, portal's --ema-surface-*) is available here, so this file is self-contained. */ -.ema-landing { +/* `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:has(.ema-landing) { scroll-behavior: smooth; } @@ -45,7 +48,7 @@ } @media (prefers-reduced-motion: reduce) { - .ema-landing { + html:has(.ema-landing) { scroll-behavior: auto; } .ema-landing .ema-landing-fade,