Skip to content

Marketing Website (vitaravox.ca)

React 19 single-page marketing website for VitaraVox

Overview

Attribute Value
URL https://vitaravox.ca
Source /home/ubuntu/Vitaravox/
Framework React 19.2 + TypeScript 5.9
Build Tool Vite 7.2
Styling Tailwind CSS 4.1
Last Review January 21, 2026

Technology Stack

Layer Technology Version
UI Framework React 19.2.0
Language TypeScript 5.9.3
Build Tool Vite 7.2.4
CSS Framework Tailwind CSS 4.1.18
Icons Lucide React 0.561.0
PostCSS @tailwindcss/postcss 4.1.18

Architecture

Single-Page Scroll Design

┌─────────────────────────────────────────┐
│              Navigation                  │  Fixed header, mobile menu
├─────────────────────────────────────────┤
│                 Hero                     │  Landing + CTAs
├─────────────────────────────────────────┤
│               Features                   │  4 feature cards
├─────────────────────────────────────────┤
│               Benefits                   │  3 benefit categories
├─────────────────────────────────────────┤
│                About                     │  Company mission
├─────────────────────────────────────────┤
│            ForPhysicians                 │  Target audience
├─────────────────────────────────────────┤
│          SecurityCompliance              │  PIPEDA/PHIPA badges
├─────────────────────────────────────────┤
│             HowItWorks                   │  4-step process
├─────────────────────────────────────────┤
│               Contact                    │  Form + API integration
├─────────────────────────────────────────┤
│                Footer                    │  Links + contact info
└─────────────────────────────────────────┘

Component Structure

src/
├── components/
│   ├── Navigation.tsx    # Mobile menu state (useState)
│   ├── Hero.tsx          # Landing section
│   ├── Features.tsx      # 4 feature cards
│   ├── Benefits.tsx      # 3 benefit categories
│   ├── About.tsx         # Company philosophy
│   ├── ForPhysicians.tsx # Target audience
│   ├── SecurityCompliance.tsx  # Compliance badges
│   ├── HowItWorks.tsx    # 4-step process
│   ├── Contact.tsx       # Form with 5 state hooks
│   └── Footer.tsx        # Links and contact
├── assets/
│   └── logo.png          # VitaraVox logo (570KB)
├── App.tsx               # Root composition
├── main.tsx              # React 19 entry
└── index.css             # Tailwind 4 CSS-first

State Management

Minimal local state only - no global state management.

Component State Purpose
Navigation isMenuOpen Mobile menu toggle
Contact formData Form input values
Contact isSubmitting Loading state
Contact isSubmitted Success state
Contact error Error message

API Integration

Contact Form Submission

Endpoint: POST https://files.zatuka.ai/api/upload

Field Type Required
name string Yes
email string Yes
phone string No
clinicName string No
message string Yes

Implementation (Contact.tsx:23-82): - Creates text file with timestamp + form data - Uploads via FormData POST - Stores at path VitaraVox_Contacts - Uses credentials: 'include'

Styling System

Custom Colors (Tailwind)

Token Value Usage
vitara-cyan #24d6f6 Accents, CTAs
vitara-blue #04618f Primary, headers
vitara-gray #dadada Borders
vitara-bg #dce9ef Backgrounds

Typography

  • Font: Montserrat (Google Fonts)
  • Weights: 400, 500, 600, 700, 800

Build & Deploy

Development

cd ~/Vitaravox
npm install
npm run dev    # localhost:5174

Production

npm run build  # tsc -b && vite build
npm run preview  # Preview at localhost:4174

Scripts

Command Action
npm run dev Start dev server (port 5174)
npm run build TypeScript + Vite production build
npm run lint ESLint check
npm run preview Preview production build

SEO Configuration

Meta tags defined in index.html:

Tag Value
Title VitaraVox - AI-Powered Medical Reception
Description Voice AI assistant for Canadian healthcare
Keywords medical AI, voice assistant, healthcare
Canonical https://vitaravox.ca/
Geo Region CA-BC
OG Image Configured

Performance

Metric Status
Bundle Size ~30KB (minified JS)
First Contentful Paint Fast (static content)
Largest Contentful Paint Good (hero text)
Code Splitting Not needed (single page)
Image Optimization Via Vite

Last updated: January 21, 2026