%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/QuemSomos.jsx

import styled, { keyframes } from "styled-components";
import React from "react";
import { FaClinicMedical, FaUsers, FaChartLine, FaSyringe, FaHandsHelping, FaEye, FaHeartbeat, FaHandHoldingHeart, FaStar, FaLightbulb, FaGlobeAmericas, FaUserTie, FaExchangeAlt, FaMicrochip, FaShieldAlt } from 'react-icons/fa';
import { motion } from "framer-motion";

const Container = styled.div`
  position: relative;
  background: linear-gradient(135deg, #0094D9, #3d9948);
  padding: 20px 80px 0px 80px;
  width: 100%;
  height: 90vh;
  display: flex;
  margin-top: 100px;
  align-items: center;

  @media (max-width: 768px) {
    flex-direction: column;
    justify-content: center;   
    padding: 20px; 
    padding-bottom: 0;
    height: auto;
  }
`;

const LeftCont = styled.div`
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: center;
  width: 50%;

  h1, h2 {
    color: white;
  }

  h2 {
    font-size: 22px;
    margin-top: 20px;
  }

  @media (max-width: 768px) {
    width: 100%;
    padding: 40px 10px;
    text-align: center;
  }
`;

const Right = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;

  @media (max-width: 768px) {
    width: 100%;
    justify-content: center;
    padding: 0;
  }
`;

const Imager = styled.img`
  height: 90%;
  position: absolute;
  bottom: 0;

  @media (max-width: 768px) {
    position: relative;
    width: 100%;
    padding: 0;
  }
`;

const HistorySection = styled.div`
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  position: relative;
  background-color: #0a2b3a;

  h1, p {
    color: white;
    text-align: center;
    width: 70%;
  }

  span.bolderGreen2 {
    color: #3d9948;
  }

  @media (max-width: 768px) {
    width: 100%;
    h1, p {
      width: 90%;
    }
  }
`;

const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
`;

const lineGrow = keyframes`
  from { height: 0; }
  to { height: 100%; }
`;

const leftSlide = keyframes`
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
`;

const rightSlide = keyframes`
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
`;

const Timeline = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  min-width: 400px;
  gap: 40px;
  position: relative;
  margin: 40px 0;

  &::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 100%;
    border-radius: ;
    background: #3d9948;
    left: 50%;
    transform: translateX(-50%);
    animation: ${lineGrow} 1.5s ease-in-out forwards;
    z-index: 0;
  }

  @media (max-width: 768px) {
    width: 100%;
    min-width: auto;
    &::before {
      left: 10px;
      transform: none;
    }
  }
`;

const TimelineItem = styled.div`
  display: flex;
  align-items: center;
  gap: 15px;
  background:rgb(59, 131, 232);
  padding: 20px 30px;
  border-radius: 10px;
  width: 80%;
  max-width: 600px;
  position: relative;
  z-index: 2;
  animation: ${fadeIn} 1.5s ease-in-out;

  &:nth-child(even) {
    flex-direction: row-reverse;
    width: 50%;
    margin-left: 30%;
    animation: ${rightSlide} 1s ease-in-out;
  }

  &:nth-child(odd) {
    width: 50%;
    margin-right: 30%;
    animation: ${leftSlide} 1s ease-in-out;
  }

  span {
    color: white;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
  }

  @media (max-width: 768px) {
    width: 100%;
    flex-direction: row !important;
    justify-content: flex-start;
    align-items: center;
    padding: 15px;
    
    &::before {
      left: 5px;
      transform: none;
    }

    span {
      font-size: 14px;
      text-align: left;
      white-space: normal;
    }
  }
`;

const IconWrapper = styled.div`
  font-size: 32px;
  color:rgb(255, 255, 255);

  @media (max-width: 768px) {
    font-size: 24px;
  }
