diff --git a/libs/ui/src/lib/landing/LandingPage.tsx b/libs/ui/src/lib/landing/LandingPage.tsx index 903c88adc..cdafc626d 100644 --- a/libs/ui/src/lib/landing/LandingPage.tsx +++ b/libs/ui/src/lib/landing/LandingPage.tsx @@ -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('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 ( + @@ -424,9 +459,18 @@ function Hero({ - - {t('landing.hero.eyebrow')} + {/* Floating live status pill */} + } + style={{ textTransform: 'none', fontWeight: 600, backdropFilter: 'blur(6px)' }} + > + {t('landing.hero.livePill')} + {t('landing.hero.title')} @@ -457,7 +501,7 @@ function Hero({ variant="outline" color="white" leftSection={} - 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')} @@ -503,10 +547,10 @@ function StatsBanner() { - - + + - + {t('landing.stats.seafarersVal')} @@ -517,10 +561,10 @@ function StatsBanner() { - - + + - + {t('landing.stats.vesselsVal')} @@ -531,10 +575,10 @@ function StatsBanner() { - - + + - + {t('landing.stats.efficiencyVal')} @@ -545,10 +589,10 @@ function StatsBanner() { - - + + - + {t('landing.stats.availabilityVal')} @@ -569,7 +613,7 @@ function SectionHeading({ title, subtitle }: { title: string; subtitle?: string {title} {subtitle && ( - + {subtitle} )} @@ -582,22 +626,37 @@ function About() { return ( - + - - - - {t('landing.about.visionLabel')} + + + + + + + + {t('landing.about.visionLabel')} + + + + {t('landing.about.vision')} - {t('landing.about.vision')} - - - - {t('landing.about.missionLabel')} + + + + + + + + + {t('landing.about.missionLabel')} + + + + {t('landing.about.mission')} - {t('landing.about.mission')} @@ -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 ( + + + + + {items.map((key) => { + const { icon: Icon, color } = MANDATE_ICONS[key]; + return ( + + + + + + + + {t(`landing.mandate.items.${key}.title`)} + + + {t(`landing.mandate.items.${key}.description`)} + + + + + ); + })} + + + + ); +} 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 ( - + @@ -628,14 +727,24 @@ function Services() { const Icon = SERVICE_ICONS[key]; return ( - - - - - {t(`landing.services.items.${key}.title`)} - - {t(`landing.services.items.${key}.description`)} - + + + + + + + {t(`landing.services.items.${key}.title`)} + + + {t(`landing.services.items.${key}.description`)} + + + + + {t('landing.cta.exploreServices')} + + + ); @@ -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 ( - + {items.map((key) => { - const Icon = ROLE_ICONS[key]; + const { icon: Icon, color } = ROLE_ICONS[key]; return ( - + {t(`landing.roles.${key}.title`)} @@ -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 ( - + - + {STEP_KEYS.map((key, i) => { const Icon = STEP_ICONS[i]; return ( - - - - Step 0{i + 1} - - - - - - {t(`landing.howItWorks.steps.${key}`)} - + + + + + Step 0{i + 1} + + + + + + {t(`landing.howItWorks.steps.${key}.title`)} + + + {t(`landing.howItWorks.steps.${key}.description`)} + + ); @@ -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 ( - + - + {items.map((key) => { const Icon = SYSTEM_ICONS[key]; return ( - - - - + + + + - {t(`landing.system.items.${key}.title`)} - + + {t(`landing.system.items.${key}.title`)} + + {t(`landing.system.items.${key}.description`)} @@ -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 ( - - - - - {FAQ_KEYS.map((key) => ( - - {t(`landing.faq.items.${key}.question`)} - {t(`landing.faq.items.${key}.answer`)} - - ))} - + + + + + {/* Left Column: Direct Support Box */} + + + + + + + + {t('landing.faq.eyebrow')} + + + {t('landing.faq.supportPrompt')} + + + + + + + + + + + + + + {t('landing.footer.emergencyLabel')} + + + {t('landing.footer.emergencyValue')} + + + + + + {/* Right Column: Accordion Cards */} + + + {FAQ_KEYS.map((key) => { + const Icon = FAQ_ICONS[key]; + return ( + + + + + } + > + + {t(`landing.faq.items.${key}.question`)} + + + + + {t(`landing.faq.items.${key}.answer`)} + + + + ); + })} + + + ); @@ -777,53 +974,137 @@ function Faq() { function Contact() { const { t } = useTranslation(); + return ( - + - - - - - + + + {/* Address Card */} + + + + - - + + {t('landing.contact.addressLabel')} - + {t('landing.contact.address')} - - - - + + + + + {/* Direct Phone & Website Card */} + + + + + + + + + {t('landing.contact.phoneLabel')} + + + +251 011 515 0299 + + + + + + + + + + + + + {t('landing.contact.websiteLabel')} + + + etmaritime.com + + + + + + + + + + + + + {t('landing.footer.hoursLabel')} + + + {t('landing.footer.hoursValue')} + + + + + + + {/* Emergency Hotline Banner */} + + + + - - - {t('landing.contact.phoneLabel')} + + + {t('landing.footer.emergencyLabel')} - - +251 011 515 0299 - - - - - - - - - - {t('landing.contact.websiteLabel')} + + {t('landing.footer.emergencyValue')} + + + 24/7 Operational assistance for maritime safety, vessel incidents, and urgent operational support. - - etmaritime.com - - - - + + + ); diff --git a/libs/ui/src/lib/landing/landing-copy.ts b/libs/ui/src/lib/landing/landing-copy.ts index 6a65647d7..b344af7ea 100644 --- a/libs/ui/src/lib/landing/landing-copy.ts +++ b/libs/ui/src/lib/landing/landing-copy.ts @@ -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: { diff --git a/libs/ui/src/lib/landing/landing.css b/libs/ui/src/lib/landing/landing.css index f274ee079..d279c5032 100644 --- a/libs/ui/src/lib/landing/landing.css +++ b/libs/ui/src/lib/landing/landing.css @@ -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; }