%PDF- %PDF-
Mini Shell

Mini Shell

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

import styled from 'styled-components';
import React, { useState } from 'react';
import { FaStethoscope, FaChevronDown, FaChevronUp, FaHeartbeat, FaUserMd, FaCertificate, FaFlask, FaClipboardCheck, FaRegClock, FaCheck } 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;

  &: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)
    ),
    url("/exames-clinicos.jpg") center/cover no-repeat;
  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 ExamTable = 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 TableCategory = styled.div`
  font-weight: 600;
  color: #333;
`;

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

const SectionContainer = styled.section`
  background-color: white;
  padding: 4rem 1rem;
`;

const ContentWrapper = styled.div`
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
`;

const FAQHeader = styled.div`
  background: #0094d9;
  padding: 2rem;
  text-align: center;
  color: white;

  h2 {
    margin: 0;
    font-size: 1.8rem;
    color: white;
  }
`;

const FAQList = styled.div`
  padding: 2rem;
`;

const FAQItem = styled.div`
  margin-bottom: 1rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;

  &:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }
`;

const FAQQuestion = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1rem 0;

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

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

const FAQAnswer = styled.div`
  padding: 0.5rem 0 1rem;
  color: #555;
  line-height: 1.6;
  font-size: 1rem;
  text-align: left;
`;

