mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-09-07 14:15:45 +00:00
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:
56
libs/ui/src/lib/landing/landing.css
Normal file
56
libs/ui/src/lib/landing/landing.css
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user