{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "how-it-works-before-after", "title": "How It Works — Before & After", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/how-it-works-before-after/how-it-works-before-after.component.ts", "content": "// Two-column process contrast setting the old workflow against the new one step for\n// step, with matched row heights so the saving at each stage reads at a glance.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, Check, LucideAngularModule, X } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface BeforeAfterComparisonRow {\n stage: string\n before: string\n after: string\n saving: string\n}\n\n// Rows are paired, not two independent lists — the saving only reads when the\n// old and new step for the same stage sit on one line.\nconst rows: BeforeAfterComparisonRow[] = [\n {\n stage: 'Collect',\n before: 'Analyst exports four CSVs from three systems and reconciles them by hand.',\n after: 'Metrics resolve against the warehouse at query time. Nothing is exported.',\n saving: '~6 h per close',\n },\n {\n stage: 'Define',\n before: 'Each team keeps its own revenue formula in a spreadsheet nobody reviews.',\n after: 'One certified definition, versioned, with an owner and a review step.',\n saving: '11 → 1 definition',\n },\n {\n stage: 'Publish',\n before: 'Dashboards are rebuilt by hand and drift from the deck within a week.',\n after: 'Publishing a definition updates every consumer at once, revertible.',\n saving: 'No rebuild',\n },\n {\n stage: 'Audit',\n before: 'Restatements are reconstructed from email threads at year end.',\n after: 'The change history is the audit trail; the pack exports from it.',\n saving: '~3 days saved',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-how-it-works-before-after, [ui-how-it-works-before-after]',\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 UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n
\n Before and after\n

The same four stages, minus the relay

\n

\n Nothing here is new work. It is the existing close, with the manual steps removed.\n

\n
\n\n
\n @for (row of allRows; track row.stage) {\n
\n
\n {{ row.stage }}\n \n {{ row.saving }}\n
\n\n \n
\n
\n
\n \n

{{ row.before }}

\n
\n
\n\n
\n \n
\n\n
\n
\n \n

{{ row.after }}

\n
\n
\n
\n
\n }\n
\n\n
\n

\n Measured against Northwind's own close, the quarter before rollout.\n

\n \n
\n
\n
\n `,\n})\nexport class UiHowItWorksBeforeAfterComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n protected readonly X = X\n\n protected readonly allRows = rows\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/how-it-works-before-after/how-it-works-before-after.component.ts" }, { "path": "packages/registry-angular/blocks/how-it-works-before-after/index.ts", "content": "export { UiHowItWorksBeforeAfterComponent, type BeforeAfterComparisonRow } from './how-it-works-before-after.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/how-it-works-before-after/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Two-column process contrast setting the old workflow against the new one step for step, with matched row heights so the saving at each stage reads at a glance.", "categories": [ "marketing" ] }