Compare commits
6 Commits
feat/home-
...
feat/home-
| Author | SHA1 | Date | |
|---|---|---|---|
| 8009f1f8f9 | |||
| 8311f89850 | |||
| 887df37fae | |||
| 4859fc5a8b | |||
| dfa798552f | |||
| 2573a4aa73 |
@@ -2,29 +2,48 @@
|
|||||||
'settings',
|
'settings',
|
||||||
])
|
])
|
||||||
|
|
||||||
<x-public.photo-hero
|
<section
|
||||||
@class(['home-chapter'])
|
aria-labelledby="hero-heading"
|
||||||
|
class="home-chapter border-b border-amare-border bg-amare-bg"
|
||||||
data-chapter="hero"
|
data-chapter="hero"
|
||||||
:image-path="$settings->hero_image_path"
|
data-motion="page-open"
|
||||||
:image-alt="$settings->hero_image_alt ?: $settings->brand_name"
|
|
||||||
:eyebrow="$settings->hero_eyebrow"
|
|
||||||
:title="$settings->hero_title ?: 'Celebrações com propósito'"
|
|
||||||
:summary="$settings->hero_subtitle"
|
|
||||||
brand-mark
|
|
||||||
>
|
>
|
||||||
<div class="flex flex-wrap items-center gap-4">
|
<div class="container-amare grid items-end gap-12 pb-12 pt-16 md:grid-cols-[1.1fr_0.9fr] md:gap-[clamp(3rem,6vw,7rem)] md:pb-[72px] md:pt-24">
|
||||||
<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">
|
<div data-hero-content data-reveal-group class="flex flex-col gap-8">
|
||||||
{{ $settings->hero_cta_label ?: 'Solicitar proposta' }}
|
<div data-motion-beat="eyebrow">
|
||||||
</a>
|
<p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">Assessoria & produção de eventos • São Paulo</p>
|
||||||
|
|
||||||
@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>
|
|
||||||
@endif
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (filled($settings->hero_note))
|
<h1 id="hero-heading" data-motion-beat="title" class="text-[clamp(3rem,8vw,5.75rem)] font-medium leading-[0.95] tracking-[-0.04em] text-amare-text">
|
||||||
<p class="mt-4 max-w-xl text-sm text-amare-text-muted">{{ $settings->hero_note }}</p>
|
Eventos com intenção, cuidado e presença.
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="max-w-[760px] text-[clamp(1.1875rem,2vw,1.5rem)] leading-[1.55] text-amare-text-muted">
|
||||||
|
Uma boutique de assessoria que une sensibilidade, organização e condução profissional para transformar cada projeto em uma experiência bem cuidada.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div data-motion-beat="cta" class="flex flex-wrap items-center gap-4">
|
||||||
|
<a href="#sobre" data-testid="home-primary-cta" 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">
|
||||||
|
Conhecer a Amare
|
||||||
|
</a>
|
||||||
|
<a href="#contato" class="inline-flex min-h-[48px] items-center justify-center border border-amare-accent px-6 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent-deep transition-colors hover:bg-amare-accent hover:text-amare-accent-text">
|
||||||
|
Enviar briefing
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
data-split-hero
|
||||||
|
data-motion-beat="media"
|
||||||
|
class="min-h-[320px] overflow-hidden bg-amare-bg-deep md:min-h-[520px]"
|
||||||
|
>
|
||||||
|
@if (filled($settings->hero_image_path))
|
||||||
|
<x-media.image :path="$settings->hero_image_path" :alt="$settings->hero_image_alt ?: $settings->brand_name" loading="eager" fetchpriority="high" sizes="(max-width: 1023px) 100vw, 45vw" class="img-editorial h-full w-full object-cover" />
|
||||||
|
@else
|
||||||
|
<div data-tonal-hero class="flex h-full min-h-[320px] items-center justify-center bg-gradient-to-br from-amare-bg-deep to-amare-bg-archive md:min-h-[520px]">
|
||||||
|
<p class="text-xs font-semibold uppercase tracking-[0.16em] text-amare-muted">Fotografia hero</p>
|
||||||
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</x-public.photo-hero>
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ it('keeps the hero asymmetric on desktop and stacked through md and mobile', fun
|
|||||||
startsBelowHeader: Math.abs((heroRect?.top ?? -1) - (headerRect?.bottom ?? -2)) <= 1,
|
startsBelowHeader: Math.abs((heroRect?.top ?? -1) - (headerRect?.bottom ?? -2)) <= 1,
|
||||||
mediaBesideContent: (mediaRect?.left ?? 0) >= (contentRect?.right ?? Number.POSITIVE_INFINITY) - 1,
|
mediaBesideContent: (mediaRect?.left ?? 0) >= (contentRect?.right ?? Number.POSITIVE_INFINITY) - 1,
|
||||||
mediaMinHeight: Math.round(mediaRect?.height ?? 0) >= 519,
|
mediaMinHeight: Math.round(mediaRect?.height ?? 0) >= 519,
|
||||||
mediaTouchesViewportRight: (mediaRect?.right ?? 0) >= window.innerWidth - 4,
|
mediaInsideContainer: (mediaRect?.right ?? 0) < window.innerWidth - 100,
|
||||||
horizontalOverflow: document.documentElement.scrollWidth > window.innerWidth,
|
horizontalOverflow: document.documentElement.scrollWidth > window.innerWidth,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -49,7 +49,7 @@ it('keeps the hero asymmetric on desktop and stacked through md and mobile', fun
|
|||||||
'startsBelowHeader' => true,
|
'startsBelowHeader' => true,
|
||||||
'mediaBesideContent' => true,
|
'mediaBesideContent' => true,
|
||||||
'mediaMinHeight' => true,
|
'mediaMinHeight' => true,
|
||||||
'mediaTouchesViewportRight' => true,
|
'mediaInsideContainer' => true,
|
||||||
'horizontalOverflow' => false,
|
'horizontalOverflow' => false,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ class HomePageTest extends TestCase
|
|||||||
|
|
||||||
$response
|
$response
|
||||||
->assertOk()
|
->assertOk()
|
||||||
->assertSee('Celebrações com propósito')
|
->assertSee('Eventos com intenção, cuidado e presença.')
|
||||||
->assertSee($settings->brand_name);
|
->assertSee($settings->brand_name);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -105,18 +105,18 @@ class HomePageContentTest extends TestCase
|
|||||||
'id="testimonials-heading"',
|
'id="testimonials-heading"',
|
||||||
'id="briefing-heading"',
|
'id="briefing-heading"',
|
||||||
], false)
|
], false)
|
||||||
|
->assertSee('Fotografia hero')
|
||||||
->assertSee('FOTO DE CASAMENTO 01')
|
->assertSee('FOTO DE CASAMENTO 01')
|
||||||
->assertSee('Nome e data reais — aguardando autorização')
|
->assertSee('Nome e data reais — aguardando autorização')
|
||||||
->assertSee('Conteúdo em construção')
|
->assertSee('Conteúdo em construção')
|
||||||
->assertSee('Fornecedores e parcerias — pós-MVP');
|
->assertSee('Fornecedores e parcerias — pós-MVP');
|
||||||
}
|
}
|
||||||
|
|
||||||
public function test_hero_falls_back_to_default_copy_when_fields_are_empty(): void
|
public function test_hero_uses_fixed_editorial_copy_regardless_of_settings(): void
|
||||||
{
|
{
|
||||||
SiteSetting::instance()->update([
|
SiteSetting::instance()->update([
|
||||||
'hero_title' => '',
|
'hero_title' => '',
|
||||||
'hero_subtitle' => '',
|
'hero_subtitle' => '',
|
||||||
'hero_cta_label' => '',
|
|
||||||
'hero_image_path' => null,
|
'hero_image_path' => null,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@@ -124,8 +124,11 @@ class HomePageContentTest extends TestCase
|
|||||||
|
|
||||||
$response
|
$response
|
||||||
->assertOk()
|
->assertOk()
|
||||||
->assertSeeInOrder(['id="hero-heading"', 'Celebrações com propósito'], false)
|
->assertSee('Eventos com intenção, cuidado e presença.')
|
||||||
->assertSeeInOrder(['data-testid="home-primary-cta"', 'Solicitar proposta'], false);
|
->assertSee('Uma boutique de assessoria que une sensibilidade, organização e condução profissional para transformar cada projeto em uma experiência bem cuidada.')
|
||||||
|
->assertSee('Conhecer a Amare')
|
||||||
|
->assertSee('Enviar briefing')
|
||||||
|
->assertSeeInOrder(['href="#sobre"', 'data-testid="home-primary-cta"'], false);
|
||||||
}
|
}
|
||||||
|
|
||||||
public function test_home_hero_uses_its_own_cms_image_instead_of_the_social_og_image(): void
|
public function test_home_hero_uses_its_own_cms_image_instead_of_the_social_og_image(): void
|
||||||
@@ -157,11 +160,12 @@ class HomePageContentTest extends TestCase
|
|||||||
|
|
||||||
$this->get(route('home'))
|
$this->get(route('home'))
|
||||||
->assertOk()
|
->assertOk()
|
||||||
->assertSee('data-tonal-hero', false)
|
->assertSee('min-h-[320px]', false)
|
||||||
|
->assertSee('md:min-h-[520px]', false)
|
||||||
|
->assertSee('Fotografia hero')
|
||||||
->assertSee('id="hero-heading"', false)
|
->assertSee('id="hero-heading"', false)
|
||||||
->assertSee('data-testid="home-primary-cta"', false)
|
->assertSee('data-testid="home-primary-cta"', false)
|
||||||
->assertDontSee('data-photo-hero', false)
|
->assertSee('data-motion-beat="media"', false)
|
||||||
->assertDontSee('data-motion-beat="media"', false)
|
|
||||||
->assertDontSee('content/home/hero.jpg', false);
|
->assertDontSee('content/home/hero.jpg', false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -37,16 +37,15 @@ class ImmersivePhotoHeroTest extends TestCase
|
|||||||
->assertOk()
|
->assertOk()
|
||||||
->assertSee('data-chapter="hero"', false)
|
->assertSee('data-chapter="hero"', false)
|
||||||
->assertSee('data-motion="page-open"', false)
|
->assertSee('data-motion="page-open"', false)
|
||||||
->assertSee('data-photo-hero', false)
|
->assertSee('md:min-h-[520px]', false)
|
||||||
->assertSee('min-h-[calc(100dvh-5rem)]', false)
|
|
||||||
->assertSee('data-hero-content', false)
|
->assertSee('data-hero-content', false)
|
||||||
->assertSee('data-split-hero', false)
|
->assertSee('data-split-hero', false)
|
||||||
->assertSee('data-motion-beat="media"', false)
|
->assertSee('data-motion-beat="media"', false)
|
||||||
->assertSee('lg:grid-cols-12', false)
|
->assertSee('md:grid-cols-[1.1fr_0.9fr]', false)
|
||||||
->assertSee('content/heroes/home.jpg', false)
|
->assertSee('content/heroes/home.jpg', false)
|
||||||
->assertSee('loading="eager"', false)
|
->assertSee('loading="eager"', false)
|
||||||
->assertSee('fetchpriority="high"', false)
|
->assertSee('fetchpriority="high"', false)
|
||||||
->assertSee('sizes="(max-width: 1023px) 100vw, 58vw"', false)
|
->assertSee('sizes="(max-width: 1023px) 100vw, 45vw"', false)
|
||||||
->assertDontSee('data-tonal-hero', false)
|
->assertDontSee('data-tonal-hero', false)
|
||||||
->assertSee('content="http://localhost/storage/content/og/social.jpg"', false);
|
->assertSee('content="http://localhost/storage/content/og/social.jpg"', false);
|
||||||
}
|
}
|
||||||
@@ -76,8 +75,9 @@ class ImmersivePhotoHeroTest extends TestCase
|
|||||||
->assertSee('data-motion="page-open"', false)
|
->assertSee('data-motion="page-open"', false)
|
||||||
->assertSee('id="hero-heading"', false)
|
->assertSee('id="hero-heading"', false)
|
||||||
->assertSee('data-testid="home-primary-cta"', false)
|
->assertSee('data-testid="home-primary-cta"', false)
|
||||||
->assertDontSee('data-photo-hero', false)
|
->assertSee('data-split-hero', false)
|
||||||
->assertDontSee('data-split-hero', false)
|
->assertSee('data-tonal-hero', false)
|
||||||
|
->assertSee('Fotografia hero')
|
||||||
->assertDontSee('content/heroes/home.jpg', false);
|
->assertDontSee('content/heroes/home.jpg', false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ class MotionMarkupTest extends TestCase
|
|||||||
$response
|
$response
|
||||||
->assertOk()
|
->assertOk()
|
||||||
->assertSee('data-motion="page-open"', false)
|
->assertSee('data-motion="page-open"', false)
|
||||||
->assertSee('data-motion-beat="seal"', false)
|
->assertSee('data-motion-beat="eyebrow"', false)
|
||||||
->assertSee('data-motion-beat="title"', false)
|
->assertSee('data-motion-beat="title"', false)
|
||||||
->assertSee('data-motion-beat="media"', false)
|
->assertSee('data-motion-beat="media"', false)
|
||||||
->assertSee('data-motion-beat="cta"', false)
|
->assertSee('data-motion-beat="cta"', false)
|
||||||
|
|||||||
Reference in New Issue
Block a user