<?php $PAGE = 'gallery'; $TITLE = 'Gallery — Kautuki'; $DESC = 'A look at the classroom, the whiteboard and the people behind the checks.'; include 'partials/head.php'; ?>
  <!-- ================= banner ================= -->
  <section class="hero body-cell" aria-label="Gallery highlights">
    <div class="slider">
      <div class="slides" aria-roledescription="carousel" aria-label="Gallery highlights" tabindex="0">
        <div class="slide on">
          <div>
            <h2>A class that fits <span class="hl">on the phone at home.</span></h2>
            <p class="sub">Live teaching on an entry-level Android, with the whiteboard synced even when the signal drops to one bar.</p>
            <div class="go">
              <a class="stamp" href="#early">Get early access</a>
              <a class="plain" href="#gal">See the gallery &darr;</a>
            </div>
          </div>
          <div class="art"><img src="/gallery/photo-class.jpg" alt="A girl laughing during an online class at home" width="1200" height="800" loading="lazy"></div>
        </div>
        <div class="slide">
          <div>
            <h2>The whiteboard, <span class="hl">saved for revision.</span></h2>
            <p class="sub">Every class leaves behind its recording, its whiteboard and a set of notes &mdash; at no extra fee.</p>
            <div class="go">
              <a class="stamp" href="#early">Get early access</a>
              <a class="plain" href="#gal">See the gallery &darr;</a>
            </div>
          </div>
          <div class="art"><img src="/gallery/photo-whiteboard.jpg" alt="A teacher solving equations on a whiteboard" width="1200" height="800" loading="lazy"></div>
        </div>
        <div class="slide">
          <div>
            <h2>Verified by a person, <span class="hl">not a script.</span></h2>
            <p class="sub">Identity, qualifications and a background check, each read by someone on our team before a profile goes live.</p>
            <div class="go">
              <a class="stamp" href="#early">Get early access</a>
              <a class="plain" href="safety.php">How verification works &rarr;</a>
            </div>
          </div>
          <div class="art"><img src="/gallery/photo-verify.jpg" alt="A rubber stamp resting on a checked document" width="1200" height="800" loading="lazy"></div>
        </div>
      </div>
      <div class="dots">
        <button type="button" class="on" aria-label="Slide 1"></button>
        <button type="button" aria-label="Slide 2"></button>
        <button type="button" aria-label="Slide 3"></button>
      </div>
    </div>
  </section>
  <!-- ================= Q10 · gallery ================= -->
  <section class="q body-cell" id="gallery">
    <span class="marginal" style="top:clamp(56px,7vw,100px)">Q1.</span>
    <div class="q-head">
      <h2>Gallery.</h2>
      <span class="marks">[pinned to the board]</span>
    </div>
    <p class="q-kicker">A look at the classroom, the whiteboard and the people behind the checks.</p>
    <div class="gal" id="gal">
      <!-- To add real media: drop the file in gallery/ and add a <figure>.
           Photos: data-full="gallery/photo.jpg". Videos: data-video="gallery/clip.mp4"
           or data-yt="YOUTUBE_ID". The <img> is the thumbnail. -->
      <figure class="wide" data-video="" data-yt="" tabindex="0">
        <img src="gallery/poster-video.jpg" alt="A maths teacher taking a class at the whiteboard while a student raises a hand" width="1600" height="1109" loading="lazy">
        <span class="kind">Video</span>
        <span class="play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="#0F2557"><path d="M6 4l14 8-14 8z"/></svg></span>
        <figcaption>Two minutes inside a live class</figcaption>
      </figure>
      <figure data-full="gallery/photo-class.jpg" tabindex="0">
        <img src="gallery/photo-class.jpg" alt="A girl laughing during an online class at home" width="1200" height="800" loading="lazy">
        <span class="kind">Photo</span>
        <figcaption>A live class, from the living room</figcaption>
      </figure>
      <figure data-full="gallery/photo-whiteboard.jpg" tabindex="0">
        <img src="gallery/photo-whiteboard.jpg" alt="A teacher solving equations on a whiteboard" width="1200" height="832" loading="lazy">
        <span class="kind">Photo</span>
        <figcaption>Solving equations, step by step</figcaption>
      </figure>
      <figure data-full="gallery/photo-verify.jpg" tabindex="0">
        <img src="gallery/photo-verify.jpg" alt="A rubber stamp resting on a checked document" width="1200" height="800" loading="lazy">
        <span class="kind">Photo</span>
        <figcaption>Verification desk &middot; papers, not scripts</figcaption>
      </figure>
      <figure data-full="gallery/photo-doubt.jpg" tabindex="0">
        <img src="gallery/photo-doubt.jpg" alt="Two schoolboys in uniform listening attentively in class" width="1200" height="675" loading="lazy">
        <span class="kind">Photo</span>
        <figcaption>Listening for the bit that finally clicks</figcaption>
      </figure>
    </div>
    <p class="gal-note">Photographs via <a href="https://www.pexels.com/license/" target="_blank" rel="noopener">Pexels</a> &mdash; Anil Sharma, World Sikh Organization of Canada, Markus Spiske, Swastik Arora. Our own classroom photos and the walkthrough video replace these as the first batches run.</p>
  </section>

  <!-- ================= testimonials (hidden until we have real ones) ================= -->
  <section class="q body-cell" id="stories" hidden>
    <span class="marginal" style="top:clamp(56px,7vw,100px)">&#9733;</span>
    <div class="q-head">
      <h2>What families say.</h2>
      <span class="marks">[in their words]</span>
    </div>
    <div class="stories">
      <div class="story">
        <blockquote>&ldquo;[Quote from a parent &mdash; add after the first batches run.]&rdquo;</blockquote>
        <div class="who"><b>[Parent name]</b> &middot; parent of a Class 9 student &middot; [City]</div>
      </div>
      <div class="story">
        <blockquote>&ldquo;[Quote from a student.]&rdquo;</blockquote>
        <div class="who"><b>[Student name]</b> &middot; Class 10, CBSE &middot; [City]</div>
      </div>
      <div class="story">
        <blockquote>&ldquo;[Quote from a teacher.]&rdquo;</blockquote>
        <div class="who"><b>[Teacher name]</b> &middot; Maths, 8 years &middot; [City]</div>
      </div>
    </div>
  </section>

<!-- gallery lightbox -->
<dialog class="lb" id="lb" aria-label="Gallery item">
  <div class="lb-body" id="lbBody"></div>
  <div class="lb-bar"><span id="lbCap"></span><button type="button" class="stamp ghost lb-x" id="lbX">Close &times;</button></div>
</dialog>
<?php include 'partials/form.php'; include 'partials/foot.php'; ?>