%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/vacivi36/.trash/vacivitta/src/pages/servicos/
Upload File :
Create Path :
Current File : /home/vacivi36/.trash/vacivitta/src/pages/servicos/ConsultaEspecialistas.jsx

import styled from 'styled-components';
import React, { useState } from 'react';
import { FaChevronDown, FaChevronUp, FaUserMd, FaStethoscope, FaHeartbeat, FaCalendarCheck, FaClipboardCheck, FaColumns, FaNotesMedical, FaHospital, FaCalendarAlt, FaLaptopMedical } from 'react-icons/fa';

const PageContainer = styled.div`
  font-family: 'League Spartan', sans-serif;
  background-color: white;
  margin-top: 100px;
  color: #333;
`;

const CTAButton = styled.button`
  background: #3D9948;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  padding: 20px 40px;
  font-size: 1rem;
  border-radius: 55px;
  transition: 0.3s;
  text-decoration: none;
  display: inline-block;

  &:hover {
    background: #2d7a38;
  }
`;

const HeroSection = styled.section`
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 140px 80px;
  background: linear-gradient(
      to right,
      rgba(0, 148, 217, 0.8),
      rgba(61, 153, 72, 0.8)
    );
  height: 90vh;
  color: white;

  h1 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
  }

  p {
    font-size: 1.2rem;
    max-width: 800px;
    color: white;
  }

  @media (max-width: 768px) {
    padding: 120px 20px;
    
    h1 {
      font-size: 2rem;
    }
    
    p {
      font-size: 1rem;
    }
  }
`;

const Section = styled.div`
  display: flex;
  padding: 80px 80px;
  flex-direction: column;
  text-align: center;
  background-color: ${({ primary }) => (primary ? '#f9f9f9' : 'white')};
  align-items: center;

  h2 {
    color: #0094d9;
    margin-bottom: 2rem;
    font-size: 2.2rem;
  }

  p {
    max-width: 900px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
    font-size: 1.1rem;
  }

  @media (max-width: 768px) {
    padding: 50px 20px;
    
    h2 {
      font-size: 1.8rem;
    }
    
    p {
      font-size: 1rem;
    }
  }
`;

const CardsContainer = styled.div`
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
  max-width: 1200px;

  @media (max-width: 768px) {
    gap: 15px;
  }
`;

const Card = styled.div`
  border-radius: 20px;
  padding: 30px;
  flex: 1 1 300px;
  background-color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-top: 4px solid #0094d9;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  @media (max-width: 768px) {
    padding: 20px;
  }
`;

const CardIcon = styled.div`
  font-size: 2.5rem;
  margin-bottom: 1.2rem;
  color: #0094d9;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const CardTitle = styled.h3`
  font-size: 1.3rem;
  color: #333;
  margin-top: 10px;
  font-weight: 600;
  margin-bottom: 15px;
`;

const CardDescription = styled.p`
  font-size: 1rem;
  line-height: 1.5;
  color: #555;
`;

const ServiceTable = styled.div`
  margin-top: 2rem;
  width: 100%;
  max-width: 900px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
`;

const TableHeader = styled.div`
  background-color: #0094d9;
  color: white;
  padding: 15px 20px;
  font-weight: 600;
  display: grid;
  grid-template-columns: 1fr 2fr;

  @media (max-width: 768px) {
    font-size: 0.9rem;
  }
`;

const TableRow = styled.div`
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background-color: ${props => props.index % 2 === 0 ? '#f9f9f9' : 'white'};
  transition: background-color 0.3s;

  &:hover {
    background-color: #f0f8ff;
  }

  @media (max-width: 768px) {
    font-size: 0.9rem;
  }
`;

const TableService = styled.div`
  font-weight: 600;
  color: #333;
`;

const TableDescription = styled.div`
  color: #555;
  line-height: 1.4;
  text-align: left;
`;

const SectionContainer = styled.div`
  padding: 80px 20px;
  background-color: #f9f9f9;
`;

const ContentWrapper = styled.div`
  max-width: 900px;
  margin: 0 auto;
`;

const FAQHeader = styled.div`
  text-align: center;
  margin-bottom: 40px;

  h2 {
    color: #0094d9;
    font-size: 2.2rem;
    margin-bottom: 15px;
  }

  p {
    color: #555;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
  }

  @media (max-width: 768px) {
    h2 {
      font-size: 1.8rem;
    }

    p {
      font-size: 1rem;
    }
  }
`;

const FAQList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 15px;
`;

const FAQItem = styled.div`
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
`;

const FAQQuestion = styled.div`
  padding: 1.5rem 2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  transition: background-color 0.3s;

  &:hover {
    background-color: #f5f5f5;
  }

  h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
    font-weight: 600;
  }

  svg {
    color: #0094d9;
    font-size: 1.2rem;
  }
`;

const FAQAnswer = styled.div`
  padding: 1rem 2rem 1.5rem;
  color: #555;
  line-height: 1.6;
  font-size: 1rem;
  text-align: left;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
`;

