# Massage Therapy Business Website

## Overview

This is a mobile-first massage therapy business website built with React, TypeScript, and Express. The application provides a serene, wellness-focused user experience for browsing massage services and booking appointments. The design follows high-end wellness brand aesthetics (inspired by Equinox and SoulCycle) with a clean, spa-focused color palette featuring warm taupe, sage green, and cream tones.

## Recent Changes (October 15, 2025)

- Improved booking page flow with progressive disclosure:
  - Step 1: User must select service first (calendar/time slots hidden until service selected)
  - Step 2: Calendar appears after service selection (time slots hidden until date selected)
  - Step 3: Time slots appear after date selection
  - Step 4: Contact form appears after time slot selection
  - Calendar week starts on Monday (Mo-Su format)
- Fixed booking navigation: "Rezervēt" (top menu) and "Book Your Appointment" (Hero section) buttons now open booking page without pre-selecting a service
  - Users must manually select their preferred service from dropdown
  - Service select shows placeholder "Izvēlieties pakalpojumu" when no service is selected
- Fixed footer links under "Uzzini vairāk":
  - "Par masāžu" now correctly scrolls to Benefits section
  - "Rezervēt" now navigates to booking page (no service pre-selected)
- Updated Benefits section image with transparent massage therapy illustration
- Line art illustration in warm taupe and sage green blends seamlessly with page background
- Transparent PNG allows natural integration with site design

## Previous Changes (October 14, 2025)

- Updated Gallery ("Our Space") section with 6 professional massage therapy photos
- Replaced gradient placeholders with real images showing treatment rooms, relaxation spaces, and massage therapy
- Images display in responsive grid (2 columns mobile, 3 columns desktop)
- Lightbox modal shows full-size images when clicked
- Contact form layout improved in Location section:
  - 2-column layout: Name/Email/Phone on left, Message field on right
  - "Send Message" button positioned under Message field at 50% width
  - Reduced Message field height to 140px for better proportions

## Previous Changes (October 13, 2025)

- Implemented full-screen modal for service details in Benefits section
- Modal follows Gallery component pattern with backdrop blur and card-styled content
- Added close button (X) and backdrop click-to-close functionality
- Moved service cards from Services section to Benefits section:
  - Service cards now display below Benefits content with heart icons, titles, prices, descriptions
  - Each card has "Learn more" (outline style) and "Book a massage" (brown primary color) buttons
  - Services section removed from homepage entirely
- Removed service link buttons (Klasiskā masāža and Relaksējošā masāža) from Benefits section as they are redundant with the service cards
- Updated "Book a massage" buttons to use brown primary color matching "Book Your Appointment" button

## User Preferences

Preferred communication style: Simple, everyday language.

## System Architecture

### Frontend Architecture

**Technology Stack:**
- React 18 with TypeScript for type safety
- Vite as the build tool and development server
- Wouter for lightweight client-side routing
- TanStack Query (React Query) for server state management
- Tailwind CSS for utility-first styling
- Shadcn/ui component library (New York style) with Radix UI primitives

**Design System:**
- Custom color palette defined in CSS variables (warm taupe primary, sage green secondary, cream backgrounds)
- Typography: Playfair Display (serif) for headings, Lato/Open Sans for body text
- Mobile-first responsive design with Tailwind breakpoints
- Component-based architecture with reusable UI components in `client/src/components/ui/`

**Routing Strategy:**
- Simple declarative routing with Wouter
- Two main routes: Home (`/`) and Booking (`/booking`)
- Smooth scroll navigation for single-page sections (Hero, Benefits, Services, Gallery, Location)

**State Management:**
- React Query for async data fetching and caching
- Local component state with useState for forms and UI interactions
- Toast notifications for user feedback

### Backend Architecture

**Server Framework:**
- Express.js with TypeScript
- Development and production modes with environment-based configuration
- Custom middleware for request logging and JSON response capture
- Vite middleware integration for HMR in development

**API Design:**
- RESTful API structure (routes prefixed with `/api`)
- Centralized route registration in `server/routes.ts`
- Error handling middleware with consistent JSON error responses

**Build Strategy:**
- Client: Vite bundles React app to `dist/public`
- Server: esbuild bundles Express server to `dist/index.js`
- ESM modules throughout (type: "module" in package.json)

### Data Storage Solutions

**Database Setup:**
- PostgreSQL database via Neon serverless driver
- Drizzle ORM for type-safe database operations
- Schema defined in `shared/schema.ts` with Drizzle-Zod integration for validation
- Database migrations managed with Drizzle Kit (output to `migrations/`)

**Storage Abstraction:**
- Interface-based storage layer (`IStorage`) for flexibility
- In-memory storage implementation (`MemStorage`) for development/testing
- User management methods: getUser, getUserByUsername, createUser
- Ready for production PostgreSQL implementation

**Session Management:**
- Connect-pg-simple for PostgreSQL-backed sessions (when database is active)
- Session data stored persistently in database

### External Dependencies

**UI Component Libraries:**
- Radix UI primitives (20+ components): Dialog, Dropdown, Popover, Toast, Navigation Menu, etc.
- Embla Carousel for image galleries
- Lucide React for consistent iconography
- Class Variance Authority (CVA) for variant-based component styling

**Form Handling:**
- React Hook Form for form state management
- Hookform Resolvers for validation
- Zod schema validation integrated with Drizzle

**Date/Time:**
- date-fns for date manipulation and formatting (booking calendar)
- React Day Picker for calendar UI components

**Development Tools:**
- Replit-specific plugins: runtime error modal, cartographer, dev banner
- TypeScript strict mode enabled
- Path aliases configured (`@/`, `@shared/`, `@assets/`)

**Build & Development:**
- tsx for running TypeScript files in development
- esbuild for server bundling
- PostCSS with Tailwind and Autoprefixer
- Source map support via @jridgewell/trace-mapping