`;

const ButtonsArea = styled.div`
  display: flex;
  gap: 15px;
  margin-top: 30px;
  width: 100%;

  @media (max-width: 768px) {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
`

const Section = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 100px 20px;
  background-color: ${({ primary }) => (primary ? '#0a2b3a' : 'white')};
  width: 100%;

  h1 {
    margin-bottom: 30px;
    color: ${({ primary }) => (primary ? 'white' : '#0a2b3a')};
  }

  p {
    width: 70%;
    margin-bottom: 30px;
    color: ${({ primary }) => (primary ? 'white' : '#666')};
  }

  @media (max-width: 768px) {
    padding: 60px 20px;
    
    p {
      width: 90%;
    }
  }
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1000px;
  width: 100%;
  padding: 0 20px;
  margin-top: 40px;
  justify-items: center;

  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 20px;
  }
`;

const BottomCards = styled.div`
  display: flex;
  justify-content: center;
  gap: 25px;
  width: 100%;
  max-width: 650px;
  margin: 25px auto 0;
  padding: 0 20px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 20px;
  }
`;

const Card = styled(motion.div)`
  background: ${({ primary }) => (primary ? 'rgba(255, 255, 255, 0.1)' : 'white')};
  backdrop-filter: ${({ primary }) => (primary ? 'blur(10px)' : 'none')};
  border: 1px solid ${({ primary }) => (primary ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)')};
  padding: 30px 25px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease;
  min-height: 200px;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;

  &:hover {
    transform: translateY(-5px);
    background: ${({ primary }) => (primary ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 148, 217, 0.05)')};
  }

  @media (max-width: 768px) {
    padding: 25px 20px;
    min-height: 180px;
    max-width: 100%;
  }
`;

const IconWrapper2 = styled.div`
  font-size: 2rem;
  color: ${({ primary }) => (primary ? '#3d9948' : '#0094D9')};
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: ${({ primary }) => (primary ? 'rgba(61, 153, 72, 0.1)' : 'rgba(0, 148, 217, 0.1)')};
  border-radius: 50%;
  transition: transform 0.3s ease;

  ${Card}:hover & {
    transform: scale(1.1);
  }

  @media (max-width: 768px) {
    font-size: 1.8rem;
    width: 50px;
    height: 50px;
  }
`;

const CardTitle = styled.h3`
  font-size: 1.3rem;
  color: ${({ primary }) => (primary ? 'white' : '#0a2b3a')};
  margin-bottom: 12px;
  font-weight: 600;

  @media (max-width: 768px) {
    font-size: 1.2rem;
  }
`;

const Text = styled.p`
  font-size: 0.95rem;
  color: ${({ primary }) => (primary ? 'rgba(255, 255, 255, 0.9)' : '#666')};
  line-height: 1.5;
  text-align: center;
  margin: 0;
  width: 100%;

  @media (max-width: 768px) {
    font-size: 0.9rem;
  }
`;

const ValuesList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
`;

const ValueItem = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 0.9rem;

  svg {
    color: #3d9948;
    font-size: 1rem;
  }
`;

// Nova seção da Dra. Amanda
const AmandaSection = styled.section`
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 100px 20px 0;
  background-color: white;
  width: 100%;

  h1 {
    margin-bottom: 30px;
  }

  p {
    width: 70%;
    margin-bottom: 30px;
  }

  @media (max-width: 768px) {
    padding: 60px 20px 0;
    
    p {
      width: 90%;
    }
  }
`;

const AmandaContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1200px;
  width: 100%;
  margin-top: 40px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 30px;
  }
`;

const AmandaContent = styled(motion.div)`
  flex: 1;
  max-width: 600px;
  text-align: left;
  background: linear-gradient(135deg, #0094D9, #006db3);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 148, 217, 0.3);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.15), transparent 70%);
    z-index: 0;
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    z-index: 0;
  }

  > * {
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    text-align: center;
    padding: 30px;
  }
`;

const AmandaTitle = styled(motion.h2)`
  color: white;
  font-size: 2.5rem;
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  @media (max-width: 768px) {
    font-size: 2rem;
  }
