{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"timeline-section-1","title":"Timeline Section 1","description":"Timeline section 1 with centered content, background contrast section, rounded visuals, changelog timeline.","files":[{"path":"components/pro-blocks/landing-page/timeline-sections/timeline-section-1.tsx","content":"type TimelineItem = {\n  date: string\n  dateTime?: string\n  title: string\n  description: string\n  changes?: string[]\n}\n\ntype Props = {\n  taglineText?: string\n  title?: string\n  description?: string\n  items?: TimelineItem[]\n}\n\nconst defaultProps = {\n  taglineText: \"Timeline section 1\",\n  title: \"Product changelog\",\n  description:\n    \"See what's new in our product. Track the latest improvements, releases, and fixes shipped across the product.\",\n  items: [\n    {\n      date: \"Jun 10, 2026\",\n      dateTime: \"2026-06-10\",\n      title: \"Workflow automation updates\",\n      description:\n        \"New automation controls make it easier to build repeatable workflows and monitor every run from one place.\",\n      changes: [\n        \"Added reusable workflow templates for common team processes.\",\n        \"Improved run history with clearer status and timing details.\",\n      ],\n    },\n    {\n      date: \"May 28, 2026\",\n      dateTime: \"2026-05-28\",\n      title: \"Collaboration improvements\",\n      description:\n        \"Shared spaces now keep product updates, decisions, and implementation details connected across teams.\",\n      changes: [\n        \"Introduced mention previews for linked teammates and projects.\",\n        \"Added activity summaries for recently updated changelog entries.\",\n      ],\n    },\n    {\n      date: \"May 12, 2026\",\n      dateTime: \"2026-05-12\",\n      title: \"Performance and reliability\",\n      description:\n        \"This release focuses on faster page loads, smoother navigation, and stronger defaults for large workspaces.\",\n      changes: [\n        \"Reduced initial payload size for changelog-heavy pages.\",\n        \"Improved empty and loading states throughout the dashboard.\",\n      ],\n    },\n  ] satisfies TimelineItem[],\n}\n\nexport function TimelineSection1({\n  taglineText = defaultProps.taglineText,\n  title = defaultProps.title,\n  description = defaultProps.description,\n  items = defaultProps.items,\n}: Props) {\n  return (\n    <section\n      className=\"bg-background\"\n      aria-labelledby=\"timeline-section-1-heading\"\n    >\n      <div className=\"wrapper\">\n        <div className=\"flex flex-col items-center gap-12 md:gap-16\">\n          <div className=\"mx-auto flex max-w-xl flex-col items-start md:items-center md:text-center\">\n            <div className=\"tagline\">{taglineText}</div>\n            <h2 id=\"timeline-section-1-heading\" className=\"heading-lg\">\n              {title}\n            </h2>\n            <p className=\"paragraph\">{description}</p>\n          </div>\n\n          <div className=\"mx-auto w-full max-w-3xl\" role=\"list\">\n            {items.map((item, index) => (\n              <article\n                key={`${item.date}-${item.title}`}\n                className=\"grid grid-cols-[2rem_minmax(0,1fr)] gap-x-4 md:grid-cols-[8rem_3rem_minmax(0,1fr)] md:gap-x-6\"\n                role=\"listitem\"\n              >\n                <div className=\"hidden text-right md:block\">\n                  <time\n                    dateTime={item.dateTime ?? item.date}\n                    className=\"text-sm text-muted-foreground\"\n                  >\n                    {item.date}\n                  </time>\n                </div>\n\n                <div\n                  className=\"relative row-span-2 flex justify-center md:row-span-1\"\n                  aria-hidden=\"true\"\n                >\n                  <div className=\"absolute top-0 h-full w-px bg-border\" />\n                  <div className=\"relative mt-1.5 size-1.5 rounded-full bg-foreground ring-4 ring-foreground/10 md:mt-2\" />\n                </div>\n\n                <div\n                  className={`pb-10 ${\n                    index === items.length - 1 ? \"pb-0\" : \"\"\n                  }`}\n                >\n                  <time\n                    dateTime={item.dateTime ?? item.date}\n                    className=\"mb-3 block text-sm text-muted-foreground md:hidden\"\n                  >\n                    {item.date}\n                  </time>\n                  <h3 className=\"heading-xs\">{item.title}</h3>\n                  <p className=\"paragraph-sm\">{item.description}</p>\n\n                  {item.changes && item.changes.length > 0 ? (\n                    <ul className=\"mt-4 flex flex-col gap-2\" role=\"list\">\n                      {item.changes.map((change) => (\n                        <li\n                          key={change}\n                          className=\"flex gap-3 text-sm/6 text-muted-foreground\"\n                        >\n                          <ul className=\"list-inside list-disc\">\n                            <li>{change}</li>\n                          </ul>\n                        </li>\n                      ))}\n                    </ul>\n                  ) : null}\n                </div>\n              </article>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n","type":"registry:component"}],"meta":{"tags":["timeline","roadmap","changelog","process","steps"]},"categories":["timeline-sections"],"type":"registry:block"}