const SpecialtyGrid = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
  max-width: 1200px;

  @media (max-width: 768px) {
    gap: 15px;
  }
`;

const SpecialtyCard = styled.div`
  border-radius: 20px;
  padding: 30px;
  flex: 1 1 300px;
  background-color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-top: 4px solid #0094d9;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  @media (max-width: 768px) {
    padding: 20px;
  }
`;

const SpecialtyIcon = styled.div`
  font-size: 2.5rem;
  margin-bottom: 1.2rem;
  color: #0094d9;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const SpecialtyName = styled.h3`
  font-size: 1.3rem;
  color: #333;
  margin-top: 10px;
  font-weight: 600;
  margin-bottom: 15px;
`;

const SpecialtyDescription = styled.p`
  font-size: 1rem;
  line-height: 1.5;
  color: #555;
`;

const Disclaimer = styled.p`
  color: #555;
  font-size: 0.9rem;
  margin-top: 1rem;
`;

const ProcessSteps = styled.div`
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
  width: 100%;
  max-width: 900px;
`;

const ProcessStep = styled.div`
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
`;

const StepNumber = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #0094d9;
  color: white;
  font-weight: bold;
  font-size: 1.4rem;
  flex-shrink: 0;
`;

const StepContent = styled.div`
  h3 {
    margin-top: 0;
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  p {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
  }
`;

