Cta Gradient Glow Action

Installation

Variants

Files installed (2)

• src/app/components/blocks/cta-gradient-glow-action/cta-gradient-glow-action.component.ts7.1 kB

  Copy

  // Conversion call-to-action with ambient glow, multi-package-manager terminal
  // installation strip, and open source trust assurances. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'
  import { ArrowRight, Check, Copy, LucideAngularModule, Terminal } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiCardComponent } from '@/ui/card/card.component'
  
  export type GlowPackageManager = 'pnpm' | 'npm' | 'bun' | 'yarn'
  
  export const glowCliCommands: Record<GlowPackageManager, string> = {
    pnpm: 'pnpm dlx shadcn@latest add https://uipkge.dev/r/react/init.json',
    npm: 'npx shadcn@latest add https://uipkge.dev/r/react/init.json',
    bun: 'bunx --bun shadcn@latest add https://uipkge.dev/r/react/init.json',
    yarn: 'yarn dlx shadcn@latest add https://uipkge.dev/r/react/init.json',
  }
  
  const packageManagers: GlowPackageManager[] = ['pnpm', 'npm', 'bun', 'yarn']
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-cta-gradient-glow-action, [ui-cta-gradient-glow-action]',
    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, UiButtonComponent, UiCardComponent],
    template: `
      <section data-slot="cta-gradient-glow-action" [class]="rootClass">
        <div class="relative mx-auto max-w-5xl">
          <!-- Ambient Glow Behind CTA Card -->
          <div
            class="from-primary/30 to-primary/30 pointer-events-none absolute -inset-1 rounded-3xl bg-gradient-to-r opacity-60 blur-2xl"
          ></div>
  
          <!-- Main CTA Card -->
          <div
            ui-card
            class="border-border bg-card/95 relative space-y-8 overflow-hidden rounded-3xl p-8 text-center shadow-sm backdrop-blur-xl sm:p-14"
          >
            <!-- Floating decorative badge -->
            <div
              class="border-primary/30 bg-primary/10 text-primary inline-flex items-center gap-1.5 rounded-full border px-3 py-1 font-mono text-xs"
            >
              <lucide-icon [img]="Terminal" class="size-3.5" />
              <span>Production Ready &bull; Unbundled Distribution</span>
            </div>
  
            <!-- Headline & Subtitle -->
            <div class="mx-auto max-w-2xl space-y-3">
              <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
                Start building with unbundled code in 30 seconds.
              </h2>
              <p class="text-muted-foreground text-base sm:text-lg">
                Run the init command below to copy calibrated tokens, utilities, and primitives directly into your
                repository.
              </p>
            </div>
  
            <!-- CLI Installation Terminal Box -->
            <div class="mx-auto max-w-xl space-y-2">
              <!-- Package manager selector tabs -->
              <div class="flex items-center justify-between px-2">
                <div class="flex items-center gap-1">
                  @for (pm of packageManagers; track pm) {
                    <button type="button" [class]="pmTabClass(pm)" (click)="packageManager.set(pm)">
                      {{ pm }}
                    </button>
                  }
                </div>
                <span class="text-muted-foreground font-mono text-xs">Single Command Init</span>
              </div>
  
              <!-- Command Display Strip -->
              <div
                class="border-border bg-muted/50 text-foreground flex items-center justify-between gap-3 overflow-hidden rounded-xl border p-3.5 text-left font-mono text-xs shadow-inner sm:p-4"
              >
                <div class="flex min-w-0 items-center gap-2">
                  <lucide-icon [img]="Terminal" class="text-primary size-4 shrink-0" />
                  <span class="truncate font-semibold select-all">{{ cliCommand() }}</span>
                </div>
  
                <button
                  ui-button
                  size="sm"
                  variant="outline"
                  class="h-8 shrink-0 gap-1.5 px-3 font-mono text-xs"
                  (click)="copyCommand()"
                >
                  @if (isCopied()) {
                    <lucide-icon [img]="Check" class="text-success size-3.5" />
                  } @else {
                    <lucide-icon [img]="Copy" class="text-muted-foreground size-3.5" />
                  }
                  <span>{{ isCopied() ? 'Copied' : 'Copy' }}</span>
                </button>
              </div>
            </div>
  
            <!-- Action Links -->
            <div class="flex flex-wrap items-center justify-center gap-4 pt-2">
              <button ui-button size="lg" class="h-11 gap-2 px-6 font-mono text-xs shadow-md">
                <span>Browse 450+ Component Blocks</span>
                <lucide-icon [img]="ArrowRight" class="size-4" />
              </button>
            </div>
  
            <!-- Developer Trust Assurance Badges -->
            <div
              class="border-border/60 text-muted-foreground flex flex-wrap items-center justify-center gap-6 border-t pt-6 font-mono text-xs sm:gap-10"
            >
              <div class="flex items-center gap-1.5">
                <lucide-icon [img]="Check" class="text-success size-4" />
                <span>100% Free &amp; Open Source (MIT)</span>
              </div>
              <div class="flex items-center gap-1.5">
                <lucide-icon [img]="Check" class="text-success size-4" />
                <span>Zero Vendor NPM Dependencies</span>
              </div>
              <div class="flex items-center gap-1.5">
                <lucide-icon [img]="Check" class="text-success size-4" />
                <span>Dual-Framework AST Parity</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    `,
  })
  export class UiCtaGradientGlowActionComponent {
    protected readonly ArrowRight = ArrowRight
    protected readonly Check = Check
    protected readonly Copy = Copy
    protected readonly Terminal = Terminal
  
    protected readonly packageManagers = packageManagers
  
    @Input('class') className?: string
  
    readonly packageManager = signal<GlowPackageManager>('pnpm')
    readonly isCopied = signal(false)
  
    private copyTimer: ReturnType<typeof setTimeout> | undefined
  
    constructor() {
      inject(DestroyRef).onDestroy(() => clearTimeout(this.copyTimer))
    }
  
    readonly cliCommand = computed(() => glowCliCommands[this.packageManager()])
  
    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)
    }
  
    pmTabClass(pm: GlowPackageManager): string {
      return cn(
        'rounded-md px-2.5 py-0.5 font-mono text-xs uppercase transition-colors',
        this.packageManager() === pm
          ? 'bg-primary text-primary-foreground font-bold shadow-xs'
          : 'text-muted-foreground hover:text-foreground',
      )
    }
  
    async copyCommand(): Promise<void> {
      try {
        await navigator.clipboard.writeText(this.cliCommand())
      } catch {
        // Clipboard fallback
      }
      this.isCopied.set(true)
      clearTimeout(this.copyTimer)
      this.copyTimer = setTimeout(() => this.isCopied.set(false), 2000)
    }
  }
  

• src/app/components/blocks/cta-gradient-glow-action/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/cta-gradient-glow-action.json