React Healthcare Site Development

Guide for working with the Mosaic LifeTech healthcare AI governance consulting website - a React + TypeScript + Vite + Tailwind CSS application targeting healthcare executives.

Project Context

**Target Audience:** Healthcare C-suite executives, board members, and compliance/quality leaders seeking defensible AI governance frameworks.

**Tech Stack:**

Architecture Overview

The site follows a standard React SPA structure:

```

src/

├── App.tsx # Root component with routing config

├── main.tsx # Application entry point

├── components/

│ ├── layout/ # Header, Footer, Layout wrapper

│ ├── ui/ # shadcn/ui base components

│ └── NavLink.tsx # Navigation helper component

├── pages/ # Route page components

│ ├── Index.tsx # Homepage

│ ├── WhatWeDo.tsx

│ ├── WhoWeHelp.tsx

│ ├── OurApproach.tsx

│ ├── About.tsx

│ ├── Contact.tsx

│ └── NotFound.tsx

├── hooks/ # Custom React hooks

└── lib/

└── utils.ts # Utility functions (cn() class merger)

```

Development Instructions

1. Starting Development

```bash

Start dev server on localhost:8080

npm run dev

Run linter

npm run lint

Build for production

npm run build

Build for development

npm run build:dev

Preview production build

npm run preview

```

2. Import Path Aliases

Always use `@/` alias for imports from `src/`:

```tsx

import { Button } from "@/components/ui/button";

import { cn } from "@/lib/utils";

import { Layout } from "@/components/layout/Layout";

```

3. Design System Usage

**Color System** (CSS custom properties via HSL):

**Custom Utility Classes:**

**Button Variants** (beyond shadcn defaults):

**Primary Typeface:** Inter font family

**Icon Library:** `lucide-react`

4. Page Component Pattern

All pages should follow this structure:

```tsx

import { Layout } from "@/components/layout/Layout";

const PageName = () => {

return (

<Layout>

<section className="section-padding">

<div className="container-narrow">

{/* Page content here */}

</div>

</section>

</Layout>

);

};

export default PageName;

```

5. Card Component Pattern

For repeated card patterns, define local components within pages:

```tsx

interface CardProps {

icon: React.ReactNode;

title: string;

description: string;

}

function FeatureCard({ icon, title, description }: CardProps) {

return (

<div className="bg-card rounded-lg p-8 shadow-card border border-border/50">

<div className="mb-4">{icon}</div>

<h3 className="text-xl font-semibold mb-2">{title}</h3>

<p className="text-muted-foreground">{description}</p>

</div>

);

}

```

6. Adding New Routes

When adding a new page:

1. **Create the page component** in `src/pages/NewPage.tsx`

2. **Add route in `src/App.tsx`** (above the catch-all `*` route):

```tsx

<Route path="/new-page" element={<NewPage />} />

```

3. **Update navigation** in `src/components/layout/Header.tsx`:

```tsx

<NavLink to="/new-page">New Page</NavLink>

```

7. Component Tracking

The site uses `lovable-tagger` plugin (development only) for component tracking and debugging.

8. Working with Forms

Use React Hook Form + Zod for form validation:

```tsx

import { useForm } from "react-hook-form";

import { zodResolver } from "@hookform/resolvers/zod";

import * as z from "zod";

const formSchema = z.object({

email: z.string().email(),

name: z.string().min(2),

});

const MyForm = () => {

const form = useForm({

resolver: zodResolver(formSchema),

});

// ...

};

```

9. State Management

Use TanStack React Query for server state:

```tsx

import { useQuery } from "@tanstack/react-query";

const { data, isLoading, error } = useQuery({

queryKey: ['key'],

queryFn: fetchFunction,

});

```

Best Practices

1. **Maintain consistent spacing** using `section-padding` and `container-narrow`

2. **Use design system tokens** instead of arbitrary values

3. **Keep page components clean** by extracting repeated patterns into local components

4. **Follow TypeScript strict mode** - define proper types and interfaces

5. **Leverage shadcn/ui components** before building custom UI elements

6. **Use semantic HTML** for accessibility

7. **Apply animations thoughtfully** with `animate-fade-in` and staggered delays

Common Tasks

**Adding a new shadcn/ui component:**

```bash

npx shadcn-ui@latest add [component-name]

```

**Merging Tailwind classes conditionally:**

```tsx

import { cn } from "@/lib/utils";

<div className={cn("base-class", condition && "conditional-class")} />

```

**Creating responsive layouts:**

```tsx

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

{/* Cards */}

</div>

```