%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/vacivi36/SiteVacivitta/vacivitta/src/pages/services-lp/
Upload File :
Create Path :
Current File : /home/vacivi36/SiteVacivitta/vacivitta/src/pages/services-lp/Triplice.jsx

import styled from 'styled-components';
import React, { useState } from 'react';
import { FaShieldAlt, FaChevronDown, FaChevronUp, FaHome, FaClinicMedical, FaCertificate, FaMap, FaSyringe, FaChartLine, FaGlobeAmericas, FaSkull, FaExclamationTriangle } from 'react-icons/fa';

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

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("/triplice.png") center/cover no-repeat;
  height: 90vh;
  color: white;

  h1,
  p {
    width: 80%;
  }

  p {
    color: white;
  }

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

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

  h1,
  h2 {
    color: #3d9948;
    width: 80%;
  }

  h2 {
    color: #0a2b3a;
  }

  @media (max-width: 768px) {
    padding: 50px 20px;
    width: 100%;
    h1,
  h2 {
    width: 90%;
  }
  }
`;

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

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

const Card = styled.div`
  border-radius: 28px;
  padding: 30px;
  cursor: pointer;
  flex: 1 1 300px;
  background-color: ${({ primary }) => (primary ? 'white' : '#0a2b3a')};
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    background-color: #007bff;

    svg {
      color: white;
    }
  }
`;

const CardIcon = styled.div`
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: ${({ primary }) => (primary ? '#0a2b3a' : '#007bff')};
  display: flex;
  align-items: center;
  justify-content: center;
`;

const CardTitle = styled.h3`
  font-size: 1.2rem;
  color: ${({ primary }) => (primary ? '#0a2b3a' : 'white')};
  margin-top: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
`;

const CardDescription = styled.p`
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  color: ${({ primary }) => (primary ? '#0a2b3a' : 'white')};
`;

/* ---- Novos estilos para Indicação e Reforço ---- */
const IndicationSection = styled.div`
  margin-top: 2rem;
  background-color: #e6f2ff;
  padding: 1.5rem;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
`;

const IndicationTitle = styled.h3`
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
  color: #0a2b3a;
  text-align: center;
  border-bottom: 2px solid #007bff;
  display: inline-block;
  padding-bottom: 0.3rem;
`;

const IndicationList = styled.ul`
  list-style-type: disc;
  padding-left: 1.5rem;
  font-size: 1rem;
  text-align: left;
  line-height: 1.6;
  color: #333;
`;

const Reinforcement = styled.p`
  margin-top: 2rem;
  font-size: 1.1rem;
  text-align: center;
  background-color: #fff3cd;
  color: #856404;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
`;

const SectionContainer = styled.section`
  background-color: white;
  padding: 4rem 1rem;
  font-family: 'League Spartan', sans-serif;
`;

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: #007bff;
  padding: 2rem;
  text-align: center;
  color: #fff;
`;

const FAQTitle = styled.h2`
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  color: white;
`;

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

const FAQItem = styled.div`
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
  cursor: pointer;
  transition: background 0.3s ease;
  &:hover {
    background: #f9f9f9;
  }
`;

const FAQQuestion = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
`;

const FAQAnswer = styled.div`
  max-height: ${({ isOpen }) => (isOpen ? '200px' : '0px')};
  opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};
  transition: max-height 0.4s ease, opacity 0.4s ease;
  overflow: hidden;
  color: #555;
  font-size: 1rem;
  margin-top: ${({ isOpen }) => (isOpen ? '0.5rem' : '0')};
`;

const BannerSection = styled.div`
  background: #eaf9ff;
  padding: 2rem;
  text-align: center;
  border-top: 1px solid #ddd;
`;

const BannerHeading = styled.h3`
  font-size: 1.8rem;
  margin: 0 0 1rem;
  color: #0056b3;
`;

const BannerText = styled.p`
  font-size: 1rem;
  margin: 0 0 1rem;
  color: #333;
`;

const BannerButton = styled.a`
  display: inline-block;
  background: #28a745;
  color: #fff;
  padding: 20px 40px;
  border-radius: 82px;
  text-decoration: none;
  align-items: center;
  font-weight: 500;
  transition: background 0.3s ease;
  &:hover {
    background: #218838;
  }
