@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 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">
			  <div class="container px-5 py-24 mx-auto flex flex-wrap">
			    <div class="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
			      <img alt="feature" class="object-cover object-center h-full w-full" src="https://dummyimage.com/600x600/edf2f7/a5afbd">
			    </div>
			    <div class="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center">
			      <div class="flex flex-col mb-10 lg:items-start items-center">
			        <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5">
			          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
			            <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
			          </svg>
			        </div>
			        <div class="flex-grow">
			          <h2 class="text-gray-900 text-lg title-font font-medium mb-3">Shooting Stars</h2>
			          <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</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 class="flex flex-col mb-10 lg:items-start items-center">
			        <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5">
			          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
			            <circle cx="6" cy="6" r="3"></circle>
			            <circle cx="6" cy="18" r="3"></circle>
			            <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
			          </svg>
			        </div>
			        <div class="flex-grow">
			          <h2 class="text-gray-900 text-lg title-font font-medium mb-3">The Catalyzer</h2>
			          <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</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 class="flex flex-col mb-10 lg:items-start items-center">
			        <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5">
			          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
			            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
			            <circle cx="12" cy="7" r="4"></circle>
			          </svg>
			        </div>
			        <div class="flex-grow">
			          <h2 class="text-gray-900 text-lg title-font font-medium mb-3">Neptune</h2>
			          <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</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>
			</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 border-t border-gray-200">
			  <div class="container px-5 py-24 mx-auto">
			    <div class="flex flex-col text-center w-full mb-20">
			      <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Our Team</h1>
			      <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them.</p>
			    </div>
			    <div class="flex flex-wrap -m-2">
			      <div class="p-2 lg:w-1/3 md:w-1/2 w-full">
			        <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
			          <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/80x80/edf2f7/a5afbd">
			          <div class="flex-grow">
			            <h2 class="text-gray-900 title-font font-medium">Holden Caulfield</h2>
			            <p class="text-gray-500">UI Designer</p>
			          </div>
			        </div>
			      </div>
			      <div class="p-2 lg:w-1/3 md:w-1/2 w-full">
			        <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
			          <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/84x84/edf2f7/a5afbd">
			          <div class="flex-grow">
			            <h2 class="text-gray-900 title-font font-medium">Henry Letham</h2>
			            <p class="text-gray-500">CTO</p>
			          </div>
			        </div>
			      </div>
			      <div class="p-2 lg:w-1/3 md:w-1/2 w-full">
			        <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
			          <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/88x88/edf2f7/a5afbd">
			          <div class="flex-grow">
			            <h2 class="text-gray-900 title-font font-medium">Oskar Blinde</h2>
			            <p class="text-gray-500">Founder</p>
			          </div>
			        </div>
			      </div>
			      <div class="p-2 lg:w-1/3 md:w-1/2 w-full">
			        <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
			          <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/90x90/edf2f7/a5afbd">
			          <div class="flex-grow">
			            <h2 class="text-gray-900 title-font font-medium">John Doe</h2>
			            <p class="text-gray-500">DevOps</p>
			          </div>
			        </div>
			      </div>
			      <div class="p-2 lg:w-1/3 md:w-1/2 w-full">
			        <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
			          <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/94x94/edf2f7/a5afbd">
			          <div class="flex-grow">
			            <h2 class="text-gray-900 title-font font-medium">Martin Eden</h2>
			            <p class="text-gray-500">Software Engineer</p>
			          </div>
			        </div>
			      </div>
			      <div class="p-2 lg:w-1/3 md:w-1/2 w-full">
			        <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
			          <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/98x98/edf2f7/a5afbd">
			          <div class="flex-grow">
			            <h2 class="text-gray-900 title-font font-medium">Boris Kitua</h2>
			            <p class="text-gray-500">UX Researcher</p>
			          </div>
			        </div>
			      </div>
			      <div class="p-2 lg:w-1/3 md:w-1/2 w-full">
			        <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
			          <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/100x90/edf2f7/a5afbd">
			          <div class="flex-grow">
			            <h2 class="text-gray-900 title-font font-medium">Atticus Finch</h2>
			            <p class="text-gray-500">QA Engineer</p>
			          </div>
			        </div>
			      </div>
			      <div class="p-2 lg:w-1/3 md:w-1/2 w-full">
			        <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
			          <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/104x94/edf2f7/a5afbd">
			          <div class="flex-grow">
			            <h2 class="text-gray-900 title-font font-medium">Alper Kamu</h2>
			            <p class="text-gray-500">System</p>
			          </div>
			        </div>
			      </div>
			      <div class="p-2 lg:w-1/3 md:w-1/2 w-full">
			        <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
			          <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/108x98/edf2f7/a5afbd">
			          <div class="flex-grow">
			            <h2 class="text-gray-900 title-font font-medium">Rodrigo Monchi</h2>
			            <p class="text-gray-500">Product Manager</p>
			          </div>
			        </div>
			      </div>
			    </div>
			  </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>
			<!-- <section class="text-gray-700 body-font border-t border-gray-200">
			  <div class="container px-5 py-24 mx-auto">
			    <div class="xl:w-1/2 lg:w-3/4 w-full mx-auto text-center">
			      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="inline-block w-8 h-8 text-gray-400 mb-8" viewBox="0 0 975.036 975.036">
			        <path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
			      </svg>
			      <p class="leading-relaxed text-lg">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware. Man bun next level coloring book skateboard four loko knausgaard. Kitsch keffiyeh master cleanse direct trade indigo juice before they sold out gentrify plaid gastropub normcore XOXO 90's pickled cindigo jean shorts. Slow-carb next level shoindigoitch ethical authentic, yr scenester sriracha forage franzen organic drinking vinegar.</p>
			      <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-8 mb-6"></span>
			      <h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
			      <p class="text-gray-500">Senior Product Designer</p>
			    </div>
			  </div>
			</section>
			<section class="text-gray-700 body-font relative">
			  <div class="absolute inset-0 bg-gray-300">
			    <iframe width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="map" scrolling="no" src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" style="filter: grayscale(1) contrast(1.2) opacity(0.4);"></iframe>
			  </div>
			  <div class="container px-5 py-24 mx-auto flex">
			    <div class="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
			      <h2 class="text-gray-900 text-lg mb-1 font-medium title-font">Feedback</h2>
			      <p class="leading-relaxed mb-5 text-gray-600">Post-ironic portland shabby chic echo park, banjo fashion axe</p>
			      <input class="bg-white rounded border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 py-2 mb-4" placeholder="Email" type="email">
			      <textarea class="bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-indigo-500 text-base px-4 py-2 mb-4 resize-none" placeholder="Message"></textarea>
			      <button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
			      <p class="text-xs text-gray-500 mt-3">Chicharrones blog helvetica normcore iceland tousled brook viral artisan.</p>
			    </div>
			  </div>
			</section> -->
			<!-- <footer class="text-gray-700 body-font">
			  <div class="container px-5 py-24 mx-auto">
			    <div class="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
			      <div class="lg:w-1/6 md:w-1/2 w-full px-4">
			        <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
			        <nav class="list-none mb-10">
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">First Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Second Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Third Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
			          </li>
			        </nav>
			      </div>
			      <div class="lg:w-1/6 md:w-1/2 w-full px-4">
			        <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
			        <nav class="list-none mb-10">
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">First Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Second Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Third Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
			          </li>
			        </nav>
			      </div>
			      <div class="lg:w-1/6 md:w-1/2 w-full px-4">
			        <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
			        <nav class="list-none mb-10">
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">First Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Second Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Third Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
			          </li>
			        </nav>
			      </div>
			      <div class="lg:w-1/6 md:w-1/2 w-full px-4">
			        <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
			        <nav class="list-none mb-10">
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">First Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Second Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Third Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
			          </li>
			        </nav>
			      </div>
			      <div class="lg:w-1/6 md:w-1/2 w-full px-4">
			        <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
			        <nav class="list-none mb-10">
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">First Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Second Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Third Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
			          </li>
			        </nav>
			      </div>
			      <div class="lg:w-1/6 md:w-1/2 w-full px-4">
			        <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
			        <nav class="list-none mb-10">
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">First Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Second Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Third Link</a>
			          </li>
			          <li>
			            <a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
			          </li>
			        </nav>
			      </div>
			    </div>
			  </div>
			  <div class="border-t border-gray-200">
			    <div class="container px-5 py-8 flex flex-wrap mx-auto items-center">
			      <div class="flex md:flex-no-wrap flex-wrap justify-center md:justify-start">
			        <input class="sm:w-64 w-40 bg-gray-100 rounded sm:mr-4 mr-2 border border-gray-400 focus:outline-none focus:border-indigo-500 text-base py-2 px-4" placeholder="Placeholder" type="text">
			        <button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
			        <p class="text-gray-500 text-sm md:ml-6 md:mt-0 mt-2 sm:text-left text-center">Bitters chicharrones fanny pack
			          <br class="lg:block hidden">waistcoat green juice
			        </p>
			      </div>
			      <span class="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
			        <a class="text-gray-500">
			          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
			            <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
			          </svg>
			        </a>
			        <a class="ml-3 text-gray-500">
			          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
			            <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
			          </svg>
			        </a>
			        <a class="ml-3 text-gray-500">
			          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
			            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
			            <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
			          </svg>
			        </a>
			        <a class="ml-3 text-gray-500">
			          <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
			            <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
			            <circle cx="4" cy="4" r="2" stroke="none"></circle>
			          </svg>
			        </a>
			      </span>
			    </div>
			  </div>
			  <div class="bg-gray-200">
			    <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
			      <p class="text-gray-500 text-sm text-center sm:text-left">© 2020 Tailwind Blocks —
			        <a href="https://twitter.com/knyttneve" class="text-gray-600 ml-1" target="_blank" rel="noopener noreferrer">@knyttneve</a>
			      </p>
			      <span class="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-500 text-sm">Enamel pin tousled raclette tacos irony</span>
			    </div>
			  </div>
			</footer>
			<a href="https://github.com/mertJF/tailblocks" class="rounded-full w-12 h-12 bg-gray-100 fixed bottom-0 right-0 flex items-center justify-center text-gray-800 mr-8 mb-8 shadow-sm border-gray-300 border" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
			    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
			  </svg></a> -->
		@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