// Higher Education · Digital Infrastructure

function HigherEdDigitalPage({ setRoute }) {
  return (
    <div data-screen-label="09b Higher Ed · Digital Infrastructure">
      <section className="q-svc-hero2" style={{ padding: '0 0 120px' }}>
        <SiteNav route="higher-ed-digital" setRoute={setRoute} theme="dark" />
        <div className="q-wrap q-svc-hero2-inner" style={{ paddingTop: 120 }}>
          <div className="q-eyebrow q-eyebrow--dark">Higher Education · Digital Infrastructure</div>
          <h1>Digital infrastructure <em>built for the complexity of a real institution.</em></h1>
          <p className="lede">
            Higher education institutions run some of the most demanding digital environments of any organization type — multiple audiences, decades of content, interlocking systems, and stakeholder expectations that span faculty, students, alumni, donors, and the public. We have done this work at institutional scale. 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('higher-ed')}>Back to Higher Education <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>New England Conservatory — 2025 CASE Circle of Excellence Award</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 higher education institutions reflects decisions made years ago, extended and patched rather than rebuilt.</strong> The CMS is hard to maintain. The content strategy has drifted. The site serves too many audiences and serves none of them particularly well. The digital presence no longer reflects the institution's actual positioning or ambitions — and everyone knows it.</p>
              <p><strong>The tools running advancement, communications, and student-facing operations are increasingly expected to work together and increasingly failing to do so.</strong> Integration is ad hoc. The user experience is inconsistent. The people doing the work are carrying the weight of system fragmentation in their daily operations.</p>
              <p><strong>A technology rebuild is a significant institutional commitment.</strong> It requires navigating shared governance, managing stakeholder needs across multiple divisions, and delivering something that holds up over time — not something that looks good at launch and degrades by year two. The right partner for this work has done it before and can show you what it looks like.</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 higher education 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 institution — not every version of what the institution could be.
              </div>
              <div className="q-entry-body">
                <p>Higher education websites fail for predictable reasons: too many stakeholders, 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 confusing to navigate.</p>
                <p>We build institutional websites with a clear editorial and architectural strategy from the start. The design reflects the institution's actual positioning. The content is organized for the audiences that matter. The result holds up because the decisions behind it were made explicitly, not by committee over time.</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 higher education institution is not necessarily the most powerful one — it's the one that communications staff, department administrators, and content owners can use without a developer in the room. Most institutions have the opposite: a system that requires expertise to maintain, which means it doesn't get maintained.</p>
                <p>We design content infrastructure for how institutions actually work. We also build for AI readiness — structured content that can be queried, surfaced, and connected to AI tools as those capabilities develop. The platform you invest in now shouldn't need to be replaced when the next wave of capability arrives.</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 the way the institution actually works.
              </div>
              <div className="q-entry-body">
                <p>Advancement platforms, research databases, event management systems, student-facing tools — higher education runs on a mix of enterprise software and custom-built tools that were built for an earlier version of the institution'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. We also replace fragile custom systems when the right enterprise tool exists and just needs to be properly implemented. We make that call honestly rather than defaulting to whichever answer requires more billable hours.</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 institution'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 institution — its audiences, its content, its constraints — 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.</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 the handoff.</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 support what we build and we 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 cabinet.</p>
              <p>We've done this in higher education long enough to know where the problems typically are before we start looking. That makes the assessment faster and the recommendations more specific.</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, IT staff, 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 cabinet or board 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 clients 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. Projects like our NEC engagement unfold over multiple years. Smaller, more focused engagements can move in months. We scope it specifically and honestly before you commit.' },
              { 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 institution\'s needs, content volume, and staff capacity.' },
              { q: 'How do you handle shared governance and stakeholder management on a project like this?', a: 'Carefully and from the start. We design stakeholder processes that keep the right people informed without making every decision a committee decision. We have done this enough times to know where the friction typically lives and how to move through 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 internal search, content generation assistance, or as a foundation for institution-specific models. We build for this now so the capability is available as the tools develop, rather than requiring a second rebuild.' },
              { q: 'Do you handle the full project or just part of it?', a: 'The full project — discovery through launch and support. We don\'t hand off to a separate development team. The same people who do the strategic and design work build the thing.' },
            ].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('higher-ed')}>Back to Higher Education <Arrow /></a>
              </div>
            </div>
          </div>
        </div>
      </section>

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

Object.assign(window, { HigherEdDigitalPage });