%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/vacivi36/.trash/vacivitta/src/pages/
Upload File :
Create Path :
Current File : /home/vacivi36/.trash/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>
  );
}

Zerion Mini Shell 1.0