112 lines
4.7 KiB
Text
112 lines
4.7 KiB
Text
<main>
|
|
<section class="hero">
|
|
<div class="hero-bg"></div>
|
|
<div class="container hero-grid">
|
|
<div class="reveal" data-reveal>
|
|
<div class="hero-brand">
|
|
<img src="<%= config.assets.logo %>" alt="<%= config.brand.name %> logo" loading="eager" />
|
|
<span><%= config.brand.name %></span>
|
|
</div>
|
|
<p class="eyebrow">FDA-Registered • Patented • Trusted Nationwide</p>
|
|
<h1>A bleeding emergency becomes a race against time.</h1>
|
|
<p class="lead">AutoTQ was built so the first person on scene can move from panic to action in seconds, with guided operation and one-button activation.</p>
|
|
<div class="hero-actions">
|
|
<a href="/contact" class="btn btn-primary">Start a Deployment Conversation</a>
|
|
<a href="/about-autotq" class="btn btn-ghost">See How AutoTQ Works</a>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card media-card reveal" data-reveal>
|
|
<img src="<%= config.assets.images.hero %>" alt="AutoTQ demonstration" loading="eager" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="story-band">
|
|
<div class="container story-steps">
|
|
<article class="story-step reveal" data-reveal>
|
|
<p class="story-kicker">Chapter 1</p>
|
|
<h3>The gap</h3>
|
|
<p>In severe extremity bleeding events, bystanders and teams need a response that is fast, repeatable, and simple under stress.</p>
|
|
</article>
|
|
<article class="story-step reveal" data-reveal>
|
|
<p class="story-kicker">Chapter 2</p>
|
|
<h3>The response</h3>
|
|
<p>AutoTQ simplifies intervention through a two-step process and onboard guidance so users can focus on the patient, not guesswork.</p>
|
|
</article>
|
|
<article class="story-step reveal" data-reveal>
|
|
<p class="story-kicker">Chapter 3</p>
|
|
<h3>The outcome</h3>
|
|
<p>Public research and deployment content highlight strong first-time usability and arterial occlusion performance in context.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container split">
|
|
<div class="reveal" data-reveal>
|
|
<h2>Proof points in context</h2>
|
|
<p>These figures come from source research/deployment pages referenced throughout the site.</p>
|
|
</div>
|
|
<div class="stats-grid reveal" data-reveal>
|
|
<article class="glass-card stat-card"><h3>92%</h3><p>First-time user success from source research pages.</p></article>
|
|
<article class="glass-card stat-card"><h3>100%</h3><p>Arterial occlusion from source research pages.</p></article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-alt">
|
|
<div class="container split">
|
|
<div class="reveal" data-reveal>
|
|
<h2>See deployment footage</h2>
|
|
<p class="lead">Video source: Cape Coral Police deployment page.</p>
|
|
<p><a class="text-link" href="<%= config.videos[0].pageUrl %>" target="_blank" rel="noopener noreferrer">Open source page →</a></p>
|
|
</div>
|
|
<div class="glass-card video-frame reveal" data-reveal>
|
|
<iframe
|
|
src="<%= config.videos[0].embedUrl %>"
|
|
title="<%= config.videos[0].title %>"
|
|
loading="lazy"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h2 class="reveal" data-reveal>The story continues: updates</h2>
|
|
<div class="timeline">
|
|
<% (config.news || []).forEach(item => { %>
|
|
<article class="glass-card news-card 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>
|
|
</section>
|
|
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<h2 class="reveal" data-reveal>Voices from the field</h2>
|
|
<div class="grid-2">
|
|
<% (config.testimonials || []).forEach(t => { %>
|
|
<article class="glass-card quote-card reveal" data-reveal>
|
|
<p>“<%= t.quote %>”</p>
|
|
<span>— <%= t.name %>, <%= t.title %></span>
|
|
</article>
|
|
<% }) %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container cta-card glass-card reveal" data-reveal>
|
|
<h2>Write the next chapter with your team</h2>
|
|
<p>Contact AutoTQ for deployment planning, training, literature, and partnership details.</p>
|
|
<a href="/contact" class="btn btn-primary">Contact AutoTQ</a>
|
|
</div>
|
|
</section>
|
|
</main>
|