{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-mission-and-values-vertical-step-timeline","type":"registry:block","title":"Vertical Step Timeline","files":[{"path":"components/blocks/portfolio/portfolio-mission-and-values/vertical-step-timeline.tsx","content":"import { CalendarDays } from \"lucide-react\";\n\nexport default function MissionAndValuesTimeline() {\n  const timelineEvents = [\n    {\n      year: \"2015\",\n      title: \"The Beginning\",\n      description:\n        \"Founded with a mission to create digital products that make a difference.\",\n      value: \"Vision\",\n      valueDescription: \"Looking beyond what exists to what could be.\",\n    },\n    {\n      year: \"2017\",\n      title: \"First Major Client\",\n      description:\n        \"Partnered with industry leaders to transform their digital presence.\",\n      value: \"Excellence\",\n      valueDescription:\n        \"Committing to exceptional quality in everything we do.\",\n    },\n    {\n      year: \"2019\",\n      title: \"Team Expansion\",\n      description: \"Grew from 5 to 25 team members across three countries.\",\n      value: \"Collaboration\",\n      valueDescription:\n        \"Bringing diverse perspectives together to solve complex challenges.\",\n    },\n    {\n      year: \"2021\",\n      title: \"Innovation Lab\",\n      description:\n        \"Launched our dedicated R&D department to explore emerging technologies.\",\n      value: \"Innovation\",\n      valueDescription: \"Continuously seeking new ways to create impact.\",\n    },\n    {\n      year: \"2023\",\n      title: \"Global Recognition\",\n      description:\n        \"Recognized with multiple awards for our innovative approach and impact.\",\n      value: \"Purpose\",\n      valueDescription:\n        \"Making meaningful contributions that matter in the world.\",\n    },\n  ];\n\n  return (\n    <section className=\"py-16 md:py-24\">\n      <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n        {/* Header */}\n        <div className=\"mb-16 text-center\">\n          <h2 className=\"mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n            Our Journey & Values\n          </h2>\n          <p className=\"text-muted-foreground mx-auto max-w-3xl text-lg\">\n            How our mission evolved and the core values we developed along the\n            way.\n          </p>\n        </div>\n\n        {/* Timeline */}\n        <div className=\"mx-auto max-w-4xl\">\n          <div className=\"relative\">\n            {/* Vertical Line */}\n            <div className=\"bg-border absolute top-0 left-0 hidden h-full w-px md:left-1/2 md:-ml-px md:block\" />\n\n            {/* Timeline Events */}\n            {timelineEvents.map((event, index) => (\n              <div\n                key={index}\n                className={`relative ${index !== 0 ? \"mt-12 md:mt-20\" : \"\"}`}\n              >\n                {/* Year Badge */}\n                <div className=\"mb-6 flex items-center justify-center md:absolute md:left-1/2 md:z-10 md:mb-0 md:-ml-11\">\n                  <div className=\"bg-primary text-primary-foreground flex h-9 w-20 items-center justify-center rounded-full text-sm font-medium shadow-sm\">\n                    {event.year}\n                  </div>\n                </div>\n\n                {/* Content Cards */}\n                <div\n                  className={`relative flex flex-col gap-6 md:grid md:grid-cols-2 ${index % 2 === 0 ? \"md:flex-row\" : \"md:flex-row-reverse\"}`}\n                >\n                  {/* Event Card */}\n                  <div className={`bg-card rounded-lg border p-6 shadow-sm`}>\n                    <div className=\"mb-4 flex items-center gap-2\">\n                      <CalendarDays className=\"text-muted-foreground h-5 w-5\" />\n                      <h3 className=\"text-xl font-semibold\">{event.title}</h3>\n                    </div>\n                    <p className=\"text-muted-foreground\">{event.description}</p>\n                  </div>\n\n                  {/* Value Card */}\n                  <div\n                    className={`bg-primary/5 rounded-lg border p-6 shadow-sm`}\n                  >\n                    <h3 className=\"mb-2 text-lg font-medium\">\n                      Value:{\" \"}\n                      <span className=\"text-primary font-semibold\">\n                        {event.value}\n                      </span>\n                    </h3>\n                    <p className=\"text-muted-foreground\">\n                      {event.valueDescription}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n\n          {/* Current Mission Statement */}\n          <div className=\"bg-card mt-16 rounded-lg border p-8 text-center shadow-md\">\n            <h3 className=\"mb-4 text-2xl font-bold\">Our Mission Today</h3>\n            <p className=\"text-muted-foreground text-lg\">\n              To create impactful digital experiences that empower organizations\n              and individuals while upholding our values of innovation,\n              excellence, collaboration, vision, and purpose.\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-mission-and-values/vertical-step-timeline.tsx"}],"description":"A vertical timeline that marks milestones and values down the page in order. Use it to trace how your mission took shape over time for visitors.","dependencies":["lucide-react"]}