{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-mission-and-values-story-first-narrative","type":"registry:block","title":"Story First Narrative","files":[{"path":"components/blocks/portfolio/portfolio-mission-and-values/story-first-narrative.tsx","content":"import { Check } from \"lucide-react\";\n\nexport default function MissionAndValuesStoryFirst() {\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        {/* Personal Story */}\n        <div className=\"mx-auto mb-16 max-w-4xl\">\n          <h2 className=\"mb-6 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n            Our Journey\n          </h2>\n\n          <div className=\"prose dark:prose-invert lg:prose-lg max-w-none\">\n            <p>\n              It all began in a small apartment in 2015. With nothing but a\n              laptop and a vision, we set out to change how people interact with\n              digital products. The early days were challenging — long nights,\n              countless iterations, and moments of doubt.\n            </p>\n\n            <p>\n              Our first breakthrough came when we partnered with a local\n              business facing a critical challenge. By focusing on their unique\n              needs rather than applying a one-size-fits-all approach, we\n              created a solution that transformed their operations. That success\n              taught us a fundamental lesson: genuine understanding of\n              people&apos;s needs is the foundation of meaningful innovation.\n            </p>\n\n            <p>\n              As we grew from that two-person team to the organization we are\n              today, we&apos;ve held onto that principle. Whether working with\n              startups or established enterprises, we approach each project with\n              the same dedication to understanding, creating, and delivering\n              solutions that make a difference.\n            </p>\n          </div>\n        </div>\n\n        {/* Mission Statement */}\n        <div className=\"bg-card mx-auto mb-12 max-w-3xl rounded-lg border p-8 text-center shadow-sm\">\n          <h3 className=\"mb-4 text-2xl font-bold\">Our Mission</h3>\n          <p className=\"text-muted-foreground text-lg\">\n            To empower businesses and individuals through thoughtful digital\n            solutions that balance innovation with human-centered design.\n          </p>\n        </div>\n\n        {/* Core Values List */}\n        <div className=\"mx-auto max-w-3xl\">\n          <h3 className=\"mb-6 text-center text-2xl font-bold\">\n            Our Core Values\n          </h3>\n\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            {[\n              {\n                title: \"Empathy First\",\n                description:\n                  \"We listen before we create, understanding needs before proposing solutions.\",\n              },\n              {\n                title: \"Continuous Learning\",\n                description:\n                  \"We embrace change and constantly seek new knowledge and perspectives.\",\n              },\n              {\n                title: \"Quality Craftsmanship\",\n                description:\n                  \"We take pride in our work and pay attention to every detail.\",\n              },\n              {\n                title: \"Transparent Partnership\",\n                description:\n                  \"We build relationships based on honesty, clarity, and mutual respect.\",\n              },\n            ].map((value, i) => (\n              <div\n                key={i}\n                className=\"flex items-start gap-3 rounded-md border p-4\"\n              >\n                <div className=\"bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  <Check className=\"h-3.5 w-3.5\" />\n                </div>\n                <div>\n                  <h4 className=\"font-medium\">{value.title}</h4>\n                  <p className=\"text-muted-foreground mt-1 text-sm\">\n                    {value.description}\n                  </p>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-mission-and-values/story-first-narrative.tsx"}],"description":"A reading focused section that tells your origin story in flowing paragraphs. Use it to explain how a studio or person came to be and what drives it.","dependencies":["lucide-react"]}