44 lines
2.3 KiB
PHP
44 lines
2.3 KiB
PHP
@props([
|
|
'settings',
|
|
])
|
|
|
|
@php
|
|
$summary = $settings->about_summary ?: 'Assessoria para eventos em que cada escolha precisa fazer sentido para quem celebra e para quem recebe.';
|
|
$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-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 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>
|
|
@endforeach
|
|
</ul>
|
|
<p>
|
|
<a href="{{ route('about') }}" class="btn btn-ghost min-h-0 px-0 text-sm font-semibold text-amare-accent hover:bg-transparent hover:text-amare-accent-deep">
|
|
<span class="border-b border-amare-accent pb-1">Conhecer a Amare</span>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|