{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "social-proof-video-wall", "title": "Social Proof Video Wall", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/social-proof-video-wall/social-proof-video-wall.component.ts", "content": "// Engineering case study and video testimonial wall with playback simulation,\n// category filtering, and metric highlights. Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, LucideAngularModule, Play, Video, X } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport interface VideoTestimonial {\n id: string\n name: string\n role: string\n company: string\n category: 'fintech' | 'saas' | 'ai'\n quote: string\n duration: string\n metricHighlight: string\n metricLabel: string\n}\n\nexport type VideoWallCategory = 'all' | 'fintech' | 'saas' | 'ai'\n\nconst defaultTestimonials: VideoTestimonial[] = [\n {\n id: 'story-1',\n name: 'Elena Rostova',\n role: 'Staff Frontend Architect',\n company: 'FinFlow Global',\n category: 'fintech',\n quote:\n 'Unbundled components gave our core engineering team complete ownership over PCI-compliant ledger tables without maintaining a bloated bespoke fork.',\n duration: '2:14',\n metricHighlight: '4.2x Faster',\n metricLabel: 'Sprint delivery velocity',\n },\n {\n id: 'story-2',\n name: 'Marcus Vance',\n role: 'VP of Engineering',\n company: 'Synthetix AI',\n category: 'ai',\n quote:\n 'Our AI canvas needed sub-millisecond AST updates. Copying pure Vue and React primitives eliminated hours of npm dependency version conflicts.',\n duration: '1:48',\n metricHighlight: '-380 KB',\n metricLabel: 'Zero runtime bundle overhead',\n },\n {\n id: 'story-3',\n name: 'Sarah Chen',\n role: 'Head of Product Design',\n company: 'Linearis Cloud',\n category: 'saas',\n quote:\n 'The Tailwind v4 token system and OKLCH color palettes match our design system tokens 1:1. Zero translation friction between Figma and code.',\n duration: '3:05',\n metricHighlight: '100% Token Sync',\n metricLabel: 'Figma to code parity',\n },\n {\n id: 'story-4',\n name: 'Devon Wright',\n role: 'Principal Engineer',\n company: 'OmniStream Data',\n category: 'saas',\n quote:\n 'We replaced 14 disparate npm UI libraries with a single clean registry pull. Full keyboard ergonomics and ARIA compliance right out of the box.',\n duration: '2:30',\n metricHighlight: '14 → 1',\n metricLabel: 'Vendor dependency consolidation',\n },\n]\n\nconst categories: { id: VideoWallCategory; label: string }[] = [\n { id: 'all', label: 'All Customer Stories' },\n { id: 'saas', label: 'Enterprise SaaS' },\n { id: 'fintech', label: 'Fintech & Security' },\n { id: 'ai', label: 'AI & Data Platforms' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-social-proof-video-wall, [ui-social-proof-video-wall]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n
\n \n \n Engineering Case Studies\n \n \n\n

{{ title }}

\n

{{ description }}

\n\n
\n @for (cat of filterCategories; track cat.id) {\n \n }\n
\n
\n\n
\n @for (item of filteredTestimonials(); track item.id) {\n \n
\n \n \n \n
\n \n {{ item.duration }}\n
\n
\n \n {{ item.company }}\n \n
\n
\n\n
\n

“{{ item.quote }}”

\n
\n
\n
{{ item.name }}
\n
{{ item.role }} • {{ item.company }}
\n
\n
\n
{{ item.metricHighlight }}
\n
{{ item.metricLabel }}
\n
\n
\n
\n \n \n }\n \n\n @if (activeVideo(); as av) {\n \n \n
\n
\n \n {{ av.company }} • Architecture Deep-Dive\n
\n \n \n \n
\n \n \n \n \n
Streaming Case Study (HD 1080p)
\n
{{ av.name }} • {{ av.role }}
\n \n
“{{ av.quote }}”
\n \n \n }\n \n
\n `,\n})\nexport class UiSocialProofVideoWallComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Play = Play\n protected readonly Video = Video\n protected readonly X = X\n\n @Input() title = 'Trusted by world-class design engineers and platform architects.'\n @Input()\n description =\n 'Discover how high-velocity engineering organizations leverage unbundled UI primitives to build ultra-fast, accessible products.'\n @Input() testimonials?: VideoTestimonial[]\n @Input('class') className?: string\n\n readonly selectedCategory = signal('all')\n readonly activeVideo = signal(null)\n readonly filterCategories = categories\n\n readonly activeTestimonials = computed(() => this.testimonials ?? defaultTestimonials)\n readonly filteredTestimonials = computed(() => {\n const cat = this.selectedCategory()\n const all = this.activeTestimonials()\n if (cat === 'all') return all\n return all.filter((t) => t.category === cat)\n })\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n filterButtonClass(id: VideoWallCategory): string {\n return cn(\n 'rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',\n this.selectedCategory() === id\n ? 'border-primary bg-primary/10 text-primary font-semibold'\n : 'border-border bg-card text-muted-foreground hover:text-foreground',\n )\n }\n\n openVideoModal(t: VideoTestimonial): void {\n this.activeVideo.set(t)\n }\n\n closeVideoModal(): void {\n this.activeVideo.set(null)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/social-proof-video-wall/social-proof-video-wall.component.ts" }, { "path": "packages/registry-angular/blocks/social-proof-video-wall/index.ts", "content": "export {\n UiSocialProofVideoWallComponent,\n type VideoTestimonial,\n type VideoWallCategory,\n} from './social-proof-video-wall.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/social-proof-video-wall/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Engineering case study and video testimonial wall with playback simulation, category filtering, and metric highlights.", "categories": [ "marketing", "feature" ] }