How It Works — Before & After

Installation

Variants

Schema

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

interface BeforeAfterComparisonRow {
  stage: string
  before: string
  after: string
  saving: string
}

Files installed (2)

• src/app/components/blocks/how-it-works-before-after/how-it-works-before-after.component.ts5.2 kB

  Copy

  // 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.
  // Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, Check, LucideAngularModule, X } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  export interface BeforeAfterComparisonRow {
    stage: string
    before: string
    after: string
    saving: string
  }
  
  // Rows are paired, not two independent lists — the saving only reads when the
  // old and new step for the same stage sit on one line.
  const rows: BeforeAfterComparisonRow[] = [
    {
      stage: 'Collect',
      before: 'Analyst exports four CSVs from three systems and reconciles them by hand.',
      after: 'Metrics resolve against the warehouse at query time. Nothing is exported.',
      saving: '~6 h per close',
    },
    {
      stage: 'Define',
      before: 'Each team keeps its own revenue formula in a spreadsheet nobody reviews.',
      after: 'One certified definition, versioned, with an owner and a review step.',
      saving: '11 → 1 definition',
    },
    {
      stage: 'Publish',
      before: 'Dashboards are rebuilt by hand and drift from the deck within a week.',
      after: 'Publishing a definition updates every consumer at once, revertible.',
      saving: 'No rebuild',
    },
    {
      stage: 'Audit',
      before: 'Restatements are reconstructed from email threads at year end.',
      after: 'The change history is the audit trail; the pack exports from it.',
      saving: '~3 days saved',
    },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-how-it-works-before-after, [ui-how-it-works-before-after]',
    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,
      UiCardContentComponent,
      UiSeparatorComponent,
    ],
    template: `
      <section data-slot="how-it-works-before-after" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-20 lg:py-28">
          <div class="max-w-2xl">
            <span ui-badge variant="secondary">Before and after</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">The same four stages, minus the relay</h2>
            <p class="text-muted-foreground mt-3 text-lg">
              Nothing here is new work. It is the existing close, with the manual steps removed.
            </p>
          </div>
  
          <div class="mt-12 space-y-4">
            @for (row of allRows; track row.stage) {
              <div>
                <div class="flex items-baseline gap-3">
                  <span class="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">{{ row.stage }}</span>
                  <ui-separator class="flex-1" />
                  <span class="text-muted-foreground shrink-0 font-mono text-xs">{{ row.saving }}</span>
                </div>
  
                <!-- items-stretch so both cards in a row share a height and the
                     comparison stays line-for-line. -->
                <div class="mt-3 grid items-stretch gap-3 md:grid-cols-[1fr_auto_1fr]">
                  <div ui-card class="bg-muted/30">
                    <div ui-card-content class="flex h-full items-start gap-3 p-4">
                      <lucide-icon [img]="X" class="text-destructive mt-0.5 size-4 shrink-0" aria-hidden="true" />
                      <p class="text-muted-foreground text-sm leading-relaxed">{{ row.before }}</p>
                    </div>
                  </div>
  
                  <div class="hidden items-center justify-center md:flex">
                    <lucide-icon [img]="ArrowRight" class="text-muted-foreground/50 size-4" aria-hidden="true" />
                  </div>
  
                  <div ui-card>
                    <div ui-card-content class="flex h-full items-start gap-3 p-4">
                      <lucide-icon [img]="Check" class="text-success mt-0.5 size-4 shrink-0" aria-hidden="true" />
                      <p class="text-sm leading-relaxed">{{ row.after }}</p>
                    </div>
                  </div>
                </div>
              </div>
            }
          </div>
  
          <div class="border-border mt-10 flex flex-wrap items-center justify-between gap-4 border-t pt-6">
            <p class="text-muted-foreground text-sm">
              Measured against Northwind's own close, the quarter before rollout.
            </p>
            <button ui-button>
              See the rollout plan
              <lucide-icon [img]="ArrowRight" class="ml-2 size-4" aria-hidden="true" />
            </button>
          </div>
        </div>
      </section>
    `,
  })
  export class UiHowItWorksBeforeAfterComponent {
    protected readonly ArrowRight = ArrowRight
    protected readonly Check = Check
    protected readonly X = X
  
    protected readonly allRows = rows
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

• src/app/components/blocks/how-it-works-before-after/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/how-it-works-before-after.json