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"
* 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 { useRef } from "react";
import { Button } from "@/components/ui/button";
import { Calendar, Clock, User, Phone, PawPrint, CheckCircle2, ShieldCheck } from "lucide-react";
import {
Calendar,
CheckCircle2,
Clock,
PawPrint,
Phone,
ShieldCheck,
User,
} from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
const services = [
"Visita clinica generale",
"Ecografia",
@@ -36,6 +44,13 @@ const doctors = [
"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 = [
"09:00",
"09:30",
@@ -126,7 +141,11 @@ export default function BookingSection() {
description: payload.message,
});
} 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", {
description: message,
});
@@ -165,14 +184,13 @@ export default function BookingSection() {
lineHeight: 1.2,
}}
>
Richiedi una visita{" "}
<span className="italic text-[#4ECDC4]">online</span>
Richiedi una visita <span className="italic text-[#4ECDC4]">online</span>
</h2>
<p className="mb-8 text-base leading-relaxed text-white/80">
Compila il modulo per inviare una richiesta di appuntamento. La richiesta
non è vincolante e dovrà essere confermata dallo staff della clinica, che ti
ricontatterà il prima possibile.
non e vincolante e dovra essere confermata dallo staff della clinica, che ti
ricontattera il prima possibile.
</p>
<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="mt-1 text-sm leading-relaxed text-white/75">
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.
</p>
</div>
</div>
</div>
<div className="space-y-3">
<p className="mb-3 text-sm font-semibold uppercase tracking-wide text-white/70">
Orari di apertura
</p>
{[
{ days: "Lunedi - Venerdi", hours: "09:00 - 12:30 · 14:30 - 19:00" },
{ days: "Sabato", hours: "09:00 - 12:30" },
{ days: "Domenica", hours: "Solo urgenze" },
].map((slot) => (
<div key={slot.days} className="flex items-center justify-between text-sm">
<span className="text-white/70">{slot.days}</span>
<span className="font-medium text-white">{slot.hours}</span>
<div className="max-w-[39rem]">
<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">
<h4
className="mb-5 text-white/95 uppercase tracking-[0.28em]"
style={{
fontFamily: "'Nunito Sans', sans-serif",
fontSize: "0.8rem",
fontWeight: 700,
}}
>
Orari di apertura
</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>
</motion.div>
@@ -239,15 +275,15 @@ export default function BookingSection() {
Grazie {submittedName || "per la tua richiesta"}
</h3>
<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 className="mb-6 text-sm leading-relaxed text-gray-600">
Il team della Clinica Veterinaria Formiginese la prenderà in carico il prima
possibile e ti ricontatterà per confermare disponibilità, data e orario.
Il team della Clinica Veterinaria Formiginese la prendera in carico il prima
possibile e ti ricontattera per confermare disponibilita, data e orario.
</p>
<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
non equivale a una prenotazione già confermata.
non equivale a una prenotazione gia confermata.
</div>
<Button
className="bg-[#1B4F72] text-white hover:bg-[#163d5a]"
@@ -264,12 +300,16 @@ export default function BookingSection() {
<div>
<h3
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
</h3>
<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.
</p>
</div>
@@ -291,6 +331,7 @@ export default function BookingSection() {
/>
</div>
</div>
<div>
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
Telefono *
@@ -325,6 +366,7 @@ export default function BookingSection() {
/>
</div>
</div>
<div>
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
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]"
>
<option value="">Seleziona un servizio</option>
{services.map((s) => (
<option key={s} value={s}>
{s}
{services.map((service) => (
<option key={service} value={service}>
{service}
</option>
))}
</select>
@@ -396,6 +438,7 @@ export default function BookingSection() {
/>
</div>
</div>
<div>
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
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]"
>
<option value="">Qualsiasi orario</option>
{timeSlots.map((t) => (
<option key={t} value={t}>
{t}
{timeSlots.map((time) => (
<option key={time} value={time}>
{time}
</option>
))}
</select>
@@ -440,7 +483,7 @@ export default function BookingSection() {
</Button>
<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>
</form>
)}

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

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

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

@@ -191,13 +191,9 @@ function TeamCard({
function TeamGroup({
eyebrow,
title,
description,
members,
}: {
eyebrow: string;
title: string;
description: string;
members: TeamMember[];
}) {
const ref = useRef(null);
@@ -218,15 +214,6 @@ function TeamGroup({
{eyebrow}
</span>
</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>
<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">
<TeamGroup
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}
/>
<TeamGroup
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}
/>
</div>