Product Update Card

1import { Badge } from "@/components/ui/badge"
2import { Button } from "@/components/ui/button"
3import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
4import { IconPlaceholder } from "@/components/icons/icon-placeholder"
5 
6const UPDATE = {
7  label: "New",
8  version: "v2.5",
9  headline: "Acme Workflows just got a major upgrade",
10  detail:
11    "Parallel branching, conditional logic, and real-time run history are now generally available, with no feature flag required.",
12  cta: "See What's New",
13  date: "Released June 12, 2026",
14  platform: "Acme Platform",
15}
16 
17export default function AnnouncementBlock() {
18  return (
19    <section className="flex w-full items-center justify-center bg-background px-6 py-12 text-foreground">
20      <Card className="w-full max-w-md">
21        <CardHeader className="pb-0">
22          <div className="flex items-center gap-2">
23            <Badge variant="default">
24              <IconPlaceholder
25                lucide="Sparkles"
26                tabler="IconSparkles"
27                hugeicons="SparklesIcon"
28                phosphor="Sparkle"
29                remixicon="RiSparklingLine"
30                data-icon="inline-start"
31              />
32              {UPDATE.label}
33            </Badge>
34            <span className="text-xs font-medium text-muted-foreground">
35              {UPDATE.version}
36            </span>
37          </div>
38        </CardHeader>
39 
40        <CardContent className="flex flex-col gap-3 pt-3">
41          <h2 className="font-heading text-base leading-snug font-semibold text-foreground">
42            {UPDATE.headline}
43          </h2>
44          <p className="text-xs/relaxed text-muted-foreground">
45            {UPDATE.detail}
46          </p>
47        </CardContent>
48 
49        <CardFooter className="flex items-center justify-between gap-4">
50          <div className="flex min-w-0 flex-col">
51            <span className="truncate text-xs text-muted-foreground">
52              {UPDATE.date}
53            </span>
54            <span className="truncate text-xs font-medium text-foreground/80">
55              {UPDATE.platform}
56            </span>
57          </div>
58          <Button size="sm" render={<a href="#" />} nativeButton={false}>
59            {UPDATE.cta}
60            <IconPlaceholder
61              lucide="ArrowRight"
62              tabler="IconArrowRight"
63              hugeicons="ArrowRightIcon"
64              phosphor="ArrowRight"
65              remixicon="RiArrowRightLine"
66              data-icon="inline-end"
67// … truncated