@idp.global/catalog 2.1.0 → 2.2.0

package/ts_web/elements/idp-landing-page.ts

@@ -1,4 +1,4 @@
-import { DeesElement, html, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { DeesElement, html, customElement, css, property, type TemplateResult } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
 import './idp-badge.js';
 import './idp-button.js';
@@ -12,11 +12,47 @@ declare global {
   }
 }
 
+export interface IIdpLandingLinks {
+  signIn: string;
+  claim: string;
+  docs: string;
+  github: string;
+  contact: string;
+}
+
 @customElement('idp-landing-page')
 export class IdpLandingPage extends DeesElement {
   public static demo = () => html`<idp-landing-page></idp-landing-page>`;
   public static demoGroups = ['idp.global v5 full pages'];
 
+  /**
+   * Real navigation targets for the page chrome. Consumers override any subset;
+   * labels without a link target stay presentational.
+   */
+  @property({ type: Object })
+  public accessor links: Partial<IIdpLandingLinks> = {};
+
+  private getLinks(): IIdpLandingLinks {
+    return {
+      signIn: 'https://idp.global/login',
+      claim: 'https://idp.global/register',
+      docs: 'https://about.idp.global/docs',
+      github: 'https://code.foss.global/idp.global/idp.global',
+      contact: 'mailto:hello@task.vc',
+      ...this.links,
+    };
+  }
+
+  private scrollToSection(eventArg: Event, sectionIdArg: string) {
+    eventArg.preventDefault();
+    if (sectionIdArg === 'product') {
+      // the product screenshot lives inside the hero's shadow root
+      this.shadowRoot?.querySelector('idp-landing-hero')?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      return;
+    }
+    this.shadowRoot?.getElementById(sectionIdArg)?.scrollIntoView({ behavior: 'smooth' });
+  }
+
   public static styles = [
     ...idpElementStyles,
     css`
@@ -767,20 +803,28 @@ export class IdpLandingPage extends DeesElement {
   ];
 
   private renderNav() {
+    const links = this.getLinks();
+    const sections = [
+      ['product', 'Product'],
+      ['features', 'Features'],
+      ['chain', 'On-chain'],
+      ['pricing', 'Pricing'],
+      ['developers', 'Developers'],
+    ] as const;
     return html`
       <div class="nav-shell">
         <nav>
-          <a class="logo" href="#">idp<span class="logo-dot"></span>global</a>
+          <a class="logo" href="#" @click=${(eventArg: Event) => this.scrollToSection(eventArg, 'product')}>idp<span class="logo-dot"></span>global</a>
           <div class="nav-links">
-            <a href="#product">Product</a>
-            <a href="#features">Features</a>
-            <a href="#chain">On-chain</a>
-            <a href="#pricing">Pricing</a>
-            <a href="#developers">Developers</a>
+            ${sections.map(
+              ([sectionId, label]) => html`
+                <a href="#${sectionId}" @click=${(eventArg: Event) => this.scrollToSection(eventArg, sectionId)}>${label}</a>
+              `,
+            )}
           </div>
           <div class="actions">
-            <a class="nav-signin">Sign in</a>
-            <idp-button variant="accent" size="sm">Claim identity</idp-button>
+            <a class="nav-signin" href=${links.signIn}>Sign in</a>
+            <idp-button variant="accent" size="sm" href=${links.claim}>Claim identity</idp-button>
           </div>
         </nav>
       </div>
@@ -977,6 +1021,7 @@ export class IdpLandingPage extends DeesElement {
   }
 
   private renderPricing() {
+    const links = this.getLinks();
     const tiers = [
       {
         name: 'Personal',
@@ -992,6 +1037,7 @@ export class IdpLandingPage extends DeesElement {
           'Recovery via your other devices',
         ],
         cta: 'Claim your identity',
+        ctaHref: links.claim,
         variant: 'tint',
         featured: false,
       },
@@ -1009,6 +1055,7 @@ export class IdpLandingPage extends DeesElement {
           'SSO & SCIM included, no upsell',
         ],
         cta: 'Start an organisation',
+        ctaHref: links.claim,
         variant: 'accent',
         featured: true,
       },
@@ -1026,6 +1073,7 @@ export class IdpLandingPage extends DeesElement {
           'Priority engineering & SLA',
         ],
         cta: 'Talk to us',
+        ctaHref: links.contact,
         variant: 'tint',
         featured: false,
       },
@@ -1051,7 +1099,7 @@ export class IdpLandingPage extends DeesElement {
                   <div class="price">${tierArg.price}<span class="sub">${tierArg.sub}</span></div>
                   <div class="price-note">${tierArg.note}</div>
                   <ul class="tier-list">${tierArg.items.map((itemArg) => html`<li>${itemArg}</li>`)}</ul>
-                  <idp-button variant=${tierArg.variant as any}>${tierArg.cta}</idp-button>
+                  <idp-button variant=${tierArg.variant as any} href=${tierArg.ctaHref}>${tierArg.cta}</idp-button>
                 </div>
               `,
             )}
@@ -1077,8 +1125,8 @@ export class IdpLandingPage extends DeesElement {
               <p>One CLI. Standard OAuth 2 &amp; OIDC. Native SDKs for Node, Python, Swift, Kotlin, Go, Rust.</p>
               <div class="dev-tags">${tags.map((tagArg) => html`<span class="dev-tag">${tagArg}</span>`)}</div>
               <div class="dev-actions">
-                <idp-button variant="accent" icon="lucide:github">View on GitHub</idp-button>
-                <idp-button variant="link">Read the docs</idp-button>
+                <idp-button variant="accent" icon="lucide:github" href=${this.getLinks().github}>View on GitHub</idp-button>
+                <idp-button variant="link" href=${this.getLinks().docs}>Read the docs</idp-button>
               </div>
             </div>
             <div class="terminal">
@@ -1115,7 +1163,7 @@ export class IdpLandingPage extends DeesElement {
 
   private renderManifesto() {
     return html`
-      <section class="manifesto">
+      <section class="manifesto" id="manifesto">
         <div class="wrap">
           <div class="eyebrow sm" style="margin-bottom: 24px;">Why we built this</div>
           <q>Identity should not be a product the user is sold. It should be a permanent <em>fact</em>, owned by the person it describes.</q>
@@ -1135,8 +1183,8 @@ export class IdpLandingPage extends DeesElement {
             we disappear.
           </p>
           <div class="cta-actions">
-            <idp-button variant="accent" size="lg">Claim your identity</idp-button>
-            <idp-button variant="link" size="lg">Read the manifesto</idp-button>
+            <idp-button variant="accent" size="lg" href=${this.getLinks().claim}>Claim your identity</idp-button>
+            <idp-button variant="link" size="lg" @click=${(eventArg: Event) => this.scrollToSection(eventArg, 'manifesto')}>Read the manifesto</idp-button>
           </div>
         </div>
       </section>
@@ -1144,17 +1192,30 @@ export class IdpLandingPage extends DeesElement {
   }
 
   private renderFooter() {
+    const links = this.getLinks();
+    const labelHrefs: Record<string, string> = {
+      Documentation: links.docs,
+      'API reference': links.docs,
+      'Self-hosting': links.docs,
+      GitHub: links.github,
+    };
     const cols = [
       ['Product', ['For individuals', 'For organisations', 'Enterprise', 'Cardano sync', 'Changelog']],
       ['Developers', ['Documentation', 'API reference', 'Self-hosting', 'SDKs', 'GitHub']],
       ['Company', ['Manifesto', 'Blog', 'Security', 'Privacy', 'Terms']],
     ] as const;
+    const renderFooterLink = (labelArg: string) =>
+      labelHrefs[labelArg]
+        ? html`<a href=${labelHrefs[labelArg]}>${labelArg}</a>`
+        : labelArg === 'Manifesto'
+          ? html`<a href="#manifesto" @click=${(eventArg: Event) => this.scrollToSection(eventArg, 'manifesto')}>${labelArg}</a>`
+          : html`<a>${labelArg}</a>`;
     return html`
       <footer>
         <div class="wrap-wide">
           <div class="footer-cols">
             <div class="footer-brand">
-              <a class="logo" href="#">idp<span class="logo-dot"></span>global</a>
+              <a class="logo" href="#" @click=${(eventArg: Event) => this.scrollToSection(eventArg, 'product')}>idp<span class="logo-dot"></span>global</a>
               <p>
                 An open identity provider for everyone — from individuals to enterprises. Anchored on Cardano. Built in
                 the open. Yours forever.
@@ -1165,14 +1226,14 @@ export class IdpLandingPage extends DeesElement {
               (colArg) => html`
                 <div class="footer-col">
                   <h4>${colArg[0]}</h4>
-                  <ul>${colArg[1].map((linkArg) => html`<li><a>${linkArg}</a></li>`)}</ul>
+                  <ul>${colArg[1].map((linkArg) => html`<li>${renderFooterLink(linkArg)}</li>`)}</ul>
                 </div>
               `,
             )}
           </div>
           <div class="footer-bottom">
             <span>© 2026 idp.global · MIT · Anchored to Cardano</span>
-            <span class="links"><a>Status</a><a>Twitter</a><a>GitHub</a><a>Discord</a></span>
+            <span class="links"><a>Status</a><a href=${links.github}>GitHub</a></span>
           </div>
         </div>
       </footer>
@@ -1183,7 +1244,10 @@ export class IdpLandingPage extends DeesElement {
     return html`
       <div class="page">
         ${this.renderNav()}
-        <idp-landing-hero></idp-landing-hero>
+        <idp-landing-hero
+          claimHref=${this.getLinks().claim}
+          secondaryHref=${this.getLinks().docs}
+        ></idp-landing-hero>
         ${this.renderProof()}
         ${this.renderFeatures()}
         ${this.renderChain()}