function ConsultaEspecialistas() {
  const [activeIndex, setActiveIndex] = useState(-1);

  const toggleFAQ = (index) => {
    setActiveIndex(activeIndex === index ? -1 : index);
  };

  const specialties = [
    {
      icon: <FaUserMd />,
      name: "Clínica médica",
      description: "Atendimento a pacientes adultos, com foco em prevenção, diagnóstico e tratamento de doenças mais comuns."
    },
    {
      icon: <FaHeartbeat />,
      name: "Cardiologia",
      description: "Cuidados completos para a saúde do coração, com avaliação de riscos cardiovasculares e acompanhamento especializado."
    },
    {
      icon: <FaStethoscope />,
      name: "Pediatria",
      description: "Acompanhamento do crescimento e desenvolvimento infantil, com foco na saúde e bem-estar das crianças."
    },
    {
      icon: <FaNotesMedical />,
      name: "Ginecologia",
      description: "Cuidados integrais para a saúde da mulher em todas as fases da vida, com exames preventivos e tratamentos específicos."
    },
    {
      icon: <FaColumns />,
      name: "Ortopedia",
      description: "Tratamento de problemas relacionados aos ossos, músculos, articulações e tecidos conectivos."
    },
    {
      icon: <FaUserMd />,
      name: "Dermatologia",
      description: "Diagnóstico e tratamento de doenças da pele, cabelo e unhas, incluindo prevenção e estética."
    }
  ];

  const faqs = [
    {
      question: "É necessário agendar consulta com antecedência?",
      answer: "Sim, recomendamos o agendamento prévio para garantir o atendimento no dia e horário desejados. As consultas podem ser agendadas por telefone, WhatsApp ou diretamente em nossas unidades."
    },
    {
      question: "Quais documentos devo levar para a consulta?",
      answer: "É necessário apresentar documento de identidade com foto, carteirinha do convênio (se aplicável) e, se possível, exames anteriores e receitas médicas relacionados ao motivo da consulta."
    },
    {
      question: "A Vacivitta atende por convênio?",
      answer: "Sim, trabalhamos com diversos convênios médicos. Recomendamos verificar a cobertura do seu plano entrando em contato com a unidade mais próxima ou consultando diretamente com seu convênio."
    },
    {
      question: "Quanto tempo dura uma consulta?",
      answer: "O tempo médio de uma consulta é de 30 a 40 minutos, podendo variar conforme a especialidade e a complexidade do caso. Reservamos tempo suficiente para uma avaliação completa e detalhada."
    },
    {
      question: "Posso realizar exames no mesmo dia da consulta?",
      answer: "Alguns exames básicos podem ser realizados no mesmo dia, dependendo da disponibilidade. Exames mais complexos geralmente precisam ser agendados para outra data, após a solicitação médica."
    }
  ];

  return (
    <PageContainer>
      <HeroSection>
        <h1>Consultas com especialistas</h1>
        <p>Atendimento médico especializado e personalizado para o cuidado completo da sua saúde</p>
        <CTAButton as="a" href="https://wa.me/5511989264949" target="_blank" rel="noopener noreferrer">Agendar consulta</CTAButton>
      </HeroSection>

      <Section>
        <h2>Especialidades médicas disponíveis</h2>
        <p>
          Na Vacivitta, oferecemos consultas com diversos especialistas em um só lugar, para cuidar da saúde 
          de toda a família com qualidade e comodidade. Nossa rede de médicos é formada por profissionais 
          qualificados e experientes nas mais diversas áreas da medicina.
        </p>

        <SpecialtyGrid>
          {specialties.map((specialty, index) => (
            <SpecialtyCard key={index}>
              <SpecialtyIcon>{specialty.icon}</SpecialtyIcon>
              <SpecialtyName>{specialty.name}</SpecialtyName>
              <SpecialtyDescription>{specialty.description}</SpecialtyDescription>
            </SpecialtyCard>
          ))}
        </SpecialtyGrid>
        
        <Disclaimer>
          *A disponibilidade de especialidades pode variar conforme a unidade. Consulte as especialidades disponíveis em cada local.
        </Disclaimer>
      </Section>

      <Section primary>
        <h2>Por que escolher a Vacivitta</h2>
        <p>
          Nosso compromisso é oferecer um atendimento médico de excelência, com foco no cuidado integral 
          e na experiência positiva dos nossos pacientes em cada consulta.
        </p>

        <CardsContainer>
          <Card>
            <CardIcon>
              <FaUserMd />
            </CardIcon>
            <CardTitle>Profissionais qualificados</CardTitle>
            <CardDescription>
              Médicos especialistas com vasta experiência e formação em instituições renomadas, em constante atualização científica.
            </CardDescription>
          </Card>
          <Card>
            <CardIcon>
              <FaHospital />
            </CardIcon>
            <CardTitle>Ambiente acolhedor</CardTitle>
            <CardDescription>
              Clínicas modernas e confortáveis, projetadas para proporcionar bem-estar e tranquilidade durante sua consulta.
            </CardDescription>
          </Card>
          <Card>
            <CardIcon>
              <FaCalendarAlt />
            </CardIcon>
            <CardTitle>Agendamento flexível</CardTitle>
            <CardDescription>
              Marcação de consultas de forma rápida e prática, com opções de horários estendidos para sua conveniência.
            </CardDescription>
          </Card>
          <Card>
            <CardIcon>
              <FaLaptopMedical />
            </CardIcon>
            <CardTitle>Tecnologia a favor da saúde</CardTitle>
            <CardDescription>
              Sistemas integrados de prontuário eletrônico e ferramentas avançadas para diagnóstico preciso e acompanhamento contínuo.
            </CardDescription>
          </Card>
        </CardsContainer>
      </Section>

      <Section>
        <h2>Como funciona o atendimento</h2>
        <p>
          Agendar e realizar sua consulta na Vacivitta é simples e prático. Veja como funciona 
          nosso processo de atendimento, pensado para oferecer praticidade e qualidade em cada etapa.
        </p>

        <ProcessSteps>
          <ProcessStep>
            <StepNumber>1</StepNumber>
            <StepContent>
              <h3>Agendamento</h3>
              <p>
                Marque sua consulta pelo telefone, site ou aplicativo, escolhendo o especialista, 
                a unidade e o horário mais conveniente para você.
              </p>
            </StepContent>
          </ProcessStep>
          
          <ProcessStep>
            <StepNumber>2</StepNumber>
            <StepContent>
              <h3>Confirmação</h3>
              <p>
                Receba a confirmação da sua consulta por e-mail ou SMS, com lembretes e orientações 
                sobre o que levar (documentos, exames anteriores, etc).
              </p>
            </StepContent>
          </ProcessStep>
          
          <ProcessStep>
            <StepNumber>3</StepNumber>
            <StepContent>
              <h3>Consulta</h3>
              <p>
                No dia agendado, compareça com 15 minutos de antecedência para o check-in. Você será 
                atendido pelo especialista no horário marcado, com tempo adequado para uma avaliação completa.
              </p>
            </StepContent>
          </ProcessStep>
          
          <ProcessStep>
            <StepNumber>4</StepNumber>
            <StepContent>
              <h3>Pós-consulta</h3>
              <p>
                Receba prescrições, solicitações de exames e orientações detalhadas. Caso necessário, 
                agende retornos ou encaminhamentos para outros especialistas na própria recepção.
              </p>
            </StepContent>
          </ProcessStep>
        </ProcessSteps>
      </Section>

      <SectionContainer>
        <ContentWrapper>
          <FAQHeader>
            <h2>Perguntas frequentes</h2>
          </FAQHeader>
          <FAQList>
            {faqs.map((faq, index) => (
              <FAQItem key={index}>
                <FAQQuestion onClick={() => toggleFAQ(index)}>
                  <h3>{faq.question}</h3>
                  {activeIndex === index ? <FaChevronUp /> : <FaChevronDown />}
                </FAQQuestion>
                {activeIndex === index && <FAQAnswer>{faq.answer}</FAQAnswer>}
              </FAQItem>
            ))}
          </FAQList>
        </ContentWrapper>
      </SectionContainer>

      <Section>
        <h2>Agende sua consulta especializada</h2>
        <p>
          Cuide da sua saúde com quem entende. Nossos especialistas estão prontos para 
          oferecer o atendimento de qualidade que você merece, com agilidade e atenção personalizada.
        </p>
        <CTAButton as="a" href="https://wa.me/5511989264949" target="_blank" rel="noopener noreferrer">Agendar agora</CTAButton>
      </Section>
    </PageContainer>
  );
}

export default ConsultaEspecialistas;

Zerion Mini Shell 1.0