gator/autotq-modern-ejs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesign About AutoTQ page with large-number stat visuals and stronger section rhythm

Browse source
This commit is contained in:
gator 2026-03-11 01:38:18 +00:00
parent 3c2ac4d6b5
commit e0eeab05d8
1 changed files with 40 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
views/about-autotq.ejs
View file

@ -1,29 +1,53 @@
<main> <main>
<section class="page-hero"> <section class="page-hero">
<div class="container split"> <div class="container split split-visual">
<div> <div>
<h1>About AutoTQ</h1> <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>
<div class="glass-card media-card"> <div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.product %>" alt="AutoTQ product" loading="lazy" /> <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>
</div> </div>
</section> </section>
<section class="section"> <section class="section">
<div class="container grid-3"> <div class="container split split-reverse">
<article class="glass-card"><h3>Two-Step Application</h3><p>Apply and tighten the cuff, then activate with one button.</p></article> <article class="split-copy reveal" data-reveal>
<article class="glass-card"><h3>Audio Guidance</h3><p>Built-in audio prompts support users through critical steps under stress.</p></article> <h2>Built for high-stress usability</h2>
<article class="glass-card"><h3>Preparedness Focus</h3><p>Developed for broad deployment where non-expert response may be needed first.</p></article> <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>
<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> </div>
</section> </section>
</main> </main>