// Non-Profits · Digital Infrastructure

function NonProfitsDigitalPage({ setRoute }) {
  return (
    <div data-screen-label="10b Non-Profits · Digital Infrastructure">
      <section className="q-svc-hero2" style={{ padding: '0 0 120px' }}>
        <SiteNav route="nonprofits-digital" setRoute={setRoute} theme="dark" />
        <div className="q-wrap q-svc-hero2-inner" style={{ paddingTop: 120 }}>
          <div className="q-eyebrow q-eyebrow--dark">Non-Profits · Digital Infrastructure</div>
          <h1>Digital infrastructure built <em>for the complexity of mission-driven work.</em></h1>
          <p className="lede">
            Complex nonprofits run demanding digital environments — multiple audiences, high-stakes donor relationships, program content that needs to be both accessible and credible, and internal operations that depend on systems working together. We have built this kind of infrastructure for organizations like yours. We know what it takes and what it costs to get it wrong.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a className="qbtn qbtn--paper">Start a conversation <Arrow /></a>
            <a className="qbtn qbtn--outline-dark" onClick={() => setRoute('nonprofits')}>Back to Non-Profits <Arrow /></a>
          </div>
          <dl className="q-svc-hero2-meta">
            <div><dt>Entry point</dt><dd>Technology Assessment</dd></div>
            <div><dt>Reference engagement</dt><dd>The Women's Edge — website and CMS rebuild</dd></div>
            <div><dt>Who leads</dt><dd>Senior strategist and technical director</dd></div>
          </dl>
        </div>
      </section>

      <section className="q-situation">
        <div className="q-wrap">
          <div className="q-situation-grid">
            <div>
              <div className="q-eyebrow">The situation</div>
            </div>
            <div>
              <p><strong>The digital presence of most complex nonprofits reflects decisions made years ago and extended since.</strong> The website was built for a previous version of the organization. The CMS requires technical expertise to maintain, which means it doesn't get maintained — content goes stale, pages accumulate, the editorial hierarchy that made sense at launch gradually loses coherence. The result is a digital face that no longer reflects the organization's actual sophistication or ambitions.</p>
              <p><strong>Internal operations often have the same problem at a different layer.</strong> Donor management, program data, communications workflows, and reporting tools were each added when they were needed and were rarely designed to work together. Staff carry the weight of system fragmentation in their daily work — exporting from one system to import into another, maintaining multiple records of the same information, working around tools rather than through them.</p>
              <p><strong>A technology rebuild is a real organizational commitment.</strong> Done well, it returns time to staff, strengthens the donor and public-facing presence, and creates an infrastructure that can support AI capabilities as those tools develop. Done poorly, it produces a site that looks good at launch and degrades operationally within a year. The difference is whether the partner doing the work has genuine organizational context or is executing to a spec.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="q-entry-states">
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow">What we build</div>
            <h2>Three types of work, <em>one integrated team.</em></h2>
            <p>Digital infrastructure for complex nonprofits rarely fits a single category. Most engagements span more than one of these areas — and the same team handles all of it.</p>
          </div>
          <div className="q-entry-list">

            <div className="q-entry-item">
              <div className="q-entry-num">01</div>
              <div className="q-entry-title">
                <span className="label">Websites and digital presence</span>
                A site that serves the organization's actual audiences — not every version of what it could be.
              </div>
              <div className="q-entry-body">
                <p>Nonprofit websites fail for predictable reasons: too many stakeholder voices, no clear hierarchy of audience, content that accumulates without a strategy for what to retire. The result is a site that is comprehensive and unclear simultaneously — exhausting to maintain and difficult for donors, funders, and the public to navigate.</p>
                <p>We built The Women's Edge's website as a complete rebuild — designed for a sophisticated global audience, with a content architecture and CMS that the organization's staff can actually maintain. The design reflects where the organization is now, not where it was when the previous site was built. That distinction matters more than it sounds: a site that doesn't reflect the organization's current positioning creates subtle credibility problems with every audience it's trying to reach.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">02</div>
              <div className="q-entry-title">
                <span className="label">CMS and content infrastructure</span>
                A content system the people who own it can actually use.
              </div>
              <div className="q-entry-body">
                <p>The right CMS for a complex nonprofit is not the most powerful one — it's the one that communications staff, program teams, and regional administrators can use without a developer in the room. Most organizations have the opposite: a system that requires technical expertise to maintain, which means sections go unmaintained, updates require IT tickets, and the people doing program work can't tell their own stories without going through a bottleneck.</p>
                <p>We also build for AI readiness — structured content that can be queried and surfaced by AI tools as those capabilities develop. An organization's knowledge base, program history, and published content are real assets. The infrastructure you build now should make those assets usable for the tools that are coming, not require a separate rebuild to do so.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">03</div>
              <div className="q-entry-title">
                <span className="label">Custom tools and integrations</span>
                When off-the-shelf doesn't fit how the organization actually works.
              </div>
              <div className="q-entry-body">
                <p>Donor management platforms, program data systems, grant tracking, event management, internal communications — complex nonprofits run on a combination of enterprise software and workarounds that were built for an earlier version of the organization's needs. Some of it still works well. Some of it is quietly holding everything back.</p>
                <p>We build custom tools and integrations when the standard options don't serve the actual workflow — and we replace fragile custom systems when the right off-the-shelf tool exists and just needs to be properly implemented. We make that call honestly rather than defaulting to whichever answer requires more work from us.</p>
              </div>
            </div>

          </div>
        </div>
      </section>

      <section className="q-process">
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow q-eyebrow--dark">How the work flows</div>
            <h2>Discover. Design. Build. Launch.</h2>
            <p>The sequence is consistent across engagements. The depth of each phase depends on the scope and complexity of the organization's environment.</p>
          </div>
          <div className="q-process-phases">
            <div className="q-phase">
              <div className="step">Phase 01</div>
              <h4>Discover</h4>
              <p>Stakeholder interviews, content audit, technical audit, systems mapping. We learn the organization — its audiences, its content, its constraints, and its staff capacity — before we design anything.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 02</div>
              <h4>Design</h4>
              <p>Architecture, content strategy, information hierarchy, system design. We make explicit decisions rather than inheriting existing ones by default. Every significant choice gets a rationale your team can evaluate and revisit.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 03</div>
              <h4>Build</h4>
              <p>We build it. The same team that did the discovery and design — no handoff to a separate development team, no version of the plan lost in translation between the people who designed it and the people who built it.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 04</div>
              <h4>Launch and Support</h4>
              <p>A launch that is the beginning of the relationship, not the end of it. We train the staff who will maintain the system, document what we built and why, and stay involved long enough to know it's actually working.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="q-offer">
        <div className="q-wrap">
          <div className="q-section-head" style={{ marginBottom: 40 }}>
            <div className="q-eyebrow">The entry offer</div>
            <h2>Start with a <em>Technology Assessment.</em></h2>
            <p>A contained first engagement. We audit the existing digital environment, assess what's working and what isn't, and produce a written recommendation for what to build, in what order, and why — scoped and priced before you commit to anything larger.</p>
          </div>
          <div className="q-offer-card">
            <div>
              <div className="what">Technology Assessment</div>
              <h3>A clear read on the current environment and an honest plan for what comes next.</h3>
              <p>One to three weeks, depending on scope. A senior strategist and a technical director reviewing your existing systems, talking to the people who use them, and producing a written assessment you can act on — or bring to your board.</p>
              <p>We quote a fixed price in the first conversation. The assessment stands on its own — it is not a loss leader for a larger engagement, and it is designed to be useful whether or not we end up being the ones to build what follows.</p>
            </div>
            <div>
              <dl className="q-offer-specs">
                <div><dt>Duration</dt><dd>1–3 weeks</dd></div>
                <div><dt>Team</dt><dd>Senior strategist + technical director</dd></div>
                <div><dt>Format</dt><dd>Technical audit + stakeholder interviews</dd></div>
                <div><dt>Output</dt><dd>Written assessment and prioritized recommendations</dd></div>
              </dl>
              <ul className="q-offer-includes">
                <li>Audit of existing digital infrastructure and systems</li>
                <li>Interviews with content owners, administrators, and key stakeholders</li>
                <li>Honest assessment of what's working and what isn't</li>
                <li>Prioritized recommendations with rationale for sequencing</li>
                <li>Written deliverable suitable for board or leadership presentation</li>
              </ul>
              <a className="qbtn qbtn--primary">Start the conversation <Arrow /></a>
            </div>
          </div>
        </div>
      </section>

      <section className="q-faq">
        <div className="q-wrap">
          <div className="q-section-head" style={{ marginBottom: 24 }}>
            <div className="q-eyebrow">What nonprofit leaders usually ask</div>
            <h2>Common questions.</h2>
          </div>
          <div className="q-faq-list">
            {[
              { q: 'How long does a full website rebuild take?', a: 'Depends on scope, stakeholder complexity, and content volume. More focused engagements can move in a few months. More complex rebuilds — organizations with multiple audiences, large content archives, or significant integration requirements — take longer. We scope it specifically and honestly before you commit to anything.' },
              { q: 'Can you work with our existing CMS, or do you recommend replacing it?', a: 'Both, depending on what the assessment finds. We don\'t have a preferred platform we\'re trying to sell. We recommend what actually fits the organization\'s needs, content volume, and the realistic capacity of the staff who will maintain it.' },
              { q: 'What does "AI-ready" mean for a CMS?', a: 'It means structured content that can be queried and surfaced by AI tools — for search, content assistance, or as a foundation for organization-specific AI applications. We build for this now so the capability is available as the tools develop, rather than requiring a separate rebuild when you\'re ready to use them.' },
              { q: 'We have limited internal IT capacity. How do you handle ongoing support?', a: 'We build for maintainability first — systems that the people who own them can actually manage, with documentation that doesn\'t require us to interpret it. For organizations with limited IT capacity, that constraint shapes the technical decisions from the start, not as an afterthought.' },
              { q: 'Do you handle the full project or just part of it?', a: 'The full project — discovery through launch and ongoing support. We don\'t hand off to a separate development team. The same people who do the strategic and design work build the thing and stand behind it after launch.' },
            ].map((f, i) => (
              <div className="q-faq-item" key={i}>
                <div className="q">{f.q}</div>
                <div className="a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="q-svc-cta">
        <div className="q-wrap">
          <div className="q-svc-cta-inner">
            <div>
              <div className="q-eyebrow q-eyebrow--dark">Next step</div>
              <h2>Tell us what you are <em>working through.</em></h2>
            </div>
            <div>
              <p>A first conversation is twenty minutes, specific, and free. If a Technology Assessment is the right next step, we scope it in writing before you commit to anything.</p>
              <div style={{ marginTop: 24, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a className="qbtn qbtn--paper" href="mailto:info@quarterdeck.io">Email info@quarterdeck.io <Arrow /></a>
                <a className="qbtn qbtn--outline-dark" onClick={() => setRoute('nonprofits')}>Back to Non-Profits <Arrow /></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { NonProfitsDigitalPage });