`;

const AmandaSubtitle = styled(motion.p)`
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
  margin-bottom: 30px;
  line-height: 1.6;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 15px;

  @media (max-width: 768px) {
    font-size: 1rem;
  }
`;

const AmandaDescription = styled(motion.p)`
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 30px;

  @media (max-width: 768px) {
    font-size: 1rem;
  }
`;

const AmandaImage = styled(motion.div)`
  flex: 1;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
    height: auto;
    max-width: 400px;
  }

  @media (max-width: 768px) {
    max-width: 100%;
  }
`;

const HighlightBox = styled(motion.div)`
  background: linear-gradient(135deg, rgba(0, 148, 217, 0.1), rgba(61, 153, 72, 0.1));
  padding: 25px;
  border-radius: 15px;
  margin-top: 20px;
  border: 1px solid rgba(0, 148, 217, 0.2);

  p {
    color: #0094D9;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    width: 100%;
  }
`;

const AmandaButton = styled(motion.button)`
  background: white;
  color: #0094D9;
  border: none;
  padding: 15px 30px;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,148,217,0.2), rgba(0,148,217,0.3));
    transition: width 0.5s ease;
    z-index: -1;
  }
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
    color: white;
    background: #0094D9;
    
    &::before {
      width: 100%;
    }
  }

  @media (max-width: 768px) {
    padding: 12px 25px;
    font-size: 1rem;
  }
