feat(catalog): add initial idp.global component catalog with primitives, composed views, and full-page showcases
This commit is contained in:
@@ -0,0 +1,165 @@
|
||||
import { DeesElement, html, customElement, css, type TemplateResult } from '@design.estate/dees-element';
|
||||
import { idpElementStyles } from './tokens.js';
|
||||
import './idp-button.js';
|
||||
import './idp-dashboard-window.js';
|
||||
import './idp-icon.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'idp-landing-hero': IdpLandingHero;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('idp-landing-hero')
|
||||
export class IdpLandingHero extends DeesElement {
|
||||
public static demo = () => html`<idp-landing-hero></idp-landing-hero>`;
|
||||
public static demoGroups = ['idp.global v3 composed surfaces'];
|
||||
|
||||
public static styles = [
|
||||
...idpElementStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #0a0a0a;
|
||||
color: #fafafa;
|
||||
border-bottom: 1px solid #1c1c1c;
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
|
||||
background-size: 56px 56px;
|
||||
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.glow {
|
||||
position: absolute;
|
||||
top: -220px;
|
||||
left: 50%;
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
transform: translateX(-50%);
|
||||
background: radial-gradient(ellipse, rgba(59,130,246,0.18) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1240px;
|
||||
margin: 0 auto;
|
||||
padding: 96px 32px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-bottom: 28px;
|
||||
padding: 5px 12px 5px 8px;
|
||||
border: 1px solid #262626;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
color: hsl(0 0% 70%);
|
||||
font-size: 12px;
|
||||
}
|
||||
.pill {
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(59,130,246,0.18);
|
||||
color: #60a5fa;
|
||||
font-family: var(--idp-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 24px;
|
||||
font-size: clamp(44px, 6.5vw, 78px);
|
||||
font-family: var(--idp-display);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 0.96;
|
||||
}
|
||||
h1 em {
|
||||
color: #60a5fa;
|
||||
font-family: var(--idp-serif);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
.sub {
|
||||
max-width: 660px;
|
||||
margin: 0 auto 36px;
|
||||
color: hsl(0 0% 70%);
|
||||
font-size: clamp(16px, 1.6vw, 19px);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.fineprint {
|
||||
color: hsl(0 0% 28%);
|
||||
font-family: var(--idp-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.fineprint span + span::before {
|
||||
content: '*';
|
||||
margin: 0 10px;
|
||||
}
|
||||
.product {
|
||||
position: relative;
|
||||
max-width: 1180px;
|
||||
margin: 72px auto 0;
|
||||
padding: 0 32px;
|
||||
}
|
||||
.product-glow {
|
||||
position: absolute;
|
||||
inset: 30% 10% -10%;
|
||||
background: radial-gradient(ellipse, rgba(59,130,246,0.25) 0%, transparent 60%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
}
|
||||
idp-dashboard-window {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.inner {
|
||||
padding: 72px 20px 0;
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<section class="hero">
|
||||
<div class="grid"></div>
|
||||
<div class="glow"></div>
|
||||
<div class="inner">
|
||||
<div class="badge"><span class="pill">v3.81</span>Cardano-anchored identity, now self-hostable</div>
|
||||
<h1>One identity.<br/><em>Any scale.</em> Yours forever.</h1>
|
||||
<p class="sub">An open identity provider for everyone, from a single person to a global enterprise. Anchored to the Cardano blockchain so it can never be erased, taken away, or quietly deprecated.</p>
|
||||
<div class="actions">
|
||||
<idp-button variant="accent" size="lg" icon="shield">Claim your identity - free</idp-button>
|
||||
<idp-button variant="ghost" size="lg" icon="globe">View source</idp-button>
|
||||
</div>
|
||||
<div class="fineprint"><span>MIT licensed</span><span>Self-hostable</span><span>No credit card</span><span>Cardano mainnet</span></div>
|
||||
<div class="product">
|
||||
<div class="product-glow"></div>
|
||||
<idp-dashboard-window dark></idp-dashboard-window>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user