gator/autotq-modern-ejs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
autotq-modern-ejs/PROJECT.md

6.1 KiB
Raw Blame History

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.