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

import styled, { keyframes } from "styled-components";
import { motion } from 'framer-motion'
import axios from "axios";
import React, { useState, useEffect, useRef } from "react";
import { FaUserMd, FaCheckCircle, FaClock, FaMapMarkerAlt, FaBuilding, FaPause, FaRedo, FaUndo, FaCalendarAlt, FaShieldAlt, FaPlay, FaUsers, FaEnvelope } from 'react-icons/fa'

const floatAnimation = keyframes`
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
`;

const VideoPlayerContainer = styled.div`
  width: 50%;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  margin-bottom: 40px;
  @media (max-width: 768px) {
    width: 100%;
    align-items: center;
    text-align: center;
    padding: 0;
  }
`;

const VideoElement = styled.video`
  width: 100%;
  border-radius: 30px;
`;

const Controls = styled.div`
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  position: absolute;
  bottom: 4px;
  width: 100%;
`;

const ProgressBar = styled.input`
  width: 70%;
  cursor: pointer;
`;

const Time = styled.span`
  font-size: 12px;
`;

const Container = styled.div`
  position: relative;
  background: url("homePage.png") center/cover no-repeat;
  padding: 0px 80px 20px 80px;
  width: 100%;
  height: 90vh;
  display: flex;
  margin-top: 100px;
  align-items: center;

  @media (max-width: 768px) {
    flex-direction: column;
    justify-content: center;   
    padding: 0px 20px; 
    padding-bottom: 300px;
    height: auto;
    background: url("mobilePage") center/cover no-repeat;
  }
`

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

  h1 {
    color:#1e2e45;
  }

  @media (max-width: 768px) {
    width: 100%;
    align-items: center;
    text-align: center;
    flex-direction: column;
    justify-content: center;   
    padding: 40px 10px; 
    height: auto;
  }
`

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 Container2 = styled.div`
  position: relative;
  background: url("homePage2.png") top/cover no-repeat;
  padding: 0px 80px 20px 80px;
  width: 100%;
  height: 90vh;
  display: flex;
  align-items: center;

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

const RightCont = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: auto;

  h1 {
    color: #101a28;
  }

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

const BenefitsList = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;

  @media (max-width: 768px) {
    align-items: center;
    margin-bottom: 50px;
  }
`

const BenefitItem = styled(motion.div)`
  display: flex;
  align-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }

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

const BenefitIcon = styled.div`
  font-size: 30px;
  color: #0094d9;
  margin-right: 15px;
`

const BenefitText = styled.div`
  display: flex;
  flex-direction: column;

  h3 {
    font-size: 18px;
    font-weight: bold;
    color: #101a28;
    margin-bottom: 5px;
  }

  p {
    font-size: 14px;
    color: #101a28;
    margin-top: 5px;
  }
`

const Container3 = styled.div`
  position: relative;
  background-color: white;
  padding: 0px 80px 20px 80px;
  width: 100%;
  height: 90vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

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

const CenterCont = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: auto;
  text-align: center;

  h1 {
    color: #1e2e45;
  }

  @media (max-width: 768px) {
    width: 100%;
    align-items: center;
    text-align: center;
    padding-right: 0;
    padding-top: 60px;
  }
`

const CenterCont9 = styled.div`
  display: flex;
  flex-direction: column;
  width: 80%;
  height: auto;
  text-align: left;
  
  button {
    width: 350px;
    margin-top: 20px;
  }

  h1 {
    color: #101a28;
  }

  @media (max-width: 768px) {
    width: 100%;
    align-items: center;
    text-align: center;
    padding-right: 0;
    padding-top: 60px;

    button {
    width: 300px;
    margin-top: 20px;
  }
  }
`

