# 🏥 Clinica Veterinaria Formiginese - Guida di Installazione

## Requisiti di Sistema

- **Node.js**: versione 18.x o superiore
- **npm** o **pnpm**: gestore pacchetti
- **Linux/Unix**: per il server di produzione
- **Porta disponibile**: 3000 (sviluppo) o 5000 (produzione)

---

## 📦 Struttura del Pacchetto

```
clinica-deploy/
├── clinica-app/              # Sorgenti React completi
│   ├── client/              # Frontend React
│   ├── server/              # Backend Express
│   ├── package.json         # Dipendenze
│   └── ...
├── assets/                  # Tutte le immagini (7 file)
│   ├── hero_dog_cat.jpg
│   ├── hero_dog.jpg
│   ├── hero_cat.jpg
│   ├── clinica_sede1.png
│   ├── clinica_ingresso1.png
│   ├── clinica_ingresso2.png
│   └── clinica_ingresso3.webp
└── SETUP_ISTRUZIONI.md     # Questo file
```

---

## 🚀 Installazione Passo-Passo

### 1. Estrai il pacchetto ZIP

```bash
unzip clinica-veterinaria-deploy.zip
cd clinica-deploy
```

### 2. Copia le immagini nel progetto

```bash
cp -r assets/* clinica-app/client/public/images/
mkdir -p clinica-app/client/public/images
```

### 3. Installa le dipendenze

```bash
cd clinica-app
npm install
# oppure se usi pnpm:
pnpm install
```

### 4. Aggiorna i percorsi delle immagini

Apri il file `clinica-app/client/src/components/HeroSection.tsx` e sostituisci gli URL CDN con percorsi locali:

**Prima (URL CDN):**
```javascript
const heroImages = [
  {
    url: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/ChatGPTImage28mar2026,18_49_09_7d867bcd.png",
    alt: "Clinica Veterinaria Formiginese - Sede esterna",
  },
  // ...
];
```

**Dopo (Percorsi locali):**
```javascript
const heroImages = [
  {
    url: "/images/clinica_sede1.png",
    alt: "Clinica Veterinaria Formiginese - Sede esterna",
  },
  {
    url: "/images/hero_dog_cat.jpg",
    alt: "Golden retriever e gatto tabby insieme in un prato soleggiato",
  },
  {
    url: "/images/clinica_ingresso1.png",
    alt: "Clinica Veterinaria Formiginese - Ingresso e sala d'attesa",
  },
  {
    url: "/images/hero_dog.jpg",
    alt: "Ritratto maestoso di un Labrador",
  },
  {
    url: "/images/clinica_ingresso2.png",
    alt: "Clinica Veterinaria Formiginese - Ingresso con logo",
  },
  {
    url: "/images/hero_cat.jpg",
    alt: "Ritratto maestoso di un Maine Coon",
  },
  {
    url: "/images/clinica_ingresso3.webp",
    alt: "Clinica Veterinaria Formiginese - Ingresso principale",
  },
];
```

### 5. Build per produzione

```bash
npm run build
```

Questo creerà una cartella `dist/` con il sito compilato e ottimizzato.

### 6. Avvia il server di produzione

```bash
npm run start
```

Il sito sarà disponibile a: **http://localhost:3000**

---

## 🔧 Configurazione Avanzata

### Cambiare la porta

Modifica il file `server/index.ts`:

```typescript
const port = process.env.PORT || 5000;  // Cambia 5000 con la porta desiderata
```

### Configurare Nginx come reverse proxy

Se usi Nginx, crea un file di configurazione:

```nginx
server {
    listen 80;
    server_name tuodominio.it;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
```

### Usare PM2 per gestire il processo

```bash
npm install -g pm2
pm2 start npm --name "clinica" -- start
pm2 save
pm2 startup
```

---

## 📝 Modifiche Personalizzate

### Cambiare il numero di telefono

File: `client/src/components/HeroSection.tsx`

```typescript
<a href="tel:0598396263">  // Cambia questo numero
```

### Cambiare i testi

Tutti i testi sono nei componenti React in `client/src/components/`:

- `HeroSection.tsx` - Titolo, sottotitolo, CTA
- `AboutSection.tsx` - Descrizione della clinica
- `ServicesSection.tsx` - Descrizione servizi
- `TeamSection.tsx` - Nomi e specializzazioni
- `NewsSection.tsx` - Articoli del blog
- `BookingSection.tsx` - Form prenotazioni
- `AuthSection.tsx` - Registrazione/Login
- `Footer.tsx` - Informazioni di contatto

### Cambiare i colori

File: `client/src/index.css`

Cerca le variabili OKLCH e modifica i valori:

```css
--primary: oklch(0.623 0.214 259.815);  /* Blu petrolio */
--accent: oklch(0.967 0.001 286.375);   /* Verde acqua */
```

---

## 🐛 Troubleshooting

### Errore: "npm: command not found"

Installa Node.js:
```bash
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
```

### Errore: "Port 3000 already in use"

Cambia la porta:
```bash
PORT=5000 npm start
```

### Immagini non si caricano

Verifica che le immagini siano in `client/public/images/` e che i percorsi in `HeroSection.tsx` siano corretti.

---

## 📊 Struttura dei Componenti

```
client/src/
├── components/
│   ├── Navbar.tsx           # Barra di navigazione
│   ├── HeroSection.tsx      # Carousel hero con immagini
│   ├── ServicesSection.tsx  # Radiologia, Chirurgia, Laboratorio
│   ├── AboutSection.tsx     # Chi Siamo
│   ├── TeamSection.tsx      # I 6 professionisti
│   ├── NewsSection.tsx      # Blog/News
│   ├── BookingSection.tsx   # Prenotazione visite
│   ├── AuthSection.tsx      # Registrazione/Login
│   ├── Footer.tsx           # Footer
│   └── ui/                  # Componenti shadcn/ui
├── pages/
│   ├── Home.tsx            # Pagina principale
│   └── NotFound.tsx        # Pagina 404
├── App.tsx                 # Router e layout
├── index.css               # Stili globali
└── main.tsx               # Entry point React
```

---

## 🎨 Design System

**Colori:**
- Blu petrolio (primary): `#1B4F72`
- Verde acqua (accent): `#4ECDC4`
- Sabbia (secondary): `#F5E6D3`
- Bianco (background): `#FFFFFF`

**Font:**
- Display: Cormorant Garamond (serif)
- Body: Nunito Sans (sans-serif)

**Spacing:**
- Base unit: 4px (Tailwind default)
- Container max-width: 1280px

---

## 📞 Supporto

Per domande o problemi:
1. Controlla i log: `npm run dev` per vedere gli errori in tempo reale
2. Verifica che Node.js sia aggiornato: `node --version`
3. Pulisci la cache: `rm -rf node_modules && npm install`

---

## ✅ Checklist Pre-Produzione

- [ ] Tutte le immagini sono copiate in `client/public/images/`
- [ ] I percorsi delle immagini in `HeroSection.tsx` sono aggiornati
- [ ] Il numero di telefono è corretto
- [ ] I testi sono personalizzati
- [ ] La build è stata creata: `npm run build`
- [ ] Il server parte senza errori: `npm start`
- [ ] Le immagini si caricano correttamente
- [ ] Il carousel funziona (3 secondi per immagine)
- [ ] I pulsanti CTA funzionano
- [ ] Il sito è responsive su mobile

---

**Versione:** 1.0.0  
**Data:** 31 Marzo 2026  
**Tecnologie:** React 19, Node.js, Express, Tailwind CSS 4