{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "testimonial-single-featured",
  "title": "Testimonial — Single Featured",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/testimonial-single-featured/testimonial-single-featured.component.ts",
      "content": "// One large pull quote given the full section: oversized text, attribution with\n// avatar and role, the customer wordmark, and a supporting result metric beside it.\n// Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, LucideAngularModule } 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 { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-testimonial-single-featured, [ui-testimonial-single-featured]',\n  standalone: true,\n  // React renders the root <section> 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    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"testimonial-single-featured\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <span ui-badge variant=\"secondary\">Customer</span>\n\n        <!-- One quote, given the whole section. Keep it short: the size is what\n             carries it, and a long quote at this scale stops being readable. -->\n        <blockquote class=\"mt-6 text-2xl leading-tight font-medium tracking-tight text-balance sm:text-3xl lg:text-4xl\">\n          “We stopped arguing about whose number was right and started arguing about what to do next.”\n        </blockquote>\n\n        <div class=\"mt-10 grid gap-8 sm:grid-cols-[1fr_auto] sm:items-center\">\n          <div class=\"flex items-center gap-4\">\n            <ui-avatar class=\"size-12\">\n              <ui-avatar-fallback>EW</ui-avatar-fallback>\n            </ui-avatar>\n            <div>\n              <p class=\"font-medium\">Erin Walsh</p>\n              <p class=\"text-muted-foreground text-sm\">VP Finance · Northwind Logistics</p>\n            </div>\n            <ui-separator orientation=\"vertical\" class=\"ml-2 hidden h-10 sm:block\" />\n            <span class=\"hidden text-sm font-semibold tracking-[0.18em] uppercase sm:inline\">Northwind</span>\n          </div>\n\n          <div class=\"sm:text-right\">\n            <p class=\"font-display text-3xl font-bold tracking-tight\">5 days</p>\n            <p class=\"text-muted-foreground mt-1 text-sm\">off the monthly close</p>\n          </div>\n        </div>\n\n        <ui-separator class=\"my-10\" />\n\n        <div class=\"flex flex-wrap items-center justify-between gap-4\">\n          <p class=\"text-muted-foreground text-sm\">Freight forwarding · 1,200 staff · live since Q1 2026</p>\n          <button ui-button variant=\"outline\">\n            Read the full story\n            <lucide-icon [img]=\"ArrowRight\" class=\"ml-2 size-4\" aria-hidden=\"true\" />\n          </button>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiTestimonialSingleFeaturedComponent {\n  protected readonly ArrowRight = ArrowRight\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/testimonial-single-featured/testimonial-single-featured.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/testimonial-single-featured/index.ts",
      "content": "export { UiTestimonialSingleFeaturedComponent } from './testimonial-single-featured.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/testimonial-single-featured/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/separator.json"
  ],
  "description": "One large pull quote given the full section: oversized text, attribution with avatar and role, the customer wordmark, and a supporting result metric beside it.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "testimonial"
}