function ExamesClinicos() {
  const [activeIndex, setActiveIndex] = useState(null);

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

  const openWhatsApp = () => {
    // Format the phone number by removing spaces and special characters
    const phoneNumber = "1108001233333";
    window.open(`https://wa.me/${phoneNumber}`, '_blank');
  };

  const examesCategories = [
    {
      category: "Exames de Rotina",
      description: "Exames básicos para avaliação geral da saúde, recomendados para todas as faixas etárias, incluindo hemograma completo, glicemia, colesterol e triglicerídeos."
    },
    {
      category: "Avaliação Cardiológica",
      description: "Exames para avaliação da saúde do coração, como eletrocardiograma (ECG), teste ergométrico e monitoramento da pressão arterial."
    },
    {
      category: "Perfil Hormonal",
      description: "Exames para avaliação das funções endócrinas, incluindo dosagens hormonais da tireoide, hormônios reprodutivos e metabólicos."
    },
    {
      category: "Avaliação Nutricional",
      description: "Exames para verificar carências nutricionais, como vitaminas, minerais e análise do estado nutricional do paciente."
    },
    {
      category: "Check-up Preventivo",
      description: "Conjunto amplo de exames para avaliação completa da saúde, identificação precoce de doenças e prevenção de problemas futuros."
    },
    {
      category: "Exames Específicos",
      description: "Avaliações direcionadas para condições específicas, conforme necessidade identificada pelo médico durante a consulta."
    }
  ];

  const faqs = [
    {
      question: "É necessário jejum para a realização dos exames clínicos?",
      answer: "Depende do tipo de exame. Exames como glicemia, colesterol, triglicerídeos e outros exames bioquímicos geralmente requerem jejum de 8 a 12 horas. Para outros exames, como hemograma e urina, geralmente não é necessário jejum. No momento do agendamento, você receberá todas as orientações específicas para o seu caso."
    },
    {
      question: "Quanto tempo demora para obter os resultados dos exames?",
      answer: "O prazo para entrega dos resultados varia conforme o tipo de exame. Exames mais simples como hemograma e glicemia geralmente ficam prontos em 1 a 2 dias úteis. Exames mais complexos podem levar de 3 a 5 dias úteis. Alguns exames específicos podem levar até 15 dias. Informamos o prazo exato no momento da coleta."
    },
    {
      question: "Posso fazer todos os exames no mesmo dia?",
      answer: "Sim, na maioria dos casos é possível realizar vários exames no mesmo dia. Organizamos o procedimento para minimizar o desconforto, começando com exames que exigem jejum, seguidos pelos demais. Para alguns exames específicos, pode haver recomendações especiais que podem exigir agendamento em dias separados."
    },
    {
      question: "Os exames clínicos são cobertos por planos de saúde?",
      answer: "Sim, a maioria dos exames clínicos é coberta por planos de saúde, desde que haja solicitação médica. Trabalhamos com os principais convênios do mercado. Recomendamos verificar com seu plano quais exames estão inclusos em sua cobertura. Para exames não cobertos, oferecemos valores acessíveis para pagamento particular."
    },
    {
      question: "Como devo me preparar para os exames clínicos?",
      answer: "A preparação varia conforme o exame. Para a maioria dos exames laboratoriais, recomendamos: manter hidratação adequada (exceto quando orientado ao contrário), seguir o tempo de jejum recomendado quando necessário, evitar atividade física intensa 24h antes, evitar bebidas alcoólicas nas 72h anteriores, e informar todos os medicamentos em uso. Orientações específicas são fornecidas no agendamento."
    }
  ];

  return (
    <PageContainer>
      <HeroSection>
        <h1>Exames clínicos completos</h1>
        <p>Tecnologia avançada e profissionais qualificados para o diagnóstico preciso da sua saúde</p>
        <CTAButton onClick={openWhatsApp}>Agendar Exames</CTAButton>
      </HeroSection>

      <Section>
        <h2>Nossos exames clínicos</h2>
        <p>
          A Vacivitta oferece uma ampla gama de exames clínicos realizados com equipamentos de última geração e analisados 
          por profissionais altamente qualificados. Nosso objetivo é fornecer resultados precisos e confiáveis, 
          contribuindo para diagnósticos assertivos e cuidados de saúde eficazes.
        </p>

        <ExamTable>
          <TableHeader>
            <div>Categoria</div>
            <div>Exames disponíveis</div>
          </TableHeader>
          {examesCategories.map((category, index) => (
            <TableRow key={index} index={index}>
              <TableCategory>{category.category}</TableCategory>
              <TableDescription>{category.description}</TableDescription>
            </TableRow>
          ))}
        </ExamTable>
      </Section>

      <Section primary>
        <h2>Por que escolher a Vacivitta para seus exames</h2>
        <p>
          Realizamos exames com precisão, rapidez e conforto. Nossa estrutura foi planejada para oferecer 
          a melhor experiência possível durante a realização de seus exames clínicos, desde o agendamento 
          até a entrega dos resultados.
        </p>

        <CardsContainer>
          <Card>
            <CardIcon>
              <FaHeartbeat />
            </CardIcon>
            <CardTitle>Atendimento humanizado</CardTitle>
            <CardDescription>
              Acolhimento respeitoso e atendimento personalizado, considerando as necessidades individuais de cada paciente.
            </CardDescription>
          </Card>
          <Card>
            <CardIcon>
              <FaClipboardCheck />
            </CardIcon>
            <CardTitle>Laudos detalhados</CardTitle>
            <CardDescription>
              Relatórios completos e de fácil compreensão, com orientações claras para interpretação dos resultados.
            </CardDescription>
          </Card>
          <Card>
            <CardIcon>
              <FaCertificate />
            </CardIcon>
            <CardTitle>Certificações de qualidade</CardTitle>
            <CardDescription>
              Processos certificados e controlados, seguindo rígidos protocolos que garantem a confiabilidade dos resultados.
            </CardDescription>
          </Card>
        </CardsContainer>
      </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 seus exames clínicos</h2>
        <p>
          Cuide da sua saúde de forma preventiva. Nossos exames clínicos permitem identificar alterações 
          precocemente, possibilitando tratamentos mais eficazes e melhores resultados para sua saúde.
        </p>
        <p>
          Entre em contato conosco para agendar seus exames ou obter mais informações sobre nossos serviços.
          Estamos à disposição para atendê-lo com excelência e profissionalismo.
        </p>
        <CTAButton onClick={openWhatsApp}>Agendar agora</CTAButton>
      </Section>
    </PageContainer>
  );
}

export default ExamesClinicos;

Zerion Mini Shell 1.0