administrator/clinica-veterinaria-formiginese
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modifiche003

Browse Source
This commit is contained in:
allebonvi
2026-05-26 15:03:35 +02:00
parent bd5b845e43
commit 580a659b5a
3 changed files with 80 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
clinica-app/client/src/components/BookingSection.tsx
View File

@@ -2,13 +2,21 @@
* DESIGN: "Clinical Warmth" * DESIGN: "Clinical Warmth"
* Sezione prenotazione: form to mail con conferma non vincolante. * Sezione prenotazione: form to mail con conferma non vincolante.
*/ */
import { useState } from "react"; import { useRef, useState } from "react";
import { motion, useInView } from "framer-motion"; import { motion, useInView } from "framer-motion";
import { useRef } from "react"; import {
import { Button } from "@/components/ui/button"; Calendar,
import { Calendar, Clock, User, Phone, PawPrint, CheckCircle2, ShieldCheck } from "lucide-react"; CheckCircle2,
Clock,
PawPrint,
Phone,
ShieldCheck,
User,
} from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
import { Button } from "@/components/ui/button";
const services = [ const services = [
"Visita clinica generale", "Visita clinica generale",
"Ecografia", "Ecografia",
@@ -36,6 +44,13 @@ const doctors = [
"Dott.ssa Cinzia Pellegrini", "Dott.ssa Cinzia Pellegrini",
]; ];
const openingHours = [
{ days: "Visite: Lunedi - Venerdi", hours: "09:00 - 19:30" },
{ days: "Visite: Sabato", hours: "09:00 - 17:00" },
{ days: "Urgenze: Lunedi - Venerdi", hours: "08:00 - 22:30" },
{ days: "Urgenze: Sabato e Festivi", hours: "09:00 - 20:00" },
];
const timeSlots = [ const timeSlots = [
"09:00", "09:00",
"09:30", "09:30",
@@ -126,7 +141,11 @@ export default function BookingSection() {
description: payload.message, description: payload.message,
}); });
} catch (error) { } catch (error) {
const message = error instanceof Error ? error.message : "Si è verificato un problema durante l'invio."; const message =
error instanceof Error
? error.message
: "Si e verificato un problema durante l'invio.";
toast.error("Invio non riuscito", { toast.error("Invio non riuscito", {
description: message, description: message,
}); });
@@ -165,14 +184,13 @@ export default function BookingSection() {
lineHeight: 1.2, lineHeight: 1.2,
}} }}
> >
Richiedi una visita{" "} Richiedi una visita <span className="italic text-[#4ECDC4]">online</span>
<span className="italic text-[#4ECDC4]">online</span>
</h2> </h2>
<p className="mb-8 text-base leading-relaxed text-white/80"> <p className="mb-8 text-base leading-relaxed text-white/80">
Compila il modulo per inviare una richiesta di appuntamento. La richiesta Compila il modulo per inviare una richiesta di appuntamento. La richiesta
non è vincolante e dovrà essere confermata dallo staff della clinica, che ti non e vincolante e dovra essere confermata dallo staff della clinica, che ti
ricontatterà il prima possibile. ricontattera il prima possibile.
</p> </p>
<div className="mb-8 rounded-xl border border-white/20 bg-white/10 p-5 backdrop-blur-sm"> <div className="mb-8 rounded-xl border border-white/20 bg-white/10 p-5 backdrop-blur-sm">
@@ -198,27 +216,45 @@ export default function BookingSection() {
<p className="text-sm font-semibold text-white">Richiesta non vincolante</p> <p className="text-sm font-semibold text-white">Richiesta non vincolante</p>
<p className="mt-1 text-sm leading-relaxed text-white/75"> <p className="mt-1 text-sm leading-relaxed text-white/75">
L&apos;invio del modulo non costituisce conferma automatica dell&apos;appuntamento. L&apos;invio del modulo non costituisce conferma automatica dell&apos;appuntamento.
Il team verificherà disponibilità, tipologia di visita e urgenza del caso prima Il team verifichera disponibilita, tipologia di visita e urgenza del caso prima
di confermare data e orario. di confermare data e orario.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div className="space-y-3"> <div className="max-w-[39rem]">
<p className="mb-3 text-sm font-semibold uppercase tracking-wide text-white/70"> <div className="rounded-[26px] border border-white/20 bg-white/10 px-6 py-6 shadow-[0_18px_45px_rgba(0,0,0,0.18)] backdrop-blur-md sm:px-7 sm:py-7">
Orari di apertura <h4
</p> className="mb-5 text-white/95 uppercase tracking-[0.28em]"
{[ style={{
{ days: "Lunedi - Venerdi", hours: "09:00 - 12:30 · 14:30 - 19:00" }, fontFamily: "'Nunito Sans', sans-serif",
{ days: "Sabato", hours: "09:00 - 12:30" }, fontSize: "0.8rem",
{ days: "Domenica", hours: "Solo urgenze" }, fontWeight: 700,
].map((slot) => ( }}
<div key={slot.days} className="flex items-center justify-between text-sm"> >
<span className="text-white/70">{slot.days}</span> Orari di apertura
<span className="font-medium text-white">{slot.hours}</span> </h4>
<div className="space-y-4">
{openingHours.map((slot) => (
<div key={slot.days} className="flex items-start gap-3.5">
<div className="mt-0.5 rounded-full bg-[#4ECDC4]/20 p-2">
<Clock size={14} className="text-[#7ce3dc]" />
</div>
<div>
<p className="text-sm font-semibold text-white/92 sm:text-[0.98rem]">
{slot.days}
</p>
<p className="mt-0.5 text-sm text-white/72 sm:text-[0.96rem]">
{slot.hours}
</p>
</div>
</div>
))}
</div> </div>
))} </div>
</div> </div>
</motion.div> </motion.div>
@@ -239,15 +275,15 @@ export default function BookingSection() {
Grazie {submittedName || "per la tua richiesta"} Grazie {submittedName || "per la tua richiesta"}
</h3> </h3>
<p className="mb-3 text-sm leading-relaxed text-gray-600"> <p className="mb-3 text-sm leading-relaxed text-gray-600">
La tua richiesta di prenotazione è stata inviata correttamente. La tua richiesta di prenotazione e stata inviata correttamente.
</p> </p>
<p className="mb-6 text-sm leading-relaxed text-gray-600"> <p className="mb-6 text-sm leading-relaxed text-gray-600">
Il team della Clinica Veterinaria Formiginese la prenderà in carico il prima Il team della Clinica Veterinaria Formiginese la prendera in carico il prima
possibile e ti ricontatterà per confermare disponibilità, data e orario. possibile e ti ricontattera per confermare disponibilita, data e orario.
</p> </p>
<div className="mb-6 rounded-xl border border-[#E4D7C6] bg-[#FFF9F1] px-4 py-3 text-left text-sm text-gray-600"> <div className="mb-6 rounded-xl border border-[#E4D7C6] bg-[#FFF9F1] px-4 py-3 text-left text-sm text-gray-600">
<strong className="text-[#1B4F72]">Nota importante:</strong> la richiesta inviata <strong className="text-[#1B4F72]">Nota importante:</strong> la richiesta inviata
non equivale a una prenotazione già confermata. non equivale a una prenotazione gia confermata.
</div> </div>
<Button <Button
className="bg-[#1B4F72] text-white hover:bg-[#163d5a]" className="bg-[#1B4F72] text-white hover:bg-[#163d5a]"
@@ -264,12 +300,16 @@ export default function BookingSection() {
<div> <div>
<h3 <h3
className="mb-2 text-[#1B4F72]" className="mb-2 text-[#1B4F72]"
style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "1.5rem", fontWeight: 600 }} style={{
fontFamily: "'Cormorant Garamond', serif",
fontSize: "1.5rem",
fontWeight: 600,
}}
> >
Richiedi un appuntamento Richiedi un appuntamento
</h3> </h3>
<p className="text-sm leading-relaxed text-gray-500"> <p className="text-sm leading-relaxed text-gray-500">
Compila i campi richiesti e inviaci una proposta di data: sarà lo staff a Compila i campi richiesti e inviaci una proposta di data: sara lo staff a
confermare la visita. confermare la visita.
</p> </p>
</div> </div>
@@ -291,6 +331,7 @@ export default function BookingSection() {
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600"> <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
Telefono * Telefono *
@@ -325,6 +366,7 @@ export default function BookingSection() {
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600"> <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
Tipo di animale Tipo di animale
@@ -371,9 +413,9 @@ export default function BookingSection() {
className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]" className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
> >
<option value="">Seleziona un servizio</option> <option value="">Seleziona un servizio</option>
{services.map((s) => ( {services.map((service) => (
<option key={s} value={s}> <option key={service} value={service}>
{s} {service}
</option> </option>
))} ))}
</select> </select>
@@ -396,6 +438,7 @@ export default function BookingSection() {
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600"> <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
Orario preferito Orario preferito
@@ -408,9 +451,9 @@ export default function BookingSection() {
className="w-full rounded-lg border border-gray-200 bg-white py-2.5 pl-9 pr-3 text-sm transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]" className="w-full rounded-lg border border-gray-200 bg-white py-2.5 pl-9 pr-3 text-sm transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
> >
<option value="">Qualsiasi orario</option> <option value="">Qualsiasi orario</option>
{timeSlots.map((t) => ( {timeSlots.map((time) => (
<option key={t} value={t}> <option key={time} value={time}>
{t} {time}
</option> </option>
))} ))}
</select> </select>
@@ -440,7 +483,7 @@ export default function BookingSection() {
</Button> </Button>
<p className="text-center text-xs text-gray-500"> <p className="text-center text-xs text-gray-500">
* Campi obbligatori. La richiesta sarà valutata e confermata dallo staff. * Campi obbligatori. La richiesta sara valutata e confermata dallo staff.
</p> </p>
</form> </form>
)} )}

2
clinica-app/client/src/components/HeroSection.tsx
View File

@@ -121,7 +121,7 @@ export default function HeroSection() {
fontWeight: 700, fontWeight: 700,
}} }}
> >
Orari Orari di apertura
</h4> </h4>
<div className="space-y-4"> <div className="space-y-4">

