Metric Showcase Hero

Installation

Variants

Schema

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

interface Hero01QueueMember {
  initials: string
  name: string
  role: string
}

Files installed (2)

• src/app/components/blocks/hero-01/hero-01.component.ts5.1 kB

  Copy

  // Two-column hero with badge eyebrow, large headline, supporting copy, primary +
  // outline CTAs, social-proof row, and a collage of three rotated KPI cards
  // (active users / uptime / onboarding queue) on the right. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, LucideAngularModule, PlayCircle } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import {
    UiCardComponent,
    UiCardContentComponent,
    UiCardDescriptionComponent,
    UiCardHeaderComponent,
    UiCardTitleComponent,
  } from '@/ui/card/card.component'
  
  interface Hero01QueueMember {
    initials: string
    name: string
    role: string
  }
  
  const queue: Hero01QueueMember[] = [
    { initials: 'LW', name: 'Lena Wei', role: 'Engineering' },
    { initials: 'JR', name: 'Joaquín Reyes', role: 'Engineering' },
    { initials: 'PS', name: 'Priya Shah', role: 'Engineering' },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-hero-01, [ui-hero-01]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [
      LucideAngularModule,
      UiAvatarComponent,
      UiAvatarFallbackComponent,
      UiBadgeComponent,
      UiButtonComponent,
      UiCardComponent,
      UiCardContentComponent,
      UiCardDescriptionComponent,
      UiCardHeaderComponent,
      UiCardTitleComponent,
    ],
    template: `
      <section data-slot="hero-01" [class]="rootClass">
        <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">
                <button ui-button size="lg">
                  Start free trial
                  <lucide-icon [img]="ArrowRight" class="ml-2 size-4" />
                </button>
                <button ui-button size="lg" variant="outline">
                  <lucide-icon [img]="PlayCircle" class="mr-2 size-4" />
                  Watch demo (2 min)
                </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">
              <div ui-card class="absolute -top-4 right-0 w-56 rotate-2 shadow-lg">
                <div ui-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>
                </div>
              </div>
              <div ui-card class="absolute top-32 -left-2 w-52 -rotate-3 shadow-lg">
                <div ui-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>
                </div>
              </div>
              <div ui-card class="ml-auto w-72 shadow-xl">
                <div ui-card-header>
                  <h3 ui-card-title class="text-base">Onboarding queue</h3>
                  <p ui-card-description>3 starting Monday</p>
                </div>
                <div ui-card-content class="space-y-3">
                  @for (member of onboardingQueue; track member.name) {
                    <div class="flex items-center gap-3">
                      <ui-avatar class="size-8">
                        <ui-avatar-fallback>{{ member.initials }}</ui-avatar-fallback>
                      </ui-avatar>
                      <div class="flex-1">
                        <p class="text-sm font-medium">{{ member.name }}</p>
                        <p class="text-muted-foreground text-xs">{{ member.role }}</p>
                      </div>
                      <span ui-badge variant="secondary">Pending</span>
                    </div>
                  }
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    `,
  })
  export class UiHero01Component {
    protected readonly ArrowRight = ArrowRight
    protected readonly PlayCircle = PlayCircle
  
    protected readonly onboardingQueue = queue
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background relative overflow-hidden', this.className)
    }
  }
  

• src/app/components/blocks/hero-01/index.ts0.1 kB

  Copy

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