aggiornata la sezione servizi

clinica-app/client/src/components/ServicesSection.tsx

@@ -1,48 +1,79 @@
 /*
  * DESIGN: "Clinical Warmth"
- * Sezione servizi con 3 card principali (radiologia, chirurgia, laboratorio)
+ * Sezione servizi con 6 card principali allineate al menu della clinica.
- * Layout: immagine in alto, bordo superiore colorato, hover lift
+ * Layout: immagine in alto, bordo superiore colorato, hover lift.
- * Sfondo sabbia calda per contrasto con la sezione hero
  */
-import { motion } from "framer-motion";
+import { motion, useInView } from "framer-motion";
-import { useInView } from "framer-motion";
 import { useRef } from "react";
-import { ArrowRight, Scan, Scissors, FlaskConical } from "lucide-react";
+import { Activity, ArrowRight, FlaskConical, Scan, Stethoscope, Video } from "lucide-react";
 import { toast } from "sonner";
 
 const services = [
+  {
+    id: "visite-cliniche",
+    title: "Visite Cliniche",
+    subtitle: "Medicina preventiva",
+    description:
+      "Percorsi di prevenzione e visite cliniche complete per monitorare lo stato di salute di cani e gatti in ogni fase della vita. Un approccio attento, continuativo e personalizzato.",
+    image: "https://images.unsplash.com/photo-1628009368231-7bb7cfcb0def?w=900&q=85",
+    icon: Stethoscope,
+    color: "#1B4F72",
+    features: ["Check-up periodici", "Vaccinazioni", "Profilassi antiparassitaria", "Piani prevenzione senior"],
+  },
+  {
+    id: "ecografia",
+    title: "Ecografia",
+    subtitle: "Diagnostica non invasiva",
+    description:
+      "Indagini ecografiche per approfondire in modo rapido e non invasivo organi addominali, apparato urinario, apparato riproduttivo e principali sospetti clinici.",
+    image: "https://images.unsplash.com/photo-1579684385127-1ef15d508118?w=900&q=85",
+    icon: Activity,
+    color: "#4ECDC4",
+    features: ["Ecografia addominale", "Controlli gravidanza", "Valutazioni urinarie", "Follow-up terapeutici"],
+  },
   {
     id: "radiologia",
     title: "Radiologia",
     subtitle: "Diagnostica per immagini",
     description:
-      "Tecnologia digitale di ultima generazione per radiografie, ecografie e diagnostica avanzata. Refertazione rapida e precisa per supportare le decisioni terapeutiche con la massima accuratezza diagnostica.",
+      "Radiografie digitali e diagnostica per immagini a supporto della visita clinica, utili per valutare apparato scheletrico, torace, addome e urgenze.",
     image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/radiology_39785f88.jpg",
     icon: Scan,
-    color: "#1B4F72",
+    color: "#2E86AB",
-    features: ["Radiografia digitale", "Ecografia", "Ecocardiografia", "Refertazione immediata"],
+    features: ["Radiografia digitale", "Studi toracici", "Valutazioni ortopediche", "Diagnostica d'urgenza"],
-  },
-  {
-    id: "chirurgia",
-    title: "Chirurgia",
-    subtitle: "Sala operatoria specialistica",
-    description:
-      "Sala operatoria completamente attrezzata per interventi di chirurgia generale, ortopedica e d'urgenza. Il nostro team chirurgico garantisce le massime condizioni di sicurezza e sterilità.",
-    image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/surgery_e92904ed.jpg",
-    icon: Scissors,
-    color: "#4ECDC4",
-    features: ["Chirurgia generale", "Chirurgia ortopedica", "Chirurgia d'urgenza", "Anestesia monitorata"],
   },
   {
     id: "laboratorio",
     title: "Laboratorio",
-    subtitle: "Analisi e diagnostica",
+    subtitle: "Analisi interne",
     description:
-      "Laboratorio analisi interno per esami ematologici, biochimici, urinari e citologici. Risultati in tempi rapidi per diagnosi tempestive e trattamenti mirati.",
+      "Laboratorio interno per esami rapidi e mirati, fondamentale per supportare diagnosi tempestive, monitoraggi terapeutici e controlli pre-operatori.",
     image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/laboratory_5a1c4119.jpg",
     icon: FlaskConical,
+    color: "#1B4F72",
+    features: ["Ematologia", "Biochimica", "Urine", "Citologia", "Coagulazione"],
+  },
+  {
+    id: "endoscopia",
+    title: "Endoscopia",
+    subtitle: "Esplorazione mini-invasiva",
+    description:
+      "Tecniche endoscopiche per esplorare apparato digerente e vie respiratorie, riducendo invasivita e tempi di recupero quando il quadro clinico lo consente.",
+    image: "https://images.unsplash.com/photo-1530026405186-ed1f139313f8?w=900&q=85",
+    icon: Video,
+    color: "#4ECDC4",
+    features: ["Valutazioni gastroenteriche", "Corpi estranei", "Biopsie mirate", "Esplorazioni respiratorie"],
+  },
+  {
+    id: "laparoscopia",
+    title: "Laparoscopia",
+    subtitle: "Chirurgia mini-invasiva",
+    description:
+      "Procedure mini-invasive che permettono interventi piu delicati, incisioni ridotte e recuperi piu confortevoli rispetto alla chirurgia tradizionale.",
+    image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/surgery_e92904ed.jpg",
+    icon: Activity,
     color: "#2E86AB",
-    features: ["Ematologia completa", "Biochimica sierica", "Esame urine", "Citologia"],
+    features: ["Procedure mini-invasive", "Biopsie laparoscopiche", "Riduzione del dolore", "Recupero post-operatorio"],
   },
 ];
 
