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``; 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`
v3.81Cardano-anchored identity, now self-hostable

One identity.
Any scale. Yours forever.

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.

Claim your identity - free View source
MIT licensedSelf-hostableNo credit cardCardano mainnet
`; } }