`;

const faqData = [
  {
    question: 'O que é a vacina Tríplice Viral?',
    answer: 'A vacina Tríplice Viral (SCR) é uma vacina combinada que protege contra três doenças virais: sarampo, caxumba e rubéola. É composta por vírus vivos atenuados, que estimulam o sistema imunológico a produzir defesas contra estas doenças sem causar a infecção propriamente dita.'
  },
  {
    question: 'Qual é o esquema de vacinação da Tríplice Viral?',
    answer: 'O esquema vacinal básico consiste em duas doses. No calendário de vacinação do SUS, a primeira dose é aplicada aos 12 meses e a segunda dose aos 15 meses (como componente da tetraviral). Para quem não recebeu as doses na idade recomendada, a vacina pode ser aplicada até 29 anos (duas doses) ou em dose única para pessoas entre 30 e 59 anos.'
  },
  {
    question: 'Quais doenças a vacina Tríplice Viral previne?',
    answer: 'A vacina previne o sarampo (doença viral altamente contagiosa que pode causar complicações pulmonares e neurológicas graves), a caxumba (que pode causar inflamação nas glândulas parótidas e, em alguns casos, infertilidade masculina) e a rubéola (que em gestantes pode causar a Síndrome da Rubéola Congênita, levando a malformações fetais).'
  },
  {
    question: 'A vacina Tríplice Viral é segura?',
    answer: 'Sim, a vacina é segura e eficaz, aprovada por agências reguladoras de todo o mundo, incluindo a ANVISA. Como qualquer medicamento, pode causar efeitos colaterais, geralmente leves e transitórios, como febre baixa, manchas avermelhadas na pele e dor no local da aplicação, que desaparecem em poucos dias.'
  },
  {
    question: 'Quem não deve tomar a vacina Tríplice Viral?',
    answer: 'A vacina é contraindicada para gestantes, pessoas com imunodeficiência grave, histórico de reação alérgica grave a componentes da vacina ou à dose anterior, pessoas em tratamento com imunossupressores ou corticoides em doses altas, e pacientes que receberam transfusão de sangue ou imunoglobulina nos últimos 3-11 meses.'
  },
  {
    question: 'Por que é importante se vacinar contra sarampo, caxumba e rubéola?',
    answer: 'A vacinação não só protege individualmente contra doenças potencialmente graves, como também contribui para a proteção coletiva (imunidade de rebanho), evitando a transmissão para pessoas que não podem ser vacinadas. Além disso, a vacinação é fundamental para manter o status de eliminação do sarampo e da rubéola no Brasil.'
  },
];

/* -------------------------------------------------- */

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

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

  const cards = [
    {
      icon: <FaShieldAlt />,
      title: 'Proteção contra 3 doenças',
      description:
        'Uma única vacina protege contra sarampo, caxumba e rubéola, três doenças virais altamente contagiosas que podem causar complicações graves.',
    },
    {
      icon: <FaChartLine />,
      title: 'Alta eficácia comprovada',
      description: 'Após duas doses, a vacina proporciona proteção superior a 95% contra o sarampo e a rubéola, e cerca de 88% contra a caxumba.',
    },
    {
      icon: <FaGlobeAmericas />,
      title: 'Benefício individual e coletivo',
      description:
        'Além de proteger quem recebe a vacina, contribui para a imunidade coletiva, protegendo indiretamente pessoas que não podem ser vacinadas.',
    },
  ];

  const cards2 = [
    {
      icon: <FaSyringe />,
      title: 'Sarampo - alta transmissibilidade',
      description:
        'Doença extremamente contagiosa (uma pessoa infectada pode transmitir para até 18 outras) que pode causar pneumonia, encefalite e morte.',
    },
    {
      icon: <FaExclamationTriangle />,
      title: 'Caxumba - complicações graves',
      description: 'Pode levar à orquite (inflamação dos testículos), pancreatite, meningite e, em alguns casos, surdez permanente.',
    },
    {
      icon: <FaSkull />,
      title: 'Rubéola - risco para gestantes',
      description:
        'Se contraída durante a gestação, pode causar aborto, morte fetal ou síndrome da rubéola congênita, com graves malformações no bebê.',
    },
  ];

  return (
    <PageContainer>
      <HeroSection>
        <h1>
          Proteção essencial contra <span className="bolderLand">sarampo, caxumba e rubéola</span>
        </h1>
        <p>
          A vacina Tríplice Viral (SCR) oferece proteção fundamental contra três doenças virais altamente contagiosas 
          que podem resultar em complicações graves. O sarampo pode causar pneumonia e encefalite; a caxumba pode levar à 
          infertilidade e meningite; e a rubéola representa um sério risco para gestantes e seus bebês. A vacinação é 
          essencial para a proteção individual e coletiva, ajudando a manter essas doenças sob controle.
        </p>
        <CTAButton as="a" href="https://wa.me/551108001233333" target="_blank" rel="noopener noreferrer">Agende agora sua vacina</CTAButton>
      </HeroSection>

      <Section2>
        <h1>
          Benefícios da <span className="bolderBlue">vacina Tríplice Viral</span>
        </h1>
        <h2>Por que a vacinação é essencial?</h2>
        <CardsContainer>
          {cards.map((card, index) => (
            <Card key={index}>
              <CardIcon>{card.icon}</CardIcon>
              <CardTitle>{card.title}</CardTitle>
              <CardDescription>{card.description}</CardDescription>
            </Card>
          ))}
        </CardsContainer>
        <IndicationSection>
          <IndicationTitle>Indicação:</IndicationTitle>
          <IndicationList>
            <li><strong>Crianças</strong> - Primeira dose aos 12 meses e segunda dose entre 15 meses e 4 anos.</li>
            <li><strong>Adolescentes e adultos até 29 anos</strong> - Duas doses com intervalo mínimo de 30 dias para quem não recebeu ou tem dúvidas sobre a vacinação na infância.</li>
            <li><strong>Adultos de 30 a 59 anos</strong> - Dose única se não vacinados anteriormente.</li>
            <li><strong>Profissionais de saúde</strong> - Recomendação de duas doses independentemente da idade.</li>
          </IndicationList>
        </IndicationSection>

        <Reinforcement>
          O esquema vacinal completo com duas doses é fundamental para garantir proteção adequada contra as três doenças. A vacina Tríplice Viral está disponível gratuitamente no SUS e também em clínicas privadas como a Vacivitta.
        </Reinforcement>

        <CTAButton as="a" href="https://wa.me/551108001233333" target="_blank" rel="noopener noreferrer">Agende sua vacina agora</CTAButton>
      </Section2>

      <Section2 primary>
        <h1>
          Riscos de <span className="bolderBlue">não se vacinar</span>
        </h1>
        <CardsContainer>
          {cards2.map((card, index) => (
            <Card primary key={index}>
              <CardIcon primary>{card.icon}</CardIcon>
              <CardTitle primary>{card.title}</CardTitle>
              <CardDescription primary>{card.description}</CardDescription>
            </Card>
          ))}
        </CardsContainer>

        <Reinforcement>
          O sarampo é uma das doenças mais contagiosas que existem e pode ser fatal. Antes da vacinação em massa, estas doenças causavam milhões de casos e milhares de mortes anualmente em todo o mundo. A queda nas coberturas vacinais tem levado ao ressurgimento de surtos dessas doenças em diversos países.
        </Reinforcement>

        <CTAButton as="a" href="https://wa.me/551108001233333" target="_blank" rel="noopener noreferrer">Agende sua vacina agora</CTAButton>
      </Section2>

      <SectionContainer>
        <ContentWrapper>
          <FAQHeader>
            <FAQTitle>Dúvidas frequentes</FAQTitle>
          </FAQHeader>
          <FAQList>
            {faqData.map((item, index) => (
              <FAQItem key={index} onClick={() => toggleFAQ(index)}>
                <FAQQuestion>
                  {item.question}
                  {activeIndex === index ? <FaChevronUp size={24} /> : <FaChevronDown size={24} />}
                </FAQQuestion>
                <FAQAnswer isOpen={activeIndex === index}>
                  {item.answer}
                </FAQAnswer>
              </FAQItem>
            ))}
          </FAQList>
          <BannerSection>
            <BannerHeading>Proteja-se e proteja quem você ama!</BannerHeading>
            <BannerText>
              A vacinação contra sarampo, caxumba e rubéola é um ato de responsabilidade individual e coletiva. Não deixe para depois - mantenha sua carteira de vacinação em dia.
            </BannerText>
            <BannerButton as="a" href="https://wa.me/551108001233333" target="_blank" rel="noopener noreferrer">
              💉 Agende sua vacina hoje mesmo <span role="img" aria-label="Calendário">📅</span>
            </BannerButton>
          </BannerSection>
        </ContentWrapper>
      </SectionContainer>
    </PageContainer>
  );
}

export default Triplice;

Zerion Mini Shell 1.0