%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/Herpes.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: #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("/herpes.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 é o Herpes Zóster?',
    answer: 'O Herpes Zóster (ou "cobreiro") é uma doença causada pela reativação do vírus Varicela-Zóster, o mesmo que causa a catapora. Após a infecção inicial de catapora, o vírus permanece adormecido nos gânglios nervosos e pode reativar anos depois, causando uma erupção cutânea dolorosa com bolhas ao longo de um nervo afetado.'
  },
  {
    question: 'Quais são os sintomas do Herpes Zóster?',
    answer: 'Os sintomas iniciais incluem dor, formigamento ou queimação em uma área específica do corpo, geralmente em um lado, seguidos por uma erupção de bolhas dolorosas que formam uma faixa. Outros sintomas podem incluir febre, dor de cabeça, fadiga e sensibilidade à luz. A dor pode persistir por meses ou anos após o desaparecimento da erupção (neuralgia pós-herpética).'
  },
  {
    question: 'Quem deve tomar a vacina contra Herpes Zóster?',
    answer: 'A vacina é recomendada para adultos a partir de 50 anos, mesmo que já tenham tido herpes zóster anteriormente. Pessoas com sistema imunológico comprometido também podem se beneficiar da vacinação, seguindo orientação médica. Existem atualmente duas vacinas disponíveis: a vacina viva atenuada (Zostavax®) e a vacina recombinante (Shingrix®).'
  },
  {
    question: 'Qual a eficácia da vacina contra Herpes Zóster?',
    answer: 'A eficácia varia conforme a vacina. A vacina recombinante (Shingrix®) é mais de 90% eficaz na prevenção do herpes zóster e da neuralgia pós-herpética em todas as faixas etárias. A vacina viva atenuada (Zostavax®) tem eficácia de aproximadamente 70% para pessoas entre 50-59 anos, reduzindo para cerca de 50% em pessoas mais idosas.'
  },
  {
    question: 'Quantas doses da vacina são necessárias?',
    answer: 'A vacina recombinante (Shingrix®) é administrada em duas doses, com intervalo de 2 a 6 meses entre elas. Já a vacina viva atenuada (Zostavax®) é aplicada em dose única. O esquema completo é essencial para garantir a proteção adequada, especialmente no caso da vacina recombinante.'
  },
  {
    question: 'Quais são os possíveis efeitos colaterais da vacina?',
    answer: 'Os efeitos colaterais mais comuns incluem dor, vermelhidão e inchaço no local da aplicação, além de dor muscular, fadiga e dor de cabeça. A vacina recombinante (Shingrix®) pode causar reações mais intensas, como febre leve. Geralmente, os efeitos são leves a moderados e duram 2-3 dias. Reações alérgicas graves são extremamente raras.'
  },
];

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

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

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

  const cards = [
    {
      icon: <FaChartLine />,
      title: 'Alta eficácia comprovada',
      description:
        'A vacina recombinante oferece mais de 90% de proteção contra o herpes zóster e suas complicações dolorosas.',
    },
    {
      icon: <FaShieldAlt />,
      title: 'Prevenção da neuralgia pós-herpética',
      description: 'Reduz significativamente o risco da dor crônica debilitante que pode persistir por meses ou anos após a infecção.',
    },
    {
      icon: <FaGlobeAmericas />,
      title: 'Proteção para grupos de risco',
      description:
        'Especialmente importante para adultos acima de 50 anos e pessoas com sistema imunológico comprometido.',
    },
  ];

  const cards2 = [
    {
      icon: <FaSyringe />,
      title: 'Dor intensa e prolongada',
      description:
        'O herpes zóster causa uma dor neuropática que pode ser extremamente debilitante e afetar significativamente a qualidade de vida.',
    },
    {
      icon: <FaSkull />,
      title: 'Neuralgia pós-herpética',
      description: 'Até 30% dos pacientes desenvolvem dor crônica que persiste mesmo após a cura das lesões, podendo durar meses ou anos.',
    },
    {
      icon: <FaExclamationTriangle />,
      title: 'Complicações graves',
      description:
        'Pode causar infecções oculares e perda de visão (zóster oftálmico), problemas neurológicos, infecções bacterianas secundárias e, raramente, AVC.',
    },
  ];

  return (
    <PageContainer>
      <HeroSection>
        <h1>
          Proteja-se contra o <span className="bolderLand">Herpes Zóster!</span>
        </h1>
        <p>
          O Herpes Zóster, conhecido popularmente como "cobreiro", é causado pela reativação 
          do vírus da catapora e pode provocar erupções cutâneas extremamente dolorosas. 
          A dor pode persistir por meses ou anos após o desaparecimento das lesões. 
          A vacinação é a forma mais eficaz de prevenção, especialmente para adultos acima de 50 anos. 
          Proteja-se agora com a Vacivitta!
        </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">dor debilitante!</span>
        </h1>
        <h2>Por que tomar a vacina contra Herpes Zóster?</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>Adultos a partir de 50 anos</strong> - Grupo com maior risco de desenvolver herpes zóster e complicações.</li>
            <li><strong>Pessoas com doenças crônicas</strong> - Como diabetes, doenças pulmonares e cardíacas.</li>
            <li><strong>Indivíduos com sistema imunológico comprometido</strong> - Sob orientação médica específica.</li>
            <li><strong>Pessoas que já tiveram herpes zóster</strong> - A vacina pode prevenir episódios recorrentes.</li>
          </IndicationList>
        </IndicationSection>

        <Reinforcement>
          O risco de desenvolver herpes zóster aumenta significativamente após os 50 anos devido ao declínio natural da imunidade. A vacina recombinante oferece proteção por pelo menos 4 anos, com eficácia acima de 90%.
        </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>
          Uma em cada três pessoas desenvolverá herpes zóster ao longo da vida. O risco e a gravidade aumentam com a idade, podendo causar dor intensa e incapacitante por meses ou anos.
        </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 sentir a dor do herpes zóster para agir. A prevenção através da vacinação é a melhor forma de evitar o sofrimento causado por esta doença.
            </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 Herpes;

Zerion Mini Shell 1.0