administrator/clinica-veterinaria-formiginese

Fork 0

Files

allebonvi 0ca0306a34 Initial commit: demo sito clinica veterinaria

2026-04-04 10:14:07 +02:00

6.9 KiB

Raw Permalink Blame History

🏥 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

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

2. Copia le immagini nel progetto

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

3. Installa le dipendenze

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):

const heroImages = [
  {
    url: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/ChatGPTImage28mar2026,18_49_09_7d867bcd.png",
    alt: "Clinica Veterinaria Formiginese - Sede esterna",
  },
  // ...
];

Dopo (Percorsi locali):

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

npm run build

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

6. Avvia il server di produzione

npm run start

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

🔧 Configurazione Avanzata

Cambiare la porta

Modifica il file server/index.ts:

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:

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

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

<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:

--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:

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:

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:

Controlla i log: npm run dev per vedere gli errori in tempo reale
Verifica che Node.js sia aggiornato: node --version
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

6.9 KiB Raw Permalink Blame History