site-portfolio/src/pages/cases/mobile-clinic-app.en.html

<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta
      name="description"
      content="Case Study: A mobile app for a network of clinics—appointment scheduling, medical services, navigation, and quick actions."
    />
    <title>Mobile App for a Network of Clinics — Case Study</title>
    {{> head-links}}
    <style>
      .case-article {
        max-width: 48rem;
        margin: 0 auto;
      }
      .case-article h2 {
        margin: 2rem 0 0.75rem;
        font-size: clamp(1.15rem, 2vw, 1.35rem);
        font-weight: 700;
        color: var(--text);
      }
      .case-article .section__prose {
        margin-bottom: 0.75rem;
        color: var(--text);
      }
      .case-article a:not(.btn) {
        color: var(--accent);
      }
    </style>
    <script>
      (function () {
        try {
          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
          var d = document.documentElement;
          var m = t.mode;
          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
          var eff =
            m === "system"
              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
                ? "dark"
                : "light"
              : m;
          d.dataset.theme = eff;
          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
          if (h !== null) d.style.setProperty("--theme-h", String(h));
          if (s !== null) d.style.setProperty("--theme-s", String(s));
          if (l !== null) {
            var L = Number(l);
            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
          }
          var rad = t.radius;
          if (rad === "soft" || rad === "medium" || rad === "strong") {
            d.dataset.radius = rad;
          } else {
            d.dataset.radius = "medium";
          }
          var f = t.font;
          if (f === "geologica") f = "medeo";
          if (f === "onest") f = "medeo";
          if (f === "anonymous") f = "mono";
          if (f === "merriweather" || f === "mono" || f === "medeo") {
            d.dataset.font = f;
          } else {
            d.dataset.font = "merriweather";
          }
          var mb = t.meshBg;
          if (mb === "off") {
            d.dataset.meshBg = "off";
          } else {
            d.dataset.meshBg = "on";
          }
        } catch (e) {}
      })();
    </script>
  </head>
  <body data-current-case="mobile-clinic-app">
    {{> header-case}}
{{> fab-stack}}
<main id="case-main" class="section section--tight">
      <div class="section__inner case-article">
        <p class="hero__eyebrow">UX/UI · Mobile App</p>
        <h1 class="case-page__h1">Mobile App for a Clinic Network</h1>
        <p class="case-page__sub">
          Booking doctor appointments and managing medical services: a simple user journey, intuitive navigation, and quick access to actions.
        </p>
        <p class="section__prose">
          The project’s focus is on alleviating patient anxiety and eliminating unnecessary steps: clear appointment statuses, predictable forms, and reliance on familiar mobile app patterns.
        </p>
        <p class="section__prose">
          A full breakdown of the case study will be published here; for now, this page serves as an entry point from the portfolio section on the homepage.
        </p>
        <h2>Cover</h2>
        <figure class="case-media case-media--wide">
          <img
            src="{{assetPrefix}}assets/mobile-clinic-app/cover.webp"
            alt="Mobile App for a Network of Clinics — Case Study Cover"
            width="1200"
            height="675"
            loading="lazy"
            decoding="async"
            data-image-viewer
          />
          <figcaption>Current preview for the portfolio card</figcaption>
        </figure>
      </div>
    </main>

    {{> projects-related}}{{> projects-section}}
{{> contact-section}}
{{> footer}}
{{> cookie-notice}}
{{> nav-more-floating}}
<script>
document.addEventListener('DOMContentLoaded',function(){
  var s=document.body.dataset.currentCase;
  if(!s)return;
  document.querySelectorAll('[data-related-slug="'+s+'"]').forEach(function(el){el.hidden=true;});
});
</script>

  </body>
</html>