%PDF- %PDF-
Direktori : /home/vacivi36/SiteVacivitta/vacivitta/src/pages/servicos/ |
Current File : /home/vacivi36/SiteVacivitta/vacivitta/src/pages/servicos/AplicacaoMedicacao.jsx |
import styled from 'styled-components'; import React, { useState } from 'react'; import { FaChevronDown, FaChevronUp, FaSyringe, FaHospital, FaUserMd, FaClipboardCheck, FaCalendarAlt, FaShieldAlt, FaStethoscope, FaClinicMedical, FaCalendarCheck } 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.a` 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; text-align: center; &: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("/aplicacao-medicacao.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 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 InfoBox = styled.div` background-color: #f0f8ff; border-left: 5px solid #0094d9; padding: 1.5rem; margin: 2rem 0; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); width: 100%; max-width: 900px; text-align: left; h3 { color: #0094d9; margin-bottom: 1rem; font-size: 1.3rem; } ul { margin: 0; padding-left: 1.5rem; li { margin-bottom: 0.5rem; line-height: 1.5; } } `; 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; `; const StepsContainer = styled.div` margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; width: 100%; max-width: 1200px; @media (max-width: 768px) { flex-direction: column; } `; const StepItem = styled.div` flex: 1 1 300px; background-color: white; border-radius: 20px; padding: 30px; 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 StepNumber = styled.div` font-size: 2.5rem; margin-bottom: 1.2rem; color: #0094d9; display: flex; align-items: center; justify-content: center; `; const StepContent = styled.div` text-align: left; `; function AplicacaoMedicacao() { const [activeIndex, setActiveIndex] = useState(null); const toggleFAQ = (index) => { setActiveIndex(activeIndex === index ? null : index); }; const servicesOffered = [ { service: "Aplicação de Injetáveis", description: "Aplicação profissional de medicamentos injetáveis por via intramuscular, subcutânea ou intradérmica, conforme prescrição médica." }, { service: "Soroterapia", description: "Administração de soro com medicações, vitaminas e minerais via endovenosa, para hidratação, reposição de nutrientes ou tratamento de condições específicas." }, { service: "Terapia Endovenosa", description: "Administração de medicamentos diretamente na corrente sanguínea, para casos que requerem ação rápida ou medicamentos que não podem ser administrados por outras vias." }, { service: "Hidratação Venosa", description: "Reposição de líquidos e eletrólitos por via endovenosa para tratar desidratação ou como suporte para outros tratamentos." }, { service: "Antibioticoterapia", description: "Aplicação de antibióticos por diferentes vias, incluindo intramuscular e endovenosa, para tratamento de infecções conforme prescrição médica." }, { service: "Suplementação Vitamínica", description: "Administração de complexos vitamínicos e minerais para corrigir deficiências nutricionais e fortalecer o sistema imunológico." } ]; const faqs = [ { question: "É necessário apresentar receita médica para aplicação de medicações?", answer: "Sim, para qualquer tipo de medicação injetável ou infusão endovenosa, é obrigatória a apresentação da receita médica atualizada, contendo informações claras sobre o medicamento, dosagem, via de administração e frequência. A receita deve estar dentro do prazo de validade e ser emitida por profissional habilitado." }, { question: "Preciso levar o medicamento ou a clínica fornece?", answer: "Na maioria dos casos, o paciente deve trazer o medicamento prescrito. No entanto, dispomos de alguns medicamentos básicos em nosso estoque. No momento do agendamento, informe qual medicação precisa ser aplicada e nossa equipe verificará se possuímos em estoque ou se você precisará adquiri-la. Sempre transporte os medicamentos conforme orientações do farmacêutico para preservar sua integridade." }, { question: "Quanto tempo dura uma sessão de infusão endovenosa?", answer: "O tempo varia conforme o tipo de infusão. Sessões simples de hidratação podem durar de 30 a 60 minutos. Infusões de antibióticos geralmente levam de 1 a 2 horas. Já terapias com vitaminas e minerais costumam durar entre 1 e 3 horas. O tempo exato será informado no momento do agendamento, conforme a prescrição médica e o protocolo a ser seguido." }, { question: "É possível receber medicação em casa?", answer: "Sim, oferecemos serviço de atendimento domiciliar para aplicação de medicações e terapias endovenosas. Este serviço está disponível mediante agendamento prévio e avaliação da nossa equipe sobre a viabilidade do procedimento em ambiente domiciliar. O atendimento domiciliar tem valor diferenciado e varia conforme a região e complexidade do procedimento." }, { question: "Quais são os possíveis efeitos colaterais após a aplicação de medicamentos?", answer: "Os efeitos colaterais variam conforme o medicamento administrado. Em aplicações intramusculares, pode ocorrer dor local, vermelhidão ou pequenos hematomas. Em infusões endovenosas, alguns pacientes podem sentir sensação de calor, gosto metálico na boca ou desconforto no local da punção. Reações alérgicas são raras, mas monitoramos todos os pacientes durante o procedimento. Informe ao profissional sobre qualquer sintoma incomum durante ou após a aplicação." } ]; return ( <PageContainer> <HeroSection> <h1>Aplicação de medicação e terapias de infusão</h1> <p>Administração segura e profissional de medicamentos injetáveis e tratamentos por infusão</p> <CTAButton href="https://wa.me/08001233333" target="_blank">Agendar serviço</CTAButton> </HeroSection> <Section> <h2>Serviço de aplicação de medicamentos</h2> <p> Na Vacivitta, oferecemos serviços especializados de aplicação de medicamentos e terapias de infusão, realizados por equipe de enfermagem qualificada em ambiente seguro e confortável. </p> <p> Nossos procedimentos seguem rigorosos protocolos de segurança, garantindo a administração precisa e eficaz dos medicamentos prescritos pelos médicos, com monitoramento constante durante todo o processo. </p> <CardsContainer> <Card> <CardIcon> <FaSyringe /> </CardIcon> <CardTitle>Equipe especializada</CardTitle> <CardDescription> Enfermeiros capacitados para administração segura de medicamentos e monitoramento de reações. </CardDescription> </Card> <Card> <CardIcon> <FaClinicMedical /> </CardIcon> <CardTitle>Ambiente controlado</CardTitle> <CardDescription> Instalações projetadas para oferecer segurança e conforto durante os procedimentos. </CardDescription> </Card> <Card> <CardIcon> <FaCalendarCheck /> </CardIcon> <CardTitle>Horários flexíveis</CardTitle> <CardDescription> Atendimento em horários convenientes, incluindo finais de semana para tratamentos contínuos. </CardDescription> </Card> </CardsContainer> <h3 style={{ marginTop: '3rem', color: '#333' }}>Tipos de aplicações disponíveis</h3> <ServiceTable> <TableHeader> <div>Tipo</div> <div>Descrição</div> </TableHeader> {servicesOffered.map((service, index) => ( <TableRow key={index} index={index}> <TableService>{service.service}</TableService> <TableDescription>{service.description}</TableDescription> </TableRow> ))} </ServiceTable> </Section> <Section primary> <h2>Processo de aplicação de medicamentos</h2> <p> Nosso processo de aplicação é cuidadosamente estruturado para garantir segurança, eficácia e conforto durante todo o procedimento, desde o agendamento até o acompanhamento pós-aplicação. </p> <StepsContainer> <StepItem> <StepNumber>1</StepNumber> <StepContent> <h3>Agendamento e preparo</h3> <p> Agendamento conveniente, orientações sobre preparação e documentação necessária (prescrição médica, exames relevantes). </p> </StepContent> </StepItem> <StepItem> <StepNumber>2</StepNumber> <StepContent> <h3>Avaliação inicial</h3> <p> Análise da prescrição, verificação de alergias e histórico de reações adversas, checagem de sinais vitais quando necessário. </p> </StepContent> </StepItem> <StepItem> <StepNumber>3</StepNumber> <StepContent> <h3>Procedimento de aplicação</h3> <p> Preparo e administração do medicamento por profissional qualificado seguindo as melhores práticas e protocolos de segurança. </p> </StepContent> </StepItem> <StepItem> <StepNumber>4</StepNumber> <StepContent> <h3>Monitoramento pós-aplicação</h3> <p> Período de observação quando necessário, orientações de cuidados pós-aplicação e agendamento de doses subsequentes se aplicável. </p> </StepContent> </StepItem> </StepsContainer> </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 aplicação de medicamentos</h2> <p> Conte com a qualidade e segurança da Vacivitta para a administração dos seus medicamentos. Nossa equipe está pronta para proporcionar um atendimento seguro, eficaz e humanizado, adaptado às suas necessidades específicas. </p> <CTAButton href="https://wa.me/08001233333" target="_blank">Agendar agora</CTAButton> </Section> </PageContainer> ); } export default AplicacaoMedicacao;