17
clinica-app/client/src/components/TeamSection.tsx
View File

@@ -191,13 +191,9 @@ function TeamCard({
function TeamGroup({ function TeamGroup({
eyebrow, eyebrow,
title,
description,
members, members,
}: { }: {
eyebrow: string; eyebrow: string;
title: string;
description: string;
members: TeamMember[]; members: TeamMember[];
}) { }) {
const ref = useRef(null); const ref = useRef(null);
@@ -218,15 +214,6 @@ function TeamGroup({
{eyebrow} {eyebrow}
</span> </span>
</div> </div>
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
<h3
className="text-[#1B4F72]"
style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "clamp(1.8rem, 3.2vw, 2.5rem)", fontWeight: 600 }}
>
{title}
</h3>
<p className="max-w-xl text-sm leading-relaxed text-gray-600">{description}</p>
</div>
</motion.div> </motion.div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
@@ -244,15 +231,11 @@ export default function TeamSection() {
<div className="container"> <div className="container">
<TeamGroup <TeamGroup
eyebrow="Team medico" eyebrow="Team medico"
title="Team medico"
description="I professionisti che seguono l'attivita clinica quotidiana della struttura, con competenze diverse e percorsi di aggiornamento continui."
members={medicalTeam} members={medicalTeam}
/> />
<TeamGroup <TeamGroup
eyebrow="Collaborazioni" eyebrow="Collaborazioni"
title="Collaboratori"
description="Una rete di competenze specialistiche che amplia le possibilita diagnostiche e terapeutiche disponibili per i pazienti della clinica."
members={collaborators} members={collaborators}
/> />
</div> </div>