<!doctype html>
<html lang="pt-br">

<head>
	<!-- Meta tags obrigatórias -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Título -->
	<title>Agende seu Atendimento com Facilidade e Rapidez | Sou Mulher Agenda</title>
	<!-- Descrição SEO -->
	<meta name="description" content="Sou Mulher Agenda - Facilite sua vida! Nosso sistema de agendamento online permite que você marque seus atendimentos de forma simples e rápida, 24 horas por dia, 7 dias por semana.">
	<!-- Palavras-chave SEO -->
	<meta name="keywords" content="agendamento, sistema de agendamento, agendamento online, facilidade, rapidez, atendimento, agendar atendimento">
	<!-- Meta tags Open Graph para SEO -->
	<meta property="og:title" content="Agende seu Atendimento com Facilidade e Rapidez | Sou Mulher Agenda">
	<meta property="og:description" content="Sou Mulher Agenda - Facilite sua vida! Nosso sistema de agendamento online permite que você marque seus atendimentos de forma simples e rápida, 24 horas por dia, 7 dias por semana.">
	<meta property="og:type" content="website">
	<meta property="og:url" content="<?=base_url();?>">
	<meta property="og:image" content="<?=base_url();?>assets/img/logo-black.png">
	<!-- Meta tags Twitter para SEO -->
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="Agende seu Atendimento com Facilidade e Rapidez | Sou Mulher Agenda">
	<meta name="twitter:description" content="Sou Mulher Agenda - Facilite sua vida! Nosso sistema de agendamento online permite que você marque seus atendimentos de forma simples e rápida, 24 horas por dia, 7 dias por semana.">
	<meta name="twitter:image" content="<?=base_url();?>assets/img/logo-black.png">

	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap" rel="stylesheet">
	<!-- Favicon -->
	<link rel="icon" type="image/png" href="<?=base_url();?>assets/img/favicon.png">
	<!-- Bootstrap Min CSS -->
	<link rel="stylesheet" href="<?=base_url();?>assets/css/bootstrap.min.css">
	<!-- Animate Min CSS -->
	<link rel="stylesheet" href="<?=base_url();?>assets/css/animate.min.css">
	<!-- Pe-icon-7 CSS -->
	<link rel="stylesheet" href="<?=base_url();?>assets/css/pe-icon-7-stroke.css">
	<!-- Font Awesome Min CSS -->
	<link rel="stylesheet" href="<?=base_url();?>assets/css/fontawesome.min.css">
	<!-- Mran Menu CSS -->
	<link rel="stylesheet" href="<?=base_url();?>assets/css/meanmenu.css">
	<!-- Owl Carousel Min CSS -->
	<link rel="stylesheet" href="<?=base_url();?>assets/css/owl.carousel.min.css">
	<!-- Style CSS -->
	<link rel="stylesheet" href="<?=base_url();?>assets/css/style.css">
	<!-- Responsive CSS -->
	<link rel="stylesheet" href="<?=base_url();?>assets/css/responsive.css">
    <style>
    /* Estilo da barra de cookies */
    #cookie-bar {
      position: fixed;
      bottom: 20px; /* Distância da barra em relação ao rodapé */
      left: 20px; /* Distância da barra em relação à esquerda */
      width: 300px; /* Largura da barra */
      padding: 10px;
      background-color: rgba(255, 80, 107, 0.10); /* Cor de fundo com transparência */
      color: #000;
      text-align: center;
      z-index: 9999; /* Garante que a barra fique acima de outros elementos */
      display: none;
    }

    /* Estilo dos botões */
    #cookie-bar button {
      margin: 5px;
      padding: 10px 20px;
      cursor: pointer;
    }

    #accept-button {
      background-color: rgb(255 80 107);
      color: white;
      border: none;
    }

    #close-button {
      background-color: #FFFFFF;
      color: rgb(255 80 107);
      border: none;
    }

    /* Estilo do efeito flutuante */
    .cookie-modal {
      animation: floatIn 1s forwards; /* Efeito de entrada da barra flutuante */
    }

    @keyframes floatIn {
      from {
        transform: translateY(100%);
      }
      to {
        transform: translateY(0);
      }
    }

	.banner-container {
		position: relative;
	}

	.banner {
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.slide {
		display: none;
		width: 100%;
	}

	.slide img {
		width: 100%;
		height: auto;
	}

	.dots {
		text-align: center;
		margin-top: 10px;
	}

	.dot {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: gray;
		margin: 0 5px;
		cursor: pointer;
	}

	.dot.active {
		background-color: black;
	}

	/* Adicione esta regra para esconder os dots */
	.dots {
		display: none;
	}

	/* Adicione um estilo para os slides que estão "saindo" */
	.slide.fade-out {
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
	}

	/* Adicione um estilo para os slides que estão "entrando" */
	.slide.fade-in {
		display: block;
		opacity: 1;
		transition: opacity 0.5s ease-in-out;
	}


    </style>
</head>

<body>

	<!-- Start Preloader Area -->
	<div class="preloader">
		<div class="d-table">
			<div class="d-table-cell">
			<div class="lds-spinner">
				<div></div><div></div><div></div>
				<div></div><div></div><div></div>
				<div></div><div></div><div></div>
				<div></div><div></div><div></div>
			</div>
			</div>
		</div>
	</div>
	<!-- End Preloader Area -->
	
	<?=view('include/menu');?>
	
	<!-- Start Home Section -->
	<div class="home-somos">
		<div class="d-table">
			<div class="d-table-cell">
				<div class="container">
					<div class="page-title-content">
						<h2 style="color:#000000"><span class="color-text">Nossos </span>Planos</h2>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- End Home Section -->
	<div class="cards">
    <div class="card shadow">
      <ul class="uul">
        <li class="pack">Basic</li>
        <li id="basic" class="price bottom-bar lii">R&dollar;35,00</li>
        <li class="bottom-bar lii">Agendamento</li>
		<li class="bottom-bar lii">Logomarca na Agenda</li>
        <li class="bottom-bar lii">1 Acesso</li>
		<li class="bottom-bar lii">lembretes via E-mail</li>
        <li class="bottom-bar lii">Relatórios</li>
        <li><button class="btn">Contratar</button></li>
      </ul>
    </div>
    <div class="card active">
      <ul class="uul">
        <li class="pack lii">Professional</li>
        <li id="professional" class="price bottom-bar lii">R&dollar;49.99</li>
        <li class="bottom-bar lii">Agendamento</li>
        <li class="bottom-bar lii">3 Acessos</li>
		<li class="bottom-bar lii">Site básico</li>
        <li class="bottom-bar lii">lembretes via E-mail</li>
		<li class="bottom-bar lii">lembretes via WhatsApp</li>
		<li class="bottom-bar lii">Relatórios</li>
        <li><button class="btn active-btn">Contratar</button></li>
      </ul>
    </div>
    <div class="card shadow">
      <ul class="uul">
        <li class="pack lii">Master</li>
        <li id="master" class="price bottom-bar lii">R&dollar;125.99</li>
        <li class="bottom-bar lii">Agendamento</li>
        <li class="bottom-bar lii">5 Acessos</li>
		<li class="bottom-bar lii">Site com Vitrine</li>
		<li class="bottom-bar lii">lembretes via WhatsApp & E-mail</li>
		<li class="bottom-bar lii">Relatórios</li>
        <li><button class="btn">Contratar</button></li>
      </ul>
    </div>
  </div>
  <script src="script.js"></script>
  <style>
	.toggle {
  margin-top: 2rem;
  color: hsl(234, 14%, 74%);
  display: flex;
  align-items: center;
}
.toggle-btn {
  margin: 0 1rem;
}
.checkbox {
  display: none;
}

.sub {
	background: linear-gradient( 135deg, rgb(110 85 92) 0%, rgb(255 81 108) 100% );
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* height: 25px;
  width: 50px; */
  height: 1.6rem;
  width: 3.3rem;
  border-radius: 1.6rem;
  padding: 0.3rem;
}
.circle {
  background-color: #fff;
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 50%;
}
.checkbox:checked + .sub {
  justify-content: flex-end;
}

.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.card {
  background: #fff;
  color: hsl(233, 13%, 49%);
  border-radius: 0.8rem;
}

.cards .card.active {
	background: linear-gradient( 135deg, rgb(110 85 92) 0%, rgb(255 81 108) 100% );
  color: #fff;
  display: flex;
  align-items: center;
  transform: scale(1.1);
  z-index: 1;
}
ul.uul {
  margin: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
ul li.lii {
  list-style-type: none;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1rem 0;
}
ul li.price {
  font-size: 3rem;
  color: hsl(232, 13%, 33%);
  padding-bottom: 2rem;
}
.shadow {
  box-shadow: -5px 5px 15px 1px rgba(0, 0, 0, 0.1);
}

.card.active .price {
  color: #fff;
}

.btn {
  margin-top: 1rem;
  height: 2.6rem;
  width: 13.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: linear-gradient( 135deg, rgb(110 85 92) 0%, rgb(255 81 108) 100% );
  color: #fff;
  outline: none;
  border: 0;
  font-weight: bold;
}
.active-btn {
  background: #fff;
  color: hsl(237, 63%, 64%);
}
.bottom-bar {
  border-bottom: 2px solid hsla(240, 8%, 85%, 0.582);
}
.card.active .bottom-bar {
  border-bottom: 2px solid hsla(240, 8%, 85%, 0.253);
}
.pack {
  font-size: 1.1rem;
}

@media (max-width: 280px) {
  ul.uul {
    margin: 1rem;
  }
  h1 {
    font-size: 1.2rem;
  }
  .toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 80px;
  }
  .cards {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .card {
    transform: scale(0.8);
    margin-bottom: 1rem;
  }
  .cards .card.active {
    transform: scale(0.8);
  }
}

@media (min-width: 280px) and (max-width: 320px) {
  ul.uul {
    margin: 20px;
  }
  .cards {
    display: flex;
    flex-direction: column;
  }
  .card {
    margin-bottom: 1rem;
  }
  .cards .card.active {
    transform: scale(1);
  }
}

@media (min-width: 320px) and (max-width: 414px) {
  .cards {
    display: flex;
    flex-direction: column;
  }
  .card {
    margin-bottom: 1rem;
  }
  .cards .card.active {
    transform: scale(1);
  }
}
@media (min-width: 414px) and (max-width: 768px) {
  .card {
    margin-bottom: 1rem;
    margin-right: 1rem;
  }
  .cards .card.active {
    transform: scale(1);
  }
}
@media (min-width: 768px) and (max-width: 1046px) {
  .cards {
    display: flex;
  }
  .card {
    margin-bottom: 1rem;
    margin-right: 1rem;
  }
  .cards .card.active {
    transform: scale(1);
  }
}
  </style>
	<!-- Start Services Section -->
	<section class="services-section pt-70 pb-100">
		<div class="container">
			<div class="row">
				<div class="col-lg-4 col-md-6">
					<div class="single-services-item">
						<div class="services-icon">
							<i class="pe-7s-note2"></i>
						</div>
						<h3>Facilidade e Acesso 24/7</h3>
						<p>Com o agendamento online, os clientes podem marcar seus compromissos de qualquer lugar e a qualquer hora, usando seus dispositivos preferidos, seja smartphone, tablet ou computador.</p>
					</div>
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="single-services-item">
						<div class="services-icon">
							<i class="pe-7s-paper-plane"></i>
						</div>
						<h3>Redução de No-Shows</h3>
						<p>Nosso sistema de agendamento online envia lembretes automáticos para os clientes, reduzindo significativamente a taxa de faltas em compromissos decorrentes de ausências não comunicadas.</p>
					</div>
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="single-services-item">
						<div class="services-icon">
							<i class="pe-7s-note"></i>
						</div>
						<h3>Organização e Gerenciamento</h3>
						<p>Com o agendamento online, os profissionais têm uma visão completa de suas agendas, permitindo um melhor planejamento e gerenciamento dos atendimentos.</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- End Services Section -->
	
	<!-- Start Counter Section -->
	<section class="counter-area section-padding">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-6 counter-item">
					<div class="single-counter">
						<div class="counter-contents">
							<h2>
								<span class="counter-number">07</span>
								<span>+</span>
							</h2>
							<h3 class="counter-heading">Anos de experiência</h3>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-6 counter-item">
					<div class="single-counter">
						<div class="counter-contents">
							<h2>
								<span class="counter-number">500</span>
                                <span>+</span>
							</h2>
							<h3 class="counter-heading">Clientes Cadastrados</h3>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-6 counter-item">
					<div class="single-counter">
						<div class="counter-contents">
							<h2>
								<span class="counter-number">20</span>
								<span>+</span>
							</h2>
							<h3 class="counter-heading">Parceiros</h3>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-6 counter-item">
					<div class="single-counter">
						<div class="counter-contents">
							<h2>
								<span class="counter-number">300</span>
								<span>+</span>
							</h2>
							<h3 class="counter-heading">Classificação de 5 estrelas</h3>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- End Counter Section -->
	
	<!-- Start Overview Section -->
	<section class="overview-section section-padding">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-lg-6">
					<div class="overview-content">
						<h2>Conheça os Diversos Módulos do Nosso Sistema!</h2>
						<p>Descubra a riqueza de funcionalidades que nosso sistema oferece através de seus diversos módulos.</p>
						<ul class="features-list">
							<li> <span class="active">Notificação via WhatsApp</span></li>
							<li> <span>Agendamento de Clientes</span></li>
							<li> <span>Calendário e Agenda</span></li>
							<li> <span>Notificações e Lembretes</span></li>
							<li> <span>Integração com Pagamentos</span></li>
							<li> <span>Relatórios e Estatísticas</span></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="overview-image-2">
						<img src="<?=base_url();?>assets/img/choose-1.png" alt="image">
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- End Overview Section -->
	
	<!-- Start Footer Section -->
	<section class="footer-area section-padding">
		<div class="container">
			<div class="row">
				<div class="col-lg-4 col-md-6 col-sm-6">
					<div class="single-footer-widget">
						<a class="footer-logo" href="javascript:void(0);">
							<img src="<?=base_url();?>assets/img/logo.png" class="white-logo" alt="logo">
						</a>
						<p>A Sou Mulher Agenda é a sua parceira perfeita para organizar a vida de forma prática e feminina. Com recursos intuitivos, permite agendar compromissos, tarefas e momentos especiais, tudo em um ambiente seguro e acolhedor. Simplifique seu dia a dia e aproveite a experiência única que a Sou Mulher Agenda oferece!</p>
						<ul class="footer-social">
							<li>
								<a href="javascript:void(0);"> <i class="fab fa-facebook-f"></i>
								</a>
							</li>
							<li>
								<a href="javascript:void(0);"> <i class="fab fa-linkedin"></i>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-lg-2 col-md-6 col-sm-6">
					<div class="single-footer-widget">
						<div class="footer-heading">
                            <h3>Acesso Rápido</h3>
						</div>
						<ul class="footer-quick-links">
							<li> <a href="javascript:void(0);">Inicio</a></li>
							<li> <a href="javascript:void(0);">Preço</a></li>
							<li> <a href="javascript:void(0);">Funcionabilidades</a></li>
							<li> <a href="javascript:void(0);">Cadastro</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-2 col-md-6 col-sm-6">
					<div class="single-footer-widget">
						<div class="footer-heading">
							<h3>Institucional</h3>
						</div>
						<ul class="footer-quick-links">
							<li><a href="javascript:void(0);">Sobre</a></li>
							<li><a href="javascript:void(0);">Suporte</a></li>
							<li><a href="javascript:void(0);">Política de Privacidade</a></li>
							<li><a href="javascript:void(0);">Termos e Condições</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 col-sm-6">
					<div class="single-footer-widget">
						<div class="footer-heading">
							<h3>Informações de contato</h3>
						</div>
						<div class="footer-info-contact">
							<span><strong>Telefone Suporte:</strong> <a href="tel:0802235678">+55 (021) 0000-0000</a></span>
						</div>
						<div class="footer-info-contact">
							<span><strong>E-mail:</strong> <a href="mailto:suporte@soumulheragenda.com.br">suporte@soumulheragenda.com.br</a></span>
						</div>
						<!-- Start Subscribe Area -->
						<form class="newsletter-form">
							<input type="email" class="input-newsletter" placeholder="Receba novidades do site" name="email" required autocomplete="off">
							<button class="default-btn" type="submit">Inscrever <span></span></button>
						</form>
						<!-- End Subscribe Area -->
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- End Footer Section -->
	
	<!-- Start Copy Right Section -->
	<div class="copyright-area">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-lg-7 col-md-7">
					<p> <i class="far fa-copyright"></i> Sou Mulher Agenda <?=date('Y');?> - Todos direitos Reservados. Desenvolvido por: <a href="https://wa.me/553135003516?text=Desejo+informa%C3%A7%C3%B5e+de+desenvolvimento%2C+visualizei+o+site+Inset+Pragas%21" target="_blank" style="color:#FFF;">GotechBr<a></p>
				</div>
				<div class="col-lg-5 col-md-5">
				
				</div>
			</div>
		</div>
	</div>
	<!-- End Copy Right Section -->
	
	<!-- Start Go Top Section -->
	<div class="go-top">
		<i class="fas fa-chevron-up"></i>
		<i class="fas fa-chevron-up"></i>
	</div>
	<!-- End Go Top Section -->

    <!-- Barra de cookie Inicio -->
    <div id="cookie-bar" class="cookie-modal" style="display: <?php echo isset($_COOKIE['cookie_accepted']) ? 'none' : 'block'; ?>">
        <p>Utilizamos cookies para melhorar a sua experiência no nosso site. Ao continuar a navegação, você concorda com o uso de cookies.</p>
        <button id="accept-button">Aceitar</button>
        <button id="close-button">Fechar</button>
    </div>
    <!-- Barra de cookie Fim -->
	
	<!-- jQuery Min JS -->
	<script src="<?=base_url();?>assets/js/jquery.min.js"></script>
	<!-- Bootstrap Min JS -->
	<script src="<?=base_url();?>assets/js/bootstrap.min.js"></script>
	<!-- MeanMenu JS  -->
	<script src="<?=base_url();?>assets/js/jquery.meanmenu.js"></script>
	<!-- Appear Min JS -->
	<script src="<?=base_url();?>assets/js/jquery.appear.min.js"></script>
	<!-- CounterUp Min JS -->
	<script src="<?=base_url();?>assets/js/jquery.waypoints.min.js"></script>
	<script src="<?=base_url();?>assets/js/jquery.counterup.min.js"></script>
	<!-- Owl Carousel Min JS -->
	<script src="<?=base_url();?>assets/js/owl.carousel.min.js"></script>
	<!-- WOW Min JS -->
	<script src="<?=base_url();?>assets/js/wow.min.js"></script>
	<!-- Main JS -->
	<script src="<?=base_url();?>assets/js/main.js"></script>

	<script>
        let slideIndex = 0;
        showSlides();

        function showSlides() {
            const slides = document.getElementsByClassName("slide");
            const dots = document.getElementsByClassName("dot");

            for (let i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
                dots[i].classList.remove("active");
            }

            slideIndex++;

            if (slideIndex > slides.length) {
                slideIndex = 1;
            }

            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].classList.add("active");

            setTimeout(showSlides, 5000); // Change slide every 3 seconds
        }
    </script>
    <script>
        // Check if the user agent is from a desktop device
        var isDesktop = /Windows|Macintosh/.test(navigator.userAgent);

        // If it's a desktop device, show the cookie bar
        if (isDesktop) {
            document.getElementById('cookie-bar').style.display = 'block';
        }

        // Function to set a cookie
        function setCookie(name, value, days) {
            var expires = "";
            if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
        }

        // Event listener for the accept button
        document.getElementById('accept-button').addEventListener('click', function() {
            // Make a request to the accept cookies route
            fetch('<?php echo site_url("cookie/accept"); ?>').then(() => {
            // Set the acceptance cookie
            setCookie('cookie_accepted', 'true', 365); // The cookie will be valid for 365 days
            // Hide the cookie bar
            document.getElementById('cookie-bar').style.display = 'none';
            });
        });

        // Event listener for the close button
        document.getElementById('close-button').addEventListener('click', function() {
            // Make a request to the close cookies bar route
            fetch('<?php echo site_url("cookie/close"); ?>').then(() => {
            // Hide the cookie bar
            document.getElementById('cookie-bar').style.display = 'none';
            });
        });

        // Check if the cookie has already been accepted
        var cookieAccepted = document.cookie.split(';').some((item) => item.trim().startsWith('cookie_accepted='));
        if (cookieAccepted) {
            // Hide the cookie bar if the cookie has been accepted
            document.getElementById('cookie-bar').style.display = 'none';
        }
    </script>

	
</body>

</html>