const CenterCont19 = styled.div`
  display: flex;
  flex-direction: column;
  width: 80%;
  height: auto;
  text-align: left;
  
  button {
    width: 400px;
    margin-top: 20px;
  }

  h1 {
    color: #1e2e45;
  }

  @media (max-width: 768px) {
    width: 100%;
    align-items: center;
    text-align: center;
    padding-right: 0;
    padding-top: 60px;

    button {
    width: 300px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  }
`

const CenterCont12 = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  height: auto;
  text-align: center;
  
  button {
    width: 40%;
    margin-top: 20px;
  }

  h1 {
    color: #101a28;
  }

  @media (max-width: 768px) {
    width: 100%;
    align-items: center;
    text-align: center;
    padding-right: 0;
    padding-top: 60px;

    button {
    width: 300px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  }
`

const Amanda = styled.img`
  max-width: 580px;
  animation: ${floatAnimation} 2s infinite ease-in-out; // Animação de flutuar
  margin-bottom: 30px;
  @media (max-width: 768px) {
    width: 100%;
  }
`

const Imager = styled.img`
  max-width: 580px;
  animation: ${floatAnimation} 2s infinite ease-in-out; // Animação de flutuar
  @media (max-width: 768px) {
    width: 90%;
  }
`
const Imager5 = styled.img`
  width: 100%;
  max-width: 280px;
  border-radius: 30px;
  height: auto;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
  }
  @media (max-width: 768px) {
    width: 40%;
  }
`;

const Imager6 = styled.img`
  width: 100%;
  max-width: 280px;
  border-radius: 20px;
  height: auto;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
  }
  @media (max-width: 768px) {
    width: 40%;
  }
`;

const Imager7 = styled.img`
  width: 100%;
  max-width: 280px;
  border-radius: 20px;
  height: auto;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
  }
  @media (max-width: 768px) {
    width: 40%;
  }
`;

const Imager8 = styled.img`
  width: 100%;
  max-width: 280px;
  border-radius: 20px;
  height: auto;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
  }
  @media (max-width: 768px) {
    width: 40%;
  }
`;

const Imager2 = styled.img`
  max-width: 580px;
  border-radius: 30px;
  animation: ${floatAnimation} 2s infinite ease-in-out; // Animação de flutuar
  @media (max-width: 768px) {
    width: 90%;
  }
`

const Recomendar = styled.img`
  width: 50%;
  animation: ${floatAnimation} 2s infinite ease-in-out; // Animação de flutuar
  @media (max-width: 768px) {
    width: 100%;
    display: none;
  }
`

const CenterCont2 = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: auto;
  text-align: center;
  margin-top: 40px;

  h1 {
    color: #101a28;
  }

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

const CenterCont3 = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: auto;
  text-align: center;
  margin-top: 40px;
  gap: 30px;

  h1 {
    color: #101a28;
  }

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

const SpecialButton = styled.div`
  background-color: transparent;
  border-radius: 80px;
  border: 2px #3d9948 solid;
  padding: 10px 30px;
  color: #3d9948;
  margin-bottom: 30px;
`;

const SpecialButton2 = styled.div`
  background-color: transparent;
  border-radius: 80px;
  border: 2px #3d9948 solid;
  justify-content: center;
  text-align: center;
  padding: 10px 30px;
  color: #3d9948;
  margin-bottom: 30px;
  width: 350px;
`;

const Container4 = styled.div`
  position: relative;
  background-color: #0d3453;
  padding: 20px 80px 20px 80px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  h1 {
    color: #3d9948;
  }

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

const Container5 = styled.div`
  position: relative;
  background: url("walp.png") center/cover no-repeat;
  padding: 0px 80px 20px 80px;
  width: 100%;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;

  h1 {
    color: #3d9948;
  }

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

const Container6 = styled.div`
  position: relative;
  background-color: #0d3453;
  padding: 0px 80px 20px 80px;
  width: 100%;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;

  h1, p, .pBolder {
    color: white;
  }

  .bolderBlue {
    color: #3d9948;
  }
  
  button {
    background-color: #3d9948;
  }

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

const Container7 = styled.div`
  position: relative;
  background-color: #ececec;
  padding: 0px 80px 20px 80px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;

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

const Container8 = styled.div`
  position: relative;
  flex-direction: column;
  text-align: center;
  background-color: white;
  padding: 50px 80px 20px 80px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;

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

const BoxesContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
`;

const Box = styled.div`
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  cursor: pointer;
  flex: 1 1 280px;
  max-width: 300px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
`;

const IconArea = styled.div`
  font-size: 3rem;
  color: #007bff;
  margin-bottom: 1rem;
`;

const BoxTitle = styled.h3`
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 0.5rem;
`;

const BoxDescription = styled.p`
  font-size: 1rem;
  color: #666;
  line-height: 1.5;
`;

const Images = styled.div`
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 30px;

  @media (max-width: 768px) {
    gap: 20px;
    padding: 20px;
  }

  @media (max-width: 480px) {
    gap: 10px;
    padding: 10px;
  }
`;

const Container9 = styled.div`
  margin: 0 auto;
  padding: 20px;
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #0a2b3a;
  width: 100%;
  @media (max-width: 600px) {
  flex-direction: column;
  padding: 0;
  margin-top: 30px;
  }
`;

const FormContainer = styled.form`
  width: 500px;
  max-width: 70%;
  margin: 40px auto;
  padding: 30px;
  background: #0094D9;
  border-radius: 28px;
  display: flex;
  flex-direction: column;

  h2 {
    text-align: center;
    color: white;
    font-size: 20px;
    margin-bottom: 20px;
  }

  @media (max-width: 768px) {
    margin: 20px;
    padding: 15px;
    width: 80%;
    max-width: 80%;
  }
`;

const FormGroup = styled.div`
  margin-bottom: 15px;
`;

const Label = styled.label`
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: #0a2b3a;
`;

const InputField = styled.input`
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 42px;
  font-family: 'League Spartan';
  font-size: 16px;
  box-sizing: border-box;

  &:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(5, 23, 50, 0.5);
  }
`;

const TextareaField = styled.textarea`
  width: 100%;
  padding: 12px 16px;
  border-radius: 15px;
  font-size: 16px;
  font-family: 'League Spartan';
  resize: none;
  box-sizing: border-box;

  &:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(6, 20, 68, 0.5);
  }
`;

const SubmitButton = styled.button`
  padding: 14px 20px;
  background-color: #0a2b3a;
  color: #fff;
  border: none;
  border-radius: 40px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background-color: #0c1b33;
    transform: scale(1.02);
  }