@@ -55,20 +86,17 @@ function ServiceCard({ service, index }: { service: typeof services[0]; index: n
       ref={ref}
       initial={{ opacity: 0, y: 40 }}
       animate={isInView ? { opacity: 1, y: 0 } : {}}
-      transition={{ duration: 0.6, delay: index * 0.15 }}
+      transition={{ duration: 0.6, delay: index * 0.12 }}
       className="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-400 hover:-translate-y-1"
     >
-      {/* Bordo superiore colorato */}
       <div className="h-1" style={{ backgroundColor: service.color }} />
 
-      {/* Immagine */}
       <div className="relative h-52 overflow-hidden">
         <img
           src={service.image}
           alt={service.title}
           className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
         />
-        {/* Icon overlay */}
         <div
           className="absolute top-4 right-4 w-12 h-12 rounded-full flex items-center justify-center shadow-lg"
           style={{ backgroundColor: service.color }}
@@ -77,7 +105,6 @@ function ServiceCard({ service, index }: { service: typeof services[0]; index: n
         </div>
       </div>
 
-      {/* Contenuto */}
       <div className="p-6">
         <div className="text-xs uppercase tracking-widest font-semibold mb-1" style={{ color: service.color }}>
           {service.subtitle}
@@ -90,7 +117,6 @@ function ServiceCard({ service, index }: { service: typeof services[0]; index: n
         </h3>
         <p className="text-gray-600 text-sm leading-relaxed mb-4">{service.description}</p>
 
-        {/* Features */}
         <ul className="space-y-1.5 mb-5">
           {service.features.map((feat) => (
             <li key={feat} className="flex items-center gap-2 text-sm text-gray-600">
@@ -100,15 +126,14 @@ function ServiceCard({ service, index }: { service: typeof services[0]; index: n
           ))}
         </ul>
 
-        {/* Link */}
         <button
           className="flex items-center gap-1.5 text-sm font-semibold transition-all duration-200 group/btn"
           style={{ color: service.color }}
           onClick={() => {
-            toast("Sezione in arrivo", { description: `La pagina dedicata a ${service.title} sarà disponibile a breve.` });
+            toast("Sezione in arrivo", { description: `La pagina dedicata a ${service.title} sara disponibile a breve.` });
           }}
         >
-          Scopri di più
+          Scopri di piu
           <ArrowRight size={15} className="transition-transform duration-200 group-hover/btn:translate-x-1" />
         </button>
       </div>
@@ -123,7 +148,6 @@ export default function ServicesSection() {
   return (
     <section id="servizi" className="py-20 md:py-28" style={{ backgroundColor: "#F5F0E8" }}>
       <div className="container">
-        {/* Header sezione */}
         <motion.div
           ref={ref}
           initial={{ opacity: 0, y: 30 }}
@@ -144,19 +168,17 @@ export default function ServicesSection() {
             Servizi Specialistici
           </h2>
           <p className="text-gray-600 max-w-xl text-base leading-relaxed">
-            Tre aree di eccellenza clinica per garantire diagnosi precise e trattamenti efficaci 
+            Sei aree di eccellenza clinica per accompagnare prevenzione, diagnosi e trattamento
-            ai tuoi animali domestici, con tecnologie all'avanguardia e professionisti esperti.
+            dei tuoi animali domestici, con tecnologie avanzate e professionisti esperti.
           </p>
         </motion.div>
 
-        {/* Grid servizi */}
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {services.map((service, index) => (
             <ServiceCard key={service.id} service={service} index={index} />
           ))}
         </div>
 
-        {/* Link a tutti i servizi */}
         <motion.div
           initial={{ opacity: 0 }}
           animate={isInView ? { opacity: 1 } : {}}
@@ -166,7 +188,7 @@ export default function ServicesSection() {
           <button
             className="inline-flex items-center gap-2 text-[#1B4F72] font-semibold border-2 border-[#1B4F72] px-8 py-3 rounded-full hover:bg-[#1B4F72] hover:text-white transition-all duration-300"
             onClick={() => {
-              toast("Tutti i servizi", { description: "La pagina completa dei servizi sarà disponibile a breve." });
+              toast("Tutti i servizi", { description: "La pagina completa dei servizi sara disponibile a breve." });
             }}
           >
             Tutti i servizi

menu_sito.txt

@@ -8,7 +8,7 @@
 				- urine
 				- citologia
 				- coagulazione
-		- ednoscopia
+		- endoscopia
 		- laparoscopia
 		
 - viite specialistiche