229 lines
8.9 KiB
TypeScript
229 lines
8.9 KiB
TypeScript
/*
|
|
* DESIGN: "Clinical Warmth"
|
|
* Sezione registrazione/login visibile ma non ancora attiva.
|
|
* Gli elementi restano leggibili, ma ogni interazione mostra
|
|
* il messaggio "Servizio in corso di attivazione".
|
|
*/
|
|
import { motion, useInView } from "framer-motion";
|
|
import { useRef } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { User, Mail, Lock, Eye, CheckCircle2, PawPrint, Clock3 } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
|
|
const benefits = [
|
|
"Storico visite e referti digitali",
|
|
"Promemoria vaccinazioni automatici",
|
|
"Prenotazioni online prioritarie",
|
|
"Comunicazioni dirette con il veterinario",
|
|
"Gestione di piu animali domestici",
|
|
];
|
|
|
|
function showActivationToast() {
|
|
toast.info("Servizio in corso di attivazione", {
|
|
description: "L'area riservata sara disponibile a breve.",
|
|
});
|
|
}
|
|
|
|
function DisabledInput({
|
|
icon,
|
|
type,
|
|
placeholder,
|
|
}: {
|
|
icon: React.ComponentType<{ size?: number; className?: string }>;
|
|
type: string;
|
|
placeholder: string;
|
|
}) {
|
|
const Icon = icon;
|
|
|
|
return (
|
|
<div className="relative">
|
|
<Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
|
<input
|
|
type={type}
|
|
placeholder={placeholder}
|
|
disabled
|
|
className="w-full cursor-not-allowed rounded-lg border border-gray-200 bg-gray-50/90 py-2.5 pl-9 pr-3 text-sm text-gray-400 opacity-90"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function AuthSection() {
|
|
const ref = useRef(null);
|
|
const isInView = useInView(ref, { once: true, margin: "-80px" });
|
|
|
|
return (
|
|
<section id="registrazione" className="bg-white py-20 md:py-28">
|
|
<div className="container">
|
|
<div className="grid grid-cols-1 items-center gap-16 lg:grid-cols-2">
|
|
<motion.div
|
|
ref={ref}
|
|
initial={{ opacity: 0, x: -30 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<div className="h-0.5 w-12 bg-[#4ECDC4]" />
|
|
<span className="text-sm font-semibold uppercase tracking-widest text-[#4ECDC4]">
|
|
Area Personale
|
|
</span>
|
|
</div>
|
|
|
|
<h2
|
|
className="mb-6 text-[#1B4F72]"
|
|
style={{
|
|
fontFamily: "'Cormorant Garamond', serif",
|
|
fontSize: "clamp(2rem, 4vw, 3rem)",
|
|
fontWeight: 600,
|
|
lineHeight: 1.2,
|
|
}}
|
|
>
|
|
Accedi e gestisci{" "}
|
|
<span className="italic">la salute del tuo animale</span>
|
|
</h2>
|
|
|
|
<p className="mb-8 text-base leading-relaxed text-gray-600">
|
|
L'area riservata e la registrazione online sono in fase di attivazione.
|
|
Qui i clienti potranno gestire i propri dati, consultare lo storico e accedere
|
|
ai servizi digitali della clinica in uno spazio personale dedicato.
|
|
</p>
|
|
|
|
<div className="mb-8 space-y-3">
|
|
{benefits.map((benefit) => (
|
|
<div key={benefit} className="flex items-center gap-3">
|
|
<div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-[#4ECDC4]/15">
|
|
<CheckCircle2 size={14} className="text-[#4ECDC4]" />
|
|
</div>
|
|
<span className="text-sm text-gray-700">{benefit}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 rounded-2xl bg-[#F5F0E8] p-6">
|
|
<div className="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full bg-[#1B4F72]">
|
|
<PawPrint size={24} className="text-[#4ECDC4]" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-[#1B4F72]">Servizio in attivazione</p>
|
|
<p className="mt-0.5 text-xs text-gray-600">
|
|
La clinica sta completando la configurazione dell'area riservata per offrirti
|
|
un accesso semplice e sicuro.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
<div className="relative overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-lg">
|
|
<div className="flex border-b border-gray-100">
|
|
<button
|
|
type="button"
|
|
disabled
|
|
className="flex-1 cursor-not-allowed border-b-2 border-[#4ECDC4] bg-[#F5F0E8]/50 py-4 text-sm font-semibold text-[#1B4F72]"
|
|
>
|
|
Registrati
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled
|
|
className="flex-1 cursor-not-allowed py-4 text-sm font-semibold text-gray-400"
|
|
>
|
|
Accedi
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 md:p-8">
|
|
<div className="mb-5 flex items-center gap-3 rounded-xl border border-[#E4D7C6] bg-[#FFF9F1] px-4 py-3">
|
|
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[#A95F3A]/12">
|
|
<Clock3 size={18} className="text-[#A95F3A]" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-[#1B4F72]">Servizio in corso di attivazione</p>
|
|
<p className="text-xs text-gray-600">
|
|
Registrazione e accesso saranno disponibili a breve.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4 opacity-75">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
|
|
Nome
|
|
</label>
|
|
<DisabledInput icon={User} type="text" placeholder="Mario" />
|
|
</div>
|
|
<div>
|
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
|
|
Cognome
|
|
</label>
|
|
<DisabledInput icon={User} type="text" placeholder="Rossi" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
|
|
Email
|
|
</label>
|
|
<DisabledInput icon={Mail} type="email" placeholder="mario.rossi@email.it" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
|
|
Password
|
|
</label>
|
|
<div className="relative">
|
|
<Lock size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
|
<input
|
|
type="password"
|
|
placeholder="••••••••"
|
|
disabled
|
|
className="w-full cursor-not-allowed rounded-lg border border-gray-200 bg-gray-50/90 py-2.5 pl-9 pr-10 text-sm text-gray-400 opacity-90"
|
|
/>
|
|
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
|
|
<Eye size={15} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-2 pt-1">
|
|
<input
|
|
type="checkbox"
|
|
disabled
|
|
className="mt-0.5 cursor-not-allowed accent-[#4ECDC4]"
|
|
/>
|
|
<p className="text-xs leading-relaxed text-gray-500">
|
|
Accetto la Privacy Policy e i Termini di Servizio.
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
type="button"
|
|
disabled
|
|
className="w-full cursor-not-allowed bg-[#1B4F72] py-3 text-base font-bold text-white opacity-70"
|
|
>
|
|
Crea il tuo account
|
|
</Button>
|
|
|
|
<p className="text-center text-xs text-gray-400">Password dimenticata?</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
aria-label="Servizio in corso di attivazione"
|
|
onClick={showActivationToast}
|
|
className="absolute inset-0 z-10"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|