126 lines
6.1 KiB
Markdown
126 lines
6.1 KiB
Markdown
# PROJECT.md — autotq-modern-ejs
|
||
|
||
## 1) Site overview
|
||
- Stack: Node/Express + EJS templates + single global CSS/JS.
|
||
- Brand/entity: **AutoTQ** / Golden Hour Medical, Inc.
|
||
- Content model: all factual content (team, literature, testimonials, news, video links, image URLs) is sourced from `site.config.js` and rendered by views.
|
||
- Goal of this refresh: unified premium feel, less visual noise, stronger but accessible red brand surfaces, consistent logo/header/hero treatment.
|
||
|
||
## 2) File structure (repo map + one-liners)
|
||
|
||
### Root
|
||
| File | Purpose |
|
||
|---|---|
|
||
| `README.md` | Short project description. |
|
||
| `PROJECT.md` | This project/source-of-truth document. |
|
||
| `site.config.js` | Central site data: brand, contact, assets, nav, team, literature, videos, testimonials/news. |
|
||
|
||
### Public assets
|
||
| File | Purpose |
|
||
|---|---|
|
||
| `public/css/style.css` | Global design system + all component/page styling. |
|
||
| `public/js/main.js` | Mobile nav, sticky header state, reveal animations, contact form submit. |
|
||
|
||
### Views (pages)
|
||
| File | Purpose |
|
||
|---|---|
|
||
| `views/layout.ejs` | Global HTML shell; injects header/footer and page body. |
|
||
| `views/index.ejs` | Home page (hero, proof points, video, updates, testimonials, CTA). |
|
||
| `views/about.ejs` | Redirect-style About page pointing to `/about-autotq`. |
|
||
| `views/about-autotq.ejs` | Main product/about narrative with stats. |
|
||
| `views/company.ejs` | Team grid and company gallery. |
|
||
| `views/contact.ejs` | Contact details + inquiry form. |
|
||
| `views/literature.ejs` | Download/open literature docs from config. |
|
||
| `views/news.ejs` | News timeline from config links. |
|
||
| `views/articles.ejs` | External source article links list. |
|
||
| `views/research.ejs` | Research summary links (occlusion + first-time user). |
|
||
| `views/firsttimeusers.ejs` | Source-linked summary page. |
|
||
| `views/occlusion.ejs` | Source-linked summary page. |
|
||
| `views/testimonials.ejs` | Testimonials grid from config data. |
|
||
| `views/training.ejs` | Training summary/source link page. |
|
||
| `views/shop.ejs` | External shop source link page. |
|
||
| `views/hannah.ejs` | Team profile page. |
|
||
| `views/laresa.ejs` | Team profile page. |
|
||
| `views/jamie.ejs` | Team profile page. |
|
||
| `views/gabriella.ejs` | Team profile page. |
|
||
| `views/devin.ejs` | Team profile page. |
|
||
| `views/nandini.ejs` | Team profile page. |
|
||
| `views/max.ejs` | Team profile page. |
|
||
| `views/nick.ejs` | Team profile page. |
|
||
| `views/carisse.ejs` | Team profile page. |
|
||
|
||
### Views partials
|
||
| File | Purpose |
|
||
|---|---|
|
||
| `views/partials/header.ejs` | Unified top nav + brand/logo + contact CTA. |
|
||
| `views/partials/footer.ejs` | Footer with logo, nav list, contact details. |
|
||
|
||
## 3) Navigation structure
|
||
- **Primary header nav (refresh):**
|
||
- `/` Home
|
||
- `/about-autotq` About
|
||
- `/company` Company
|
||
- `/research` Research
|
||
- `/literature` Literature
|
||
- `/news` News
|
||
- `/testimonials` Testimonials
|
||
- `/contact` Contact CTA
|
||
- **Additional pages (accessible via content/footer/config):** `/articles`, `/training`, `/shop`, `/firsttimeusers`, `/occlusion`, team profile slugs.
|
||
|
||
## 4) Design system
|
||
- **Colors (CSS vars):**
|
||
- Brand red: `--brand-red #c81919`
|
||
- Strong red: `--brand-red-strong #a90f0f`
|
||
- Red surfaces: `--bg-alt #ffe4e4`, `--brand-red-soft #ffe0e0`
|
||
- Text: `--text #1d1111`, muted `--muted #5a4040`
|
||
- **Typography:** Inter/system sans stack, large editorial headings, readable paragraph rhythm.
|
||
- **Spacing:** container max 1160px; section vertical rhythm `~4rem–5rem` desktop.
|
||
- **Core components:** sticky header, pill nav links, strong red CTA buttons, card panels (`.glass-card`), page hero band, timeline cards, team/gallery grids.
|
||
|
||
## 5) CSS architecture
|
||
- Single stylesheet (`public/css/style.css`) with:
|
||
1. Tokens/variables (`:root`)
|
||
2. Global/reset/layout utilities
|
||
3. Header/nav system
|
||
4. Hero/page-hero/section systems
|
||
5. Component styles (cards, buttons, forms, timeline, grids)
|
||
6. Footer system
|
||
7. Motion/accessibility states
|
||
8. Responsive breakpoint block (`max-width: 980px`)
|
||
|
||
## 6) JS functionality
|
||
- Mobile nav open/close + ESC/outside click close.
|
||
- Sticky header “scrolled” class toggle.
|
||
- IntersectionObserver reveal-on-scroll.
|
||
- Contact form async POST to configured endpoint with status states.
|
||
|
||
## 7) Content map per page
|
||
- `index`: hero value prop, proof stats, deployment video embed, updates, testimonials, CTA.
|
||
- `about-autotq`: product overview + feature cards + stats.
|
||
- `company`: team cards (from config) + gallery images.
|
||
- `research`: links to occlusion and first-time-user source summaries.
|
||
- `literature`: downloadable docs.
|
||
- `news/articles`: external source links.
|
||
- `contact`: business contact + inquiry submission form.
|
||
- profile pages (`/hannah`, etc.): image/name/role/bio from config.
|
||
|
||
## 8) Image/media inventory (current usage)
|
||
- **Logo:** `config.assets.logo` (header/footer/home hero badge).
|
||
- **Core images:** `hero`, `product`, `videoThumb`.
|
||
- **Team headshots:** `hannah`, `laresa`, `jamie`, `gabriella`, `devin`, `nandini`, `max`, `nick`, `carisse`.
|
||
- **Company gallery:** `company1`..`company7`.
|
||
- **Video embeds:** `config.videos[*].embedUrl` (YouTube embed on home).
|
||
- **Literature docs:** `config.literature[*].url` (external document URLs).
|
||
|
||
## 9) Known issues / TODOs
|
||
- Confirm all configured nav items in `site.config.js` align with intended IA; header currently uses a curated primary set to reduce clutter.
|
||
- Team profile templates are duplicated per person; could be consolidated into a single dynamic profile route/template.
|
||
- Add automated visual regression checks for responsive nav and hero spacing.
|
||
- Consider moving external media URLs to local managed asset pipeline if required by deployment policy.
|
||
|
||
## 10) Refresh changes implemented in this update
|
||
- Unified header/nav treatment with larger, consistently visible logo and simplified primary navigation.
|
||
- Removed noisy motion/parallax behavior from JS and home hero for cleaner experience.
|
||
- Increased brand red usage via hero/page bands, CTA/button gradients, and section accents while preserving contrast.
|
||
- Standardized component styling (cards, sections, buttons, form controls, timeline, grid spacing) for cross-page consistency.
|
||
- Added home hero logo badge for stronger brand presence above fold.
|