133 lines
8.2 KiB
TypeScript
133 lines
8.2 KiB
TypeScript
|
import { motion } from 'motion/react';
|
||
|
|
import { useState } from 'react';
|
||
|
|
|
||
|
|
export function Contact() {
|
||
|
|
const [activeTab, setActiveTab] = useState<'message' | 'schedule'>('message');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="pt-32 pb-24 px-6">
|
||
|
|
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-10">
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
<h1 className="text-5xl md:text-6xl font-serif leading-tight">
|
||
|
|
Inicie a sua <span className="italic text-primary-800">jornada.</span>
|
||
|
|
</h1>
|
||
|
|
<p className="text-xl text-stone-500 font-light max-w-md">
|
||
|
|
Nossa equipe de concierge está à disposição para agendar a sua avaliação e esclarecer qualquer dúvida.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-8 bg-white p-8 md:p-12 rounded-[40px] border border-stone-100 shadow-sm">
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<span className="text-sm font-medium text-stone-400 uppercase tracking-widest">WhatsApp Exclusivo</span>
|
||
|
|
<a href="tel:+5511999999999" className="text-2xl font-serif text-primary-900">+55 11 99999-9999</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<span className="text-sm font-medium text-stone-400 uppercase tracking-widest">E-mail</span>
|
||
|
|
<a href="mailto:concierge@healthpremium.com" className="text-2xl font-serif text-primary-900">concierge@healthpremium.com</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<span className="text-sm font-medium text-stone-400 uppercase tracking-widest">Endereço</span>
|
||
|
|
<p className="text-xl font-serif text-primary-900 max-w-xs">Av. Faria Lima, 3400 - 15º Andar, Itaim Bibi, São Paulo - SP</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-sand-200 rounded-[40px] p-8 md:p-12 flex flex-col gap-8">
|
||
|
|
<div className="flex flex-col gap-6">
|
||
|
|
<div className="flex items-center gap-4 bg-white/50 p-1.5 rounded-full self-start">
|
||
|
|
<button
|
||
|
|
onClick={() => setActiveTab('message')}
|
||
|
|
className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all ${activeTab === 'message' ? 'bg-primary-900 text-white shadow-sm' : 'text-stone-600 hover:text-stone-900 hover:bg-white/50'}`}
|
||
|
|
>
|
||
|
|
Enviar Mensagem
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setActiveTab('schedule')}
|
||
|
|
className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all ${activeTab === 'schedule' ? 'bg-primary-900 text-white shadow-sm' : 'text-stone-600 hover:text-stone-900 hover:bg-white/50'}`}
|
||
|
|
>
|
||
|
|
Integração c/ Google Agenda
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{activeTab === 'message' ? (
|
||
|
|
<motion.form
|
||
|
|
initial={{ opacity: 0, y: 10 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
className="flex flex-col gap-6"
|
||
|
|
onSubmit={(e) => e.preventDefault()}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<label className="text-sm font-medium text-stone-600">Nome Completo</label>
|
||
|
|
<input type="text" className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400" placeholder="Como deseja ser chamado?" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<label className="text-sm font-medium text-stone-600">Telefone / WhatsApp</label>
|
||
|
|
<input type="tel" className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400" placeholder="(11) 90000-0000" />
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<label className="text-sm font-medium text-stone-600">E-mail</label>
|
||
|
|
<input type="email" className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400" placeholder="seu@email.com" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<label className="text-sm font-medium text-stone-600">Área de Interesse</label>
|
||
|
|
<select className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all text-stone-600 appearance-none">
|
||
|
|
<option>Estética Avançada</option>
|
||
|
|
<option>Odontologia Premium</option>
|
||
|
|
<option>Performance & Longevidade</option>
|
||
|
|
<option>Outros</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<label className="text-sm font-medium text-stone-600">Como podemos ajudar?</label>
|
||
|
|
<textarea rows={4} className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400 resize-none" placeholder="Conte-nos um pouco sobre o que você busca..."></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit" className="mt-4 bg-primary-900 text-white font-medium rounded-full py-5 hover:bg-primary-800 transition-colors active:scale-95 duration-200">
|
||
|
|
Enviar Solicitação
|
||
|
|
</button>
|
||
|
|
</motion.form>
|
||
|
|
) : (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 10 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
className="bg-white rounded-3xl overflow-hidden shadow-sm h-[650px] flex flex-col items-center justify-center p-8 text-center border border-stone-100"
|
||
|
|
>
|
||
|
|
<div className="w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mb-6">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||
|
|
</div>
|
||
|
|
<h4 className="text-2xl font-serif text-stone-900 mb-4">Agenda Online</h4>
|
||
|
|
<p className="text-stone-500 font-light max-w-sm mb-8">
|
||
|
|
Para integrar com o seu Google Agenda real, você precisa criar uma <a href="https://calendar.google.com/calendar/u/0/appointments/schedules" target="_blank" rel="noreferrer" className="text-blue-600 underline">Página de Agendamento do Google</a> e inserir o link (iframe) no código.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="w-full max-w-sm bg-stone-50 rounded-2xl p-6 text-left border border-stone-200">
|
||
|
|
<p className="text-sm font-medium text-stone-600 mb-4">Exemplo de horários livres hoje:</p>
|
||
|
|
<div className="grid grid-cols-2 gap-3">
|
||
|
|
<button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">14:00</button>
|
||
|
|
<button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">15:30</button>
|
||
|
|
<button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">16:00</button>
|
||
|
|
<button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">17:30</button>
|
||
|
|
</div>
|
||
|
|
<button className="w-full mt-6 bg-primary-900 text-white font-medium rounded-xl py-3 hover:bg-primary-800 transition-colors active:scale-95 duration-200">
|
||
|
|
Simular Agendamento
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|