|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dra. Sinara Nogueira | Especialista em Crianças Atípicas</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Raleway:wght@300;400;500;600&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Raleway', sans-serif; |
|
|
color: #5a4a42; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4 { |
|
|
font-family: 'Playfair Display', serif; |
|
|
color: #5a4a42; |
|
|
} |
|
|
|
|
|
.bg-primary { |
|
|
background-color: #8B4513; |
|
|
} |
|
|
|
|
|
.bg-secondary { |
|
|
background-color: #F5F5DC; |
|
|
} |
|
|
|
|
|
.bg-accent { |
|
|
background-color: #DAA520; |
|
|
} |
|
|
|
|
|
.text-primary { |
|
|
color: #8B4513; |
|
|
} |
|
|
|
|
|
.text-secondary { |
|
|
color: #F5F5DC; |
|
|
} |
|
|
|
|
|
.text-accent { |
|
|
color: #DAA520; |
|
|
} |
|
|
|
|
|
.border-primary { |
|
|
border-color: #8B4513; |
|
|
} |
|
|
|
|
|
.border-accent { |
|
|
border-color: #DAA520; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, rgba(245, 245, 220, 0.95), rgba(230, 211, 163, 0.95)); |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(139, 69, 19, 0.15); |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background-color: #8B4513; |
|
|
color: #F5F5DC; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background-color: #A0522D; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.btn-accent { |
|
|
background-color: #DAA520; |
|
|
color: #5a4a42; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-accent:hover { |
|
|
background-color: #e6b733; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-secondary"> |
|
|
|
|
|
<header class="bg-white shadow-md"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="heart" class="text-primary mr-2"></i> |
|
|
<span class="text-xl font-bold text-primary">Dra. Sinara Nogueira</span> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#sobre" class="text-primary hover:text-accent transition">Sobre</a> |
|
|
<a href="#especialidades" class="text-primary hover:text-accent transition">Especialidades</a> |
|
|
<a href="#diferencial" class="text-primary hover:text-accent transition">Diferencial</a> |
|
|
<a href="#servicos" class="text-primary hover:text-accent transition">Serviços</a> |
|
|
<a href="#contato" class="text-primary hover:text-accent transition">Contato</a> |
|
|
</nav> |
|
|
<button class="md:hidden focus:outline-none"> |
|
|
<i data-feather="menu" class="text-primary"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero-gradient py-20"> |
|
|
<div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Olá, eu sou a Dra. Sinara! <span class="text-blue-700">💙</span></h1> |
|
|
<h2 class="text-2xl md:text-3xl font-semibold mb-6">Especialista no cuidado de crianças atípicas</h2> |
|
|
<p class="text-lg mb-8">Autismo, TDAH e Altas Habilidades <span class="text-accent">✨</span></p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="btn-primary px-6 py-3 rounded-full font-medium">Agendar Consulta</button> |
|
|
<button class="border-2 border-primary px-6 py-3 rounded-full font-medium text-primary hover:bg-primary hover:text-secondary transition">Saiba Mais</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center" data-aos="fade-left"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/medical/640x360/1" alt="Dra. Sinara" class="rounded-lg shadow-xl w-full max-w-md border-4 border-white"> |
|
|
<div class="absolute -bottom-4 -right-4 bg-accent text-white px-4 py-2 rounded-lg shadow-md"> |
|
|
<p class="font-bold">+15 anos de experiência</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="sobre" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-bold mb-4">Sobre Mim</h2> |
|
|
<div class="w-20 h-1 bg-accent mx-auto"></div> |
|
|
</div> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right"> |
|
|
<img src="http://static.photos/people/640x360/2" alt="Dra. Sinara com pacientes" class="rounded-lg shadow-lg w-full max-w-md"> |
|
|
</div> |
|
|
<div class="md:w-1/2 md:pl-12" data-aos="fade-left"> |
|
|
<p class="text-lg mb-6">Sou médica pediatra com especialização em neurodesenvolvimento infantil, dedicada ao cuidado de crianças atípicas e suas famílias.</p> |
|
|
<p class="text-lg mb-6">Minha abordagem vai além do diagnóstico - busco entender cada criança em sua singularidade, oferecendo um atendimento humanizado e acolhedor.</p> |
|
|
<p class="text-lg mb-8">"Porque quando cuido do seu filho, <span class="font-semibold">EU ENTENDO</span> o que você vive. As noites sem dormir, as dúvidas, a busca por respostas..."</p> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="award" class="text-accent mr-2"></i> |
|
|
<span class="font-medium">Formada pela Universidade de Brasília</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="especialidades" class="py-20 bg-secondary"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-bold mb-4">Minhas Especialidades</h2> |
|
|
<div class="w-20 h-1 bg-accent mx-auto"></div> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-lg shadow-md card-hover" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="text-accent mb-4"> |
|
|
<i data-feather="activity" class="w-10 h-10"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Autismo</h3> |
|
|
<p class="mb-4">Avaliação diagnóstica completa e acompanhamento personalizado para crianças no espectro autista.</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-accent mr-2 mt-1"></i> |
|
|
<span>Diagnóstico precoce</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-accent mr-2 mt-1"></i> |
|
|
<span>Orientação familiar</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-accent mr-2 mt-1"></i> |
|
|
<span>Encaminhamento multidisciplinar</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-lg shadow-md card-hover" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="text-accent mb-4"> |
|
|
<i data-feather="zap" class="w-10 h-10"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">TDAH</h3> |
|
|
<p class="mb-4">Avaliação e manejo do Transtorno de Déficit de Atenção e Hiperatividade com abordagem integral.</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-accent mr-2 mt-1"></i> |
|
|
<span>Avaliação clínica detalhada</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-accent mr-2 mt-1"></i> |
|
|
<span>Estratégias para escola e casa</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-accent mr-2 mt-1"></i> |
|
|
<span>Acompanhamento contínuo</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-lg shadow-md card-hover" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="text-accent mb-4"> |
|
|
<i data-feather="star" class="w-10 h-10"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Altas Habilidades</h3> |
|
|
<p class="mb-4">Identificação e orientação para crianças com habilidades acima da média em uma ou mais áreas.</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-accent mr-2 mt-1"></i> |
|
|
<span>Avaliação de potencial</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-accent mr-2 mt-1"></i> |
|
|
<span>Orientação educacional</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-accent mr-2 mt-1"></i> |
|
|
<span>Desenvolvimento socioemocional</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="diferencial" class="py-20 bg-primary text-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-bold mb-4">Meu Diferencial</h2> |
|
|
<div class="w-20 h-1 bg-accent mx-auto"></div> |
|
|
</div> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/family/640x360/3" alt="Dra. Sinara com família" class="rounded-lg shadow-xl w-full max-w-md"> |
|
|
<div class="absolute -bottom-4 -right-4 bg-accent text-white px-4 py-2 rounded-lg shadow-md"> |
|
|
<p class="font-bold">Mãe de 3 crianças</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 md:pl-12" data-aos="fade-left"> |
|
|
<h3 class="text-2xl font-bold mb-6">Sou mãe de 3 estrelas brilhantes - 2 delas atípicas <span class="text-pink-300">💝</span><span class="text-blue-300">💙</span></h3> |
|
|
<p class="text-lg mb-6">Minha experiência pessoal me dá uma compreensão única das lutas e vitórias das famílias com crianças atípicas.</p> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-accent rounded-full p-2 mr-4"> |
|
|
<i data-feather="heart" class="w-5 h-5 text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-2">Acolho a família</h4> |
|
|
<p>Entendo que o cuidado deve incluir toda a família, não apenas a criança.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-accent rounded-full p-2 mr-4"> |
|
|
<i data-feather="eye" class="w-5 h-5 text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-2">Escuto suas preocupações</h4> |
|
|
<p>Sei que cada dúvida e angústia de mãe/pai é válida e merece atenção.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-accent rounded-full p-2 mr-4"> |
|
|
<i data-feather="compass" class="w-5 h-5 text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-2">Oriento como quem já viveu</h4> |
|
|
<p>Minhas recomendações vêm tanto da experiência clínica quanto da vivência pessoal.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="servicos" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-bold mb-4">Serviços Oferecidos</h2> |
|
|
<div class="w-20 h-1 bg-accent mx-auto"></div> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="border-2 border-secondary rounded-lg p-6 card-hover" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="text-primary mb-4"> |
|
|
<i data-feather="clipboard" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Consulta Inicial</h3> |
|
|
<p class="mb-6">Avaliação detalhada com história clínica completa e exame físico minucioso.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-bold text-primary">R$ 400,00</span> |
|
|
<button class="btn-accent px-4 py-2 rounded-full text-sm">Agendar</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-2 border-secondary rounded-lg p-6 card-hover" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="text-primary mb-4"> |
|
|
<i data-feather="refresh-cw" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Acompanhamento</h3> |
|
|
<p class="mb-6">Consultas de retorno para monitoramento do desenvolvimento e ajustes no plano de cuidado.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-bold text-primary">R$ 300,00</span> |
|
|
<button class="btn-accent px-4 py-2 rounded-full text-sm">Agendar</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-2 border-secondary rounded-lg p-6 card-hover" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="text-primary mb-4"> |
|
|
<i data-feather="home" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Visita Domiciliar</h3> |
|
|
<p class="mb-6">Atendimento no conforto do seu lar, ideal para avaliação do ambiente familiar.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-bold text-primary">R$ 600,00</span> |
|
|
<button class="btn-accent px-4 py-2 rounded-full text-sm">Agendar</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-2 border-secondary rounded-lg p-6 card-hover" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="text-primary mb-4"> |
|
|
<i data-feather="book" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Orientação Escolar</h3> |
|
|
<p class="mb-6">Reunião com professores e equipe pedagógica para adaptações necessárias.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-bold text-primary">R$ 500,00</span> |
|
|
<button class="btn-accent px-4 py-2 rounded-full text-sm">Agendar</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-2 border-secondary rounded-lg p-6 card-hover" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="text-primary mb-4"> |
|
|
<i data-feather="file-text" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Laudos e Relatórios</h3> |
|
|
<p class="mb-6">Documentação completa para escolas, planos de saúde e processos seletivos.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-bold text-primary">R$ 350,00</span> |
|
|
<button class="btn-accent px-4 py-2 rounded-full text-sm">Agendar</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-2 border-secondary rounded-lg p-6 card-hover" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="text-primary mb-4"> |
|
|
<i data-feather="users" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Grupo de Apoio</h3> |
|
|
<p class="mb-6">Encontros mensais para pais e cuidadores de crianças atípicas.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-bold text-primary">R$ 100,00</span> |
|
|
<button class="btn-accent px-4 py-2 rounded-full text-sm">Participar</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-secondary"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-bold mb-4">O Que Dizem os Pais</h2> |
|
|
<div class="w-20 h-1 bg-accent mx-auto"></div> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="text-accent mb-4"> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<p class="italic mb-6">"A Dra. Sinara foi a primeira profissional que realmente entendeu meu filho. Sua abordagem acolhedora fez toda a diferença no nosso processo."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="http://static.photos/people/100x100/4" alt="Mãe de paciente" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Ana Carolina</h4> |
|
|
<p class="text-sm">Mãe do Pedro, 6 anos (TEA)</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="text-accent mb-4"> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<p class="italic mb-6">"Finalmente encontramos alguém que olha para além do diagnóstico. A Dra. vê o potencial do meu filho e nos ajuda a desenvolvê-lo."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="http://static.photos/people/100x100/5" alt="Pai de paciente" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Ricardo Almeida</h4> |
|
|
<p class="text-sm">Pai da Sofia, 8 anos (AH/SD)</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="text-accent mb-4"> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
<i data-feather="star" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<p class="italic mb-6">"Como mãe de uma criança com TDAH, a orientação da Dra. Sinara transformou nossa rotina. Ela fala com propriedade e empatia."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="http://static.photos/people/100x100/6" alt="Mãe de paciente" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Fernanda Gomes</h4> |
|
|
<p class="text-sm">Mãe do Lucas, 7 anos (TDAH)</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contato" class="py-20 bg-primary text-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-bold mb-4">Entre em Contato</h2> |
|
|
<div class="w-20 h-1 bg-accent mx-auto"></div> |
|
|
</div> |
|
|
<div class="flex flex-col lg:flex-row"> |
|
|
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12" data-aos="fade-right"> |
|
|
<h3 class="text-2xl font-bold mb-6">Agende sua consulta</h3> |
|
|
<p class="mb-8">Estou aqui para ajudar sua família. Entre em contato para marcar uma consulta ou tirar dúvidas.</p> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<i data-feather="map-pin" class="text-accent mr-4 mt-1"></i> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">Consultório</h4> |
|
|
<p>SHLS 716, Bloco E, Sala 210 - Asa Sul, Brasília/DF</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i data-feather="mail" class="text-accent mr-4 mt-1"></i> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">Email</h4> |
|
|
<p>contato@drasinara.com.br</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i data-feather="phone" class="text-accent mr-4 mt-1"></i> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">Telefone</h4> |
|
|
<p>(61) 99999-9999</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i data-feather="clock" class="text-accent mr-4 mt-1"></i> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">Horário de Atendimento</h4> |
|
|
<p>Segunda a Sexta: 8h às 18h<br>Sábado: 8h às 12h</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2" data-aos="fade-left"> |
|
|
<form class="bg-white rounded-lg shadow-xl p-8 text-primary"> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block font-medium mb-2">Nome Completo</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block font-medium mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="phone" class="block font-medium mb-2">Telefone</label> |
|
|
<input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="service" class="block font-medium mb-2">Serviço de Interesse</label> |
|
|
<select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"> |
|
|
<option value="">Selecione...</option> |
|
|
<option value="consulta">Consulta Inicial</option> |
|
|
<option value="retorno">Acompanhamento</option> |
|
|
<option value="domiciliar">Visita Domiciliar</option> |
|
|
<option value="escola">Orientação Escolar</option> |
|
|
<option value="laudo">Laudos e Relatórios</option> |
|
|
<option value="grupo">Grupo de Apoio</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block font-medium mb-2">Mensagem</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="btn-primary w-full py-3 rounded-lg font-medium">Enviar Mensagem</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between"> |
|
|
<div class="mb-8 md:mb-0"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i data-feather="heart" class="text-accent mr-2"></i> |
|
|
<span class="text-xl font-bold">Dra. Sinara Nogueira</span> |
|
|
</div> |
|
|
<p class="mb-4">Especialista no cuidado de crianças atípicas</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-accent transition"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-accent transition"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-accent transition"> |
|
|
<i data-feather="linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-accent transition"> |
|
|
<i data-feather="youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Links Rápidos</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#sobre" class="text-gray-400 hover:text-accent transition">Sobre</a></li> |
|
|
<li><a href="#especialidades" class="text-gray-400 hover:text-accent transition">Especialidades</a></li> |
|
|
<li><a href="#diferencial" class="text-gray-400 hover:text-accent transition">Diferencial</a></li> |
|
|
<li><a href="#servicos" class="text-gray-400 hover:text-accent transition">Serviços</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Contato</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="map-pin" class="text-accent mr-2 mt-1 w-4 h-4"></i> |
|
|
<span class="text-gray-400">SHLS 716, Bloco E, Sala 210</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="mail" class="text-accent mr-2 mt-1 w-4 h-4"></i> |
|
|
<span class="text-gray-400">contato@drasinara.com.br</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="phone" class="text-accent mr-2 mt-1 w-4 h-4"></i> |
|
|
<span class="text-gray-400">(61) 99999-9999</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Legal</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-accent transition">Política de Privacidade</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-accent transition">Termos de Uso</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-accent transition">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 Dra. Sinara Nogueira. Todos os direitos reservados.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelector('.md\\:hidden').addEventListener('click', function() { |
|
|
const nav = document.querySelector('nav'); |
|
|
nav.classList.toggle('hidden'); |
|
|
nav.classList.toggle('flex'); |
|
|
nav.classList.toggle('flex-col'); |
|
|
nav.classList.toggle('absolute'); |
|
|
nav.classList.toggle('top-16'); |
|
|
nav.classList.toggle('right-6'); |
|
|
nav.classList.toggle('bg-white'); |
|
|
nav.classList.toggle('p-4'); |
|
|
nav.classList.toggle('rounded-lg'); |
|
|
nav.classList.toggle('shadow-lg'); |
|
|
nav.classList.toggle('space-y-4'); |
|
|
nav.classList.toggle('space-x-8'); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
