VPS 4 Builder
ba062e92d0
- App.tsx: wrappers de padding (p-4/md:p-8) e max-w-7xl/mx-auto agora só se aplicam quando não é tela standalone; login/landing/public renderizam full-bleed - OnboardingChat.tsx: classe ob-noscroll esconde a barra de rolagem do slide intro (mantém scroll), substituindo a custom-scrollbar indefinida no fluxo de login Inclui também demais alterações pendentes do working tree (snapshot do estado atual de dev). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
344 lines
23 KiB
TypeScript
344 lines
23 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
ChevronRight,
|
|
Calendar,
|
|
ShieldCheck,
|
|
BarChart3,
|
|
Users,
|
|
Smartphone,
|
|
CheckCircle2,
|
|
ArrowRight,
|
|
Menu,
|
|
X,
|
|
Zap,
|
|
MessageCircle,
|
|
User
|
|
} from 'lucide-react';
|
|
import { ToothIcon } from '../components/ToothIcon.tsx';
|
|
|
|
const FeatureCard: React.FC<{ icon: React.ReactNode; title: string; description: string }> = ({ icon, title, description }) => (
|
|
<div className="bg-white/70 backdrop-blur-md p-8 rounded-3xl border border-white/50 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_50px_rgba(8,112,184,0.1)] transition-all duration-500 group">
|
|
<div className="w-14 h-14 bg-blue-600/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-600 group-hover:text-white transition-all duration-500 text-blue-600">
|
|
{icon}
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-900 mb-3 uppercase tracking-tight">{title}</h3>
|
|
<p className="text-gray-600 leading-relaxed text-sm">{description}</p>
|
|
</div>
|
|
);
|
|
|
|
export const LandingPage: React.FC<{
|
|
onGetStarted: () => void;
|
|
isAuthenticated?: boolean;
|
|
userName?: string;
|
|
onGoToArea?: () => void;
|
|
}> = ({ onGetStarted, isAuthenticated = false, userName, onGoToArea }) => {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
// Usuário logado → ação primária leva à sua área; senão, fluxo de login/cadastro.
|
|
const primaryAction = isAuthenticated && onGoToArea ? onGoToArea : onGetStarted;
|
|
const firstName = (userName && userName !== 'USUÁRIO') ? userName.split(' ')[0] : 'Minha Área';
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => setScrolled(window.scrollY > 20);
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const heroImage = "https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=2070&auto=format&fit=crop"; // Placeholder logic, will use local if needed later
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8FAFC] font-sans selection:bg-blue-100 selection:text-blue-900 overflow-x-hidden">
|
|
{/* Navigation */}
|
|
<nav className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 ${(scrolled || mobileMenuOpen) ? 'bg-white border-b border-gray-100 py-3 shadow-sm' : 'bg-transparent py-6'}`}>
|
|
<div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-10 h-10 bg-gradient-to-tr from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
|
|
<ToothIcon className="text-white" size={22} />
|
|
</div>
|
|
<span className="text-2xl font-black text-gray-900 tracking-tighter uppercase italic">Score<span className="text-blue-600">Odonto</span></span>
|
|
</div>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className="hidden md:flex items-center gap-8">
|
|
<a href="#features" className="text-sm font-bold text-gray-600 hover:text-blue-600 transition-colors uppercase tracking-widest">Recursos</a>
|
|
<a href="#solutions" className="text-sm font-bold text-gray-600 hover:text-blue-600 transition-colors uppercase tracking-widest">Soluções</a>
|
|
<a href="#mobile" className="text-sm font-bold text-gray-600 hover:text-blue-600 transition-colors uppercase tracking-widest">Mobile</a>
|
|
{isAuthenticated ? (
|
|
<button
|
|
onClick={onGoToArea}
|
|
title="Ir para minha área"
|
|
className="flex items-center gap-2 bg-gray-900 text-white pl-1.5 pr-5 py-1.5 rounded-full text-xs font-black uppercase tracking-widest hover:bg-blue-600 hover:shadow-xl hover:shadow-blue-200 transition-all active:scale-95"
|
|
>
|
|
<span className="w-8 h-8 rounded-full bg-white/15 flex items-center justify-center">
|
|
<User size={16} />
|
|
</span>
|
|
{firstName}
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={onGetStarted}
|
|
className="bg-gray-900 text-white px-6 py-3 rounded-full text-xs font-black uppercase tracking-widest hover:bg-blue-600 hover:shadow-xl hover:shadow-blue-200 transition-all active:scale-95"
|
|
>
|
|
Começar Agora
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile: ícone da área do usuário (quando logado) + toggle */}
|
|
<div className="md:hidden flex items-center gap-2">
|
|
{isAuthenticated && (
|
|
<button
|
|
onClick={onGoToArea}
|
|
title="Ir para minha área"
|
|
className="w-10 h-10 rounded-full bg-gray-900 text-white flex items-center justify-center hover:bg-blue-600 transition-all active:scale-95"
|
|
>
|
|
<User size={18} />
|
|
</button>
|
|
)}
|
|
<button className="p-2 text-gray-900" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
|
|
{mobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Menu mobile */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden bg-white border-t border-gray-100 px-6 py-3 mt-3 shadow-lg">
|
|
{['features', 'solutions', 'mobile'].map((id, i) => (
|
|
<a key={id} href={`#${id}`} onClick={() => setMobileMenuOpen(false)}
|
|
className="block py-3 text-sm font-bold text-gray-700 hover:text-blue-600 uppercase tracking-widest border-b border-gray-50">
|
|
{['Recursos', 'Soluções', 'Mobile'][i]}
|
|
</a>
|
|
))}
|
|
<button
|
|
onClick={() => { setMobileMenuOpen(false); (isAuthenticated ? onGoToArea : onGetStarted)(); }}
|
|
className="w-full mt-3 bg-gray-900 text-white py-3 rounded-full text-xs font-black uppercase tracking-widest hover:bg-blue-600 transition-all active:scale-95"
|
|
>
|
|
{isAuthenticated ? `Minha área — ${firstName}` : 'Começar Agora'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative pt-32 pb-20 lg:pt-48 lg:pb-40 overflow-hidden">
|
|
{/* Abstract Backgrounds */}
|
|
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-blue-50/50 to-transparent -z-10 translate-x-20 skew-x-12"></div>
|
|
<div className="absolute top-40 left-10 w-72 h-72 bg-blue-400/10 rounded-full blur-3xl -z-10"></div>
|
|
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div className="space-y-8">
|
|
|
|
|
|
<h1 className="text-6xl lg:text-7xl font-black text-gray-900 leading-[1.05] tracking-tighter">
|
|
O Futuro da Sua Clínica é <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 underline decoration-blue-200 underline-offset-8">Inteligente</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-gray-600 leading-relaxed max-w-lg font-medium">
|
|
Maximize a produtividade com gestão financeira, agenda com arraste e solte, e controle absoluto de tratamentos em uma plataforma única e elegante.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<button
|
|
onClick={primaryAction}
|
|
className="bg-blue-600 text-white px-10 py-5 rounded-2xl text-sm font-black uppercase tracking-widest shadow-2xl shadow-blue-200 hover:bg-blue-700 hover:-translate-y-1 transition-all flex items-center justify-center gap-3 group"
|
|
>
|
|
{isAuthenticated ? 'Ir para Minha Área' : 'Acessar Plataforma'} <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
|
|
</button>
|
|
<div className="flex items-center gap-4 py-2 px-4">
|
|
<div className="flex -space-x-3">
|
|
{[1, 2, 3, 4].map(i => (
|
|
<div key={i} className="w-10 h-10 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center text-[10px] font-bold overflow-hidden shadow-sm">
|
|
<img src={`https://i.pravatar.cc/100?img=${i + 10}`} alt="User" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="text-xs text-gray-500 font-bold uppercase tracking-tight">
|
|
<span className="text-gray-900">+400 Clínicas</span> <br /> que já otimizaram processos
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<div className="relative z-10 rounded-[3rem] overflow-hidden shadow-[0_50px_100px_-20px_rgba(0,0,0,0.2)] border-8 border-white group">
|
|
<img
|
|
src="/dental_landing_hero.png"
|
|
alt="Interface ScoreOdonto"
|
|
className="w-full h-auto transform group-hover:scale-105 transition-all duration-700"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).src = "https://images.unsplash.com/photo-1594832284143-588b813ed334?q=80&w=2070&auto=format&fit=crop";
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent flex items-bottom p-10 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
|
<p className="mt-auto text-white font-bold uppercase text-xs tracking-widest">Interface Real: Dashboard Analítico</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating Element 1: Google Agenda */}
|
|
<div className="absolute -top-10 -right-10 z-20 bg-white p-6 rounded-3xl shadow-2xl border border-blue-50 animate-bounce transition-all duration-1000 hidden md:block" style={{ animationDelay: '0.2s' }}>
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-3 bg-blue-100 text-blue-600 rounded-2xl">
|
|
<Calendar size={24} />
|
|
</div>
|
|
<div>
|
|
<div className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Sincronização Total</div>
|
|
<div className="text-lg font-black text-gray-900 tracking-tight">Google Agenda</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating Element 2: WhatsApp CRM */}
|
|
<div className="absolute -bottom-10 -left-10 z-20 bg-white p-6 rounded-3xl shadow-2xl border border-green-50 animate-bounce transition-all duration-1000">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-3 bg-green-100 text-green-600 rounded-2xl">
|
|
<MessageCircle size={24} />
|
|
</div>
|
|
<div>
|
|
<div className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Comunicação</div>
|
|
<div className="text-lg font-black text-gray-900 tracking-tight">CRM WhatsApp</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Social Proof Bar */}
|
|
<div className="bg-white border-y border-gray-100 py-10">
|
|
<div className="max-w-7xl mx-auto px-6 overflow-hidden">
|
|
<p className="text-center text-[10px] font-black text-gray-400 uppercase tracking-[0.3em] mb-10">Conectado com os principais convênios</p>
|
|
<div className="flex justify-between items-center opacity-30 grayscale gap-10">
|
|
<span className="text-2xl font-black italic">CASSEMS</span>
|
|
<span className="text-2xl font-black italic">UNIMED</span>
|
|
<span className="text-2xl font-black italic">BRADESCO</span>
|
|
<span className="text-2xl font-black italic">SULAMÉRICA</span>
|
|
<span className="text-2xl font-black italic">AMIL DENTAL</span>
|
|
<span className="text-2xl font-black italic">REDE DENTAL</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features Section */}
|
|
<section id="features" className="py-32 px-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="text-center max-w-3xl mx-auto mb-20 space-y-4">
|
|
<h2 className="text-4xl lg:text-5xl font-black text-gray-900 leading-tight tracking-tighter uppercase">Todo o Controle na Sua Mão</h2>
|
|
<p className="text-lg text-gray-600 font-medium">Focamos na tecnologia para que você foque no que mais importa: o sorriso do seu paciente.</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<FeatureCard
|
|
icon={<Calendar size={28} />}
|
|
title="Agenda 4.0"
|
|
description="Controle total com arraste e solte, cores por profissional e sincronização em tempo real."
|
|
/>
|
|
<FeatureCard
|
|
icon={<ShieldCheck size={28} />}
|
|
title="GTO Segura"
|
|
description="Lançamento simplificado de guias de convênio com validação automática de erros."
|
|
/>
|
|
<FeatureCard
|
|
icon={<Users size={28} />}
|
|
title="Gestão de Pacientes"
|
|
description="CRM odontológico completo com histórico clínico, anexos e ortodontia avançada."
|
|
/>
|
|
<FeatureCard
|
|
icon={<BarChart3 size={28} />}
|
|
title="BI Financeiro"
|
|
description="Gráficos de produtividade, fluxo de caixa e gestão de taxas de operadoras."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-20 px-6">
|
|
<div className="max-w-7xl mx-auto bg-gradient-to-br from-blue-600 to-indigo-700 rounded-[3rem] p-12 lg:p-24 overflow-hidden relative shadow-2xl shadow-blue-300">
|
|
{/* Decorative elements */}
|
|
<div className="absolute top-0 right-0 w-96 h-96 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl"></div>
|
|
<div className="absolute bottom-0 left-0 w-64 h-64 bg-black/10 rounded-full translate-y-1/2 -translate-x-1/2 blur-3xl"></div>
|
|
|
|
<div className="relative z-10 text-center space-y-8 max-w-3xl mx-auto">
|
|
<h2 className="text-4xl lg:text-6xl font-black text-white leading-tight tracking-tighter uppercase italic">
|
|
Sua Clínica Elevada ao <span className="bg-white text-blue-600 px-4 py-1 rounded-2xl not-italic">Próximo Nível</span>
|
|
</h2>
|
|
<p className="text-blue-100 text-xl font-medium">
|
|
Junte-se a centenas de profissionais que já transformaram a gestão de seus consultórios. Comece agora gratuitamente.
|
|
</p>
|
|
<div className="pt-6">
|
|
<button
|
|
onClick={primaryAction}
|
|
className="bg-white text-blue-600 px-12 py-6 rounded-3xl text-sm font-black uppercase tracking-widest shadow-xl hover:bg-gray-50 hover:-translate-y-1 transition-all active:scale-95"
|
|
>
|
|
{isAuthenticated ? 'Ir para Minha Área' : 'Testar Demonstrativo'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-20 border-t border-gray-100 bg-white">
|
|
<div className="max-w-7xl mx-auto px-6 grid md:grid-cols-4 gap-12">
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
|
<ToothIcon className="text-white" size={18} />
|
|
</div>
|
|
<span className="text-xl font-black text-gray-900 tracking-tighter uppercase italic">Score<span className="text-blue-600">Odonto</span></span>
|
|
</div>
|
|
<p className="text-gray-500 text-sm leading-relaxed">
|
|
A plataforma líder em gestão odontológica para clínicas que buscam excelência e eficiência.
|
|
</p>
|
|
<div className="flex gap-4">
|
|
<div className="w-8 h-8 bg-gray-100 rounded-full hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center cursor-pointer"><Smartphone size={16} /></div>
|
|
<div className="w-8 h-8 bg-gray-100 rounded-full hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center cursor-pointer"><Users size={16} /></div>
|
|
<div className="w-8 h-8 bg-gray-100 rounded-full hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center cursor-pointer"><Zap size={16} /></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<h4 className="text-xs font-black text-gray-900 uppercase tracking-widest">Produto</h4>
|
|
<ul className="space-y-3 text-sm text-gray-500 font-bold uppercase tracking-tight">
|
|
<li className="hover:text-blue-600 cursor-pointer transition-colors">Funcionalidades</li>
|
|
<li className="hover:text-blue-600 cursor-pointer transition-colors">Segurança</li>
|
|
<li className="hover:text-blue-600 cursor-pointer transition-colors">API</li>
|
|
<li className="hover:text-blue-600 cursor-pointer transition-colors">Mobile</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<h4 className="text-xs font-black text-gray-900 uppercase tracking-widest">Empresa</h4>
|
|
<ul className="space-y-3 text-sm text-gray-500 font-bold uppercase tracking-tight">
|
|
<li className="hover:text-blue-600 cursor-pointer transition-colors">Sobre Nós</li>
|
|
<li className="hover:text-blue-600 cursor-pointer transition-colors">Blog</li>
|
|
<li className="hover:text-blue-600 cursor-pointer transition-colors">Carreiras</li>
|
|
<li className="hover:text-blue-600 cursor-pointer transition-colors">Contato</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<h4 className="text-xs font-black text-gray-900 uppercase tracking-widest">Suporte</h4>
|
|
<div className="p-4 bg-gray-50 rounded-2xl border border-gray-100">
|
|
<p className="text-xs text-gray-500 font-bold uppercase mb-2">Central de Ajuda</p>
|
|
<a href="mailto:suporte@scoreodonto.com" className="text-sm font-black text-blue-600 hover:underline">suporte@scoreodonto.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="max-w-7xl mx-auto px-6 mt-20 pt-10 border-t border-gray-50 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">© 2026 ScoreOdonto. Todos os direitos reservados.</p>
|
|
<div className="flex gap-8 text-[10px] font-black text-gray-400 uppercase tracking-widest">
|
|
<span className="hover:text-gray-900 cursor-pointer">Termos</span>
|
|
<span className="hover:text-gray-900 cursor-pointer">Privacidade</span>
|
|
<span className="hover:text-gray-900 cursor-pointer">Cookies</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|