Testimonial Quote Carousel Telemetry

blockmarketing

Enterprise customer spotlight case study carousel with interactive company tabs, executive quotes, and verified quantitative telemetry KPIs.

Installation

$pnpm dlx uipkge-ng@latest add testimonial-quote-carousel-telemetry

$npx uipkge-ng@latest add testimonial-quote-carousel-telemetry

$yarn dlx uipkge-ng@latest add testimonial-quote-carousel-telemetry

$bunx uipkge-ng@latest add testimonial-quote-carousel-telemetry

Manifest:https://uipkge.dev/r/angular/testimonial-quote-carousel-telemetry.jsonInstalls to:src/app/components/blocks/testimonial-quote-carousel-telemetry/

Variants

Loading interactive previews…

Schema

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

TelemetryKpi

interface TelemetryKpi {
  label: string
  value: string
  delta: string
}

TelemetryCaseStudy

interface TelemetryCaseStudy {
  id: string
  company: string
  industry: string
  quote: string
  authorName: string
  authorRole: string
  avatar: string
  kpis: TelemetryKpi[]
  architectureSummary: string
}

npm dependencies

lucide-angular

Includes

badge button card

Files installed (2)

src/app/components/blocks/testimonial-quote-carousel-telemetry/testimonial-quote-carousel-telemetry.component.ts11 kB