`;

function QuemSomos() {
  return (
    <>
      <Container>
        <LeftCont>
          <h1>Nossa missão é cuidar da sua saúde com <span className='bolderLand'>excelência e segurança</span></h1>
          <h2>Com anos de experiência e uma equipe dedicada, a Vacivitta é a sua parceira em vacinação e saúde preventiva.</h2>
          <ButtonsArea>
            <button className='buttonGreen' onClick={() => window.open('https://wa.me/551108001233333', '_blank')}>Fale com uma especialista</button>
          </ButtonsArea>
        </LeftCont>
        <Right>
          <Imager src="/moca.png" alt="VaciVitta Logo" />
        </Right>
      </Container>

      {/* Nova seção da Dra. Amanda */}
      <AmandaSection>
        <h1 style={{color: '#0094D9'}}>Nossa <span className="bolderGreen2">diretora médica</span></h1>
        <AmandaContainer>
          <AmandaContent
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7 }}
          >
            <AmandaTitle
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              Dra. Amanda Conde
            </AmandaTitle>
            <AmandaSubtitle
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              Fundadora da Vacivitta
            </AmandaSubtitle>
            <AmandaDescription
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.4 }}
            >
              Fundadora da Vacivitta, a Dra. Amanda Conde é pediatra há mais de 20 anos e mãe da Catarina. Apaixonada pelo cuidado com a infância, ela uniu sua expertise médica ao desejo de transformar o atendimento em saúde preventiva no Brasil. Sua missão é fazer da vacinação um momento de acolhimento, ciência e amor.
            </AmandaDescription>
            <AmandaButton
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.6 }}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => window.open('https://amandaconde.com.br/', '_blank')}
            >
              Conheça mais sobre a Dra. Amanda
            </AmandaButton>
          </AmandaContent>
          <AmandaImage
            initial={{ opacity: 0, scale: 0.9, x: 50 }}
            whileInView={{ opacity: 1, scale: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            whileHover={{ scale: 1.03 }}
          >
            <img src="/foto 02.png" alt="Dra. Amanda Conde" />
          </AmandaImage>
        </AmandaContainer>
      </AmandaSection>

      <HistorySection>
        <h1>Uma trajetória de <span className="bolderGreen2">cuidado e proteção</span></h1>
        <p>
          A Vacivitta nasceu com o propósito de simplificar e democratizar o acesso à vacinação de qualidade. Com um time de especialistas em saúde e tecnologia, desenvolvemos soluções inovadoras para oferecer imunização segura e prática em casa, nas empresas ou em nossas clínicas.
        </p>

        <Timeline>
          <TimelineItem>
            <IconWrapper><FaClinicMedical /></IconWrapper>
            <span>Fundação da empresa (2017)</span>
          </TimelineItem>
          <TimelineItem>
            <IconWrapper><FaUsers /></IconWrapper>
            <span>Expansão para<br></br>campanhas corporativas (2022)</span>
          </TimelineItem>
          <TimelineItem>
            <IconWrapper><FaSyringe /></IconWrapper>
            <span>Lançamento de novas (2024)<br></br>unidades</span>
          </TimelineItem>
          <TimelineItem>
            <IconWrapper><FaChartLine /></IconWrapper>
            <span>8 Anos de Vacivitta (2025)</span>
          </TimelineItem>
        </Timeline>
      </HistorySection>

      <Section>
        <h1>Nossos princípios <span className="bolderGreen2">nos guiam</span></h1>
        <Grid>
          <Card
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <IconWrapper2><FaHandsHelping /></IconWrapper2>
            <CardTitle>Missão</CardTitle>
            <Text>Oferecer soluções em vacinação que combinam praticidade, segurança e excelência, promovendo saúde e bem-estar para todas as idades.</Text>
          </Card>
          <Card
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.1 }}
          >
            <IconWrapper2><FaEye /></IconWrapper2>
            <CardTitle>Visão</CardTitle>
            <Text>Ser reconhecida como a principal referência em vacinação e saúde preventiva no Brasil, conectando pessoas à proteção de forma acessível e inovadora.</Text>
          </Card>
          <Card
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <IconWrapper2><FaHeartbeat /></IconWrapper2>
            <CardTitle>Valores</CardTitle>
            <Text>Compromisso com o cuidado, excelência em cada atendimento, acessibilidade para todos e inovação constante em nossos serviços.</Text>
          </Card>
        </Grid>
      </Section>

      <Section primary>
        <h1>Por que escolher a <span className="bolderGreen2">Vacivitta?</span></h1>
        <p>A Vacivitta é mais do que uma clínica de vacinação. Oferecemos serviços personalizados que se adaptam à sua rotina, sempre com segurança e cuidado em primeiro lugar.</p>
        <Grid>
          <Card primary
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <IconWrapper2 primary><FaHeartbeat /></IconWrapper2>
            <CardTitle primary>Saúde Integrada</CardTitle>
            <Text primary>Exames, testes e check-ups completos para você ou sua empresa.</Text>
          </Card>
          <Card primary
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.1 }}
          >
            <IconWrapper2 primary><FaHandHoldingHeart /></IconWrapper2>
            <CardTitle primary>Vacinação Domiciliar</CardTitle>
            <Text primary>Proteção no conforto da sua casa.</Text>
          </Card>
          <Card primary
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <IconWrapper2 primary><FaUserTie /></IconWrapper2>
            <CardTitle primary>Campanhas de Vacinação</CardTitle>
            <Text primary>Imunize seu time e garanta saúde e produtividade.</Text>
          </Card>
          <Card primary
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.3 }}
          >
            <IconWrapper2 primary><FaUsers /></IconWrapper2>
            <CardTitle primary>Ações de Imunização</CardTitle>
            <Text primary>Proteção e informação em larga escala para grupos e eventos.</Text>
          </Card>
          <Card primary
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            <IconWrapper2 primary><FaLightbulb /></IconWrapper2>
            <CardTitle primary>Master Educação</CardTitle>
            <Text primary>Plataforma de educação e conteúdo para conscientização.</Text>
          </Card>
          <Card primary
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.5 }}
          >
            <IconWrapper2 primary><FaStar /></IconWrapper2>
            <CardTitle primary>VittaPlus</CardTitle>
            <Text primary>Um cartão de benefícios que vão além do amor e proteção.</Text>
          </Card>
        </Grid>
      </Section>
    </>
  )
}

export default QuemSomos;

Zerion Mini Shell 1.0