diff --git a/assets/ortovet.webp b/assets/ortovet.webp new file mode 100644 index 0000000..50a9803 Binary files /dev/null and b/assets/ortovet.webp differ diff --git a/clinica-app/client/public/images/ortovet.webp b/clinica-app/client/public/images/ortovet.webp new file mode 100644 index 0000000..50a9803 Binary files /dev/null and b/clinica-app/client/public/images/ortovet.webp differ diff --git a/clinica-app/client/src/components/ServicesSection.tsx b/clinica-app/client/src/components/ServicesSection.tsx index e33762e..be3f749 100644 --- a/clinica-app/client/src/components/ServicesSection.tsx +++ b/clinica-app/client/src/components/ServicesSection.tsx @@ -1,31 +1,57 @@ /* * DESIGN: "Clinical Warmth" - * Sezione servizi con 6 card principali allineate al menu della clinica. - * Layout: immagine in alto, bordo superiore colorato, hover lift. + * Sezione servizi con due livelli: + * - Servizi Clinici + * - Visite Specialistiche */ import { motion, useInView } from "framer-motion"; import { useRef } from "react"; -import { Activity, ArrowRight, FlaskConical, Scan, Stethoscope, Video } from "lucide-react"; +import { + Activity, + Apple, + ArrowRight, + Bone, + Eye, + FlaskConical, + Scan, + Sparkles, + Stethoscope, + Video, +} from "lucide-react"; import { toast } from "sonner"; -const services = [ +type ServiceItem = { + id: string; + title: string; + subtitle: string; + description: string; + image: string; + imageClassName?: string; + imageHoverClassName?: string; + icon: React.ComponentType<{ size?: number; className?: string }>; + color: string; + features: string[]; + tone?: "default" | "specialist"; +}; + +const clinicalServices: ServiceItem[] = [ { 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.", + "Percorsi di prevenzione e visite cliniche complete per monitorare lo stato di salute di cani e gatti in ogni fase della vita.", 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"], + features: ["Check-up periodici", "Vaccinazioni", "Profilassi antiparassitaria", "Controlli 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.", + "Indagini ecografiche rapide per approfondire apparato addominale, urinario e riproduttivo con maggiore precisione clinica.", image: "https://images.unsplash.com/photo-1579684385127-1ef15d508118?w=900&q=85", icon: Activity, color: "#4ECDC4", @@ -36,7 +62,7 @@ const services = [ title: "Radiologia", subtitle: "Diagnostica per immagini", description: - "Radiografie digitali e diagnostica per immagini a supporto della visita clinica, utili per valutare apparato scheletrico, torace, addome e urgenze.", + "Radiografie digitali e diagnostica per immagini per apparato scheletrico, torace, addome e approfondimenti d'urgenza.", image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/radiology_39785f88.jpg", icon: Scan, color: "#2E86AB", @@ -47,7 +73,7 @@ const services = [ title: "Laboratorio", subtitle: "Analisi interne", description: - "Laboratorio interno per esami rapidi e mirati, fondamentale per supportare diagnosi tempestive, monitoraggi terapeutici e controlli pre-operatori.", + "Laboratorio interno per esami rapidi e mirati, utile per diagnosi tempestive, monitoraggi terapeutici e controlli pre-operatori.", image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/laboratory_5a1c4119.jpg", icon: FlaskConical, color: "#1B4F72", @@ -58,7 +84,7 @@ const services = [ 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.", + "Tecniche endoscopiche per esplorare apparato digerente e vie respiratorie riducendo invasivita e tempi di recupero.", image: "https://images.unsplash.com/photo-1530026405186-ed1f139313f8?w=900&q=85", icon: Video, color: "#4ECDC4", @@ -69,7 +95,7 @@ const services = [ 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.", + "Procedure mini-invasive con incisioni ridotte, recuperi piu confortevoli e maggiore delicatezza nei passaggi operatori.", image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/surgery_e92904ed.jpg", icon: Activity, color: "#2E86AB", @@ -77,25 +103,103 @@ const services = [ }, ]; -function ServiceCard({ service, index }: { service: typeof services[0]; index: number }) { +const specialistVisits: ServiceItem[] = [ + { + id: "oncologia", + title: "Oncologia", + subtitle: "Percorsi dedicati", + description: + "Valutazioni specialistiche per definire iter diagnostici e strategie terapeutiche personalizzate nei casi oncologici.", + image: "https://images.unsplash.com/photo-1511174511562-5f97f4f4a759?w=900&q=85", + icon: Stethoscope, + color: "#A95F3A", + features: ["Inquadramento clinico", "Piani terapeutici", "Monitoraggi periodici"], + tone: "specialist", + }, + { + id: "dermatologia", + title: "Dermatologia", + subtitle: "Cute e mantello", + description: + "Approfondimenti per prurito, alopecie, otiti ricorrenti e alterazioni cutanee che richiedono un percorso mirato.", + image: "https://images.unsplash.com/photo-1516734212186-a967f81ad0d7?w=900&q=85", + icon: Sparkles, + color: "#B76E79", + features: ["Allergie", "Citologie cutanee", "Otiti croniche"], + tone: "specialist", + }, + { + id: "oculistica", + title: "Oculistica", + subtitle: "Vista e benessere oculare", + description: + "Controlli specialistici per disturbi oculari, lacrimazione, arrossamenti e valutazioni funzionali della vista.", + image: "https://images.unsplash.com/photo-1517849845537-4d257902454a?w=900&q=85", + icon: Eye, + color: "#4C7A9F", + features: ["Esame del segmento anteriore", "Pressione oculare", "Follow-up oculari"], + tone: "specialist", + }, + { + id: "nutrizione", + title: "Nutrizione", + subtitle: "Equilibrio alimentare", + description: + "Consulenze per impostare piani nutrizionali su misura in base a eta, patologie, stile di vita e obiettivi clinici.", + image: "https://images.unsplash.com/photo-1548199973-03cce0bbc87b?w=900&q=85", + icon: Apple, + color: "#7EA55A", + features: ["Diete personalizzate", "Gestione del peso", "Supporto nutrizionale"], + tone: "specialist", + }, + { + id: "ortopedia", + title: "Ortopedia", + subtitle: "Movimento e postura", + description: + "Valutazioni specialistiche per zoppie, dolore articolare, traumi e impostazione del corretto iter ortopedico.", + image: "/images/ortovet.webp", + imageClassName: "scale-[0.5]", + imageHoverClassName: "group-hover:scale-[0.7]", + icon: Bone, + color: "#6D7B8C", + features: ["Valutazioni zoppia", "Controlli articolari", "Percorsi post-trauma"], + tone: "specialist", + }, +]; + +function ServiceCard({ + service, + index, + className = "", +}: { + service: ServiceItem; + index: number; + className?: string; +}) { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-50px" }); + const specialist = service.tone === "specialist"; return ( -
+
{service.title}
+ {specialist && ( +
+ Alta specializzazione +
+ )}
-
+
{service.subtitle}

{service.title}

-

{service.description}

+

{service.description}

-
    +
      {service.features.map((feat) => (
    • - + {feat}
    • ))}
@@ -143,7 +252,9 @@ function ServiceCard({ service, index }: { service: typeof services[0]; index: n export default function ServicesSection() { const ref = useRef(null); + const specialistRef = useRef(null); const isInView = useInView(ref, { once: true, margin: "-80px" }); + const specialistInView = useInView(specialistRef, { once: true, margin: "-80px" }); return (
@@ -155,38 +266,74 @@ export default function ServicesSection() { transition={{ duration: 0.7 }} className="mb-14" > -
-
- +
+
+ Specializzazioni

- Servizi Specialistici + Servizi Clinici

-

+

Sei aree di eccellenza clinica per accompagnare prevenzione, diagnosi e trattamento dei tuoi animali domestici, con tecnologie avanzate e professionisti esperti.

-
- {services.map((service, index) => ( +
+ {clinicalServices.map((service, index) => ( ))}
+ +
+
+ + Alta specializzazione + +
+

+ Visite Specialistiche +

+

+ Un secondo livello di consulenza clinica per casi che richiedono competenze dedicate, + approfondimenti mirati e percorsi di valutazione ad alto valore aggiunto. +

+ + +
+ {specialistVisits.map((service, index) => ( + + ))} +
+