Compare commits
2 Commits
feat/remod
...
feat/home-
| Author | SHA1 | Date | |
|---|---|---|---|
| ed013bf000 | |||
| 3bdcad17ef |
@@ -57,6 +57,9 @@ final class MediaGenerateVariantsCommand extends Command
|
||||
if ($settings && filled($settings->default_og_image_path)) {
|
||||
$paths[] = (string) $settings->default_og_image_path;
|
||||
}
|
||||
if ($settings && filled($settings->hero_image_path)) {
|
||||
$paths[] = (string) $settings->hero_image_path;
|
||||
}
|
||||
if ($settings && filled($settings->about_image_path)) {
|
||||
$paths[] = (string) $settings->about_image_path;
|
||||
}
|
||||
|
||||
@@ -160,6 +160,8 @@ class ManageSiteSettings extends Page
|
||||
Textarea::make('hero_note')
|
||||
->label('Nota do hero')
|
||||
->rows(2),
|
||||
PublicImageUploadRules::fileUpload('hero_image_path', 'Imagem do hero', 'content/home'),
|
||||
PublicImageUploadRules::altTextField('hero_image_alt', 'hero_image_path'),
|
||||
Textarea::make('about_summary')
|
||||
->label('Resumo institucional')
|
||||
->rows(3),
|
||||
|
||||
@@ -130,43 +130,6 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.home-chapters {
|
||||
counter-reset: home-chapter -1;
|
||||
}
|
||||
|
||||
.home-chapter {
|
||||
counter-increment: home-chapter;
|
||||
}
|
||||
|
||||
.home-folio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--amare-color-accent);
|
||||
font-size: var(--amare-text-xs);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.home-folio--inverse {
|
||||
color: color-mix(in srgb, var(--amare-color-accent-text) 82%, transparent);
|
||||
}
|
||||
|
||||
.home-folio__separator {
|
||||
color: var(--amare-color-sage);
|
||||
}
|
||||
|
||||
.home-folio--inverse .home-folio__separator {
|
||||
color: color-mix(in srgb, var(--amare-color-accent-text) 55%, transparent);
|
||||
}
|
||||
|
||||
.home-folio__number::before {
|
||||
content: counter(home-chapter, decimal-leading-zero);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.main-nav {
|
||||
transition: opacity var(--amare-duration-normal) var(--amare-ease-standard);
|
||||
|
||||
@@ -7,14 +7,12 @@
|
||||
'border-t border-amare-border bg-amare-bg-deep py-20',
|
||||
'home-chapter' => $editorial,
|
||||
]) data-chapter="final-cta" data-reveal-group>
|
||||
<div class="container-amare space-y-6 text-center" data-reveal data-reveal-from="up">
|
||||
@if ($editorial)
|
||||
<x-home.folio label="Próximo passo" class="justify-center" />
|
||||
@else
|
||||
<div class="container-amare max-w-4xl space-y-6 py-4" data-reveal data-reveal-from="up">
|
||||
@unless ($editorial)
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Próximo passo</p>
|
||||
@endif
|
||||
@endunless
|
||||
<h2 id="final-cta-heading" class="text-headline font-medium text-amare-text">Do casamento ao evento corporativo, tudo começa com uma boa conversa.</h2>
|
||||
<p class="mx-auto max-w-2xl text-amare-muted">
|
||||
<p class="max-w-2xl text-amare-muted">
|
||||
Compartilhe as primeiras informações do seu evento. A Amare retorna para entender o contexto e orientar os próximos passos.
|
||||
</p>
|
||||
<div>
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
@props([
|
||||
'label',
|
||||
'tone' => 'default',
|
||||
])
|
||||
|
||||
@php
|
||||
$tone = $tone === 'inverse' ? 'inverse' : 'default';
|
||||
@endphp
|
||||
|
||||
<p
|
||||
{{ $attributes->class([
|
||||
'home-folio',
|
||||
'home-folio--inverse' => $tone === 'inverse',
|
||||
]) }}
|
||||
data-home-folio
|
||||
>
|
||||
<span data-home-folio-label>{{ $label }}</span>
|
||||
<span class="home-folio__separator" aria-hidden="true">·</span>
|
||||
<span class="home-folio__number" data-home-folio-number aria-hidden="true"></span>
|
||||
</p>
|
||||
@@ -2,26 +2,54 @@
|
||||
'settings',
|
||||
])
|
||||
|
||||
<x-public.photo-hero
|
||||
class="home-chapter"
|
||||
<section
|
||||
aria-labelledby="hero-heading"
|
||||
class="home-chapter min-h-[100dvh] border-b border-amare-border bg-amare-bg"
|
||||
data-chapter="hero"
|
||||
:image-path="$settings->hero_image_path"
|
||||
:image-alt="$settings->hero_image_alt"
|
||||
:eyebrow="$settings->hero_eyebrow"
|
||||
:title="$settings->hero_title ?: 'Celebrações com propósito'"
|
||||
:summary="$settings->hero_subtitle"
|
||||
brand-mark
|
||||
data-motion="page-open"
|
||||
>
|
||||
<div class="container-amare pt-8 md:pt-10">
|
||||
<x-home.folio label="Capa" data-motion-beat="folio" />
|
||||
<div @class([
|
||||
'container-amare grid min-h-[100dvh] gap-12 py-20 md:py-10',
|
||||
'md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] md:items-stretch' => filled($settings->hero_image_path),
|
||||
'md:max-w-4xl md:items-center' => blank($settings->hero_image_path),
|
||||
]) data-reveal-group @if (blank($settings->hero_image_path)) data-tonal-hero @endif>
|
||||
<div class="flex flex-col justify-center space-y-8 md:py-12">
|
||||
<div data-motion-beat="seal" class="flex items-center gap-4">
|
||||
<x-brand.logo mark variant="on-light" class="h-8 w-auto" alt="" />
|
||||
@if (filled($settings->hero_eyebrow))
|
||||
<p class="text-sm font-medium uppercase tracking-[0.18em] text-amare-accent">{{ $settings->hero_eyebrow }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<a href="{{ route('contact') }}" data-testid="home-primary-cta" class="inline-flex min-h-11 items-center bg-amare-accent px-5 py-3 text-sm font-semibold text-amare-accent-text transition-colors duration-(--amare-duration-normal) ease-(--amare-ease-standard) hover:bg-amare-accent-hover">{{ $settings->hero_cta_label ?: 'Solicitar proposta' }}</a>
|
||||
|
||||
<h1 id="hero-heading" data-motion-beat="title" class="max-w-3xl text-display font-medium text-amare-text">
|
||||
{{ $settings->hero_title ?: 'Celebrações com propósito' }}
|
||||
</h1>
|
||||
|
||||
@if (filled($settings->hero_subtitle))
|
||||
<p class="max-w-2xl text-lg text-amare-text-muted">{{ $settings->hero_subtitle }}</p>
|
||||
@endif
|
||||
|
||||
<div data-motion-beat="cta" class="flex flex-wrap items-center gap-4">
|
||||
<a href="{{ route('contact') }}" data-testid="home-primary-cta" class="inline-flex min-h-11 items-center bg-amare-accent px-5 py-3 text-sm font-semibold text-amare-accent-text transition-colors duration-(--amare-duration-normal) ease-(--amare-ease-standard) hover:bg-amare-accent-hover">
|
||||
{{ $settings->hero_cta_label ?: 'Solicitar proposta' }}
|
||||
</a>
|
||||
|
||||
@if (filled($settings->hero_secondary_cta_label))
|
||||
<a href="{{ route('portfolio.index') }}" class="inline-flex min-h-11 items-center text-sm font-semibold text-amare-accent transition-colors hover:text-amare-accent-deep"><span class="border-b border-amare-accent pb-1">{{ $settings->hero_secondary_cta_label }}</span></a>
|
||||
<a href="{{ route('portfolio.index') }}" class="inline-flex min-h-11 items-center text-sm font-semibold text-amare-accent transition-colors hover:text-amare-accent-deep">
|
||||
<span class="border-b border-amare-accent pb-1">{{ $settings->hero_secondary_cta_label }}</span>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if (filled($settings->hero_note))
|
||||
<p class="mt-5 max-w-xl text-sm text-amare-text-muted">{{ $settings->hero_note }}</p>
|
||||
<p class="max-w-xl text-sm text-amare-text-muted">{{ $settings->hero_note }}</p>
|
||||
@endif
|
||||
</x-public.photo-hero>
|
||||
</div>
|
||||
|
||||
@if (filled($settings->hero_image_path))
|
||||
<div data-split-hero data-motion-beat="media" class="min-h-80 overflow-hidden bg-amare-bg-deep md:min-h-full" data-reveal-media>
|
||||
<x-media.image :path="$settings->hero_image_path" :alt="$settings->hero_image_alt ?: $settings->brand_name" loading="eager" fetchpriority="high" sizes="(max-width: 768px) 100vw, 55vw" class="img-editorial h-full w-full object-cover" />
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,14 +8,12 @@
|
||||
$body = $settings->manifesto_body ?: 'A Amare combina sensibilidade e precisão para criar encontros coerentes com cada cliente, marca e ocasião — sem fórmulas prontas, excessos ou ruído.';
|
||||
@endphp
|
||||
|
||||
<section aria-labelledby="manifesto-heading" class="home-chapter border-b border-amare-border bg-amare-bg-deep py-20" data-chapter="manifesto">
|
||||
<div class="container-amare grid gap-8 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]" data-reveal-group>
|
||||
<div class="space-y-5 md:pr-8" data-reveal data-reveal-from="up">
|
||||
<x-home.folio label="Manifesto" />
|
||||
<span class="block h-px w-16 bg-amare-border" aria-hidden="true"></span>
|
||||
<section aria-labelledby="manifesto-heading" class="home-chapter border-b border-amare-border bg-amare-bg-deep py-24 md:py-32" data-chapter="manifesto">
|
||||
<div class="container-amare grid gap-10 md:grid-cols-12" data-reveal-group>
|
||||
<div class="space-y-5 md:col-span-4 md:pt-20" data-reveal data-reveal-from="left">
|
||||
<p class="max-w-52 text-lg leading-snug text-amare-text">Humana no cuidado. Precisa na entrega.</p>
|
||||
</div>
|
||||
<div class="space-y-6" data-reveal data-reveal-from="up">
|
||||
<div class="space-y-6 md:col-span-7 md:col-start-6" data-reveal data-reveal-from="up">
|
||||
<h2 id="manifesto-heading" class="max-w-3xl text-headline font-medium text-amare-text">{{ $title }}</h2>
|
||||
<p class="max-w-2xl text-xl leading-relaxed text-amare-text">{{ $lead }}</p>
|
||||
<p class="max-w-2xl text-amare-text-muted">{{ $body }}</p>
|
||||
|
||||
@@ -7,10 +7,9 @@
|
||||
$intro = $settings->method_intro ?: 'Clareza em cada etapa. Tranquilidade durante todo o processo.';
|
||||
@endphp
|
||||
|
||||
<section aria-labelledby="method-heading" class="home-chapter border-b border-amare-border bg-amare-bg-archive py-20" data-chapter="method">
|
||||
<section aria-labelledby="method-heading" class="home-chapter border-b border-amare-border bg-amare-bg-archive py-24" data-chapter="method">
|
||||
<div class="container-amare grid gap-10 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)] md:items-start" data-reveal-group>
|
||||
<div class="space-y-4" data-reveal data-reveal-from="up">
|
||||
<x-home.folio label="Método" />
|
||||
<h2 id="method-heading" class="text-headline font-medium text-amare-text">Cuidado orientado por processo.</h2>
|
||||
<p class="text-amare-text-muted">{{ $intro }}</p>
|
||||
<x-brand.logo
|
||||
|
||||
@@ -3,17 +3,16 @@
|
||||
])
|
||||
|
||||
@if ($cases->isNotEmpty())
|
||||
<section aria-labelledby="portfolio-heading" class="home-chapter border-b border-amare-accent-deep bg-amare-accent-deep py-20 text-amare-accent-text" data-chapter="portfolio" data-editorial-portfolio>
|
||||
<section aria-labelledby="portfolio-heading" class="home-chapter border-b border-amare-accent-deep bg-amare-accent-deep py-24 text-amare-accent-text" data-chapter="portfolio">
|
||||
<div class="container-amare space-y-10" data-reveal-group>
|
||||
<div class="grid gap-4 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]" data-reveal data-reveal-from="up">
|
||||
<x-home.folio label="Portfólio" tone="inverse" />
|
||||
<div class="space-y-3">
|
||||
<div class="grid gap-4 md:grid-cols-12" data-reveal data-reveal-from="up">
|
||||
<div class="md:col-span-7 md:col-start-5 space-y-3">
|
||||
<h2 id="portfolio-heading" class="text-headline font-medium">Celebrações que ganham forma com intenção.</h2>
|
||||
<p class="max-w-2xl text-amare-accent-text/80">Recortes de eventos conduzidos com escuta, direção e presença em cada etapa.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-8 md:grid-cols-12 md:gap-x-8 md:gap-y-14">
|
||||
<div class="grid gap-8 md:grid-cols-12 md:gap-x-8 md:gap-y-14" data-editorial-portfolio>
|
||||
@foreach ($cases as $case)
|
||||
@php
|
||||
$isFeature = $loop->first;
|
||||
|
||||
@@ -7,18 +7,27 @@
|
||||
$principles = filled($settings->principles) ? $settings->principles : \App\Models\SiteSetting::defaultPrinciples();
|
||||
@endphp
|
||||
|
||||
<section aria-labelledby="positioning-heading" class="home-chapter border-b border-amare-border py-20" data-chapter="positioning">
|
||||
<div class="container-amare grid gap-10 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]" data-reveal-group>
|
||||
<div class="space-y-4" data-reveal data-reveal-from="up">
|
||||
<x-home.folio label="A Amare" />
|
||||
<section aria-labelledby="positioning-heading" class="home-chapter border-b border-amare-border py-24" data-chapter="positioning">
|
||||
<div class="container-amare grid gap-10 md:grid-cols-12" data-reveal-group>
|
||||
<div class="space-y-4 md:col-span-5" data-reveal data-reveal-from="left">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="h-px w-10 bg-amare-border" aria-hidden="true"></span>
|
||||
<p class="text-sm uppercase tracking-[0.12em] text-amare-text-muted">Assessoria boutique · São Paulo</p>
|
||||
</div>
|
||||
<h2 id="positioning-heading" class="text-headline font-medium text-amare-text">Presença que organiza o essencial.</h2>
|
||||
</div>
|
||||
<div class="space-y-8" data-reveal data-reveal-from="up">
|
||||
<div class="space-y-8 md:col-span-6 md:col-start-7" data-reveal data-reveal-from="up">
|
||||
<p class="max-w-2xl text-xl leading-relaxed text-amare-text">{{ $summary }}</p>
|
||||
@if (filled($settings->about_image_path))
|
||||
<div class="overflow-hidden bg-amare-bg-deep" data-reveal-media>
|
||||
<x-media.image
|
||||
:path="$settings->about_image_path"
|
||||
:alt="$settings->about_image_alt ?: $settings->brand_name"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
class="img-editorial aspect-[4/3] w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
@endif
|
||||
<ul class="grid gap-3 border-t border-amare-border">
|
||||
@foreach ($principles as $principle)
|
||||
<li class="border-b border-amare-border py-3 text-amare-text-muted">{{ $principle }}</li>
|
||||
|
||||
@@ -3,11 +3,10 @@
|
||||
])
|
||||
|
||||
@if ($services->isNotEmpty())
|
||||
<section aria-labelledby="services-heading" class="home-chapter border-b border-amare-border py-20" data-chapter="services">
|
||||
<section aria-labelledby="services-heading" class="home-chapter border-b border-amare-border py-24" data-chapter="services">
|
||||
<div class="container-amare space-y-10" data-reveal-group>
|
||||
<div class="grid gap-6 md:grid-cols-12 md:items-end" data-reveal data-reveal-from="up">
|
||||
<div class="space-y-3 md:col-span-4">
|
||||
<x-home.folio label="Serviços" />
|
||||
<h2 id="services-heading" class="text-3xl font-medium text-amare-text">Serviços</h2>
|
||||
</div>
|
||||
<div class="space-y-4 md:col-span-6 md:col-start-7">
|
||||
|
||||
@@ -9,21 +9,23 @@
|
||||
@endphp
|
||||
|
||||
@if ($testimonials->isNotEmpty())
|
||||
<section aria-labelledby="testimonials-heading" class="home-chapter border-b border-amare-border bg-amare-bg py-16" data-chapter="testimonials">
|
||||
<div class="container-amare space-y-8" data-reveal-group>
|
||||
<div class="max-w-2xl space-y-3" data-reveal data-reveal-from="up">
|
||||
<x-home.folio label="Depoimentos" />
|
||||
<section aria-labelledby="testimonials-heading" class="home-chapter border-b border-amare-border bg-amare-bg py-24" data-chapter="testimonials">
|
||||
<div class="container-amare space-y-10" data-reveal-group>
|
||||
<div class="max-w-2xl space-y-3 md:ml-[16.666667%]" data-reveal data-reveal-from="up">
|
||||
<h2 id="testimonials-heading" class="text-3xl font-medium text-amare-text">Depoimentos</h2>
|
||||
<p class="text-amare-text-muted">Quem celebrou com a Amare conta como foi a experiência.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
<div class="grid gap-6 md:grid-cols-12">
|
||||
@foreach ($testimonials as $testimonial)
|
||||
@php
|
||||
$paragraphs = preg_split('/\n\s*\n/', trim((string) $testimonial->quote)) ?: [];
|
||||
$paragraphs = array_values(array_filter(array_map('trim', $paragraphs), fn (string $p): bool => $p !== ''));
|
||||
@endphp
|
||||
<blockquote class="space-y-4 border-t border-amare-border pt-4" data-reveal data-reveal-from="{{ $loop->odd ? 'left' : 'right' }}">
|
||||
<blockquote @class([
|
||||
'space-y-4 border-t border-amare-border pt-4 md:col-span-5' => $loop->odd,
|
||||
'space-y-4 border-t border-amare-border pt-4 md:col-span-5 md:col-start-7 md:mt-16' => $loop->even,
|
||||
]) data-reveal data-reveal-from="{{ $loop->odd ? 'left' : 'right' }}">
|
||||
<div class="grid grid-cols-[1.5rem_minmax(0,1fr)] gap-2">
|
||||
<span class="text-3xl leading-none text-amare-sage" aria-hidden="true">“</span>
|
||||
<div class="space-y-3 text-lg text-amare-text">
|
||||
|
||||
@@ -23,7 +23,6 @@ it('keeps the full home cadence accessible and contained at both viewports', fun
|
||||
$layout = $page->script(<<<'JS'
|
||||
() => {
|
||||
const chapters = Array.from(document.querySelectorAll('.home-chapter'));
|
||||
const folios = Array.from(document.querySelectorAll('[data-home-folio]'));
|
||||
const clippedValues = new Set(['clip', 'hidden']);
|
||||
const textNodes = Array.from(document.querySelectorAll(
|
||||
'.home-chapters h1, .home-chapters h2, .home-chapters h3, .home-chapters p, .home-chapters a, .home-chapters span'
|
||||
@@ -36,10 +35,7 @@ it('keeps the full home cadence accessible and contained at both viewports', fun
|
||||
const current = chapter.getBoundingClientRect();
|
||||
return current.top < previous.bottom - 1;
|
||||
}),
|
||||
overflowingFolios: folios.filter((folio) => {
|
||||
const rect = folio.getBoundingClientRect();
|
||||
return rect.left < -1 || rect.right > window.innerWidth + 1;
|
||||
}).length,
|
||||
ornamentalFolios: document.querySelectorAll('[data-home-folio]').length,
|
||||
clippedText: textNodes.filter((node) => {
|
||||
const style = getComputedStyle(node);
|
||||
const clippedX = clippedValues.has(style.overflowX) && node.scrollWidth > node.clientWidth + 1;
|
||||
@@ -53,7 +49,7 @@ it('keeps the full home cadence accessible and contained at both viewports', fun
|
||||
expect($layout)->toBe([
|
||||
'horizontalOverflow' => false,
|
||||
'overlappingChapters' => false,
|
||||
'overflowingFolios' => 0,
|
||||
'ornamentalFolios' => 0,
|
||||
'clippedText' => 0,
|
||||
]);
|
||||
}
|
||||
|
||||
@@ -259,7 +259,7 @@ it('avoids horizontal overflow on visual public routes at desktop and mobile', f
|
||||
}
|
||||
});
|
||||
|
||||
it('applies CSS numbering to only rendered home folios in chapter order', function (): void {
|
||||
it('keeps rendered home chapters free of ornamental folios and counters', function (): void {
|
||||
PortfolioCase::factory()->published()->create([
|
||||
'is_featured' => true,
|
||||
]);
|
||||
@@ -271,7 +271,7 @@ it('applies CSS numbering to only rendered home folios in chapter order', functi
|
||||
'reducedMotion' => 'reduce',
|
||||
]);
|
||||
|
||||
$numbering = $page->script(<<<'JS'
|
||||
$editorial = $page->script(<<<'JS'
|
||||
() => {
|
||||
const flow = document.querySelector('.home-chapters');
|
||||
const chapters = Array.from(document.querySelectorAll('.home-chapter'));
|
||||
@@ -280,26 +280,12 @@ it('applies CSS numbering to only rendered home folios in chapter order', functi
|
||||
return {
|
||||
reset: flow ? getComputedStyle(flow).counterReset : '',
|
||||
increments: chapters.map((chapter) => getComputedStyle(chapter).counterIncrement),
|
||||
labels: folios.map((folio) => folio.querySelector('[data-home-folio-label]')?.textContent?.trim() ?? ''),
|
||||
contents: folios.map((folio) => {
|
||||
const number = folio.querySelector('[data-home-folio-number]');
|
||||
return number ? getComputedStyle(number, '::before').content.replace(/["']/g, '') : '';
|
||||
}),
|
||||
folioCount: folios.length,
|
||||
};
|
||||
}
|
||||
JS);
|
||||
|
||||
expect($numbering['reset'])->toContain('home-chapter -1');
|
||||
expect($numbering['increments'])->each->toContain('home-chapter 1');
|
||||
expect($numbering['labels'])->toBe([
|
||||
'Capa',
|
||||
'Manifesto',
|
||||
'Serviços',
|
||||
'Portfólio',
|
||||
'Método',
|
||||
'Depoimentos',
|
||||
'A Amare',
|
||||
'Próximo passo',
|
||||
]);
|
||||
expect($numbering['contents'])->each->toBe('counter(home-chapter, decimal-leading-zero)');
|
||||
expect($editorial['reset'])->toBe('none');
|
||||
expect($editorial['increments'])->each->toBe('none');
|
||||
expect($editorial['folioCount'])->toBe(0);
|
||||
});
|
||||
|
||||
@@ -111,6 +111,48 @@ class SiteSettingsTest extends TestCase
|
||||
->assertHasNoFormErrors();
|
||||
}
|
||||
|
||||
public function test_admin_can_upload_a_home_hero_image_with_alt_text(): void
|
||||
{
|
||||
Storage::fake('public');
|
||||
|
||||
$admin = User::factory()->admin()->create();
|
||||
SiteSetting::instance();
|
||||
|
||||
$this->actingAs($admin);
|
||||
|
||||
Livewire::test(ManageSiteSettings::class)
|
||||
->set('data.hero_image_path', [
|
||||
UploadedFile::fake()->image('hero.jpg', 1600, 1000),
|
||||
])
|
||||
->set('data.hero_image_alt', 'Convidados em uma celebração ao ar livre')
|
||||
->call('save')
|
||||
->assertHasNoFormErrors();
|
||||
|
||||
$settings = SiteSetting::instance()->refresh();
|
||||
|
||||
$this->assertSame('Convidados em uma celebração ao ar livre', $settings->hero_image_alt);
|
||||
$this->assertNotNull($settings->hero_image_path);
|
||||
Storage::disk('public')->assertExists($settings->hero_image_path);
|
||||
}
|
||||
|
||||
public function test_home_hero_image_requires_alt_text(): void
|
||||
{
|
||||
Storage::fake('public');
|
||||
|
||||
$admin = User::factory()->admin()->create();
|
||||
SiteSetting::instance();
|
||||
|
||||
$this->actingAs($admin);
|
||||
|
||||
Livewire::test(ManageSiteSettings::class)
|
||||
->set('data.hero_image_path', [
|
||||
UploadedFile::fake()->image('hero.jpg', 1600, 1000),
|
||||
])
|
||||
->set('data.hero_image_alt', null)
|
||||
->call('save')
|
||||
->assertHasFormErrors(['hero_image_alt' => 'required']);
|
||||
}
|
||||
|
||||
public function test_content_seeder_includes_default_og_image_alt_text(): void
|
||||
{
|
||||
Storage::fake('public');
|
||||
|
||||
@@ -5,6 +5,7 @@ declare(strict_types=1);
|
||||
namespace Tests\Feature;
|
||||
|
||||
use App\Models\Service;
|
||||
use App\Models\SiteSetting;
|
||||
use App\Support\ResponsiveImage;
|
||||
use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||
use Illuminate\Support\Facades\Artisan;
|
||||
@@ -61,4 +62,25 @@ class MediaGenerateVariantsCommandTest extends TestCase
|
||||
$this->assertSame(0, $exitCode);
|
||||
$this->assertNull(ResponsiveImage::metadata($path, 'public'));
|
||||
}
|
||||
|
||||
public function test_command_backfills_variants_for_the_home_hero_image(): void
|
||||
{
|
||||
Storage::fake('public');
|
||||
|
||||
$manager = new ImageManager(new Driver);
|
||||
$path = 'content/home/hero.jpg';
|
||||
Storage::disk('public')->put($path, (string) $manager->create(1600, 1000)->toJpeg());
|
||||
|
||||
SiteSetting::instance()->update([
|
||||
'hero_image_path' => $path,
|
||||
'hero_image_alt' => 'Celebração ao ar livre',
|
||||
]);
|
||||
|
||||
$exitCode = Artisan::call('media:generate-variants');
|
||||
|
||||
$this->assertSame(0, $exitCode);
|
||||
foreach (ResponsiveImage::WIDTHS as $width) {
|
||||
Storage::disk('public')->assertExists(ResponsiveImage::variantPath($path, $width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -129,6 +129,41 @@ class HomePageContentTest extends TestCase
|
||||
->assertSeeInOrder(['data-testid="home-primary-cta"', 'Solicitar proposta']);
|
||||
}
|
||||
|
||||
public function test_home_hero_uses_its_own_cms_image_instead_of_the_social_og_image(): void
|
||||
{
|
||||
SiteSetting::instance()->update([
|
||||
'hero_image_path' => 'content/home/hero.jpg',
|
||||
'hero_image_alt' => 'Celebração ao ar livre',
|
||||
'default_og_image_path' => 'content/og/social.jpg',
|
||||
'default_og_image_alt' => 'Imagem social',
|
||||
]);
|
||||
|
||||
$response = $this->get(route('home'))
|
||||
->assertOk()
|
||||
->assertSee('content/home/hero.jpg', false)
|
||||
->assertSee('alt="Celebração ao ar livre"', false);
|
||||
|
||||
$this->assertMatchesRegularExpression(
|
||||
'/data-motion-beat="media"[^>]*>\s*<img[^>]*content\/home\/hero\.jpg/s',
|
||||
$response->getContent(),
|
||||
);
|
||||
}
|
||||
|
||||
public function test_home_hero_keeps_an_intentional_typographic_fallback_without_media(): void
|
||||
{
|
||||
SiteSetting::instance()->update([
|
||||
'hero_image_path' => null,
|
||||
'hero_image_alt' => null,
|
||||
]);
|
||||
|
||||
$this->get(route('home'))
|
||||
->assertOk()
|
||||
->assertSee('min-h-[100dvh]', false)
|
||||
->assertSee('id="hero-heading"', false)
|
||||
->assertSee('data-testid="home-primary-cta"', false)
|
||||
->assertDontSee('data-motion-beat="media"', false);
|
||||
}
|
||||
|
||||
public function test_blank_quote_testimonials_are_skipped(): void
|
||||
{
|
||||
Testimonial::factory()->published()->create([
|
||||
@@ -180,8 +215,8 @@ class HomePageContentTest extends TestCase
|
||||
'Segunda autora',
|
||||
], false);
|
||||
|
||||
$this->assertSame(1, substr_count($response->getContent(), 'data-reveal-from="left"'));
|
||||
$this->assertSame(1, substr_count($response->getContent(), 'data-reveal-from="right"'));
|
||||
$this->assertSame(1, preg_match_all('/<blockquote\b[^>]*data-reveal-from="left"/i', $response->getContent()));
|
||||
$this->assertSame(1, preg_match_all('/<blockquote\b[^>]*data-reveal-from="right"/i', $response->getContent()));
|
||||
}
|
||||
|
||||
public function test_testimonials_section_is_omitted_when_every_published_quote_is_blank(): void
|
||||
@@ -198,7 +233,7 @@ class HomePageContentTest extends TestCase
|
||||
->assertDontSee('Relato vazio');
|
||||
}
|
||||
|
||||
public function test_home_folios_follow_rendered_chapter_order_and_hide_decorative_numbers(): void
|
||||
public function test_home_removes_ornamental_folios_and_counter_css(): void
|
||||
{
|
||||
SiteSetting::instance();
|
||||
|
||||
@@ -208,54 +243,15 @@ class HomePageContentTest extends TestCase
|
||||
|
||||
$html = $this->get(route('home'))->assertOk()->getContent();
|
||||
|
||||
$this->assertSame([
|
||||
'Capa',
|
||||
'Manifesto',
|
||||
'Serviços',
|
||||
'Portfólio',
|
||||
'Método',
|
||||
'Depoimentos',
|
||||
'A Amare',
|
||||
'Próximo passo',
|
||||
], $this->folioLabels((string) $html));
|
||||
$this->assertSame(8, preg_match_all('/data-home-folio-number[^>]*aria-hidden="true"/i', (string) $html));
|
||||
$this->assertStringNotContainsString('data-home-folio', (string) $html);
|
||||
$this->assertStringNotContainsString('home-folio', (string) $html);
|
||||
$this->assertSame(1, preg_match_all('/<h1\b/i', (string) $html));
|
||||
|
||||
$css = (string) file_get_contents(resource_path('css/app.css'));
|
||||
|
||||
$this->assertStringContainsString('counter-reset: home-chapter -1', $css);
|
||||
$this->assertStringContainsString('counter-increment: home-chapter', $css);
|
||||
$this->assertStringContainsString('counter(home-chapter, decimal-leading-zero)', $css);
|
||||
}
|
||||
|
||||
public function test_home_folios_are_omitted_with_conditional_chapters_without_leaving_markup_gaps(): void
|
||||
{
|
||||
SiteSetting::instance();
|
||||
|
||||
$html = $this->get(route('home'))->assertOk()->getContent();
|
||||
|
||||
$this->assertSame([
|
||||
'Capa',
|
||||
'Manifesto',
|
||||
'Método',
|
||||
'A Amare',
|
||||
'Próximo passo',
|
||||
], $this->folioLabels((string) $html));
|
||||
$this->assertSame(5, preg_match_all('/data-home-folio-number[^>]*aria-hidden="true"/i', (string) $html));
|
||||
}
|
||||
|
||||
/** @return list<string> */
|
||||
private function folioLabels(string $html): array
|
||||
{
|
||||
preg_match_all(
|
||||
'/<span\b[^>]*data-home-folio-label[^>]*>\s*([^<]+?)\s*<\/span>/is',
|
||||
$html,
|
||||
$matches,
|
||||
);
|
||||
|
||||
return array_values(array_map(
|
||||
static fn (string $label): string => trim(html_entity_decode($label)),
|
||||
$matches[1],
|
||||
));
|
||||
$this->assertStringNotContainsString('counter-reset: home-chapter', $css);
|
||||
$this->assertStringNotContainsString('counter-increment: home-chapter', $css);
|
||||
$this->assertStringNotContainsString('counter(home-chapter', $css);
|
||||
$this->assertFileDoesNotExist(resource_path('views/components/home/folio.blade.php'));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,11 +35,11 @@ class ImmersivePhotoHeroTest extends TestCase
|
||||
|
||||
$response
|
||||
->assertOk()
|
||||
->assertSee('data-photo-hero', false)
|
||||
->assertSee('data-split-hero', false)
|
||||
->assertSee('content/heroes/home.jpg', false)
|
||||
->assertSee('loading="eager"', false)
|
||||
->assertSee('fetchpriority="high"', false)
|
||||
->assertSee('sizes="100vw"', false)
|
||||
->assertSee('sizes="(max-width: 768px) 100vw, 55vw"', false)
|
||||
->assertSee('content="http://localhost/storage/content/og/social.jpg"', false);
|
||||
}
|
||||
|
||||
@@ -61,7 +61,6 @@ class ImmersivePhotoHeroTest extends TestCase
|
||||
foreach ([route('home'), route('services.index'), route('portfolio.index'), route('portfolio.show', $case->slug), route('about')] as $route) {
|
||||
$this->get($route)
|
||||
->assertOk()
|
||||
->assertDontSee('data-photo-hero', false)
|
||||
->assertSee('data-tonal-hero', false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,7 +46,8 @@ class MotionMarkupTest extends TestCase
|
||||
->assertDontSee('data-chapter-progress', false)
|
||||
->assertSee('data-chapter="hero"', false)
|
||||
->assertSee('data-chapter="manifesto"', false)
|
||||
->assertSee('data-reveal', false);
|
||||
->assertSee('data-reveal', false)
|
||||
->assertDontSee('data-home-folio', false);
|
||||
}
|
||||
|
||||
public function test_home_has_no_chapter_navigation_when_cms_sections_are_empty(): void
|
||||
|
||||
Reference in New Issue
Block a user