manoel freitas
8decba693a
Confirmação de briefing/parceria, micro-feedback de campos e nav, e copy mais humana nos erros — sem quebrar reduced-motion. Co-authored-by: Cursor <cursoragent@cursor.com>
247 lines
13 KiB
PHP
247 lines
13 KiB
PHP
@props([])
|
|
|
|
<section
|
|
aria-labelledby="briefing-heading"
|
|
class="home-chapter border-b border-amare-border bg-amare-bg"
|
|
data-chapter="contato"
|
|
id="contato"
|
|
>
|
|
<div class="container-amare grid gap-12 py-16 md:py-24 lg:grid-cols-[0.8fr_1.2fr] lg:gap-[80px]" data-reveal-group>
|
|
<div class="flex flex-col gap-6" data-reveal data-reveal-from="up">
|
|
<div class="space-y-4">
|
|
<p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">07 — Briefing comercial</p>
|
|
<h2 id="briefing-heading" class="text-[clamp(2.375rem,5vw,4rem)] font-medium leading-[1.05] tracking-[-0.02em] text-amare-text">Conte sobre o evento que você está imaginando.</h2>
|
|
</div>
|
|
<p class="max-w-[760px] text-[clamp(1.1875rem,2vw,1.5rem)] leading-[1.55] text-amare-text-muted">Este formulário é para potenciais clientes. Ele continua existindo mesmo com os CTAs dos pacotes: são portas de entrada complementares.</p>
|
|
<p class="max-w-xl text-sm text-amare-muted">Para quem já sabe a modalidade, WhatsApp contextual. Para quem quer contextualizar o projeto, briefing. Para fornecedores/parcerias, outro fluxo.</p>
|
|
</div>
|
|
|
|
<form
|
|
method="POST"
|
|
action="{{ route('briefing.store') }}"
|
|
class="flex flex-col gap-[18px]"
|
|
data-contact-form
|
|
data-reveal
|
|
data-reveal-from="up"
|
|
>
|
|
@csrf
|
|
|
|
<div class="honeypot" aria-hidden="true">
|
|
<label for="empresa">Não preencha este campo</label>
|
|
<input type="text" id="empresa" name="empresa" tabindex="-1" autocomplete="off">
|
|
</div>
|
|
|
|
@if ($errors->any())
|
|
<div role="alert" class="alert alert-error border border-amare-error/40">
|
|
<p class="font-semibold text-amare-error">Não foi possível enviar.</p>
|
|
<p class="mt-1 text-sm text-amare-muted">Revise os campos destacados abaixo e tente novamente.</p>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid gap-[18px] sm:grid-cols-2">
|
|
<div>
|
|
<label for="briefing-nome" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Nome *</label>
|
|
<input
|
|
type="text"
|
|
id="briefing-nome"
|
|
name="nome"
|
|
value="{{ old('nome') }}"
|
|
required
|
|
autocomplete="name"
|
|
maxlength="120"
|
|
placeholder="Seu nome"
|
|
class="input field-editorial w-full text-amare-text placeholder:text-amare-muted/60 @error('nome') input-error @enderror"
|
|
@error('nome') aria-invalid="true" aria-describedby="briefing-nome-error" @enderror
|
|
>
|
|
@error('nome')
|
|
<p id="briefing-nome-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="briefing-email" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">E-mail *</label>
|
|
<input
|
|
type="email"
|
|
id="briefing-email"
|
|
name="email"
|
|
value="{{ old('email') }}"
|
|
required
|
|
autocomplete="email"
|
|
maxlength="254"
|
|
placeholder="voce@email.com"
|
|
class="input field-editorial w-full text-amare-text placeholder:text-amare-muted/60 @error('email') input-error @enderror"
|
|
@error('email') aria-invalid="true" aria-describedby="briefing-email-error" @enderror
|
|
>
|
|
@error('email')
|
|
<p id="briefing-email-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="briefing-telefone" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Telefone/WhatsApp *</label>
|
|
<input
|
|
type="tel"
|
|
id="briefing-telefone"
|
|
name="telefone"
|
|
value="{{ old('telefone') }}"
|
|
required
|
|
autocomplete="tel"
|
|
maxlength="40"
|
|
placeholder="(11) 90000-0000"
|
|
class="input field-editorial w-full text-amare-text placeholder:text-amare-muted/60 @error('telefone') input-error @enderror"
|
|
@error('telefone') aria-invalid="true" aria-describedby="briefing-telefone-error" @enderror
|
|
>
|
|
@error('telefone')
|
|
<p id="briefing-telefone-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="briefing-tipo_evento" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Tipo de evento *</label>
|
|
<select
|
|
id="briefing-tipo_evento"
|
|
name="tipo_evento"
|
|
required
|
|
class="select field-editorial w-full text-amare-text @error('tipo_evento') select-error @enderror"
|
|
@error('tipo_evento') aria-invalid="true" aria-describedby="briefing-tipo_evento-error" @enderror
|
|
>
|
|
<option value="" selected disabled>Selecione...</option>
|
|
<option value="Casamento" @selected(old('tipo_evento') === 'Casamento')>Casamento</option>
|
|
<option value="Evento corporativo" @selected(old('tipo_evento') === 'Evento corporativo')>Evento corporativo</option>
|
|
<option value="Celebração intimista" @selected(old('tipo_evento') === 'Celebração intimista')>Celebração intimista</option>
|
|
<option value="Outro" @selected(old('tipo_evento') === 'Outro')>Outro tipo de evento</option>
|
|
</select>
|
|
@error('tipo_evento')
|
|
<p id="briefing-tipo_evento-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="briefing-data_periodo" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Data ou período desejado</label>
|
|
<input
|
|
type="text"
|
|
id="briefing-data_periodo"
|
|
name="data_periodo"
|
|
value="{{ old('data_periodo') }}"
|
|
maxlength="80"
|
|
placeholder="Ex.: novembro de 2027"
|
|
class="input field-editorial w-full text-amare-text placeholder:text-amare-muted/60 @error('data_periodo') input-error @enderror"
|
|
@error('data_periodo') aria-invalid="true" aria-describedby="briefing-data_periodo-error" @enderror
|
|
>
|
|
@error('data_periodo')
|
|
<p id="briefing-data_periodo-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="briefing-cidade" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Cidade do evento *</label>
|
|
<input
|
|
type="text"
|
|
id="briefing-cidade"
|
|
name="cidade"
|
|
value="{{ old('cidade') }}"
|
|
required
|
|
maxlength="80"
|
|
placeholder="Ex.: São Paulo"
|
|
class="input field-editorial w-full text-amare-text placeholder:text-amare-muted/60 @error('cidade') input-error @enderror"
|
|
@error('cidade') aria-invalid="true" aria-describedby="briefing-cidade-error" @enderror
|
|
>
|
|
@error('cidade')
|
|
<p id="briefing-cidade-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="briefing-convidados" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Número estimado de convidados</label>
|
|
<input
|
|
type="number"
|
|
id="briefing-convidados"
|
|
name="convidados"
|
|
value="{{ old('convidados') }}"
|
|
min="1"
|
|
max="100000"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
placeholder="Ex.: 120"
|
|
class="input field-editorial w-full text-amare-text placeholder:text-amare-muted/60 @error('convidados') input-error @enderror"
|
|
@error('convidados') aria-invalid="true" aria-describedby="briefing-convidados-error" @enderror
|
|
>
|
|
@error('convidados')
|
|
<p id="briefing-convidados-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="briefing-servico_interesse" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Serviço de interesse</label>
|
|
<input
|
|
type="text"
|
|
id="briefing-servico_interesse"
|
|
name="servico_interesse"
|
|
value="{{ old('servico_interesse') }}"
|
|
maxlength="120"
|
|
placeholder="Ex.: planejamento completo"
|
|
class="input field-editorial w-full text-amare-text placeholder:text-amare-muted/60 @error('servico_interesse') input-error @enderror"
|
|
@error('servico_interesse') aria-invalid="true" aria-describedby="briefing-servico_interesse-error" @enderror
|
|
>
|
|
@error('servico_interesse')
|
|
<p id="briefing-servico_interesse-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="briefing-mensagem" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Mensagem / principal preocupação *</label>
|
|
<textarea
|
|
id="briefing-mensagem"
|
|
name="mensagem"
|
|
required
|
|
rows="5"
|
|
maxlength="3000"
|
|
placeholder="O que já está definido? Em que ponto você precisa de ajuda?"
|
|
class="textarea field-editorial w-full min-h-[110px] text-amare-text placeholder:text-amare-muted/60 @error('mensagem') textarea-error @enderror"
|
|
@error('mensagem') aria-invalid="true" aria-describedby="briefing-mensagem-error" @enderror
|
|
>{{ old('mensagem') }}</textarea>
|
|
@error('mensagem')
|
|
<p id="briefing-mensagem-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="briefing-privacidade" class="flex items-start gap-3 py-2">
|
|
<input
|
|
type="checkbox"
|
|
id="briefing-privacidade"
|
|
name="privacidade"
|
|
value="1"
|
|
required
|
|
@checked(old('privacidade'))
|
|
class="checkbox checkbox-primary mt-1 shrink-0"
|
|
@error('privacidade') aria-invalid="true" aria-describedby="briefing-privacidade-error" @enderror
|
|
>
|
|
<span class="text-sm text-amare-muted">
|
|
Li e aceito a
|
|
<a href="{{ route('privacy') }}" class="text-amare-accent underline underline-offset-2 transition-colors hover:text-amare-accent-deep">política de privacidade</a>
|
|
e autorizo o tratamento dos meus dados para fins de atendimento.*
|
|
</span>
|
|
</label>
|
|
@error('privacidade')
|
|
<p id="briefing-privacidade-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="flex flex-col items-start gap-4 pt-2">
|
|
<button
|
|
type="submit"
|
|
data-submit-button
|
|
class="btn btn-primary text-xs font-bold uppercase tracking-[0.09em]"
|
|
>
|
|
Enviar briefing
|
|
</button>
|
|
<p class="text-sm text-amare-muted">
|
|
* Campos obrigatórios. Seus dados são usados apenas para responder à sua solicitação.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|