Manoel Freitas
484ac77ce7
* feat: modalidades de casamento e etapas corporativas * feat: home editorial e header/footer conforme preview * docs: proposta openspec home editorial * test: CTA hero agora ancora #sobre conforme preview * test: speed browser suite via visit reuse Collapse route×viewport cartesian products, merge home motion asserts, skip existing VisualContentSeeder JPEGs, ignore Screenshots.
70 lines
4.4 KiB
PHP
70 lines
4.4 KiB
PHP
@props([
|
|
'packages',
|
|
'settings',
|
|
])
|
|
|
|
@php
|
|
$whatsappDigits = preg_replace('/\D/', '', (string) $settings->whatsapp_number);
|
|
$hasWhatsapp = strlen($whatsappDigits) >= 10;
|
|
@endphp
|
|
|
|
<section
|
|
aria-labelledby="packages-heading"
|
|
class="home-chapter border-b border-amare-border bg-amare-bg"
|
|
data-chapter="casamentos"
|
|
id="casamentos"
|
|
>
|
|
<div class="container-amare py-16 md:py-24" data-reveal-group>
|
|
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between" data-reveal data-reveal-from="up">
|
|
<div class="max-w-2xl space-y-4">
|
|
<p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">03 — Amare Casamentos</p>
|
|
<h2 id="packages-heading" class="text-[clamp(2.375rem,5vw,4rem)] font-medium leading-[1.05] tracking-[-0.02em] text-amare-text">Um acompanhamento para cada momento.</h2>
|
|
</div>
|
|
<p class="max-w-[600px] text-amare-text-muted">As modalidades são pontos de partida. O site apresenta o conceito e ajuda o casal a reconhecer seu momento; detalhes operacionais e comerciais ficam para a conversa e proposta.</p>
|
|
</div>
|
|
|
|
@if ($packages->isNotEmpty())
|
|
<div class="mt-12 grid border-l border-t border-amare-border md:mt-16 md:grid-cols-3">
|
|
@foreach ($packages as $package)
|
|
<article class="flex min-h-[480px] flex-col justify-between gap-8 border-b border-r border-amare-border p-8 md:p-10" data-reveal data-reveal-from="up">
|
|
<div class="space-y-5">
|
|
<p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent">{{ $package->level }}</p>
|
|
<h3 class="text-[clamp(1.5625rem,2.7vw,2.125rem)] font-medium leading-tight text-amare-text">{{ $package->name }}</h3>
|
|
<p class="text-amare-text-muted">{{ $package->summary }}</p>
|
|
<ul class="space-y-3 text-amare-text-muted">
|
|
@foreach ($package->scope_items as $item)
|
|
<li class="flex gap-3"><span aria-hidden="true" class="text-amare-accent">•</span><span>{{ $item }}</span></li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@php
|
|
$waLink = $hasWhatsapp
|
|
? 'https://wa.me/'.$whatsappDigits.'?text='.rawurlencode('Olá, gostaria de conversar sobre a modalidade '.$package->name.' para meu casamento.')
|
|
: route('briefing', ['servico_interesse' => $package->name]);
|
|
@endphp
|
|
<a
|
|
href="{{ $waLink }}"
|
|
@if ($hasWhatsapp) target="_blank" rel="noopener noreferrer" @endif
|
|
class="inline-flex min-h-[48px] items-center justify-center border border-transparent bg-amare-accent px-6 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent-text transition-colors hover:bg-amare-accent-deep"
|
|
>
|
|
{{ $package->cta_label }}
|
|
</a>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<div class="mt-6 flex flex-col justify-between gap-8 bg-amare-accent-deep p-8 text-amare-accent-text md:flex-row md:items-center md:p-12" data-reveal data-reveal-from="up">
|
|
<div class="max-w-xl space-y-3">
|
|
<h3 class="text-[clamp(1.5625rem,2.7vw,2.125rem)] font-medium leading-tight">Ainda não sabe qual modalidade é ideal?</h3>
|
|
<p class="text-amare-accent-text/80">Conte um pouco sobre o seu casamento. A Amare entende o momento de vocês e orienta o melhor formato de acompanhamento sem depender de um quiz automático.</p>
|
|
</div>
|
|
<a href="{{ route('briefing') }}" class="inline-flex min-h-[48px] items-center justify-center self-start border border-amare-accent-text px-6 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent-text transition-colors hover:bg-amare-accent-text hover:text-amare-accent-deep md:self-auto">
|
|
Conversar com a Amare
|
|
</a>
|
|
</div>
|
|
|
|
<p class="mt-6 text-sm text-amare-muted">Nomenclaturas exibidas conforme materiais/reunião; confirmar versão final antes da publicação.</p>
|
|
</div>
|
|
</section>
|