@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

			<style>
				@media (max-width: 600px) {
				  .logo-public {
				    width: 5em;
				  }

				  body > div.flex.flex-wrap.items-center.justify-between.max-w-screen-xl.mx-auto.p-4 > div > section.py-0.md\:px-0.bg-black.text-gray-400 > div > div > div.w-full.md\:w-1\/2.md\:px-3 > div > h1 > span:nth-child(3) {
				  	margin-top: -1.5em;
				  }

				  body > div.flex.flex-wrap.items-center.justify-between.max-w-screen-xl.mx-auto.p-4 > div > section.py-0.md\:px-0.bg-black.text-gray-400 > div > div > div.w-full.md\:w-1\/2.md\:px-3 > div > h1 {
				  	font-size: 1.7em;
				  }

				  .liner-flop-imgs {
				  	font-size: 0.9em;
				  }
				}

				#accordion-collapse .text-gray-300 { background-color: #1f2937!important; }
			</style>

			<!-- Section 1 Adaptada -->
			<section class="py-0 md:px-0 bg-black text-gray-400">
			  <div class="container px-5 py-0 mx-auto 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-white sm:text-5xl md:text-4xl lg:text-5xl xl:text-5xl">
			          	<span class="block text-indigo-500 xl:inline">NexWeb</span>
			            <span class="block xl:inline">Transformamos Ideias</span>
			            <span class="block text-indigo-500 xl:inline"><br>em Soluções Digitais.</span>
			          </h1>
			          <p class="mx-auto text-base text-gray-400 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 target="_blank" href="https://wa.me/{{ env('WHATSAPP_NUMBER') }}?text=Olá,%20gostaria%20de%20solicitar%20um%20orçamento!" class="flex items-center w-full px-6 py-3 mb-3 text-lg text-white bg-blue-700 rounded-md sm:mb-0 hover:bg-indigo-700 sm:w-auto">
			              Solicite seu orçamento
			              <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 style="transition: 1s;" href="{{env('APP_URL')}}#portfolio" class="flex items-center px-6 py-3 text-gray-400 bg-gray-800 rounded-md hover:bg-gray-700 hover:text-gray-200">
			              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 style="" src="https://www.qservicesit.com/wp-content/uploads/2022/04/User-flow-pana-1980x1980-1.webp" class="object-cover">
			        </div>
			      </div>
			    </div>
			  </div>
			</section>

			<!-- Section 2 -->
			<section id="vantagens" class="text-gray-400 body-font border-gray-700 bg-black" style="margin-top: 0em; margin-bottom: 0em;">
			  <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">Nex Web - Sua Agência Digital</h2>
			      <h1 class="sm:text-3xl text-2xl font-medium title-font text-white">Descubra as vantagens de trabalhar conosco</h1>
			    </div>
			    <div class="flex flex-wrap -m-4" style="margin-top: -3em!important;">
			      <!-- Bloco 1 -->
			      <div class="p-4 md:w-1/3">
			        <div class="flex rounded-lg h-full bg-gray-800 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="trending-up" style="width: 1em"></i>
			            </div>
			            <h2 class="text-white text-lg title-font font-medium">Estratégias de Crescimento</h2>
			          </div>
			          <div class="flex-grow">
			            <p class="leading-relaxed text-gray-300">Criamos estratégias personalizadas para impulsionar o crescimento digital do seu negócio, focando em resultados reais e mensuráveis.</p>
			          </div>
			        </div>
			      </div>
			      <!-- Bloco 2 -->
			      <div class="p-4 md:w-1/3">
			        <div class="flex rounded-lg h-full bg-gray-800 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="clock" style="width: 1em"></i>
			            </div>
			            <h2 class="text-white text-lg title-font font-medium">Agilidade no Atendimento</h2>
			          </div>
			          <div class="flex-grow">
			            <p class="leading-relaxed text-gray-300">Priorizamos agilidade e eficiência em todos os projetos, garantindo entregas rápidas sem comprometer a qualidade.</p>
			          </div>
			        </div>
			      </div>
			      <!-- Bloco 3 -->
			      <div class="p-4 md:w-1/3">
			        <div class="flex rounded-lg h-full bg-gray-800 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="zap" style="width: 1em"></i>
			            </div>
			            <h2 class="text-white text-lg title-font font-medium">Inovação Constante</h2>
			          </div>
			          <div class="flex-grow">
			            <p class="leading-relaxed text-gray-300">Estamos sempre à frente, utilizando as mais novas tecnologias e tendências para oferecer soluções inovadoras e criativas.</p>
			          </div>
			        </div>
			      </div>
			      <!-- Bloco 4 -->
			      <div class="p-4 md:w-1/3">
			        <div class="flex rounded-lg h-full bg-gray-800 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="users" style="width: 1em"></i>
			            </div>
			            <h2 class="text-white text-lg title-font font-medium">Atendimento Personalizado</h2>
			          </div>
			          <div class="flex-grow">
			            <p class="leading-relaxed text-gray-300">Nosso time se dedica a entender suas necessidades e criar soluções que realmente fazem a diferença para o seu negócio.</p>
			          </div>
			        </div>
			      </div>
			      <!-- Bloco 5 -->
			      <div class="p-4 md:w-1/3">
			        <div class="flex rounded-lg h-full bg-gray-800 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="award" style="width: 1em"></i>
			            </div>
			            <h2 class="text-white text-lg title-font font-medium">Qualidade Garantida</h2>
			          </div>
			          <div class="flex-grow">
			            <p class="leading-relaxed text-gray-300">Garantimos um alto padrão de qualidade em todos os projetos que desenvolvemos, entregando resultados que superam expectativas.</p>
			          </div>
			        </div>
			      </div>
			      <!-- Bloco 6 -->
			      <div class="p-4 md:w-1/3">
			        <div class="flex rounded-lg h-full bg-gray-800 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="heart" style="width: 1em"></i>
			            </div>
			            <h2 class="text-white text-lg title-font font-medium">Satisfação do Cliente</h2>
			          </div>
			          <div class="flex-grow">
			            <p class="leading-relaxed text-gray-300">Nosso maior objetivo é ver nossos clientes satisfeitos e alcançar resultados extraordinários juntos.</p>
			          </div>
			        </div>
			      </div>
			    </div>
			  </div>
			</section>

			<!-- Cards de Tecnologias com Feather Icons -->
			<section id="tecnologias" class="text-gray-400 body-font bg-black" style="margin-top: -2em;">
			  <div class="container px-5 py-14 mx-auto">
			    <div class="flex flex-col text-center w-full mb-10" style="margin-bottom: 2.5em;">
			      <h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1">Tecnologias e Ferramentas</h2>
			      <h1 class="sm:text-3xl text-2xl font-medium title-font text-white">Aqui estão algumas das linguagens e<br> tecnologias que utilizamos para criar soluções digitais inovadoras</h1>
			    </div>
			    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
			      <!-- Card 1 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="code" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">HTML5</h2>
			      </div>
			      <!-- Card 2 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="layout" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">CSS3</h2>
			      </div>
			      <!-- Card 3 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="terminal" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">JavaScript</h2>
			      </div>
			      <!-- Card 4 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="package" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">Node.js</h2>
			      </div>
			      <!-- Card 5 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="refresh-cw" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">React</h2>
			      </div>
			      <!-- Card 6 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="layers" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">Laravel</h2>
			      </div>
			      <!-- Card 7 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="database" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">MySQL</h2>
			      </div>
			      <!-- Card 8 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="server" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">PHP</h2>
			      </div>
			      <!-- Card 9 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="cloud" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">AWS</h2>
			      </div>
			      <!-- Card 10 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="git-branch" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">Git</h2>
			      </div>
			      <!-- Card 11 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="cpu" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">Python</h2>
			      </div>
			      <!-- Card 12 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="grid" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">Tailwind CSS</h2>
			      </div>
			      <!-- Card 13 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="coffee" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">Java</h2>
			      </div>
			      <!-- Card 14 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="zap" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">Vue.js</h2>
			      </div>
			      <!-- Card 15 -->
			      <div class="flex items-center p-4 bg-gray-800 rounded-lg">
			        <i data-feather="shield" class="w-8 h-8 text-indigo-400"></i>
			        <h2 class="ml-4 text-lg font-medium text-white">Docker</h2>
			      </div>
			    </div>
			  </div>
			</section>

			<div class="container px-5 py-0 mx-auto">
				<section class="bg-center bg-no-repeat bg-[url('https://preview.redd.it/bnaepmt9nen31.png?auto=webp&s=f300d64b72c9058e925bc9ca6f18c95110d0c218')] bg-gray-700 bg-blend-multiply" style="border: solid 1px #ffffff2b; border-radius: 25px; margin-bottom: 2.5em; margin-top: 0.5em; background-attachment: fixed!important;">
				    <div class="px-4 mx-auto max-w-screen-xl text-center py-20 lg:py-30">
				        <h1 style="font-size: 2em;" class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-white md:text-5xl lg:text-6xl">Entre em contato para um orçamento rápido</h1>
				        <p class="mb-8 text-lg font-normal text-gray-300 lg:text-xl sm:px-16 lg:px-48">Precisa de um orçamento rápido para o seu projeto? Fale conosco agora e vamos ajudar a encontrar a melhor solução para suas necessidades.</p>
				        <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
				            <a href="https://wa.me/{{ env('WHATSAPP_NUMBER') }}?text=Olá,%20gostaria%20de%20solicitar%20um%20orçamento!" target="_blank" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
				                Solicite seu orçamento
				                <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
				                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
				                </svg>
				            </a>
				            <div class="flex -space-x-4 rtl:space-x-reverse class-flex-img">
							    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="">
							    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://flowbite.com/docs/images/people/profile-picture-2.jpg" alt="">
							    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="">
							    <a class="flex items-center whiters-liners-bg justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800">+60</a>
							    <a class="liner-flop-imgs">Clientes satisfeitos</a>
							</div>
				          <!--   <a href="#" class="inline-flex justify-center hover:text-gray-900 items-center py-3 px-5 sm:ms-4 text-base font-medium text-center text-white rounded-lg border border-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-400">
				                Saiba mais sobre nossos serviços
				            </a>   -->
				        </div>
				    </div>
				</section>
			</div>

			<!-- Grid de Portfólio -->
			<section id="portfolio" class="py-8 bg-black text-gray-400 body-font">
			  <div class="container px-5 py-0 mx-auto">
			  	<div class="flex flex-col text-center w-full mb-10" style="margin-bottom: 2.5em;">
			      <h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1">Nosso Portfólio</h2>
			      <h1 class="sm:text-3xl text-2xl font-medium title-font text-white">Confira alguns dos nossos projetos mais recentes</h1>
			    </div>

				<div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="item-mall">
				    <div class="grid gap-4">
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image.png') }}" alt="">
				        </div>
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-1.png') }}" alt="">
				        </div>
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-2.png') }}" alt="">
				        </div>
				    </div>
				    <div class="grid gap-4">
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-3.png') }}" alt="">
				        </div>
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-4.png') }}" alt="">
				        </div>
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-5.png') }}" alt="">
				        </div>
				    </div>
				    <div class="grid gap-4">
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-6.png') }}" alt="">
				        </div>
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-7.png') }}" alt="">
				        </div>
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-8.png') }}" alt="">
				        </div>
				    </div>
				    <div class="grid gap-4">
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-9.png') }}" alt="">
				        </div>
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-10.png') }}" alt="">
				        </div>
				        <div>
				            <img class="h-auto max-w-full rounded-lg" src="{{ asset('images/themes/image-11.png') }}" alt="">
				        </div>
				    </div>
				</div>

			  </div>
			</section>

			<div id="faq" class="container px-5 py-0 mx-auto" style="margin-top: 3.6em; margin-bottom: 2em;">
			  	<div class="flex flex-col text-center w-full mb-10" style="margin-bottom: 2.5em;">
			      <h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1">Perguntas Frequentes</h2>
			      <h1 class="sm:text-3xl text-2xl font-medium title-font text-white">Uma área dedicada a esclarecer as dúvidas mais <br>comuns de nossos clientes e visitantes</h1>
			    </div>
				<div id="accordion-collapse" data-accordion="collapse" class="bg-black text-white">
				  <h2 id="accordion-collapse-heading-1">
				    <button type="button" 
				            class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-300 border border-b-0 border-gray-700 rounded-t-xl focus:ring-0 focus:outline-none hover:bg-gray-800" 
				            data-accordion-target="#accordion-collapse-body-1" 
				            aria-expanded="false" 
				            aria-controls="accordion-collapse-body-1">
				      <span>Que segurança eu tenho ao contratar um site?</span>
				      <svg data-accordion-icon class="w-3 h-3 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
				        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
				      </svg>
				    </button>
				  </h2>
				  <div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
				    <div class="p-5 border border-b-0 border-gray-700 bg-gray-800">
				      <p class="mb-2 text-gray-300">Antes de iniciar o trabalho de desenvolvimento web você receberá um contrato para assinatura digital (com validade jurídica) onde você terá prazos, valores, direitos e obrigações referentes ao serviço de criação de websites.</p>
				    </div>
				  </div>
				  <h2 id="accordion-collapse-heading-2">
				    <button type="button" 
				            class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-300 border border-gray-700 focus:ring-0 focus:outline-none hover:bg-gray-800" 
				            data-accordion-target="#accordion-collapse-body-2" 
				            aria-expanded="false" 
				            aria-controls="accordion-collapse-body-2">
				      <span>Qual a forma de pagamento?</span>
				      <svg data-accordion-icon class="w-3 h-3 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
				        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
				      </svg>
				    </button>
				  </h2>
				  <div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
				    <div class="p-5 border border-b-0 border-gray-700 bg-gray-800">
				      <p class="mb-2 text-gray-300">Nós praticamente financiamos o site para você. Aceitamos pagamentos parcelados via boleto bancário sem juros ou pix, para te dar maior segurança e condição para desenvolver o site.</p>
				    </div>
				  </div>
				  <h2 id="accordion-collapse-heading-3">
				    <button type="button" 
				            class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-300 border border-gray-700 focus:ring-0 focus:outline-none hover:bg-gray-800" 
				            data-accordion-target="#accordion-collapse-body-3" 
				            aria-expanded="false" 
				            aria-controls="accordion-collapse-body-3">
				      <span>Vou conseguir fazer alterações no meu próprio site?</span>
				      <svg data-accordion-icon class="w-3 h-3 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
				        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
				      </svg>
				    </button>
				  </h2>
				  <div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-2">
				    <div class="p-5 border border-b-0 border-gray-700 bg-gray-800">
				      <p class="mb-2 text-gray-300">Após desenvolver o site, deixamos preparado para você uma interface amigável e um editor em tempo real de arrasta e solta. Você terá muita facilidade para editar seu site e expandi-lo e além disso, nós vamos te orientar e prestar um suporte grátis nos 15 primeiros dias após a entrega do website.</p>
				    </div>
				  </div>

				  <div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
				    <div class="p-5 border border-b-0 border-gray-700 bg-gray-800">
				      <p class="mb-2 text-gray-300">Nós praticamente financiamos o site para você. Aceitamos pagamentos parcelados via boleto bancário sem juros, para te dar maior segurança e condição para desenvolver o site.</p>
				    </div>
				  </div>

				  <h2 id="accordion-collapse-heading-5">
				    <button type="button" 
				            class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-300 border border-gray-700 focus:ring-0 focus:outline-none hover:bg-gray-800" 
				            data-accordion-target="#accordion-collapse-body-5" 
				            aria-expanded="false" 
				            aria-controls="accordion-collapse-body-5">
				      <span>Qual prazo de entrega para um projeto?</span>
				      <svg data-accordion-icon class="w-3 h-3 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
				        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
				      </svg>
				    </button>
				  </h2>
				  <div id="accordion-collapse-body-5" class="hidden" aria-labelledby="accordion-collapse-heading-2">
				    <div class="p-5 border border-b-0 border-gray-700 bg-gray-800">
				      <p class="mb-2 text-gray-300">O prazo de entrega do seu projeto pode variar dependendo da complexidade e das funcionalidades necessárias. Para fornecer uma estimativa precisa, é essencial realizarmos uma análise detalhada do seu projeto. Após o orçamento, poderemos definir um cronograma de entrega realista, garantindo que cada etapa seja executada com qualidade e dentro do prazo acordado.</p>
				    </div>
				  </div>


				  <h2 id="accordion-collapse-heading-4">
				    <button type="button" 
				            class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-300 border border-gray-700 focus:ring-0 focus:outline-none hover:bg-gray-800" 
				            data-accordion-target="#accordion-collapse-body-4" 
				            aria-expanded="false" 
				            aria-controls="accordion-collapse-body-4">
				      <span>Quais tipos de sites vocês desenvolvem?​</span>
				      <svg data-accordion-icon class="w-3 h-3 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
				        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
				      </svg>
				    </button>
				  </h2>
				  <div id="accordion-collapse-body-4" class="hidden" aria-labelledby="accordion-collapse-heading-2">
				    <div class="p-5 border border-b-0 border-gray-700 bg-gray-800">
				      <p class="mb-2 text-gray-300">Nós desenvolvemos todos os tipos de sites, desde páginas institucionais e e-commerces até sistemas personalizados e plataformas robustas. Nossa especialidade é criar soluções sob medida para atender às necessidades específicas de cada cliente, com foco em design moderno, performance e funcionalidade.</p>
				    </div>
				  </div>
				</div>
			</div>

		@endif
    </div>
@endsection