// Enterprise customer spotlight case study carousel with interactive company tabs,
// executive quotes, and verified quantitative telemetry KPIs. Port of the Vue/React block 1:1.
import { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'
import {
  Building2,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  LucideAngularModule,
  TrendingUp,
  Zap,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import { UiCardComponent } from '@/ui/card/card.component'

export interface TelemetryKpi {
  label: string
  value: string
  delta: string
}

export interface TelemetryCaseStudy {
  id: string
  company: string
  industry: string
  quote: string
  authorName: string
  authorRole: string
  avatar: string
  kpis: TelemetryKpi[]
  architectureSummary: string
}

const caseStudies: TelemetryCaseStudy[] = [
  {
    id: 'scale-ai',
    company: 'HyperScale AI Platform',
    industry: 'Enterprise Developer Cloud',
    quote:
      'We replaced an unwieldy 800MB npm design system package with UIPKGE unbundled registry primitives. Our developers can now inspect, customize, and refactor any component directly in our codebase without waiting for semver releases.',
    authorName: 'Dr. Evelyn Ward',
    authorRole: 'VP of Product Engineering',
    avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150&auto=format&fit=crop&q=80',
    kpis: [
      { label: 'Bundle Footprint', value: '42 kB', delta: '-87% JS overhead' },
      { label: 'Ship Velocity', value: '3.4x', delta: 'Release cycle speedup' },
      { label: 'Interaction INP', value: '18 ms', delta: 'P99 render latency' },
    ],
    architectureSummary: 'Migrated from monolithic NPM design system to raw unbundled Vue 3.5 SFCs.',
  },
  {
    id: 'fintech-apex',
    company: 'Apex Clearinghouse',
    industry: 'Institutional Fintech',
    quote:
      'Strict SOC2 Type II and HIPAA compliance required zero runtime telemetry from third-party vendor npm packages. UIPKGE’s own-your-code distribution model satisfied our security audits immediately.',
    authorName: 'Vikram Mehta',
    authorRole: 'Chief Information Security Officer',
    avatar: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=150&auto=format&fit=crop&q=80',
    kpis: [
      { label: 'Security Audit', value: '100%', delta: 'Zero third-party CVEs' },
      { label: 'Uptime Reliability', value: '99.98%', delta: 'Edge static distribution' },
      { label: 'Annual TCO', value: '$140,000', delta: 'Saved in seat licenses' },
    ],
    architectureSummary: 'Full source code ownership inside air-gapped GitHub enterprise monorepo.',
  },
  {
    id: 'pulse-health',
    company: 'Vitalis Health Systems',
    industry: 'Clinical Medical Intelligence',
    quote:
      'Our clinical dashboard has both a Vue 3 Nuxt clinician portal and a React Next.js patient mobile app. UIPKGE is the only registry providing 1:1 identical tokens and DOM accessibility across both.',
    authorName: 'Camila Rodriguez',
    authorRole: 'Director of Frontend Architecture',
    avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80',
    kpis: [
      { label: 'Design Parity', value: '1:1', delta: '100% CVA class sync' },
      { label: 'Accessibility', value: 'WCAG AAA', delta: 'Keyboard & screen reader' },
      { label: 'Sync Overhead', value: '0 hrs', delta: 'Dual framework AST registry' },
    ],
    architectureSummary: 'Cross-framework design system synchronized via single `@theme inline` Tailwind file.',
  },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-testimonial-quote-carousel-telemetry, [ui-testimonial-quote-carousel-telemetry]',
  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, UiBadgeComponent, UiButtonComponent, UiCardComponent],
  template: `
    <section data-slot="testimonial-quote-carousel-telemetry" [class]="rootClass">
      <div class="mx-auto max-w-6xl space-y-12">
        <!-- Section Header -->
        <div class="mx-auto max-w-3xl space-y-4 text-center">
          <span ui-badge variant="secondary" class="gap-1.5 px-3 py-1 font-mono text-xs shadow-xs">
            <lucide-icon [img]="TrendingUp" class="text-primary size-3.5" />
            Enterprise Customer Impact
          </span>
          <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
            Quantifiable ROI and architectural case studies.
          </h2>
          <p class="text-muted-foreground text-base">
            See how leading engineering teams transformed their frontend velocity with unbundled code.
          </p>

          <!-- Company Tabs -->
          <div class="flex flex-wrap items-center justify-center gap-2 pt-2">
            @for (study of studies; track study.id; let idx = $index) {
              <button type="button" [class]="tabClass(idx)" (click)="setActive(idx)">
                <lucide-icon [img]="Building2" class="size-3.5" />
                <span>{{ study.company }}</span>
              </button>
            }
          </div>
        </div>

        <!-- Spotlight Workbench Card (Split-Pane) -->
        <div
          ui-card
          class="border-border bg-card/95 relative overflow-hidden rounded-3xl p-6 text-left shadow-sm sm:p-10"
        >
          <div class="grid grid-cols-1 items-center gap-8 lg:grid-cols-12">
            <!-- Left Column: Quote & Executive Info (7 Cols) -->
            <div class="space-y-6 lg:col-span-7">
              <div class="flex items-center gap-2">
                <span ui-badge variant="outline" class="text-primary bg-primary/10 border-primary/20 font-mono text-xs">
                  {{ currentStudy().industry }}
                </span>
              </div>

              <!-- Quote -->
              <blockquote class="text-foreground text-lg leading-relaxed font-medium sm:text-xl">
                &ldquo;{{ currentStudy().quote }}&rdquo;
              </blockquote>

              <!-- Author info -->
              <div class="flex items-center gap-4 pt-2">
                <img
                  [src]="currentStudy().avatar"
                  [alt]="currentStudy().authorName"
                  class="border-border size-12 shrink-0 rounded-full border object-cover shadow-sm"
                />
                <div>
                  <h4 class="text-foreground font-mono text-sm font-bold">{{ currentStudy().authorName }}</h4>
                  <p class="text-muted-foreground text-xs">
                    {{ currentStudy().authorRole }} &bull; {{ currentStudy().company }}
                  </p>
                </div>
              </div>

              <!-- Navigation Controls -->
              <div class="border-border/60 flex items-center gap-2 border-t pt-4">
                <button
                  ui-button
                  size="sm"
                  variant="outline"
                  class="size-9 rounded-lg p-0"
                  aria-label="Previous case study"
                  (click)="prevSlide()"
                >
                  <lucide-icon [img]="ChevronLeft" class="size-4" />
                </button>
                <button
                  ui-button
                  size="sm"
                  variant="outline"
                  class="size-9 rounded-lg p-0"
                  aria-label="Next case study"
                  (click)="nextSlide()"
                >
                  <lucide-icon [img]="ChevronRight" class="size-4" />
                </button>
                <span class="text-muted-foreground ml-2 font-mono text-xs">
                  Case Study {{ activeIndex() + 1 }} of {{ studies.length }}
                </span>
              </div>
            </div>

            <!-- Right Column: Quantitative Telemetry KPIs & Architecture Diff (5 Cols) -->
            <div class="bg-muted/40 border-border space-y-6 rounded-2xl border p-6 lg:col-span-5">
              <div class="border-border flex items-center justify-between border-b pb-3">
                <h4 class="text-foreground flex items-center gap-1.5 font-mono text-xs font-bold">
                  <lucide-icon [img]="Zap" class="text-warning size-3.5" />
                  Verified Impact Telemetry
                </h4>
                <span ui-badge variant="outline" class="border-success/20 text-success font-mono text-xs">
                  Post-Audit
                </span>
              </div>

              <!-- 3 KPI Cards -->
              <div class="grid grid-cols-1 gap-3">
                @for (kpi of currentStudy().kpis; track kpi.label) {
                  <div
                    class="border-border/80 bg-card flex items-center justify-between rounded-xl border p-3.5 font-mono"
                  >
                    <div>
                      <div class="text-muted-foreground text-xs">{{ kpi.label }}</div>
                      <div class="text-success text-xs font-semibold">{{ kpi.delta }}</div>
                    </div>
                    <div class="text-foreground text-xl font-bold">{{ kpi.value }}</div>
                  </div>
                }
              </div>

              <!-- Architecture summary -->
              <div class="text-muted-foreground flex items-start gap-2 pt-2 font-mono text-xs">
                <lucide-icon [img]="CheckCircle2" class="text-primary mt-0.5 size-4 shrink-0" />
                <span>{{ currentStudy().architectureSummary }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  `,
})
export class UiTestimonialQuoteCarouselTelemetryComponent {
  protected readonly Building2 = Building2
  protected readonly CheckCircle2 = CheckCircle2
  protected readonly ChevronLeft = ChevronLeft
  protected readonly ChevronRight = ChevronRight
  protected readonly TrendingUp = TrendingUp
  protected readonly Zap = Zap

  protected readonly studies = caseStudies

  @Input() set initialIndex(v: number) {
    if (typeof v === 'number' && v >= 0 && v < caseStudies.length) this.activeIndex.set(v)
  }
  @Input('class') className?: string

  readonly activeIndex = signal(0)

  readonly currentStudy = computed(() => caseStudies[this.activeIndex()]!)

  get rootClass(): string {
    return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)
  }

  tabClass(idx: number): string {
    return cn(
      'flex items-center gap-1.5 rounded-lg border px-3.5 py-1.5 font-mono text-xs transition-colors',
      this.activeIndex() === idx
        ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'
        : 'border-border bg-card text-muted-foreground hover:text-foreground',
    )
  }

  setActive(idx: number): void {
    this.activeIndex.set(idx)
  }

  nextSlide(): void {
    this.activeIndex.update((i) => (i + 1) % caseStudies.length)
  }

  prevSlide(): void {
    this.activeIndex.update((i) => (i - 1 + caseStudies.length) % caseStudies.length)
  }
}

src/app/components/blocks/testimonial-quote-carousel-telemetry/index.ts0.2 kB

Raw manifest:https://uipkge.dev/r/angular/testimonial-quote-carousel-telemetry.json

Change language