From e0eeab05d84bfe8fbdad923710080303e3af83ee Mon Sep 17 00:00:00 2001
From: gator <gatordevin@gmail.com>
Date: Wed, 11 Mar 2026 01:38:18 +0000
Subject: [PATCH] Redesign About AutoTQ page with large-number stat visuals and
 stronger section rhythm

---
 views/about-autotq.ejs | 56 ++++++++++++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/views/about-autotq.ejs b/views/about-autotq.ejs
index f37d902..21d1124 100644
--- a/views/about-autotq.ejs
+++ b/views/about-autotq.ejs
@@ -1,29 +1,53 @@
 <main>
   <section class="page-hero">
-    <div class="container split">
+    <div class="container split split-visual">
       <div>
         <h1>About AutoTQ</h1>
-        <p class="lead">AutoTQ is an automatic pneumatic tourniquet platform designed to improve bleeding control outcomes with simplified operation and guided use.</p>
+        <p class="lead">AutoTQ is an automatic pneumatic tourniquet platform designed to simplify severe bleeding response with one-button activation and guided operation.</p>
+        <a class="btn btn-primary" href="/research#sources">See research references</a>
       </div>
-      <div class="glass-card media-card">
-        <img src="<%= config.assets.images.product %>" alt="AutoTQ product" loading="lazy" />
+      <div class="split-media reveal" data-reveal>
+        <img src="<%= config.assets.images.product %>" alt="AutoTQ device product view" loading="lazy" />
+      </div>
+    </div>
+  </section>
+
+  <section class="section section-band">
+    <div class="container">
+      <div class="stats-showcase reveal" data-reveal>
+        <article>
+          <p class="display-stat">2</p>
+          <h2>Core steps</h2>
+          <p>Apply and tighten the cuff, then activate with one button.</p>
+        </article>
+        <article>
+          <p class="display-stat">92%</p>
+          <h2>First-time user finding</h2>
+          <p>Referenced on source research pages; review context in the Research section.</p>
+        </article>
+        <article>
+          <p class="display-stat">100%</p>
+          <h2>Occlusion finding reference</h2>
+          <p>Referenced on source research pages; linked with cautious claim language.</p>
+        </article>
       </div>
     </div>
   </section>
 
   <section class="section">
-    <div class="container grid-3">
-      <article class="glass-card"><h3>Two-Step Application</h3><p>Apply and tighten the cuff, then activate with one button.</p></article>
-      <article class="glass-card"><h3>Audio Guidance</h3><p>Built-in audio prompts support users through critical steps under stress.</p></article>
-      <article class="glass-card"><h3>Preparedness Focus</h3><p>Developed for broad deployment where non-expert response may be needed first.</p></article>
-    </div>
-  </section>
-
-  <section class="section section-alt">
-    <div class="container stats-grid">
-      <article class="glass-card stat-card"><h3>92%</h3><p>First-time user success mention from source research pages.</p></article>
-      <article class="glass-card stat-card"><h3>100%</h3><p>Arterial occlusion mention from source research pages.</p></article>
-      <article class="glass-card stat-card"><h3>Nationwide</h3><p>Referenced deployments and partnerships across U.S. organizations.</p></article>
+    <div class="container split split-reverse">
+      <article class="split-copy reveal" data-reveal>
+        <h2>Built for high-stress usability</h2>
+        <p>The platform focus is practical use under pressure, where people may have limited time, limited training, and urgent decision demands.</p>
+        <ul class="bullet-list">
+          <li>Audio guidance to support action sequencing.</li>
+          <li>Readiness-oriented deployment across public and professional settings.</li>
+          <li>Supporting materials available via <a class="text-link" href="/literature">Literature</a> and <a class="text-link" href="/research#sources">Research</a>.</li>
+        </ul>
+      </article>
+      <div class="split-media reveal" data-reveal>
+        <img src="<%= config.assets.images.company1 %>" alt="Emergency readiness planning and training context" loading="lazy" />
+      </div>
     </div>
   </section>
 </main>