{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hero-01", "title": "Metric Showcase Hero", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hero-01/hero-01.component.ts", "content": "// Two-column hero with badge eyebrow, large headline, supporting copy, primary +\n// outline CTAs, social-proof row, and a collage of three rotated KPI cards\n// (active users / uptime / onboarding queue) on the right. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, LucideAngularModule, PlayCircle } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\n\ninterface Hero01QueueMember {\n initials: string\n name: string\n role: string\n}\n\nconst queue: Hero01QueueMember[] = [\n { initials: 'LW', name: 'Lena Wei', role: 'Engineering' },\n { initials: 'JR', name: 'Joaquín Reyes', role: 'Engineering' },\n { initials: 'PS', name: 'Priya Shah', role: 'Engineering' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hero-01, [ui-hero-01]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n ],\n template: `\n
\n
\n
\n
\n

\n The platform your team will actually use.\n

\n

\n One workspace for everything your team needs. Built on unbundled UI primitives — fast, accessible, easy to\n customise.\n

\n
\n \n \n
\n
\n ★★★★★ 4.9 on G2\n 14-day free trial\n No credit card required\n
\n
\n\n
\n
\n
\n

Active users

\n

1,284

\n

+8.2% MoM

\n
\n
\n
\n
\n

Uptime

\n

100%

\n

12 cycles, 0 misses

\n
\n
\n
\n
\n

Onboarding queue

\n

3 starting Monday

\n
\n
\n @for (member of onboardingQueue; track member.name) {\n
\n \n {{ member.initials }}\n \n
\n

{{ member.name }}

\n

{{ member.role }}

\n
\n Pending\n
\n }\n
\n
\n
\n
\n
\n
\n `,\n})\nexport class UiHero01Component {\n protected readonly ArrowRight = ArrowRight\n protected readonly PlayCircle = PlayCircle\n\n protected readonly onboardingQueue = queue\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-01/hero-01.component.ts" }, { "path": "packages/registry-angular/blocks/hero-01/index.ts", "content": "export { UiHero01Component } from './hero-01.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-01/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "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.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "hero" }