Metric Showcase Hero

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface HTMLElementTagNameMap {
    'uip-hero-01': UipHero01
  }
}

Files installed (1)

• src/uip/blocks/hero-01/hero-01.ts5.1 kB

  Copy

  import { LitElement, css, html } from 'lit'
  import { ArrowRight, PlayCircle } from 'lucide'
  import { tailwind } from '../../lib/styles'
  import { ThemeController } from '../../lib/theme'
  import { icon } from '../../lib/icon'
  // Side-effect imports: register the composed elements for standalone use
  // (consumers who install only this block still get working primitives).
  import '../../components/avatar/avatar'
  import '../../components/badge/badge'
  import '../../components/button/button'
  import '../../components/card/card'
  
  const queue = [
    { initials: 'LW', name: 'Lena Wei', role: 'Engineering' },
    { initials: 'JR', name: 'Joaquín Reyes', role: 'Engineering' },
    { initials: 'PS', name: 'Priya Shah', role: 'Engineering' },
  ]
  
  /**
   * <uip-hero-01> — the registry Hero01 block as a web component.
   *
   * Class strings are React's Hero01 verbatim. The section is static (React
   * holds no state); the three KPI cards compose <uip-card> parts and the
   * onboarding rows compose <uip-avatar> + <uip-badge>. (React imports Badge
   * but never renders it for the eyebrow — there is no eyebrow badge in the
   * source, so none is ported.)
   */
  export class UipHero01 extends LitElement {
    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
    // :host display can't be a utility class (the host has no template of its own).
    static styles = [tailwind, css`:host { display: block; }`]
  
    constructor() {
      super()
      new ThemeController(this)
    }
  
    connectedCallback() {
      super.connectedCallback()
      this.setAttribute('data-uipkge', '')
      this.setAttribute('data-slot', 'hero-01')
    }
  
    render() {
      return html`
        <section data-slot="hero-01" class="bg-background relative overflow-hidden">
          <div class="relative mx-auto max-w-6xl px-6 py-24 lg:py-32">
            <div class="grid gap-12 lg:grid-cols-2 lg:items-center">
              <div class="space-y-6">
                <h1 class="text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
                  The platform your team will actually use.
                </h1>
                <p class="text-muted-foreground max-w-xl text-lg">
                  One workspace for everything your team needs. Built on unbundled UI primitives — fast, accessible,
                  easy to customise.
                </p>
                <div class="flex flex-wrap items-center gap-3">
                  <uip-button size="lg">
                    Start free trial ${icon(ArrowRight, 'arrow-right', 'ml-2 size-4')}
                  </uip-button>
                  <uip-button size="lg" variant="outline">
                    ${icon(PlayCircle, 'circle-play', 'mr-2 size-4')} Watch demo (2 min)
                  </uip-button>
                </div>
                <div class="text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
                  <span>★★★★★ 4.9 on G2</span>
                  <span>14-day free trial</span>
                  <span>No credit card required</span>
                </div>
              </div>
  
              <div class="relative">
                <uip-card class="absolute -top-4 right-0 w-56 rotate-2 shadow-lg">
                  <uip-card-content class="space-y-1 p-4">
                    <p class="text-muted-foreground text-xs uppercase">Active users</p>
                    <p class="text-2xl font-semibold">1,284</p>
                    <p class="text-success text-xs">+8.2% MoM</p>
                  </uip-card-content>
                </uip-card>
                <uip-card class="absolute top-32 -left-2 w-52 -rotate-3 shadow-lg">
                  <uip-card-content class="space-y-1 p-4">
                    <p class="text-muted-foreground text-xs uppercase">Uptime</p>
                    <p class="text-2xl font-semibold">100%</p>
                    <p class="text-muted-foreground text-xs">12 cycles, 0 misses</p>
                  </uip-card-content>
                </uip-card>
                <uip-card class="ml-auto w-72 shadow-xl">
                  <uip-card-header>
                    <uip-card-title class="text-base">Onboarding queue</uip-card-title>
                    <uip-card-description>3 starting Monday</uip-card-description>
                  </uip-card-header>
                  <uip-card-content class="space-y-3">
                    ${queue.map(
                      (person) => html`
                        <div class="flex items-center gap-3">
                          <uip-avatar class="[&::part(base)]:size-8">
                            <uip-avatar-fallback>${person.initials}</uip-avatar-fallback>
                          </uip-avatar>
                          <div class="flex-1">
                            <p class="text-sm font-medium">${person.name}</p>
                            <p class="text-muted-foreground text-xs">${person.role}</p>
                          </div>
                          <uip-badge variant="secondary">Pending</uip-badge>
                        </div>
                      `,
                    )}
                  </uip-card-content>
                </uip-card>
              </div>
            </div>
          </div>
        </section>
      `
    }
  }
  
  customElements.get('uip-hero-01') || customElements.define('uip-hero-01', UipHero01)
  
  declare global {
    interface HTMLElementTagNameMap {
      'uip-hero-01': UipHero01
    }
  }
  

Raw manifest:https://uipkge.dev/r/lit/hero-01.json