autotq-modern-ejs/views/index.ejs

<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>When hemorrhage risk is measured in minutes, response clarity matters.</h1>
        <p class="lead">AutoTQ focuses on helping people act under pressure through one-button activation and guided steps designed for high-stress moments.</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>"Empowering anyone to stop the bleed with audio instructions and one-button activation."</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>The challenge is not urgency alone — it is correct action under stress.</h2>
        <p>Emergency scenes often involve first-time responders, noise, and confusion. AutoTQ’s design focus is practical usability so application steps are easier to execute when seconds count.</p>
        <ul class="bullet-list">
          <li>Addresses hemorrhage response where immediate intervention can be critical.</li>
          <li>Supports first-on-scene users with guided operation rather than complex setup.</li>
          <li>Built around broad emergency readiness use cases in public and professional settings.</li>
        </ul>
      </article>
    </div>
  </section>

  <section class="section section-band">
    <div class="container split split-reverse">
      <article class="split-copy reveal" data-reveal>
        <h2>Use-context readiness</h2>
        <p>AutoTQ is positioned for organizations that need dependable bleeding-control preparedness across diverse environments.</p>
        <div class="context-list">
          <div><strong>Schools</strong><span>Emergency planning support for campuses and student activity areas.</span></div>
          <div><strong>Construction</strong><span>High-risk jobsite preparedness where rapid intervention capability is essential.</span></div>
          <div><strong>Public venues</strong><span>Scalable readiness for spaces with large and changing foot traffic.</span></div>
          <div><strong>First response teams</strong><span>Operational integration conversations for trained public safety personnel.</span></div>
        </div>
      </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>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>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" class="text-link">Go to Research sources →</a>
      </article>
      <div class="split-media reveal" data-reveal>
        <img src="<%= config.assets.images.company3 %>" alt="Clinical and technical review 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>