Implement header/logo cleanup and official copy/testimonial updates; refresh PROJECT.md
This commit is contained in:
parent
780f4f7855
commit
8d46c98397
5 changed files with 76 additions and 68 deletions
72
PROJECT.md
72
PROJECT.md
|
|
@ -3,58 +3,46 @@
|
|||
## 1) Site overview
|
||||
- Stack: Node/Express + EJS templates + global CSS/JS.
|
||||
- Brand/entity: **AutoTQ** / Golden Hour Medical, Inc.
|
||||
- Content source remains `site.config.js` for factual data (team, literature, testimonials, news, contact).
|
||||
- This revision focused on UX/content-structure consistency for people imagery and team bio presentation.
|
||||
- Content source remains `site.config.js` for factual data (team, literature, testimonials, news, contact), with targeted page-level verbatim official copy now applied where required.
|
||||
- This revision focused on header brand cleanup and official copy alignment across Home/Research/Testimonials.
|
||||
|
||||
## 2) Updated file structure notes (files changed in this pass)
|
||||
- `views/company.ejs`
|
||||
- `public/css/style.css`
|
||||
- `public/js/main.js`
|
||||
- `views/partials/header.ejs`
|
||||
- `views/index.ejs`
|
||||
- `views/research.ejs`
|
||||
- `views/testimonials.ejs`
|
||||
- `PROJECT.md`
|
||||
|
||||
## 3) Navigation/routes
|
||||
- Primary nav remains: `/`, `/about-autotq`, `/company`, `/research`, `/literature`, `/news`, `/testimonials`, `/contact`.
|
||||
- Team profile links from the Company roster continue to use slug routes (e.g., `/<member.slug>`).
|
||||
|
||||
## 4) Design system notes (this revision)
|
||||
- Reinforced visual logic: profile/headshot treatment is now isolated to the team roster cards.
|
||||
- Narrative sections (Company mission and Operating mission) continue using neutral/non-profile supporting media (`company4`, `company5`).
|
||||
- Added dedicated team-roster card styles and a clear CTA hierarchy for bio reveal (`Read bio` button + collapsible panel).
|
||||
## 4) Design system notes (current)
|
||||
- Header brand area now renders **logo only** (removed redundant plain-text wordmark next to logo).
|
||||
- Existing logo treatment remains transparent (no forced white logo container/background styles introduced).
|
||||
- Existing SEO metadata and heading architecture in `views/layout.ejs` remains unchanged.
|
||||
|
||||
## 5) Component patterns now used
|
||||
- Existing split sections and capability cards retained for company narrative blocks.
|
||||
- New team-specific component set:
|
||||
- `.team-roster` (2-column responsive grid)
|
||||
- `.team-person-card` (headshot + person details)
|
||||
- `.btn-team-bio` (bio reveal control)
|
||||
- `.team-bio-panel` (collapsible bio region)
|
||||
- Bio reveal behavior is managed by progressive JS and keeps native button keyboard behavior.
|
||||
## 5) Component/content patterns now used
|
||||
- Home page now includes required official mission/product/problem statements verbatim in semantically relevant hero, context, and evidence-adjacent sections.
|
||||
- Research source cards now present the exact occlusion and first-time-user claim lines verbatim.
|
||||
- Testimonials page now presents required direct quote cards verbatim with exact required attributions.
|
||||
|
||||
## 6) Content/layout updates by page
|
||||
- **Company (`company.ejs`)**
|
||||
- Kept non-team sections free of employee portraits in mission/operating mission blocks.
|
||||
- Reworked “Leadership and specialists” into a true roster with each person’s headshot, name, role, and a `Read bio` button.
|
||||
- Added collapsible bio panel per person instead of displaying long bios inline by default.
|
||||
- **Audit pass completed (no edits required):**
|
||||
- `views/literature.ejs`
|
||||
- `views/testimonials.ejs`
|
||||
- `views/about-autotq.ejs`
|
||||
- `views/research.ejs`
|
||||
- `views/index.ejs`
|
||||
- These pages were verified to use non-employee support visuals in narrative sections.
|
||||
- **Header (`views/partials/header.ejs`)**
|
||||
- Removed plain text `AutoTQ` wordmark from brand block; retained logo image + home link behavior.
|
||||
- **Home (`views/index.ejs`)**
|
||||
- Inserted required exact official copy lines including mission statement, product description line, AED placement line, and trauma statistics statements.
|
||||
- **Research (`views/research.ejs`)**
|
||||
- Replaced summary claim text with exact official occlusion and first-time-user lines.
|
||||
- **Testimonials (`views/testimonials.ejs`)**
|
||||
- Ensured required five direct quote cards are present exactly as provided.
|
||||
- **Company (`views/company.ejs`)**
|
||||
- No structural changes required this pass; mission/operating mission sections remain free of employee headshots, while team images remain in roster area with Read bio behavior intact.
|
||||
|
||||
## 7) JS behavior updates
|
||||
- `public/js/main.js` now includes a scoped team bio accordion behavior:
|
||||
- Uses `.team-bio-toggle` buttons with `aria-expanded` + `aria-controls`.
|
||||
- Toggles `hidden` state on associated `.team-bio-panel`.
|
||||
- Keeps one bio open at a time within the company roster for cleaner scanning.
|
||||
- Button labels switch between **Read bio** / **Hide bio**.
|
||||
## 7) Accessibility/UX notes
|
||||
- Navigation, CTA, and semantic section structure preserved.
|
||||
- Testimonial quote rendering remains readable in existing card pattern.
|
||||
|
||||
## 8) Accessibility/UX notes
|
||||
- Team bio interaction is button-based and keyboard accessible by default.
|
||||
- ARIA state and controlled-region linkage are implemented per card.
|
||||
- Visual hierarchy now clearly separates abstract/company claims from individual people content.
|
||||
|
||||
## 9) Known TODOs
|
||||
- Optional next pass: animate panel expansion/collapse while preserving reduced-motion preferences.
|
||||
- Optional next pass: consolidate legacy unused classes (`.people-list`, `.person-row`, `.team-grid`, `.team-card`) if no longer referenced elsewhere.
|
||||
## 8) Known TODOs
|
||||
- Optional next pass: reconcile whether testimonials should be fully config-driven again while preserving exact required quotes.
|
||||
- Optional next pass: centralize official copy constants for easier compliance updates.
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
<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>
|
||||
<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>
|
||||
|
|
@ -20,7 +21,7 @@
|
|||
|
||||
<section class="quote-strip">
|
||||
<div class="container">
|
||||
<p>"Empowering anyone to stop the bleed with audio instructions and one-button activation."</p>
|
||||
<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>
|
||||
|
||||
|
|
@ -30,13 +31,9 @@
|
|||
<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>
|
||||
<h2>Blood loss is the leading cause of preventable death in trauma.</h2>
|
||||
<p>Traditional tourniquets can stop bleeding, but are misapplied >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>
|
||||
|
|
@ -44,14 +41,8 @@
|
|||
<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>
|
||||
<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" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<div class="container nav-wrap">
|
||||
<a href="/" class="brand" aria-label="<%= (config?.brand?.name || 'AutoTQ') %> home">
|
||||
<img src="<%= config?.assets?.logo || '' %>" alt="<%= (config?.brand?.name || 'AutoTQ') %> logo" loading="eager" />
|
||||
<span><%= (config?.brand?.name || 'AutoTQ') %></span>
|
||||
</a>
|
||||
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="container research-list">
|
||||
<article class="research-item reveal" data-reveal>
|
||||
<h3>Occlusion finding reference</h3>
|
||||
<p>Source pages reference a 100% arterial occlusion finding.</p>
|
||||
<p>AutoTQ automatic tourniquet stopped blood flow from arteries on 100% of limbs up to 33 inches around.</p>
|
||||
<div class="item-links">
|
||||
<a class="text-link" href="/occlusion">Read summary page →</a>
|
||||
<a class="text-link" href="https://theautotq.com/occlusion" target="_blank" rel="noopener noreferrer">View source URL →</a>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
<article class="research-item reveal" data-reveal>
|
||||
<h3>First-time user finding reference</h3>
|
||||
<p>Source pages reference 92% first-time-user success.</p>
|
||||
<p>92% of adults applied the AutoTQ automatic tourniquet correctly on their first try under pressure after watching a 30-second demo.</p>
|
||||
<div class="item-links">
|
||||
<a class="text-link" href="/firsttimeusers">Read summary page →</a>
|
||||
<a class="text-link" href="https://theautotq.com/firsttimeusers" target="_blank" rel="noopener noreferrer">View source URL →</a>
|
||||
|
|
|
|||
|
|
@ -13,15 +13,45 @@
|
|||
|
||||
<section class="section section-alt">
|
||||
<div class="container testimonials-stack">
|
||||
<% (config.testimonials || []).forEach((t, i) => { %>
|
||||
<article class="quote-row <%= i % 2 === 1 ? 'reverse' : '' %> reveal" data-reveal>
|
||||
<article class="quote-row reveal" data-reveal>
|
||||
<div class="quote-mark">“</div>
|
||||
<div>
|
||||
<p><%= t.quote %></p>
|
||||
<span>— <%= t.name %>, <%= t.title %></span>
|
||||
<p>To have a product like this... was not even a question.</p>
|
||||
<span>— Chief Anthony Sizemore</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="quote-row reverse reveal" data-reveal>
|
||||
<div class="quote-mark">“</div>
|
||||
<div>
|
||||
<p>Knowing how to use [AutoTQ] is going to save someone’s life.</p>
|
||||
<span>— Deputy Chief Colin Johnson</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="quote-row reveal" data-reveal>
|
||||
<div class="quote-mark">“</div>
|
||||
<div>
|
||||
<p>It is very difficult to put a tourniquet on. What I love about AutoTQ is that, first, it has a wider band, and second of all, you put it on, strap it, push the button, and that’s it.</p>
|
||||
<span>— Dr. Peter Antevy, M.D.</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="quote-row reverse reveal" data-reveal>
|
||||
<div class="quote-mark">“</div>
|
||||
<div>
|
||||
<p>I all too often see improper and ineffective tourniquet application by trained and untrained persons, which is why I am excited for AutoTQ. It satisfies long-felt, but unsolved needs of trauma victims.</p>
|
||||
<span>— Lt. Sarah Franklin, SWAT Paramedic</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="quote-row reveal" data-reveal>
|
||||
<div class="quote-mark">“</div>
|
||||
<div>
|
||||
<p>This is the AED of bleeding. You have a device here that has wide-scale interest, certainly from the public and private sector.</p>
|
||||
<span>— Dr. Robert Glatter, Emergency Medicine Physician</span>
|
||||
</div>
|
||||
</article>
|
||||
<% }) %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue