%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/vacivi36/.trash/vacivitta/src/components/
Upload File :
Create Path :
Current File : /home/vacivi36/.trash/vacivitta/src/components/Footer.jsx

import styled from 'styled-components'
import { NavLink } from 'react-router-dom'
import { FaWhatsapp, FaInstagram, FaFacebook, FaMapMarkerAlt, FaEnvelope, FaPhone, FaLinkedin, FaYoutube } from 'react-icons/fa'

const FooterContainer = styled.footer`
  background: #0094D9;
  color: white;
  padding: 50px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  @media (max-width: 1024px) {
    padding: 40px 40px;
  }

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

const FooterTop = styled.div`
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  flex-wrap: wrap;
  margin-bottom: 40px;

  @media (max-width: 1024px) {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
`

const FooterSection = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 200px;

  h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
  }
  
  p {
    display: flex;
    gap: 10px;
    color: white;
    align-items: center;
  }

  a {
    color: white;
    text-decoration: none;
    transition: 0.3s;
    font-size: 16px;

    &:hover {
      color: #0d3453;
    }
  }

  @media (max-width: 1024px) {
    align-items: center;
    text-align: center;
  }
`

const UnitsSection = styled(FooterSection)`
  align-items: flex-start;
  text-align: left;
  
  @media (max-width: 1024px) {
    align-items: flex-start;
    text-align: left;
  }
`

const UnitsList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
`

const Logo = styled.img`
  width: 360px;
  padding-right: 30px;
  filter: brightness(0) invert(1);

  @media (max-width: 1024px) {
    align-items: center;
    text-align: center;
    width: 300px;
    }
`

const SocialIcons = styled.div`
  display: flex;
  gap: 15px;
  margin-top: 10px;

  a {
    color: white;
    font-size: 24px;
    transition: 0.3s;

    &:hover {
      color: #0d3453;
    }
  }
`

const Copyright = styled.div`
  margin-top: 30px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
`

const units = [
  "Itu - SP", "Salto - SP", "Indaiatuba - SP", "Santos - SP", "Itanhaém - SP", 
  "São Paulo - SP", "Anápolis - GO", "Brasília - DF", "Barra - RJ", 
  "Campinas - SP", "Paulínia - SP", "Sorocaba - SP", "Curitiba - PR"
]

function Footer() {
  // Function to scroll to top when clicking units
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  // Dividindo a lista de unidades em duas partes
  const halfwayPoint = Math.ceil(units.length / 2);
  const firstHalf = units.slice(0, halfwayPoint);
  const secondHalf = units.slice(halfwayPoint);

  return (
    <FooterContainer>
      <FooterTop>
        {/* Logo e Redes Sociais */}
        <FooterSection>
          <NavLink to="/" onClick={scrollToTop}>
            <Logo src="/logo.png" alt="VaciVitta Logo" />
          </NavLink>
          <SocialIcons>
            <a href="https://wa.me/558001233333" target="_blank" rel="noopener noreferrer"><FaWhatsapp /></a>
            <a href="https://instagram.com/vacivitta" target="_blank" rel="noopener noreferrer"><FaInstagram /></a>
            <a href="https://facebook.com/vacivitta" target="_blank" rel="noopener noreferrer"><FaFacebook /></a>
            <a href="https://www.linkedin.com/company/vacivitta/?originalSubdomain=br" target="_blank" rel="noopener noreferrer"><FaLinkedin /></a>
            <a href="https://www.youtube.com/@vacivittaclinicadevacinaca6119" target="_blank" rel="noopener noreferrer"><FaYoutube /></a>
          </SocialIcons>
        </FooterSection>

        {/* Unidades - Primeira Coluna */}
        <UnitsSection>
          <h3>Unidades</h3>
          <UnitsList>
            {firstHalf.map((unit, index) => (
              <a key={index} href="#/unidades" onClick={scrollToTop}>
                <FaMapMarkerAlt /> {unit}
              </a>
            ))}
          </UnitsList>
        </UnitsSection>

        {/* Unidades - Segunda Coluna */}
        <UnitsSection>
          <h3>Unidades</h3>
          <UnitsList>
            {secondHalf.map((unit, index) => (
              <a key={index} href="#/unidades" onClick={scrollToTop}>
                <FaMapMarkerAlt /> {unit}
              </a>
            ))}
          </UnitsList>
        </UnitsSection>

        {/* Contato */}
        <FooterSection>
          <h3>Contato</h3>
          <p><FaEnvelope /> <a href="mailto:atendimento@vacivitta.com.br">atendimento@vacivitta.com.br</a></p>
          <p><FaPhone /> <a href="https://wa.me/558001233333" target="_blank" rel="noopener noreferrer">+55 0800 123 3333</a></p>
        </FooterSection>
      </FooterTop>

      {/* Direitos Autorais */}
      <Copyright>
        © {new Date().getFullYear()} Vacivitta - Todos os direitos reservados. Desenvolvido por GrowUX - Growth & Experiencie
      </Copyright>
    </FooterContainer>
  )
}

export default Footer

Zerion Mini Shell 1.0