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': UipHero
  }
}

Files installed (1)

• src/uip/blocks/hero/hero.ts5.4 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 onboardingQueue = [
    { initials: 'LW', name: 'Lena Wei', team: 'Engineering' },
    { initials: 'JR', name: 'Joaquín Reyes', team: 'Engineering' },
    { initials: 'PS', name: 'Priya Shah', team: 'Engineering' },
  ]
  
  /**
   * <uip-hero> — the registry Hero block (Hero01 variant) as a web component.
   *
   * Class strings and copy are React's Hero01 verbatim. The block is fully
   * static: eyebrow-free headline, supporting copy, primary + outline CTAs,
   * social-proof row, and the 3-card KPI collage (active users / uptime /
   * onboarding queue). No props, no events.
   *
   * Only the primary Hero01 variant is ported: the registry's ten other hero
   * variants (3D tilt canvas, ASCII terminal, bento grid, developer terminal,
   * globe nodes, SaaS dashboard, device mockup, typing REPL, video modal,
   * waitlist glow) are canvas/terminal/WebGL showpieces outside a wholesale
   * port's scope — they ship as their own follow-up block(s).
   */
  export class UipHero 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">
                    ${onboardingQueue.map(
                      (person) => html`<div class="flex items-center gap-3">
                        <uip-avatar class="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.team}</p>
                        </div>
                        <uip-badge variant="secondary">Pending</uip-badge>
                      </div>`,
                    )}
                  </uip-card-content>
                </uip-card>
              </div>
            </div>
          </div>
        </section>
      `
    }
  }
  
  customElements.get('uip-hero') || customElements.define('uip-hero', UipHero)
  
  declare global {
    interface HTMLElementTagNameMap {
      'uip-hero': UipHero
    }
  }
  

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