autotq-modern-ejs/views/index.ejs

107 lines
5.1 KiB
Text

<main>
<section class="hero">
<div class="hero-bg"></div>
<div class="container hero-grid">
<div class="reveal" data-reveal>
<p class="eyebrow">Mission-Driven Emergency Readiness</p>
<h1>We exist to stop preventable deaths from blood loss.</h1>
<p class="lead">AutoTQ is the automatic tourniquet that talks you through stopping the bleed.</p>
<p>AutoTQ is the automatic emergency tourniquet that empowers anyone to stop the bleed with audio instructions and one-button activation. Proudly Assembled in the USA, United States Utility Patented, and FDA Registered.</p>
<div class="hero-actions">
<a href="/contact" class="btn btn-primary">Plan a Deployment</a>
<a href="/research" class="btn btn-ghost">Review Research Links</a>
</div>
</div>
<div class="media-stack reveal" data-reveal>
<img src="<%= config.assets.images.hero %>" alt="AutoTQ in emergency readiness context" loading="eager" />
<img src="<%= config.assets.images.product %>" alt="AutoTQ product detail" loading="lazy" />
</div>
</div>
</section>
<section class="quote-strip">
<div class="container">
<p>"Our mission is to equip, empower, and educate any bystander willing to help in an emergency with the power to do so."</p>
</div>
</section>
<section class="section feature-row">
<div class="container split split-visual">
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.company1 %>" alt="Team development and readiness planning" loading="lazy" />
</div>
<article class="split-copy reveal" data-reveal>
<h2>Blood loss is the leading cause of preventable death in trauma.</h2>
<p>Traditional tourniquets can stop bleeding, but are misapplied &gt;84% of the time immediately after training.</p>
<p>Patients arriving without prehospital tourniquets experience a 4.5x higher mortality rate due to hemorrhagic shock.</p>
</article>
</div>
</section>
<section class="section section-band">
<div class="container split split-reverse">
<article class="split-copy reveal" data-reveal>
<h2>Anywhere an AED is located, AutoTQ is the automatic tourniquet should be right there alongside.</h2>
<p>We exist to stop preventable deaths from blood loss.</p>
</article>
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.company2 %>" alt="AutoTQ deployment readiness across industries" loading="lazy" />
</div>
</div>
</section>
<section class="section media-band">
<div class="container">
<div class="band-head reveal" data-reveal>
<h2 id="videos">Video highlights</h2>
<p>Reference videos and deployment content.</p>
</div>
<div class="video-grid">
<article class="video-frame reveal" data-reveal>
<iframe src="https://www.youtube.com/embed/z7VjjfdjIhU" title="AutoTQ video highlight 1" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</article>
<article class="video-frame reveal" data-reveal>
<iframe src="https://www.youtube.com/embed/l2ocd5el0Yc" title="AutoTQ video highlight 2" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</article>
</div>
</div>
</section>
<section class="section">
<div class="container split split-visual">
<article class="split-copy reveal" data-reveal>
<h2 id="evidence">Evidence orientation and cautious claims</h2>
<p>AutoTQ pages reference first-time user and occlusion findings, with source links available on the Research page. This site keeps statements aligned with those referenced source materials.</p>
<a href="/research#sources" class="text-link">Go to Research sources →</a>
</article>
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.product %>" alt="AutoTQ product shown for research and evidence context" loading="lazy" />
</div>
</div>
</section>
<section class="section section-alt">
<div class="container">
<h2 class="reveal" data-reveal>News and testimonials</h2>
<div class="news-testimonials">
<div class="timeline">
<% (config.news || []).slice(0, 3).forEach(item => { %>
<article class="news-row reveal" data-reveal>
<p class="date"><%= item.date %></p>
<h3><%= item.title %></h3>
<a class="text-link" href="<%= item.url %>" target="_blank" rel="noopener noreferrer">View source →</a>
</article>
<% }) %>
</div>
<div class="stacked-quotes">
<% (config.testimonials || []).slice(0, 2).forEach(t => { %>
<blockquote class="quote-panel reveal" data-reveal>
<p>“<%= t.quote %>”</p>
<cite>— <%= t.name %>, <%= t.title %></cite>
</blockquote>
<% }) %>
</div>
</div>
</div>
</section>
</main>