VPS 4 Deploy Agent
5ec6bd6354
continuous-integration/webhook Falha no deploy de clube67_newwhats.local (VPS 4)
208 lines
14 KiB
TypeScript
208 lines
14 KiB
TypeScript
import React from 'react';
|
|
import { Shield, Activity, Heart, Check, ArrowRight, Star, Clock, Users, Smartphone, Zap } from 'lucide-react';
|
|
|
|
export const MedLandingPage: React.FC = () => {
|
|
return (
|
|
<div className="min-h-screen bg-[#0f172a] text-white font-sans selection:bg-cyan-500 selection:text-white">
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 w-full z-50 bg-slate-900/50 backdrop-blur-xl border-b border-white/10">
|
|
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-tr from-cyan-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-cyan-500/20">
|
|
<Activity className="text-white" size={24} />
|
|
</div>
|
|
<span className="text-xl font-black tracking-tighter uppercase italic">CRM MÉDICO <span className="text-cyan-400">FIDELIDADE</span></span>
|
|
</div>
|
|
<div className="hidden md:flex items-center gap-8 text-sm font-bold uppercase tracking-widest text-slate-400">
|
|
<a href="#planos" className="hover:text-white transition-colors">Planos</a>
|
|
<a href="#beneficios" className="hover:text-white transition-colors">Benefícios</a>
|
|
<button
|
|
onClick={() => window.location.hash = '/login'}
|
|
className="hover:text-white transition-colors uppercase"
|
|
>
|
|
Acesso Restrito
|
|
</button>
|
|
<button
|
|
onClick={() => window.location.hash = '/'}
|
|
className="px-6 py-2.5 bg-white text-slate-900 rounded-full hover:bg-cyan-400 transition-all hover:-translate-y-1"
|
|
>
|
|
Voltar ao CRM Odonto
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative pt-40 pb-20 overflow-hidden">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full pointer-events-none">
|
|
<div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[120px] animate-pulse"></div>
|
|
<div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-blue-600/10 rounded-full blur-[120px] animate-pulse delay-700"></div>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-6 relative">
|
|
<div className="max-w-3xl">
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full text-xs font-black uppercase tracking-widest text-cyan-400 mb-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
<Zap size={14} /> Novo: Fidelidade Multimédica
|
|
</div>
|
|
<h1 className="text-6xl md:text-8xl font-black tracking-tighter leading-[0.9] text-white mb-8 animate-in fade-in slide-in-from-bottom-6 duration-1000">
|
|
SAÚDE TOTAL, <br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600">SEM COMPROMISSO.</span>
|
|
</h1>
|
|
<p className="text-xl text-slate-400 max-w-xl leading-relaxed mb-12 animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-200">
|
|
O primeiro plano de fidelidade que integra medicina, odontologia e bem-estar em um único ecossistema. Fidelize sua saúde com tecnologia de ponta.
|
|
</p>
|
|
<div className="flex flex-wrap gap-4 animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-500">
|
|
<button className="px-10 py-5 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl font-black uppercase tracking-widest hover:scale-105 transition-all shadow-xl shadow-cyan-500/20 flex items-center gap-3">
|
|
COMEÇAR AGORA <ArrowRight size={20} />
|
|
</button>
|
|
<button className="px-10 py-5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-2xl font-black uppercase tracking-widest transition-all">
|
|
VER PLANOS
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Plans Section */}
|
|
<section id="planos" className="py-32 bg-slate-900/40 relative">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="text-center mb-20">
|
|
<h2 className="text-4xl md:text-5xl font-black tracking-tighter mb-4">ESTRUTURA DE <span className="text-cyan-400">PLANOS</span></h2>
|
|
<p className="text-slate-400 uppercase tracking-[0.3em] font-bold text-xs">Exclusivo: Combos que não aceitam desmembramento</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-10 max-w-5xl mx-auto">
|
|
{/* Base Plan */}
|
|
<div className="group relative bg-white/5 border border-white/10 rounded-[3rem] p-12 hover:bg-white/[0.08] transition-all hover:-translate-y-2">
|
|
<div className="absolute top-8 right-8 text-slate-700 font-black text-6xl group-hover:text-slate-600 transition-colors">01</div>
|
|
<div className="mb-10">
|
|
<span className="px-4 py-1.5 bg-cyan-500/20 text-cyan-400 text-[10px] font-black uppercase tracking-widest rounded-full">LINHA BASE (OBRIGATÓRIO)</span>
|
|
<h3 className="text-4xl font-black tracking-tighter mt-4">MÉDICO + <br />ODONTO</h3>
|
|
</div>
|
|
<ul className="space-y-4 mb-12">
|
|
{[
|
|
'Consultas Médicas ilimitadas',
|
|
'Limpeza e Prevenção Dental',
|
|
'Urgências 24h',
|
|
'Rede Credenciada Platinum',
|
|
'Descontos em Medicamentos'
|
|
].map((item, i) => (
|
|
<li key={i} className="flex items-center gap-3 text-slate-300 font-medium">
|
|
<div className="w-5 h-5 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-400">
|
|
<Check size={12} strokeWidth={4} />
|
|
</div>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="flex items-end gap-2 mb-8">
|
|
<span className="text-5xl font-black leading-none">R$ 149</span>
|
|
<span className="text-slate-500 font-bold uppercase text-[10px] tracking-widest mb-1">/mês individual</span>
|
|
</div>
|
|
<button className="w-full py-5 bg-white text-slate-900 rounded-2xl font-black uppercase tracking-widest hover:bg-cyan-400 transition-all">
|
|
SELECIONAR PLANO
|
|
</button>
|
|
</div>
|
|
|
|
{/* Premium Plan */}
|
|
<div className="group relative bg-white/5 border-2 border-cyan-500/50 rounded-[3rem] p-12 overflow-hidden hover:bg-white/[0.08] transition-all hover:-translate-y-2">
|
|
<div className="absolute -top-10 -right-10 w-40 h-40 bg-cyan-500/20 blur-[60px]"></div>
|
|
<div className="absolute top-8 right-8 text-cyan-900/30 font-black text-6xl group-hover:text-cyan-900/50 transition-colors">02</div>
|
|
|
|
<div className="mb-10">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="px-4 py-1.5 bg-gradient-to-r from-amber-400 to-orange-500 text-black text-[10px] font-black uppercase tracking-widest rounded-full">MAIS POPULAR</span>
|
|
</div>
|
|
<span className="px-4 py-1.5 bg-cyan-500/20 text-cyan-400 text-[10px] font-black uppercase tracking-widest rounded-full">LINHA PREMIUM</span>
|
|
<h3 className="text-4xl font-black tracking-tighter mt-4">MÉDICO + ODONTO <br /><span className="text-cyan-400">+ PSICOLOGIA</span></h3>
|
|
</div>
|
|
<ul className="space-y-4 mb-12">
|
|
{[
|
|
'Tudo da Linha Base',
|
|
'Suporte Psicológico 24h',
|
|
'Sessões de Terapia Mensais',
|
|
'Check-up Executivo Anual',
|
|
'Prioridade na Agenda (VIP)'
|
|
].map((item, i) => (
|
|
<li key={i} className="flex items-center gap-3 text-slate-300 font-medium">
|
|
<div className="w-5 h-5 rounded-full bg-cyan-500 flex items-center justify-center text-white">
|
|
<Check size={12} strokeWidth={4} />
|
|
</div>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="flex items-end gap-2 mb-8">
|
|
<span className="text-5xl font-black leading-none">R$ 249</span>
|
|
<span className="text-slate-500 font-bold uppercase text-[10px] tracking-widest mb-1">/mês individual</span>
|
|
</div>
|
|
<button className="w-full py-5 bg-gradient-to-r from-cyan-500 to-blue-600 text-white rounded-2xl font-black uppercase tracking-widest hover:scale-[1.02] transition-all shadow-lg shadow-cyan-500/20">
|
|
ASSINAR PREMIUM
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features (CRM) */}
|
|
<section id="beneficios" className="py-32 px-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid md:grid-cols-4 gap-8">
|
|
{[
|
|
{ icon: Users, title: 'TITULAR E DEP.', desc: 'Gestão completa familiar com carteirinha individual digital.' },
|
|
{ icon: Shield, title: 'ESTABILIDADE', desc: 'Previsibilidade total para o médico e segurança para o paciente.' },
|
|
{ icon: Smartphone, title: 'WALLET DIGITAL', desc: 'QR Code e histórico médico sempre no seu bolso.' },
|
|
{ icon: Zap, title: 'SEM GLOSA', desc: 'Processamento automático e repasse médico instantâneo.' }
|
|
].map((feat, i) => (
|
|
<div key={i} className="p-8 bg-white/2 hover:bg-white/5 border border-white/5 rounded-3xl transition-all">
|
|
<feat.icon className="text-cyan-400 mb-6" size={32} />
|
|
<h4 className="text-lg font-black tracking-widest uppercase mb-4">{feat.title}</h4>
|
|
<p className="text-slate-400 text-sm leading-relaxed">{feat.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-20 border-t border-white/5 bg-slate-950">
|
|
<div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-10">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
|
|
<Activity className="text-white" size={18} />
|
|
</div>
|
|
<span className="font-black uppercase tracking-tighter">CRM MÉDICO</span>
|
|
</div>
|
|
<div className="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em]">
|
|
© 2026 SCOREODONTO HYBRID MEDICAL ENGINE. ALL RIGHTS RESERVED.
|
|
</div>
|
|
<div className="flex gap-6">
|
|
<button
|
|
onClick={() => window.location.hash = '/'}
|
|
className="text-slate-400 hover:text-white transition-colors uppercase font-bold text-xs tracking-widest"
|
|
>
|
|
Sair para Odonto
|
|
</button>
|
|
<button
|
|
onClick={() => window.location.hash = '/login'}
|
|
className="text-slate-400 hover:text-white transition-colors uppercase font-bold text-xs tracking-widest"
|
|
>
|
|
Painel Admin
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<style>{`
|
|
@keyframes animate-in {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-in {
|
|
animation: animate-in 0.8s ease-out forwards;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|