@extends('theme::layout.layout')
@section('title', ''.env('APP_NAME').' | Home')
@section('content')
    <div class="home-bg">

    	@if($mainPage != NULL)
	    	<div class="full-contents">
		        <h1 class="text-2xl mb-4">{{ $mainPage->title }}</h1>
		        @if ($mainPage->thumbnail)
		            <img src="{{ asset('thumbnails/' . $page->thumbnail) }}" alt="{{ $mainPage->title }}" class="mb-4">
		        @endif

		        <div class="content">
		            {!! $mainPage->content !!}
		        </div>
		    </div>
		@else



		<!-- Section 2 -->
		<!-- <section class="py-10 md:px-0">
		  <div class="container items-center">
		    <div class="flex flex-wrap items-center sm:-mx-3">
		      <div class="w-full md:w-1/2 md:px-3">
		        <div class="w-full pb-6 space-y-6 sm:max-w-md lg:max-w-lg md:space-y-4 lg:space-y-8 xl:space-y-9 sm:pr-5 lg:pr-0 md:pb-0">
		          <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-4xl lg:text-5xl xl:text-5xl">
		            <span class="block xl:inline">Transformamos Ideias</span>
		            <span class="block text-indigo-600 xl:inline"><br>em Soluções Digitais.</span>
		          </h1>
		          <p class="mx-auto text-base text-gray-500 sm:max-w-md lg:text-xl md:max-w-3xl">Na NexWeb, unimos design, tecnologia e inovação para criar sites, sistemas e aplicações que impulsionam negócios e conectam pessoas.</p>
		          <div class="relative flex flex-col sm:flex-row sm:space-x-4">
		            <a href="#_" class="flex items-center w-full px-6 py-3 mb-3 text-lg text-white bg-indigo-600 rounded-md sm:mb-0 hover:bg-indigo-700 sm:w-auto">
		              Fale Conosco
		              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
		            </a>
		            <a href="#_" class="flex items-center px-6 py-3 text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 hover:text-gray-600">
		              Saiba mais
		            </a>
		          </div>
		        </div>
		      </div>
		      <div class="w-full md:w-1/2">
		        <div class="w-full h-auto overflow-hidden rounded-md shadow-xl sm:rounded-xl">
		            <img src="https://images.unsplash.com/photo-1498049860654-af1a5c566876?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
		          </div>
		      </div>
		    </div>
		  </div>
		</section>
 -->











			<section class="text-gray-700 body-font">
				<style type="text/css">
					.full-contents { display: none; }
					.bg-indigo-500 {
					    background-color: {{config('colors.primary_color_user')}};
					}
					#beneficios .text-indigo-500 {
						background-color: {{config('colors.primary_color_user')}}; color: #fff!important;
					}
					.line-buttons-whatsapp { transition: 1s; background-color: {{config('colors.primary_color_user')}}; }
	                .line-buttons-whatsapp:hover { transition: 1s; opacity: 0.5; background-color: {{config('colors.primary_color_user')}}; }
	                .border-indigo-500 { border-color: {{config('colors.primary_color_user')}}; }
	                .text-xs { border-radius: 5px; }

	                @media screen and (min-width: 600px) {
	                	#spa_plan { display: none!important; }
	                }

	                #spa_plan { margin-right: 0.5em; }

	                @media (min-width: 800px) {
	                	#menuscroldbo {
	                		padding-left: 2em!important; padding-right: 2em!important;
	                	}
			        }
				</style>
				<!-- Exibe a mensagem de sucesso -->
		        @if(session('error'))
		          <div id="alert-border-3" class="flex items-center p-4 mb-4 text-red-800 border-t-4 border-red-300 bg-red-50 dark:text-red-400 dark:bg-gray-800 dark:border-red-800" role="alert" style="margin-bottom: 1em; margin-top: 0em;">
		              <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
		                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
		              </svg>
		              <div class="ms-3 text-sm font-medium">
		                {{ session('error') }}
		              </div>
		              <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700"  data-dismiss-target="#alert-border-3" aria-label="Close">
		                <span class="sr-only">Dismiss</span>
		                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
		                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
		                </svg>
		              </button>
		          </div>
		        @endif
			  <div class="container mx-auto flex px-5 py-0 md:flex-row flex-col items-center">
			    <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
			      <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">A solução definitiva para o
			        <br class="hidden lg:inline-block">gerenciamento de redes sociais e postagens em grupos
			      </h1>
			      <p class="mb-8 leading-relaxed">Apresentamos a {{env('APP_NAME')}}, a solução definitiva para o gerenciamento de redes sociais e postagens em grupos. A {{env('APP_NAME')}} foi desenvolvida para profissionais de marketing digital, administradores de redes sociais e pequenas empresas que desejam otimizar sua presença online de maneira eficiente e organizada.</p>
			      <div class="flex justify-center">
			        @guest
			            <a style="text-transform: uppercase; margin-right: 0.5em;" href="{{ url('/user/register') }}" class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-5 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-blue-700 stroke-white text-white hover:bg-red-600 h-[30px] min-w-[30px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4"><i data-feather="user" style='width: 1.2em' class='mr-1'></i> Registro</a>
	                    <a style="text-transform: uppercase;" href="{{ url('/user/login') }}" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2 md:px-5 md:py-2.5 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800" id="menu-itens-mobile">Login</a>
	                @else
	                    <a style="text-transform: uppercase; margin-right: 0.5em; cursor: pointer;" onclick="redirectToWhatsApp()" class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-5 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-blue-700 stroke-white text-white hover:bg-red-600 h-[30px] min-w-[30px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4"><i data-feather="message-square" style='width: 1.2em' class='mr-1'></i> Fale Conosco</a>
	                @endguest
			      </div>
			    </div>
			    <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
			      <img class="object-cover object-center rounded" alt="hero" src="{{ asset('images/themes/facebook-imgs.png') }}">
			    </div>
			  </div>
			</section>

			<section class="text-gray-700 body-font border-t border-gray-200" style="margin-top: 4em;">
			  <div class="container px-5 py-14 mx-auto">
			    <div class="flex flex-col text-center w-full mb-20">
			      <h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1">Principais Funcionalidades</h2>
			      <h1 class="sm:text-3xl text-2xl font-medium title-font text-gray-900">Simplifique o gerenciamento de suas redes sociais</h1>
			    </div>
			    <div class="flex flex-wrap -m-4" style="margin-top: -3em!important;">
			      <div class="p-4 md:w-1/3">
			        <div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
			          <div class="flex items-center mb-3">
			            <div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
			              <i data-feather="facebook" style='width: 1em'></i>
			            </div>
			            <h2 class="text-gray-900 text-lg title-font font-medium">Postagens em Grupos</h2>
			          </div>
			          <div class="flex-grow">
			            <p class="leading-relaxed text-base">Programe e publique conteúdos em múltiplos grupos do Facebook com apenas alguns cliques. A {{env('APP_NAME')}} permite que você personalize suas mensagens para diferentes públicos e agende postagens para o momento mais oportuno.</p>
			            <!-- <a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
			              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
			                <path d="M5 12h14M12 5l7 7-7 7"></path>
			              </svg>
			            </a> -->
			          </div>
			        </div>
			      </div>
			      <div class="p-4 md:w-1/3">
			        <div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
			          <div class="flex items-center mb-3">
			            <div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
			              <i data-feather="calendar" style='width: 1em'></i>
			            </div>
			            <h2 class="text-gray-900 text-lg title-font font-medium">Automatização de Tarefas</h2>
			          </div>
			          <div class="flex-grow">
			            <p class="leading-relaxed text-base">Simplifique o gerenciamento de suas redes sociais com ferramentas automatizadas para repostagens, respostas automáticas a comentários e gerenciamento de seguidores.</p>
			            <!-- <a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
			              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
			                <path d="M5 12h14M12 5l7 7-7 7"></path>
			              </svg>
			            </a> -->
			          </div>
			        </div>
			      </div>
			      <div class="p-4 md:w-1/3">
			        <div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
			          <div class="flex items-center mb-3">
			            <div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
			              <i data-feather="check" style='width: 1em'></i>
			            </div>
			            <h2 class="text-gray-900 text-lg title-font font-medium">Segurança e Privacidade</h2>
			          </div>
			          <div class="flex-grow">
			            <p class="leading-relaxed text-base">Nossa plataforma garante que todas as suas informações e dados sejam mantidos seguros. Oferecemos autenticação de dois fatores e encriptação de ponta a ponta para proteger suas contas e postagens.</p>
			            <!-- <a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
			              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
			                <path d="M5 12h14M12 5l7 7-7 7"></path>
			              </svg>
			            </a> -->
			          </div>
			        </div>
			      </div>
			    </div>
			  </div>
			</section>

			<section class="text-gray-700 body-font border-t border-gray-200" id="beneficios" style="margin-top: -1em;">
			  <div class="container px-5 py-8 mx-auto">
			    <div class="flex flex-wrap w-full mb-20 flex-col items-center text-center">
			      <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">Benefícios</h1>
			      <p class="lg:w-1/2 w-full leading-relaxed text-base">{{env('APP_NAME')}} é a ferramenta essencial para qualquer pessoa ou empresa que deseja dominar o gerenciamento de redes sociais e impulsionar sua presença online.</p>
			    </div>
			    <div class="flex flex-wrap -m-4" style="margin-top: -3em;">
			      <div class="xl:w-1/3 md:w-1/2 p-4">
			        <div class="border border-gray-300 p-6 rounded-lg">
			          <div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
			            <i data-feather="clock" style='width: 1em'></i>
			          </div>
			          <h2 class="text-lg text-gray-900 font-medium title-font mb-2">Economia de Tempo</h2>
			          <p class="leading-relaxed text-base">Centralize suas atividades de redes sociais em uma única plataforma, eliminando a necessidade de gerenciar manualmente.</p>
			        </div>
			      </div>
			      <div class="xl:w-1/3 md:w-1/2 p-4">
			        <div class="border border-gray-300 p-6 rounded-lg">
			          <div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
			            <i data-feather="activity" style='width: 1em'></i>
			          </div>
			          <h2 class="text-lg text-gray-900 font-medium title-font mb-2">Maior Alcance e Engajamento</h2>
			          <p class="leading-relaxed text-base">Utilize nossas ferramentas de análise e programação para maximizar o impacto de suas postagens e interações online.</p>
			        </div>
			      </div>
			      <div class="xl:w-1/3 md:w-1/2 p-4">
			        <div class="border border-gray-300 p-6 rounded-lg">
			          <div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
			            <i data-feather="coffee" style='width: 1em'></i>
			          </div>
			          <h2 class="text-lg text-gray-900 font-medium title-font mb-2">Facilidade de Uso</h2>
			          <p class="leading-relaxed text-base">Interface intuitiva e fácil de usar, ideal tanto para iniciantes quanto para profissionais experientes.</p>
			        </div>
			      </div>
			    </div> 
			    <center style="margin-top: 2em;">
			    	<a style="text-transform: uppercase; margin-right: 0.5em; cursor: pointer;" onclick="redirectToWhatsApp()" class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-5 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-blue-700 stroke-white text-white hover:bg-red-600 h-[30px] min-w-[30px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4"><i data-feather="message-square" style='width: 1.2em' class='mr-1'></i> Fale Conosco</a>
			    </center>
			  </div>
			</section>
			
			<section class="text-gray-700 body-font overflow-hidden border-t border-gray-200">
			  <div class="container px-5 py-14 mx-auto flex flex-wrap" id="renovar">

			    <div class="lg:w-1/4 mt-48 hidden lg:block">
			      <div class="mt-px border-t border-gray-300 border-b border-l rounded-tl-lg rounded-bl-lg overflow-hidden">
			        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start -mt-px"></p>
			        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Contas conectadas</p>
			        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Grupos vinculados</p>
			        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Agendamentos e posts</p>
			        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Desconto na assinatura</p>
			      </div>
			    </div>

			    <div class="flex lg:w-3/4 w-full flex-wrap lg:border border-gray-300 rounded-lg">
			      <div class="lg:w-1/3 lg:mt-px w-full mb-10 lg:mb-0 border-2 border-gray-300 lg:border-none rounded-lg lg:rounded-none">
			        <div class="px-2 text-center h-48 flex flex-col items-center justify-center">
			          <h3 class="tracking-widest">Plano Mensal</h3>
			          <h2 class="text-4xl text-gray-900 font-medium leading-none mb-4 mt-2">R$45,00</h2>
			          <span class="text-sm text-gray-600">Start</span>
			        </div>
			        <p class="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300"></p>
			        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Contas conectadas</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Grupos vinculados</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Agendamentos e posts</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Desconto na assinatura</span>

			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
			            <path d="M18 6L6 18M6 6l12 12"></path>
			            </svg>
			          </span>
			        </p>
			        <div class="border-t border-gray-300 p-6 text-center rounded-bl-lg">
			          <button onclick="redirectToWhatsApp()" class="line-buttons-whatsapp flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded" style="text-transform: uppercase; font-weight: 500;">Assinar Plano
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
			              <path d="M5 12h14M12 5l7 7-7 7"></path>
			            </svg>
			          </button>
			          <p class="text-xs text-gray-500 mt-3" style="display: unset!important">Renovar o plano de um serviço é uma excelente oportunidade para garantir a continuidade dos benefícios e vantagens já usufruídos.</p>
			        </div>
			      </div>

			      <div class="lg:w-1/3 lg:-mt-px w-full mb-10 lg:mb-0 border-2 rounded-lg border-indigo-500 relative">
			        <span class="bg-indigo-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">DESCONTO DE 10%</span>
			        <div class="px-2 text-center h-48 flex flex-col items-center justify-center">
			          <h3 class="tracking-widest">Plano Trimestral</h3>
			          <h2 class="text-4xl text-gray-900 font-medium flex items-center justify-center leading-none mb-4 mt-2">R$135,30
			          </h2>
			          <span class="text-sm text-gray-600">Gold</span>
			        </div>
			        <p class="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300"></p>
			        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Contas conectadas</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Grupos vinculados</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Agendamentos e posts</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Desconto na assinatura</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <div class="border-t border-gray-300 p-6 text-center rounded-bl-lg">
			          <button  onclick="redirectToWhatsApp()" class="line-buttons-whatsapp flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded" style="text-transform: uppercase; font-weight: 500;">Assinar Plano
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
			              <path d="M5 12h14M12 5l7 7-7 7"></path>
			            </svg>
			          </button>
			          <p class="text-xs text-gray-500 mt-3" style="display: unset!important">Renovar o plano de um serviço é uma excelente oportunidade para garantir a continuidade dos benefícios e vantagens já usufruídos.</p>
			        </div>
			      </div>
			      <div class="lg:w-1/3 w-full lg:mt-px border-2 border-gray-300 lg:border-none rounded-lg lg:rounded-none">
			        <div class="px-2 text-center h-48 flex flex-col items-center justify-center">
			          <h3 class="tracking-widest">Plano Anual</h3>
			          <h2 class="text-5xl text-gray-900 font-medium flex items-center justify-center leading-none mb-4 mt-2">R$540,00
			          </h2>
			          <span class="text-sm text-gray-600">Bussines</span>
			        </div>
			        <p class="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300"></p>
			        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Contas conectadas</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Grupos vinculados</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Agendamentos e posts</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
			          <span id="spa_plan">Desconto na assinatura</span>
			          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
			              <path d="M20 6L9 17l-5-5"></path>
			            </svg>
			          </span>
			        </p>
			        <div class="border-t border-gray-300 p-6 text-center rounded-bl-lg">
			          <button onclick="redirectToWhatsApp()" class="line-buttons-whatsapp flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded" style="text-transform: uppercase; font-weight: 500;">Assinar Plano
			            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
			              <path d="M5 12h14M12 5l7 7-7 7"></path>
			            </svg>
			          </button>
			          <p class="text-xs text-gray-500 mt-3" style="display: unset!important">Renovar o plano de um serviço é uma excelente oportunidade para garantir a continuidade dos benefícios e vantagens já usufruídos.</p>
			        </div>
			      </div>
			    </div>
			  </div>
			</section>
		@endif
        
    </div>


    <script type="text/javascript">
    	function redirectToWhatsApp() {
	    	var phoneNumber = "5582981940043";
		    // Format the phone number by removing spaces, hyphens, or any non-numeric characters
		    var formattedNumber = phoneNumber.replace(/\D/g, '');

		    // Obter os parâmetros da URL
	        const params = new URLSearchParams(window.location.search);

	        // Especificar o nome do parâmetro que você quer verificar
	        const paramName = 'cupom'; // Pode ser 'id', 'page', etc.

	        // Verificar se o parâmetro existe
	        if (params.has(paramName)) {
	            const paramValue = params.get(paramName);

	            // Adicione aqui o código que será executado se o parâmetro existir
	            var url = "https://api.whatsapp.com/send?phone="+formattedNumber+"&text=Quero%20assinar%20um%20plano,%20meu%20cupom:%20"+paramValue+"";
	        } else {
	            // Adicione aqui o código que será executado se o parâmetro não existir
	            // Adicione aqui o código que será executado se o parâmetro existir
	            var url = "https://api.whatsapp.com/send?phone="+formattedNumber+"&text=Quero%20assinar%20um%20plano 📈📝";
	        }
		    
		    
		    // Redirect to the WhatsApp chat in a new tab
		    window.open(url, '_blank');
	}
    </script>
@endsection