%PDF- %PDF-
Direktori : /home/vacivi36/SiteVacivitta/vacivitta/src/pages/ |
Current File : /home/vacivi36/SiteVacivitta/vacivitta/src/pages/PageServices.jsx |
import React from 'react'; import styled from 'styled-components'; import { FaBaby, FaVials, FaFlask, FaSyringe, FaUserMd, FaBuilding } from 'react-icons/fa'; const colors = { green: '#3d9948', blue: '#0094D9', white: '#FFFFFF' }; const Container = styled.div` background-color: ${colors.white}; color: #333; `; const Hero = styled.section` display: flex; flex-direction: column; align-items: center; height: 100vh; justify-content: center; padding: 0 20px; /* Ajustado para telas pequenas */ @media (min-width: 768px) { flex-direction: row; justify-content: space-between; padding: 0 80px; /* Mantido o original para desktop */ } `; const HeroText = styled.div` flex: 1; max-width: 600px; text-align: center; /* Centralizado em mobile */ h1 { color: #0d3453; } p { margin: 1rem 0; font-size: 1.1rem; } @media (min-width: 768px) { text-align: left; /* Alinhado à esquerda em desktop */ } `; const HeroImage = styled.div` flex: 1; text-align: center; img { width: 100%; max-width: 500px; height: auto; /* Adicionado para manter proporção */ } `; const ServicesSection = styled.section` padding: 4rem 2rem; background: #f9f9f9; text-align: center; @media (max-width: 640px) { padding: 2rem 1rem; /* Reduzido para mobile */ } `; const CardsGrid = styled.div` display: grid; padding: 0 20px; /* Ajustado para telas pequenas */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; /* Reduzido para melhor ajuste em mobile */ margin-top: 3rem; @media (min-width: 768px) { padding: 0 100px; /* Mantido o original para desktop */ gap: 2rem; /* Restaurado para desktop */ } `; const Card = styled.div` background: ${colors.white}; border-radius: 16px; padding: 2rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; &:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); } h3 { margin: 1rem 0 0.5rem; color: ${colors.green}; font-size: 1.3rem; } p { margin-bottom: 1.5rem; color: #666; font-size: 0.95rem; line-height: 1.5; } .icon { margin-bottom: 0.5rem; } a { text-decoration: none; color: ${colors.blue}; font-weight: bold; font-size: 0.95rem; transition: color 0.3s; &:hover { color: #007bb8; } } @media (max-width: 640px) { padding: 1.5rem; /* Reduzido para mobile */ } `; const services = [ { title: 'Vacinas', icon: <FaSyringe size={36} color={colors.green} />, desc: 'Amplo portfólio de vacinas para todas as faixas etárias, incluindo vacinas do calendário oficial e especiais.' }, { title: 'Consultoria em Amamentação', icon: <FaBaby size={36} color={colors.green} />, desc: 'Orientação especializada para mães que desejam oferecer o melhor início de vida para seus bebês.' }, { title: 'Exames Clínicos', icon: <FaVials size={36} color={colors.green} />, desc: 'Diagnósticos precisos para diversas condições de saúde, incluindo exames laboratoriais e de imagem.' }, { title: 'Aplicação de Medicação e Infusão', icon: <FaSyringe size={36} color={colors.green} />, desc: 'Serviço seguro para administração de medicamentos e soroterapia por profissionais qualificados.' }, { title: 'Pediatria', icon: <FaUserMd size={36} color={colors.green} />, desc: 'Cuidado especializado para crianças, incluindo consultas e exames.' }, { title: 'Vacinação Corporativa', icon: <FaBuilding size={36} color={colors.green} />, desc: 'Programas de imunização para empresas, garantindo a saúde dos colaboradores e reduzindo absenteísmo.' } ]; export default function PageServices() { return ( <Container> <Hero> <HeroText> <h1>Conheça nossos serviços <span className='bolderBlue'>e cuide-se!</span></h1> <p>A Vacivitta oferece uma ampla gama de serviços para garantir a sua saúde e bem-estar. Escolha o que precisa e agende agora mesmo!</p> <button>Fale conosco</button> </HeroText> <HeroImage> <img src="https://via.placeholder.com/500x400" alt="Imagem hero" /> </HeroImage> </Hero> <ServicesSection id="servicos"> <h1 style={{ color: colors.blue }}>Nossos Serviços</h1> <CardsGrid> {services.map((srv, index) => ( <Card key={index}> <div className="icon">{srv.icon}</div> <h3>{srv.title}</h3> <p>{srv.desc}</p> <a href={`#servico-${index}`}>Ler mais sobre</a> </Card> ))} </CardsGrid> </ServicesSection> </Container> ); }