{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "article-4",
  "title": "Magazine Feature With Drop Cap",
  "description": "Magazine feature article with a centered headline, wide cover image, drop-cap opening paragraph, pull quote, and save and share actions.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/article/4/article-block.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst tags = [\"Culture\", \"Remote Work\", \"Leadership\"]\n\nexport default function ArticleBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full flex-col items-center bg-background px-6 py-16 text-foreground\">\n      <header className=\"flex w-full max-w-3xl flex-col items-center text-center\">\n        <Badge variant=\"secondary\">Culture</Badge>\n        <h1 className=\"mt-5 font-heading text-4xl font-bold tracking-tight text-balance sm:text-5xl\">\n          The quiet meeting: how we replaced status updates with writing\n        </h1>\n        <p className=\"mt-5 max-w-2xl text-lg text-pretty text-muted-foreground\">\n          Six months ago we deleted the daily standup. Here is what a written,\n          asynchronous cadence did to our focus, our decisions, and our\n          calendar.\n        </p>\n\n        <div className=\"mt-7 flex items-center gap-3\">\n          <Avatar className=\"size-10\">\n            <AvatarImage\n              src=\"https://i.pravatar.cc/80?img=32\"\n              alt=\"Mara Ellison\"\n              className=\"grayscale\"\n            />\n            <AvatarFallback>ME</AvatarFallback>\n          </Avatar>\n          <div className=\"flex flex-col text-left\">\n            <span className=\"text-sm font-medium\">Mara Ellison</span>\n            <span className=\"text-xs text-muted-foreground\">\n              Head of Operations\n            </span>\n          </div>\n          <Separator orientation=\"vertical\" className=\"mx-1 !h-8\" />\n          <span className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n            <IconPlaceholder\n              lucide=\"Clock\"\n              tabler=\"IconClock\"\n              hugeicons=\"TimeIcon\"\n              phosphor=\"Clock\"\n              remixicon=\"RiTimeLine\"\n              className=\"size-3.5 shrink-0\"\n              aria-hidden=\"true\"\n            />\n            9 Min Read\n          </span>\n        </div>\n      </header>\n\n      <div className=\"mt-10 aspect-[21/9] w-full max-w-2xl overflow-hidden rounded-lg border border-border bg-muted\">\n        <img\n          src=\"https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1600&q=80\"\n          alt=\"An empty, sunlit open-plan office\"\n          className=\"size-full object-cover grayscale\"\n          loading=\"lazy\"\n        />\n      </div>\n\n      <article className=\"mt-12 w-full max-w-2xl\">\n        <div className=\"flex flex-col gap-5 text-[15px]/relaxed text-foreground/80\">\n          <p className=\"first-letter:float-left first-letter:mr-3 first-letter:text-6xl first-letter:leading-[0.7] first-letter:font-bold first-letter:text-foreground\">\n            For years the standup was sacred. Fifteen minutes, cameras on,\n            everyone reciting what they did yesterday. It felt productive, and\n            that was exactly the problem. We were performing progress instead of\n            making it.\n          </p>\n\n          <h2 className=\"mt-4 font-heading text-xl font-semibold tracking-tight text-foreground\">\n            What we changed\n          </h2>\n          <p>\n            Each morning every person writes three lines in a shared thread:\n            what moved, what is stuck, and where they need a decision. No\n            meeting, no waiting for a turn to speak. The whole team reads it\n            over coffee and replies where it matters.\n          </p>\n\n          <blockquote className=\"my-3 border-y border-border py-6 text-center text-xl font-medium tracking-tight text-balance text-foreground\">\n            &ldquo;A meeting interrupts everyone at once. A written update lets\n            each person choose when to be interrupted.&rdquo;\n          </blockquote>\n\n          <h2 className=\"mt-4 font-heading text-xl font-semibold tracking-tight text-foreground\">\n            The results\n          </h2>\n          <p>\n            The calendar was the first thing to change. Mornings opened up, and\n            deep work stopped competing with a recurring block at ten. But the\n            larger shift was in the quality of our decisions, which now arrive\n            with context attached rather than half-remembered from a call.\n          </p>\n          <ul className=\"flex list-disc flex-col gap-1.5 pl-5 marker:text-muted-foreground/40\">\n            <li>Recurring meeting time fell by roughly six hours per person</li>\n            <li>Decisions are searchable, with the reasoning kept alongside</li>\n            <li>\n              New hires onboard by reading, not by asking the same questions\n            </li>\n          </ul>\n        </div>\n\n        <Separator className=\"my-8\" />\n\n        <div className=\"flex flex-wrap items-center justify-between gap-4\">\n          <div className=\"flex flex-wrap gap-2\">\n            {tags.map((tag) => (\n              <Badge key={tag} variant=\"outline\">\n                {tag}\n              </Badge>\n            ))}\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <Button variant=\"ghost\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"Bookmark\"\n                tabler=\"IconBookmark\"\n                hugeicons=\"BookmarkIcon\"\n                phosphor=\"Bookmark\"\n                remixicon=\"RiBookmarkLine\"\n                data-icon=\"inline-start\"\n                aria-hidden=\"true\"\n              />\n              Save\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"Share\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"Share\"\n                remixicon=\"RiShareForwardLine\"\n                data-icon=\"inline-start\"\n                aria-hidden=\"true\"\n              />\n              Share\n            </Button>\n          </div>\n        </div>\n      </article>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "1576px",
    "tier": "free"
  },
  "categories": [
    "article"
  ],
  "type": "registry:block"
}