{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notion-blog-page-shadcnui",
  "type": "registry:block",
  "title": "Notion Blog Page",
  "description": "Notion-style publishing playbook with rich text, toggles, and supporting visuals",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/notion-blog-page.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { BookOpen, ChevronDown, Clock, Quote } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst toggleSections = [\n  {\n    title: \"Morning focus ritual\",\n    summary: \"Anchor your attention before anything else.\",\n    content: [\n      \"Open your doc before you open your inbox. Protect the first five minutes for intention setting.\",\n      \"Free-write everything in your head for three minutes. Highlight the sentence that has the most energy.\",\n      \"Set a single outcome for this session. When the timer ends, the outcome should be either done or clearly moved forward.\",\n    ],\n  },\n  {\n    title: \"Drafting in layers\",\n    summary: \"Treat each pass as a different job description.\",\n    content: [\n      \"Pass one: outline in short bullet blocks. Ignore tone, grammar, or flow.\",\n      \"Pass two: expand each bullet into a paragraph that answers “so what?” for the reader.\",\n      \"Pass three: polish transitions, add a visual, and cut at least 10% of the words.\",\n    ],\n  },\n  {\n    title: \"Publishing without panic\",\n    summary: \"Make the final review a celebration, not a scramble.\",\n    content: [\n      \"Read the draft out loud once. Mark sentences that trip you up-they are almost always too long.\",\n      \"Paste the introduction into a new page. If it still makes sense, you’re ready. If not, keep tightening.\",\n      \"Ship with a note to yourself about what felt easy. Capture it inside your writing playbook.\",\n    ],\n  },\n];\n\nconst miniGallery = [\n  {\n    src: \"https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?auto=format&fit=crop&w=900&q=80\",\n    alt: \"Wooden desk with open notebook and coffee\",\n    caption: \"A quiet desk lets the outline breathe.\",\n  },\n  {\n    src: \"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80\",\n    alt: \"Highlights in a notebook with pen\",\n    caption: \"Colour-code revisions by pass.\",\n  },\n];\n\nconst readingList = [\n  \"On Writing Well - William Zinsser\",\n  \"The Art of Slow Productivity - Cal Newport\",\n  \"Working in Public - Nadia Eghbal\",\n];\n\nconst cadence = [\n  { label: \"Monday\", detail: \"Research & interviews\" },\n  { label: \"Wednesday\", detail: \"Draft messy outline\" },\n  { label: \"Friday\", detail: \"Edit, ship, reflect\" },\n];\n\nexport function NotionBlogPage() {\n  const [openToggle, setOpenToggle] = useState<number | null>(0);\n\n  const handleToggle = (index: number) => {\n    setOpenToggle((prev) => (prev === index ? null : index));\n  };\n\n  return (\n    <section className=\"w-full bg-muted/30 px-4 py-16 md:py-24\">\n      <motion.div\n        initial={{ opacity: 0, y: 24 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.6, ease: [0.23, 1, 0.32, 1] }}\n        className=\"mx-auto max-w-5xl overflow-hidden rounded-3xl border border-border/40 bg-background shadow-xl shadow-black/5\"\n      >\n        <div className=\"relative h-56 w-full bg-gradient-to-br from-amber-100 via-white to-slate-100 md:h-64\">\n          <motion.div\n            initial={{ scale: 1.08, opacity: 0 }}\n            animate={{ scale: 1, opacity: 1 }}\n            transition={{ delay: 0.1, duration: 0.8, ease: [0.23, 1, 0.32, 1] }}\n            className=\"absolute inset-0\"\n          >\n            <img\n              src=\"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80\"\n              alt=\"Writer desk with scattered notes\"\n              className=\"w-full h-full object-cover\"\n            />\n          </motion.div>\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ delay: 0.4, duration: 0.6 }}\n            className=\"absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent\"\n          />\n          <motion.div\n            initial={{ opacity: 0, y: 12 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 0.5, duration: 0.5 }}\n            className=\"absolute bottom-6 left-6 flex items-center gap-3 rounded-full bg-background/80 px-4 py-2 text-sm font-medium text-muted-foreground backdrop-blur\"\n          >\n            <BookOpen className=\"h-4 w-4 text-primary\" />\n            Mindful Publishing Playbook\n          </motion.div>\n        </div>\n\n        <div className=\"space-y-12 px-6 py-10 md:px-12 md:py-16\">\n          <motion.header\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 0.1, duration: 0.6 }}\n            className=\"space-y-4\"\n          >\n            <div className=\"flex flex-wrap items-center gap-3 text-sm text-muted-foreground\">\n              <span className=\"inline-flex items-center gap-2 rounded-full bg-muted/40 px-3 py-1 font-medium\">\n                <BookOpen className=\"h-4 w-4 text-primary\" />\n                Field Notes\n              </span>\n              <div className=\"flex items-center gap-2\">\n                <Clock className=\"h-4 w-4 text-muted-foreground/70\" />9 min read\n              </div>\n              <span>Updated November 2025</span>\n            </div>\n            <h1 className=\"text-3xl font-semibold tracking-tight text-foreground md:text-4xl lg:text-5xl\">\n              Slow Publishing: A Notion Workflow for Thoughtful Blogs\n            </h1>\n            <p className=\"max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg\">\n              Creative focus doesn’t arrive by accident-it is the product of\n              small rituals, generous constraints, and a system that remembers\n              what works. This Notion-style page captures the cadence our team\n              uses to ship a thoughtful story every Friday without burning out.\n            </p>\n          </motion.header>\n\n          <div className=\"grid gap-12 md:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]\">\n            <motion.article\n              initial={{ opacity: 0, y: 12 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.2, duration: 0.6 }}\n              className=\"space-y-8 text-base leading-relaxed text-muted-foreground\"\n            >\n              <p>\n                We treat every article as a field note: a snapshot of what we\n                are learning in public. The goal is not to chase virality but to\n                document a craft in motion. A good post leaves breadcrumbs for\n                future us and an invitation for readers to try the practice\n                themselves.\n              </p>\n              <p>\n                The workflow begins on Monday morning. Instead of running toward\n                a blank page, we pull from an idea backlog curated throughout\n                the week. Each card includes a “why now” note and a quick voice\n                memo. When a theme repeats three times, it earns a dedicated\n                spot on the publishing calendar.\n              </p>\n              <div className=\"flex flex-col gap-4 rounded-2xl border border-border/60 bg-muted/30 p-6 md:flex-row\">\n                <div className=\"relative h-40 overflow-hidden rounded-xl bg-muted md:w-1/2\">\n                  <img\n                    src=\"https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=900&q=80\"\n                    alt=\"Sticky notes arranged on a wall\"\n                    className=\"w-full h-full object-cover\"\n                  />\n                </div>\n                <div className=\"md:w-1/2\">\n                  <h3 className=\"mb-2 text-lg font-semibold text-foreground\">\n                    Idea backlog hygiene\n                  </h3>\n                  <p className=\"text-sm text-muted-foreground\">\n                    Tag backlog cards by energy level, not topic. High-energy\n                    cards are ready to outline quickly, while low-energy cards\n                    need more research or a better story.\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"space-y-4 rounded-2xl border-l-4 border-primary/60 bg-primary/5 p-6 text-muted-foreground\">\n                <div className=\"flex items-start gap-3\">\n                  <Quote className=\"mt-1 h-6 w-6 text-primary\" />\n                  <div>\n                    <p className=\"text-base font-medium text-foreground\">\n                      Slow is smooth. Smooth becomes fast.\n                    </p>\n                    <p className=\"text-sm\">\n                      We don’t remove friction; we design the right friction. If\n                      a draft feels rushed, it usually means we skipped the\n                      check-in block or jumped straight to editing.\n                    </p>\n                  </div>\n                </div>\n              </div>\n\n              <div className=\"space-y-3\">\n                {toggleSections.map((section, index) => (\n                  <div\n                    key={section.title}\n                    className=\"overflow-hidden rounded-xl border border-border/50 bg-background\"\n                  >\n                    <button\n                      type=\"button\"\n                      onClick={() => handleToggle(index)}\n                      className=\"flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/40\"\n                    >\n                      <div>\n                        <p className=\"text-sm font-medium text-foreground\">\n                          {section.title}\n                        </p>\n                        <p className=\"text-sm text-muted-foreground\">\n                          {section.summary}\n                        </p>\n                      </div>\n                      <motion.span\n                        animate={{ rotate: openToggle === index ? 180 : 0 }}\n                        transition={{ duration: 0.2 }}\n                      >\n                        <ChevronDown className=\"h-5 w-5 text-muted-foreground\" />\n                      </motion.span>\n                    </button>\n                    <AnimatePresence initial={false}>\n                      {openToggle === index && (\n                        <motion.div\n                          key=\"content\"\n                          initial={{ height: 0, opacity: 0 }}\n                          animate={{ height: \"auto\", opacity: 1 }}\n                          exit={{ height: 0, opacity: 0 }}\n                          transition={{ duration: 0.25 }}\n                          className=\"px-4 pb-4\"\n                        >\n                          <ul className=\"list-disc space-y-2 pl-6 text-sm text-muted-foreground\">\n                            {section.content.map((item) => (\n                              <li key={item}>{item}</li>\n                            ))}\n                          </ul>\n                        </motion.div>\n                      )}\n                    </AnimatePresence>\n                  </div>\n                ))}\n              </div>\n            </motion.article>\n\n            <motion.aside\n              initial={{ opacity: 0, y: 12 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.3, duration: 0.6 }}\n              className=\"space-y-8\"\n            >\n              <div className=\"rounded-2xl border border-border/60 bg-muted/20 p-6\">\n                <h3 className=\"mb-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground/80\">\n                  Weekly cadence\n                </h3>\n                <ul className=\"space-y-2 text-sm text-muted-foreground\">\n                  {cadence.map((item) => (\n                    <li\n                      key={item.label}\n                      className=\"flex items-start justify-between gap-4 rounded-lg bg-background/80 px-3 py-2\"\n                    >\n                      <span className=\"font-medium text-foreground\">\n                        {item.label}\n                      </span>\n                      <span className=\"text-right text-muted-foreground/80\">\n                        {item.detail}\n                      </span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n\n              <div className=\"rounded-2xl border border-border/60 bg-background p-6\">\n                <h3 className=\"mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground/80\">\n                  Reading stack\n                </h3>\n                <ul className=\"space-y-2 text-sm text-muted-foreground\">\n                  {readingList.map((title) => (\n                    <li key={title} className=\"flex items-center gap-2\">\n                      <span className=\"inline-block h-2 w-2 rounded-full bg-primary\" />\n                      {title}\n                    </li>\n                  ))}\n                </ul>\n              </div>\n\n              <div className=\"space-y-4\">\n                {miniGallery.map((image) => (\n                  <div\n                    key={image.src}\n                    className=\"overflow-hidden rounded-2xl border border-border/50 bg-background\"\n                  >\n                    <div className=\"relative h-40 w-full\">\n                      <img\n                        src={image.src}\n                        alt={image.alt}\n                        className=\"w-full h-full object-cover\"\n                      />\n                    </div>\n                    <p className=\"px-4 py-3 text-sm text-muted-foreground\">\n                      {image.caption}\n                    </p>\n                  </div>\n                ))}\n              </div>\n            </motion.aside>\n          </div>\n\n          <motion.footer\n            initial={{ opacity: 0, y: 12 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 0.35, duration: 0.6 }}\n            className=\"space-y-6 rounded-2xl border border-dashed border-border/60 bg-muted/20 p-6 text-sm text-muted-foreground\"\n          >\n            <h3 className=\"text-base font-semibold text-foreground\">\n              Friday reflection prompts\n            </h3>\n            <ul className=\"space-y-2\">\n              <li>\n                • What sentence did readers highlight the most? Add it to your\n                intuition library.\n              </li>\n              <li>\n                • What part of the workflow felt spacious? Capture the moment\n                inside your rituals toggle.\n              </li>\n              <li>• What will future you thank you for writing down today?</li>\n            </ul>\n            <p>\n              Iterate on the process, not just the prose. The page you are\n              reading is a living document-duplicate it, remix the blocks, and\n              keep the parts that help you publish with calm confidence.\n            </p>\n          </motion.footer>\n        </div>\n      </motion.div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/notion-blog-page-shadcnui.tsx"
    }
  ]
}