Jeffrey Smith
680ec3b897
All checks were successful
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
56 lines
2.2 KiB
JavaScript
56 lines
2.2 KiB
JavaScript
/**
|
|
* Hero — left panel with branding, feature pills, version
|
|
*
|
|
* Props:
|
|
* base — base path for assets (string)
|
|
* version — app version (string)
|
|
* env — environment label or null
|
|
*/
|
|
const { html } = window;
|
|
|
|
const PILLS = [
|
|
{ icon: '\u{1F9E9}', label: 'Extensions', cls: 'pu' },
|
|
{ icon: '\u{1F310}', label: 'Surfaces', cls: 'ac' },
|
|
{ icon: '\u{1F465}', label: 'Teams & RBAC', cls: 'pu' },
|
|
{ icon: '\u{1F517}', label: 'Connections', cls: 'ac' },
|
|
{ icon: '\u{2699}\u{FE0F}', label: 'Workflows', cls: 'pu' },
|
|
{ icon: '\u{1F4E6}', label: 'Package Registry', cls: 'ac' },
|
|
];
|
|
|
|
export function Hero({ base = '', version = '', env = null }) {
|
|
return html`
|
|
<div class="login-hero">
|
|
<div class="login-hero-grid"></div>
|
|
<div class="login-hero-orb"></div>
|
|
<div class="login-hero-content">
|
|
<div class="login-hero-brand login-anim login-anim-1">
|
|
<img class="login-hero-brand-icon"
|
|
src="${base}/favicon.svg?v=${version}"
|
|
alt="Armature" />
|
|
<span class="login-hero-brand-text">
|
|
Armature
|
|
</span>
|
|
</div>
|
|
<h1 class="login-anim login-anim-2">
|
|
Your platform,${html`<br />`}your infrastructure
|
|
</h1>
|
|
<p class="login-hero-sub login-anim login-anim-3">
|
|
Self-hosted extensible platform with surfaces, packages,
|
|
team RBAC, and a workflow engine.
|
|
</p>
|
|
<div class="login-hero-pills login-anim login-anim-4">
|
|
${PILLS.map(p => html`
|
|
<span class="login-hero-pill ${p.cls}">
|
|
<span class="login-hero-pill-icon">${p.icon}</span>
|
|
${' '}${p.label}
|
|
</span>
|
|
`)}
|
|
</div>
|
|
<p class="login-hero-version login-anim login-anim-5">
|
|
v${version}${env ? html` \u00B7 ${env}` : ''}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|