`;


function Home() {
  const [bgLoaded, setBgLoaded] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  const [progress, setProgress] = useState(0);
  const [duration, setDuration] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  const [openFAQ, setOpenFAQ] = useState(null);
  const [loading, setLoading] = useState(false);
  const [isModalOpen, setModalOpen] = useState(false);

  const [formData, setFormData] = useState({
    nome: "",
    email: "",
    telefone: "",
    mensagem: "",
  });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const webhookURL = "https://hooks.zapier.com/hooks/catch/21786436/2g1bnal/";
      const formBody = new URLSearchParams();
      for (const key in formData) {
        formBody.append(key, formData[key]);
      }
      await fetch(webhookURL, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: formBody.toString(),
      });
      
      // Exibir animação e mensagem de sucesso
      const successMessage = document.createElement("div");
      successMessage.innerText = "Sua mensagem foi enviada com sucesso!";
      successMessage.style.position = "fixed";
      successMessage.style.top = "50%";
      successMessage.style.left = "50%";
      successMessage.style.transform = "translate(-50%, -50%)";
      successMessage.style.padding = "20px";
      successMessage.style.background = "#4CAF50";
      successMessage.style.color = "white";
      successMessage.style.fontSize = "18px";
      successMessage.style.borderRadius = "8px";
      successMessage.style.boxShadow = "0px 4px 10px rgba(0, 0, 0, 0.2)";
      successMessage.style.opacity = "0";
      successMessage.style.transition = "opacity 0.5s ease-in-out";
      document.body.appendChild(successMessage);
      
      setTimeout(() => {
        successMessage.style.opacity = "1";
      }, 100);
      
      setTimeout(() => {
        successMessage.style.opacity = "0";
        setTimeout(() => document.body.removeChild(successMessage), 500);
      }, 3000);
    } catch (error) {
      console.error("Erro ao enviar dados:", error);
      alert("Erro ao enviar os dados.");
    } finally {
      setLoading(false);
    }
  };

  const toggleFAQ = (index) => {
    setOpenFAQ(openFAQ === index ? null : index);
  };

  useEffect(() => {
    setBgLoaded(true);
    
    // Check if screen is mobile
    const checkMobile = () => {
      setIsMobile(window.matchMedia("(max-width: 768px)").matches);
    };
    
    // Initial check
    checkMobile();
    
    // Add listener for screen resize
    window.addEventListener('resize', checkMobile);
    
    // Cleanup
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  const videoRef = useRef(null);

  const togglePlayPause = () => {
    if (videoRef.current.paused) {
      videoRef.current.play();
      setIsPlaying(true);
    } else {
      videoRef.current.pause();
      setIsPlaying(false);
    }
  };

  const handleProgress = (event) => {
    const value = event.target.value;
    videoRef.current.currentTime = (value / 100) * duration;
    setProgress(value);
  };

  const updateTime = () => {
    const current = videoRef.current.currentTime;
    setCurrentTime(current);
    setProgress((current / duration) * 100);
  };

  const handleLoadedMetadata = () => {
    setDuration(videoRef.current.duration);
  };

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
  };

  return (
    <>
      <Container style={{ background: bgLoaded ? 
        (isMobile ? `url("mobilePage.png") center/cover no-repeat` : `url("homePage.png") center/cover no-repeat`) 
        : "none" }}>
        <LeftCont>
          <h1>Cuide da sua saúde com quem <span className='bolderBlue'>ama o que faz:</span></h1>
          <h2>Vacine-se em nossa rede clínica, em casa, no condomínio, escola ou empresa - com segurança e praticidade.</h2>
          <p>Agende o <span className='pBolder'>melhor serviço de imunização</span> para você, sua família ou sua instituição em poucos cliques.</p>
          <ButtonsArea>
            <button className='buttonGreen' onClick={() => window.open('https://wa.me/551108001233333', '_blank')}>Fale com uma especialista</button>
          </ButtonsArea>
        </LeftCont>
      </Container>

      <Container2 style={{ background: bgLoaded ? `url("homePage2.png") top/cover no-repeat` : "none" }}>
        <RightCont>
          <BenefitsList>
            <BenefitItem
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5 }}
            >
              <BenefitIcon><FaUserMd /></BenefitIcon>
              <BenefitText>
                <h3>Atendimento Humanizado e Personalizado</h3>
                <p>Cuidados especiais para cada paciente, com dedicação e empatia.</p>
              </BenefitText>
            </BenefitItem>

            <BenefitItem
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
            >
              <BenefitIcon><FaCheckCircle /></BenefitIcon>
              <BenefitText>
                <h3>Equipe certificada e especializada</h3>
                <p>Profissionais altamente qualificados para garantir segurança total.</p>
              </BenefitText>
            </BenefitItem>

            <BenefitItem
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.7 }}
            >
              <BenefitIcon><FaClock /></BenefitIcon>
              <BenefitText>
                <h3>Agendamento rápido e prático</h3>
                <p>Escolha o melhor horário para você com poucos cliques.</p>
              </BenefitText>
            </BenefitItem>

            <BenefitItem
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8 }}
            >
              <BenefitIcon><FaMapMarkerAlt /></BenefitIcon>
              <BenefitText>
                <h3>Cobertura nacional em todos os estados</h3>
                <p>Estamos presentes em todo o Brasil, levando saúde até você.</p>
              </BenefitText>
            </BenefitItem>

            <BenefitItem
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.9 }}
            >
              <BenefitIcon><FaBuilding /></BenefitIcon>
              <BenefitText>
                <h3>Soluções para casa, empresas e clínicas</h3>
                <p>Atendemos diferentes demandas para garantir a sua proteção.</p>
              </BenefitText>
            </BenefitItem>
          </BenefitsList>
        </RightCont>

        <LeftCont>
          <h1>Por que escolher a <span className='bolderGreen'>Vacivitta?</span></h1>
          <p>Na Vacivitta, a <span className='pBolder'>saúde está em primeiro lugar!</span> Escolha qualidade e confiança.</p>
          <ButtonsArea>
            <button className='buttonGreen' onClick={() => window.open('https://wa.me/551108001233333', '_blank')}>Saiba mais sobre nossos benefícios</button>
          </ButtonsArea>
        </LeftCont>
      </Container2>
      <Container4>
        <CenterCont>
        <SpecialButton>Cuide da sua saúde com amor e proteção!</SpecialButton>
        <h1>Como funciona? <br></br><span className='bolderBlue'>Vacinação simplificada em 3 passos</span></h1>
        </CenterCont>
        <CenterCont2>
          <BoxesContainer>
            <Box>
              <IconArea>
                <FaShieldAlt />
              </IconArea>
              <BoxTitle>Escolha seu serviço e agende online!</BoxTitle>
              <BoxDescription>
                Conte com nossos serviços que garantem sua segurança e proporcionam a tranquilidade necessária para o seu dia a dia.
              </BoxDescription>
            </Box>
            <Box>
              <IconArea>
                <FaUserMd />
              </IconArea>
              <BoxTitle>Receba atendimento de especialistas certificados!</BoxTitle>
              <BoxDescription>
                Nossa equipe de especialistas está pronta para oferecer um atendimento personalizado e de alta qualidade para solucionar suas dúvidas.
              </BoxDescription>
            </Box>
            <Box>
              <IconArea>
                <FaCalendarAlt />
              </IconArea>
              <BoxTitle>Garanta sua proteção e tranquilidade!</BoxTitle>
              <BoxDescription>
                Selecione o serviço ideal para você e agende sua consulta de forma prática e rápida, sem complicações.
              </BoxDescription>
            </Box>
          </BoxesContainer>
          <button onClick={() => window.open('https://wa.me/5511080001233333', '_blank')}>Agendar agora</button>
        </CenterCont2>
      </Container4>
      <Container3>
        <CenterCont>
          <h1>Quem confia na Vacivitta, <span className='bolderBlue'>recomenda!</span></h1>
        </CenterCont>
        <CenterCont3>
          <VideoPlayerContainer>
            <VideoElement
              ref={videoRef}
              onClick={togglePlayPause}
              onTimeUpdate={updateTime}
              onLoadedMetadata={handleLoadedMetadata}
              onPlay={() => setIsPlaying(true)}  // Atualiza estado ao iniciar
              onPause={() => setIsPlaying(false)} // Atualiza estado ao pausar
            >
              <source src="/video.mp4" type="video/mp4" />
              Seu navegador não suporta vídeos.
            </VideoElement>

            <Controls>
              <FaUndo onClick={() => (videoRef.current.currentTime -= 10)} />
              {isPlaying ? (
                <FaPause onClick={togglePlayPause} />
              ) : (
                <FaPlay onClick={togglePlayPause} />
              )}
              <FaRedo onClick={() => (videoRef.current.currentTime += 10)} />
              <Time>{formatTime(currentTime)} - {formatTime(duration)}</Time>
              <ProgressBar
                type="range"
                min="0"
                max="100"
                value={progress}
                onChange={handleProgress}
              />
            </Controls>
          </VideoPlayerContainer>
        </CenterCont3>
      </Container3>
      <Container5>
        <CenterCont9>
          <h1>Estamos presentes em<span className='bolderBlue'> todos os estados do Brasil!</span></h1>
          <p>Com <span className="pBolder">uma rede própria com mais de 10 unidades próprias e mais de 300 clínicas credenciadas,</span> atendemos todo o território nacional.</p>
          <button onClick={() => window.open('https://wa.me/551108001233333', '_blank')}>Agendar agora</button>
        </CenterCont9>
        <CenterCont2>
          <Imager src="/mapa.png" alt="VaciVitta Logo" />
        </CenterCont2>
      </Container5>
      <Container6>
        <CenterCont9>
          <h1>Excelência em <span className='bolderBlue'> vacinação</span> desde 2017</h1>
          <p>Com <span className="pBolder">campanhas de vacinação e foco na saúde preventiva,</span> oferecemos soluções seguras e personalizadas para todos os públicos.</p>
          <button onClick={() => {
            window.location.href = '/#/quem-somos';
            setTimeout(() => window.scrollTo(0, 0), 100);
          }}>Conheça nossa história</button>
        </CenterCont9>
        <CenterCont2>
          <Imager2 src="/vaci.jpg" alt="VaciVitta Logo" />
        </CenterCont2>
      </Container6>
      <Container7>
        <CenterCont19>
          <h1>Mais saúde, <span className='bolderBlue'>mais produtividade</span> para a sua equipe</h1>
          <p>Mais valor <span className="pBolder">para sua empresa.</span> Demonstre engajamento e cuidado com seus colaboradores.</p>
          <button onClick={() => window.open('https://wa.me/5511978538132', '_blank')}>Solicitar orçamento para minha empresa</button>
        </CenterCont19>
        <Images>
          <Imager5 src="/1.png" alt="VaciVitta Logo" />
          <Imager6 src="/2.png" alt="VaciVitta Logo" />
          <Imager7 src="/3.png" alt="VaciVitta Logo" />
          <Imager8 src="/4.png" alt="VaciVitta Logo" />
        </Images>
      </Container7>
      <Container8>
        <CenterCont>
          <h1>Saúde, bem-estar e <span className='bolderBlue'>informações úteis</span> para você</h1>
        </CenterCont>
        <Images>
          <Imager5 src="/fts1.png" alt="VaciVitta Logo" />
          <Imager6 src="/fts2.png" alt="VaciVitta Logo" />
          <Imager7 src="/fts3.png" alt="VaciVitta Logo" />
        </Images>
        <button>Acompanhe nosso blog</button>
      </Container8>
      <Container9>
        <FormContainer onSubmit={handleSubmit}>
        <h2>Nos envie uma mensagem agora mesmo!</h2>
          <FormGroup>
            <Label htmlFor="nome">Nome</Label>
            <InputField type="text" id="nome" name="nome" placeholder="Seu nome" onChange={handleChange} required />
          </FormGroup>

          <FormGroup>
            <Label htmlFor="email">Email</Label>
            <InputField type="email" id="email" name="email" placeholder="Seu email" onChange={handleChange} required />
          </FormGroup>

          <FormGroup>
            <Label htmlFor="telefone">Telefone</Label>
            <InputField type="tel" id="telefone" name="telefone" placeholder="Seu telefone" onChange={handleChange} required />
          </FormGroup>

          <FormGroup>
            <Label htmlFor="mensagem">Mensagem</Label>
            <TextareaField
              id="mensagem"
              name="mensagem"
              placeholder="Digite sua mensagem (até 400 caracteres)"
              maxLength="400"
              rows="6"
              onChange={handleChange}
              required
            />
          </FormGroup>

          <SubmitButton type="submit">Enviar</SubmitButton>
        </FormContainer>
      </Container9>
    </>
  )
}

export default Home

Zerion Mini Shell 1.0