%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/Pneumococica.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("/pneumococica.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 infecção pneumocócica?',
    answer: 'A infecção pneumocócica é causada pela bactéria Streptococcus pneumoniae (pneumococo) e pode provocar diversas doenças graves como pneumonia, meningite, sepse (infecção generalizada) e otite média (infecção no ouvido médio).'
  },
  {
    question: 'Quem deve tomar a vacina pneumocócica?',
    answer: 'A vacina é recomendada para bebês, crianças pequenas, adultos com 60 anos ou mais e pessoas com condições médicas específicas que aumentam o risco de infecção pneumocócica grave, como doenças cardíacas, pulmonares, diabetes, entre outras.'
  },
  {
    question: 'Quais são os tipos de vacina pneumocócica disponíveis?',
    answer: 'Existem principalmente dois tipos: a vacina pneumocócica conjugada (VPC10 ou VPC13), que protege contra 10 ou 13 sorotipos, respectivamente, e a vacina pneumocócica polissacarídica 23-valente (VPP23), que protege contra 23 sorotipos da bactéria.'
  },
  {
    question: 'Quantas doses da vacina são necessárias?',
    answer: 'Para crianças, o esquema varia conforme a idade de início da vacinação, geralmente 3 doses no primeiro ano de vida com um reforço no segundo ano. Para adultos, depende da vacina e das condições de saúde, podendo ser dose única ou seguida de reforços.'
  },
  {
    question: 'Quais os efeitos colaterais da vacina pneumocócica?',
    answer: 'Os efeitos colaterais mais comuns são dor, vermelhidão ou inchaço no local da injeção, e febre baixa. Reações mais graves são extremamente raras.'
  },
  {
    question: 'A vacina pneumocócica pode ser tomada junto com outras vacinas?',
    answer: 'Sim, a vacina pneumocócica pode ser administrada simultaneamente com outras vacinas do calendário, em locais de aplicação diferentes ou no mesmo membro com pelo menos 2,5 cm de distância entre os locais de injeção.'
  },
];

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

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

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

  const cards = [
    {
      icon: <FaChartLine />,
      title: 'Previne doenças graves',
      description:
        'Protege contra pneumonia, meningite, sepse e outras infecções causadas pelo pneumococo.',
    },
    {
      icon: <FaShieldAlt />,
      title: 'Proteção para todas as idades',
      description: 'Indicada para crianças, adultos a partir de 60 anos e grupos de risco.',
    },
    {
      icon: <FaGlobeAmericas />,
      title: 'Eficácia comprovada',
      description:
        'Reduz significativamente as taxas de internação e mortalidade por infecções pneumocócicas.',
    },
  ];

  const cards2 = [
    {
      icon: <FaSyringe />,
      title: 'Risco de pneumonia pneumocócica',
      description:
        'Infecção respiratória grave que pode exigir hospitalização e ter complicações sérias.',
    },
    {
      icon: <FaSkull />,
      title: 'Possibilidade de meningite',
      description: 'Inflamação das membranas que envolvem o cérebro, podendo causar sequelas permanentes ou morte.',
    },
    {
      icon: <FaExclamationTriangle />,
      title: 'Maior risco para grupos específicos',
      description:
        'Crianças menores de 2 anos, idosos e pessoas com doenças crônicas têm maior risco de desenvolver formas graves da doença.',
    },
  ];

  return (
    <PageContainer>
      <HeroSection>
        <h1>
          Proteja-se contra <span className="bolderLand">infecções pneumocócicas!</span>
        </h1>
        <p>
          As infecções pneumocócicas podem causar doenças graves como pneumonia, meningite e sepse, 
          especialmente em crianças e idosos. A vacina pneumocócica é fundamental para prevenir essas 
          complicações e proteger sua saúde. Não espere! Vacine-se agora com a Vacivitta e garanta 
          sua proteção contra o pneumococo.
        </p>
        <CTAButton as="a" href="https://wa.me/551108001233333" target="_blank" rel="noopener noreferrer">Agende agora sua vacina</CTAButton>
      </HeroSection>

      <Section2>
        <h1>
          Vacine-se agora e evite <span className="bolderBlue">complicações graves!</span>
        </h1>
        <h2>Por que tomar a vacina pneumocócica?</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 menores de 5 anos</strong> - Especialmente menores de 2 anos, que têm maior risco de doenças pneumocócicas.</li>
            <li><strong>Adultos com 60 anos ou mais</strong> - O risco de doença pneumocócica aumenta com a idade.</li>
            <li><strong>Pessoas com condições de risco</strong> - Como doenças cardíacas, pulmonares, diabetes, imunossupressão e outras.</li>
          </IndicationList>
        </IndicationSection>

        <Reinforcement>
          O tipo e esquema de vacinação variam conforme a idade e condição de saúde. Consulte um profissional de saúde para orientação personalizada.
        </Reinforcement>

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

      <Section2 primary>
        <h1>
          O que acontece se eu <span className="bolderBlue">não 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>
          A vacinação é a forma mais eficaz de proteção contra as doenças pneumocócicas graves.
        </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 agora!</BannerHeading>
            <BannerText>
              Não espere até que seja tarde. A vacina pneumocócica previne doenças graves e potencialmente fatais.
            </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 Pneumococica;

Zerion Mini Shell 1.0