feat: add landing page copy and styles for English and Amharic versions

- Introduced `landing-copy.ts` containing text for the public landing page, supporting both English and Amharic languages.
- Added `landing.css` for styling the landing page, ensuring scoped styles to prevent conflicts with other app styles.
- Implemented smooth scrolling and animations for a better user experience.
This commit is contained in:
estifanos
2026-08-14 07:20:42 +00:00
parent d8b01a2003
commit d6b813b697
16 changed files with 1077 additions and 23 deletions

View File

@@ -0,0 +1,56 @@
/* Public landing page — scoped under .ema-landing so nothing leaks into the
rest of either app. Neither app's global CSS (portal's .ema-page-enter /
.ema-hover-lift, portal's --ema-surface-*) is available here, so this file
is self-contained. */
.ema-landing {
scroll-behavior: smooth;
}
.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 .ema-landing-fade {
animation: ema-landing-fade-up 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ema-landing-fade-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ema-landing .ema-landing-hover {
transition:
transform 160ms ease,
box-shadow 160ms ease,
border-color 160ms ease;
}
.ema-landing .ema-landing-hover:hover {
transform: translateY(-3px);
}
/* Amharic runs 20-40% longer than English and falls back to a different font
(Inter has no Ethiopic glyphs), so it needs more vertical room. */
.ema-landing:lang(am) {
line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
.ema-landing {
scroll-behavior: auto;
}
.ema-landing .ema-landing-fade,
.ema-landing .ema-landing-hover {
animation: none;
transition: none;
}
}