manoel freitas
33788af172
Replace tiny JPEG stubs with per-slot Unsplash editorial placeholders, align public type scale to DESIGN.md display/headline tokens, add final-cta on all subpages, about_image_path on site settings, and harden visual regression with solid-color VisualContentSeeder fixtures.
278 lines
18 KiB
PHP
278 lines
18 KiB
PHP
@extends('layouts.public')
|
|
|
|
@section('content')
|
|
<section class="flex min-h-[calc(100dvh-14rem)] flex-col border-b border-amare-border bg-amare-bg">
|
|
<div class="container-amare grid flex-1 content-start gap-12 py-16 md:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)] md:py-24">
|
|
<div class="space-y-6">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Vamos conversar</p>
|
|
<h1 class="text-headline font-medium tracking-tight text-amare-text">Todo grande encontro começa com uma boa conversa.</h1>
|
|
<p class="max-w-2xl text-lg text-amare-muted">
|
|
Conte sobre o seu evento no briefing abaixo. Retornaremos com uma proposta sob medida e sem compromisso.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-4 border-t border-amare-border pt-6 text-amare-muted md:border-t-0 md:border-l md:pt-0 md:pl-10">
|
|
<p>{{ $siteSettings->city ?: 'São Paulo - SP' }}</p>
|
|
@if ($siteSettings->email)
|
|
<p>
|
|
<a href="mailto:{{ $siteSettings->email }}" class="inline-flex min-h-11 items-center text-amare-accent transition-colors hover:text-amare-accent-deep">{{ $siteSettings->email }}</a>
|
|
</p>
|
|
@endif
|
|
@if ($siteSettings->phone)
|
|
<p>
|
|
<a href="tel:{{ preg_replace('/\D/', '', (string) $siteSettings->phone) }}" class="inline-flex min-h-11 items-center text-amare-accent transition-colors hover:text-amare-accent-deep">{{ $siteSettings->phone }}</a>
|
|
</p>
|
|
@endif
|
|
@foreach ($siteSettings->social_links ?? [] as $network => $url)
|
|
@if (filled($url))
|
|
<p>
|
|
<a href="{{ $url }}" class="inline-flex min-h-11 items-center text-amare-accent transition-colors hover:text-amare-accent-deep" rel="noopener noreferrer" target="_blank">{{ ucfirst((string) $network) }}</a>
|
|
</p>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="border-b border-amare-border bg-amare-bg" aria-labelledby="briefing-heading">
|
|
<div class="container-amare py-16 md:py-24">
|
|
<h2 id="briefing-heading" class="text-2xl font-medium tracking-tight text-amare-text md:text-3xl">Briefing de contato</h2>
|
|
<p class="mt-2 max-w-2xl text-amare-muted">
|
|
Preencha os campos abaixo. As informações obrigatórias estão marcadas com asterisco (*).
|
|
</p>
|
|
|
|
@if (session('status') === 'briefing-sent')
|
|
<div role="status" class="mt-8 border border-amare-border bg-amare-bg-deep px-6 py-5">
|
|
<p class="font-semibold text-amare-text">Mensagem enviada.</p>
|
|
<p class="mt-1 text-amare-muted">Recebemos seu briefing e retornaremos em breve pelo canal informado.</p>
|
|
</div>
|
|
@else
|
|
<form
|
|
method="POST"
|
|
action="{{ route('contact.store') }}"
|
|
class="mt-10 max-w-3xl space-y-10"
|
|
data-contact-form
|
|
>
|
|
@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="border border-amare-error/40 bg-amare-error/5 px-6 py-5">
|
|
<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-8 sm:grid-cols-2">
|
|
<div>
|
|
<label for="nome" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Nome completo *</label>
|
|
<input
|
|
type="text"
|
|
id="nome"
|
|
name="nome"
|
|
value="{{ old('nome') }}"
|
|
required
|
|
autocomplete="name"
|
|
maxlength="120"
|
|
placeholder="Seu nome"
|
|
class="w-full border-0 border-b border-amare-border bg-transparent py-3 text-amare-text transition-colors placeholder:text-amare-muted/60 focus:border-amare-accent focus:outline-none @error('nome') border-amare-error @enderror"
|
|
@error('nome') aria-invalid="true" aria-describedby="nome-error" @enderror
|
|
>
|
|
@error('nome')
|
|
<p id="nome-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">E-mail *</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value="{{ old('email') }}"
|
|
required
|
|
autocomplete="email"
|
|
maxlength="254"
|
|
placeholder="voce@email.com"
|
|
class="w-full border-0 border-b border-amare-border bg-transparent py-3 text-amare-text transition-colors placeholder:text-amare-muted/60 focus:border-amare-accent focus:outline-none @error('email') border-amare-error @enderror"
|
|
@error('email') aria-invalid="true" aria-describedby="email-error" @enderror
|
|
>
|
|
@error('email')
|
|
<p id="email-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="telefone" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Telefone/WhatsApp *</label>
|
|
<input
|
|
type="tel"
|
|
id="telefone"
|
|
name="telefone"
|
|
value="{{ old('telefone') }}"
|
|
required
|
|
autocomplete="tel"
|
|
maxlength="40"
|
|
placeholder="(11) 90000-0000"
|
|
class="w-full border-0 border-b border-amare-border bg-transparent py-3 text-amare-text transition-colors placeholder:text-amare-muted/60 focus:border-amare-accent focus:outline-none @error('telefone') border-amare-error @enderror"
|
|
@error('telefone') aria-invalid="true" aria-describedby="telefone-error" @enderror
|
|
>
|
|
@error('telefone')
|
|
<p id="telefone-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="tipo_evento" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Tipo de evento *</label>
|
|
<select
|
|
id="tipo_evento"
|
|
name="tipo_evento"
|
|
required
|
|
class="w-full border-0 border-b border-amare-border bg-transparent py-3 text-amare-text transition-colors focus:border-amare-accent focus:outline-none @error('tipo_evento') border-amare-error @enderror"
|
|
@error('tipo_evento') aria-invalid="true" aria-describedby="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="tipo_evento-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="data_periodo" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Data ou período desejado</label>
|
|
<input
|
|
type="text"
|
|
id="data_periodo"
|
|
name="data_periodo"
|
|
value="{{ old('data_periodo') }}"
|
|
maxlength="80"
|
|
placeholder="Ex.: novembro de 2027"
|
|
class="w-full border-0 border-b border-amare-border bg-transparent py-3 text-amare-text transition-colors placeholder:text-amare-muted/60 focus:border-amare-accent focus:outline-none @error('data_periodo') border-amare-error @enderror"
|
|
@error('data_periodo') aria-invalid="true" aria-describedby="data_periodo-error" @enderror
|
|
>
|
|
@error('data_periodo')
|
|
<p id="data_periodo-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="cidade" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Cidade do evento *</label>
|
|
<input
|
|
type="text"
|
|
id="cidade"
|
|
name="cidade"
|
|
value="{{ old('cidade') }}"
|
|
required
|
|
maxlength="80"
|
|
placeholder="Ex.: São Paulo"
|
|
class="w-full border-0 border-b border-amare-border bg-transparent py-3 text-amare-text transition-colors placeholder:text-amare-muted/60 focus:border-amare-accent focus:outline-none @error('cidade') border-amare-error @enderror"
|
|
@error('cidade') aria-invalid="true" aria-describedby="cidade-error" @enderror
|
|
>
|
|
@error('cidade')
|
|
<p id="cidade-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="convidados" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Número estimado de convidados</label>
|
|
<input
|
|
type="number"
|
|
id="convidados"
|
|
name="convidados"
|
|
value="{{ old('convidados') }}"
|
|
min="1"
|
|
max="100000"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
placeholder="Ex.: 120"
|
|
class="w-full border-0 border-b border-amare-border bg-transparent py-3 text-amare-text transition-colors placeholder:text-amare-muted/60 focus:border-amare-accent focus:outline-none @error('convidados') border-amare-error @enderror"
|
|
@error('convidados') aria-invalid="true" aria-describedby="convidados-error" @enderror
|
|
>
|
|
@error('convidados')
|
|
<p id="convidados-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="servico_interesse" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Serviço de interesse</label>
|
|
<input
|
|
type="text"
|
|
id="servico_interesse"
|
|
name="servico_interesse"
|
|
value="{{ old('servico_interesse') }}"
|
|
maxlength="120"
|
|
placeholder="Ex.: planejamento completo"
|
|
class="w-full border-0 border-b border-amare-border bg-transparent py-3 text-amare-text transition-colors placeholder:text-amare-muted/60 focus:border-amare-accent focus:outline-none @error('servico_interesse') border-amare-error @enderror"
|
|
@error('servico_interesse') aria-invalid="true" aria-describedby="servico_interesse-error" @enderror
|
|
>
|
|
@error('servico_interesse')
|
|
<p id="servico_interesse-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="mensagem" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Mensagem / principal preocupação *</label>
|
|
<textarea
|
|
id="mensagem"
|
|
name="mensagem"
|
|
required
|
|
rows="6"
|
|
maxlength="3000"
|
|
placeholder="Conte sobre o seu evento, expectativas e principais preocupações."
|
|
class="w-full border-0 border-b border-amare-border bg-transparent py-3 text-amare-text transition-colors placeholder:text-amare-muted/60 focus:border-amare-accent focus:outline-none @error('mensagem') border-amare-error @enderror"
|
|
@error('mensagem') aria-invalid="true" aria-describedby="mensagem-error" @enderror
|
|
>{{ old('mensagem') }}</textarea>
|
|
@error('mensagem')
|
|
<p id="mensagem-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="privacidade" class="flex items-start gap-3 py-2">
|
|
<input
|
|
type="checkbox"
|
|
id="privacidade"
|
|
name="privacidade"
|
|
value="1"
|
|
required
|
|
@checked(old('privacidade'))
|
|
class="mt-1 h-5 w-5 shrink-0 accent-amare-accent"
|
|
@error('privacidade') aria-invalid="true" aria-describedby="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="privacidade-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="flex flex-col items-start gap-4">
|
|
<button
|
|
type="submit"
|
|
data-submit-button
|
|
class="inline-flex min-h-[44px] items-center justify-center bg-amare-accent px-8 py-3 text-sm font-semibold uppercase tracking-[0.12em] text-amare-accent-text transition-colors hover:bg-amare-accent-deep"
|
|
>
|
|
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>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
@endsection
|