72 lines
4.9 KiB
PHP
72 lines
4.9 KiB
PHP
<div class="tailwind-scope">
|
|
<section class="f-poppins my-6" id="bea-encart" aria-label="{{ __('front.bea_banner.region_label') }}">
|
|
<div class="relative overflow-hidden bg-[#2e267b] px-8 pb-14 pt-7 text-white shadow-xl sm:px-12 sm:py-9 lg:px-16 lg:py-10">
|
|
<div class="relative flex flex-col items-center justify-between gap-8 md:flex-row md:items-start lg:gap-12">
|
|
|
|
{{-- Colonne gauche --}}
|
|
<div class="flex w-full shrink-0 flex-col items-center text-center md:w-auto">
|
|
<img class="w-36 object-contain drop-shadow-md sm:w-44 lg:w-48"
|
|
src="{{ Vite::asset('resources/assets/images/front/logo_bea.svg') }}" title="{{ __('front.bea_banner.logo_alt') }}"
|
|
alt="{{ __('front.bea_banner.logo_alt') }}" />
|
|
<p class="mt-3 text-xs font-[600] leading-snug tracking-wide sm:text-sm">
|
|
{!! __('front.bea_banner.commitments_intro', ['br' => '<br />']) !!}
|
|
<a class="rounded-sm underline hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
|
|
href="https://www.bienetreanimal.fr" title="{{ __('front.bea_banner.site_link_title') }}"
|
|
aria-label="{{ __('front.bea_banner.site_link_aria') }}" target="_blank"
|
|
rel="noopener noreferrer">{{ __('front.bea_banner.site_url_text') }}<span class="sr-only">
|
|
({{ __('front.bea_banner.new_window') }})</span></a>
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Colonne centrale --}}
|
|
<div class="flex-1 text-center md:text-left">
|
|
<h2 class="text-xl font-[600] leading-snug tracking-normal sm:text-2xl lg:text-3xl">
|
|
<span class="relative inline-flex items-center gap-1.5 uppercase">
|
|
<span>{{ __('front.bea_banner.title') }}</span>
|
|
<img class="hidden h-8 w-8 rotate-[15deg] object-contain sm:absolute sm:-right-14 sm:-top-8 sm:h-12 sm:w-12 md:inline-block"
|
|
src="{{ Vite::asset('resources/assets/images/front/coeur.svg') }}" alt="" role="presentation" aria-hidden="true" />
|
|
</span><br />
|
|
{{ __('front.bea_banner.subtitle') }}
|
|
</h2>
|
|
|
|
<div class="mb-14 mt-4 flex flex-col items-end md:hidden">
|
|
<img class="inline-block h-10 w-10 rotate-[15deg] object-contain pe-4"
|
|
src="{{ Vite::asset('resources/assets/images/front/coeur.svg') }}" alt="" role="presentation" aria-hidden="true" />
|
|
<img class="w-24 object-contain" src="{{ Vite::asset('resources/assets/images/front/ldc-sign.png') }}"
|
|
title="{{ __('front.bea_banner.ldc_alt') }}" alt="{{ __('front.bea_banner.ldc_alt') }}" />
|
|
</div>
|
|
|
|
<p class="mt-4 max-w-xl text-sm font-medium leading-snug text-white sm:text-base lg:text-lg">
|
|
{!! __('front.bea_banner.description', ['br' => '<br />']) !!}
|
|
</p>
|
|
|
|
<div class="mt-6 flex justify-center sm:mt-7 md:justify-start">
|
|
<a class="bea-cta inline-flex items-center justify-center gap-3 rounded-full bg-[#e60f1d] px-8 py-3.5 text-sm font-bold text-white shadow-md transition-all hover:bg-[#c80510] focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-[#2e267b] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#2e267b] active:scale-95 sm:text-base"
|
|
href="https://www.bienetreanimal.fr" title="{{ __('front.bea_banner.cta_title') }}"
|
|
aria-label="{{ __('front.bea_banner.cta_aria') }}" target="_blank" rel="noopener noreferrer">
|
|
<span>{{ __('front.bea_banner.cta_text') }}</span>
|
|
<svg class="h-4 w-4 shrink-0 stroke-[3] sm:h-6 sm:w-6" aria-hidden="true" focusable="false" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
<span class="sr-only"> ({{ __('front.bea_banner.new_window') }})</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Signature LDC --}}
|
|
<div class="hidden shrink-0 items-start justify-start self-start md:mr-6 md:flex md:self-auto md:pt-12 lg:mr-10 lg:pt-14">
|
|
<img class="w-24 object-contain sm:w-32 xl:relative xl:-left-36 xl:top-16 xl:w-36"
|
|
src="{{ Vite::asset('resources/assets/images/front/ldc-sign.png') }}" title="{{ __('front.bea_banner.ldc_alt') }}"
|
|
alt="{{ __('front.bea_banner.ldc_alt') }}" />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{-- Décoration : Soleil en bas à droite (partiellement tronqué par le conteneur) --}}
|
|
<img
|
|
class="sm:w-30 pointer-events-none absolute -bottom-10 right-4 w-20 rotate-[26deg] select-none object-contain sm:-bottom-8 sm:right-6 lg:-bottom-28 lg:right-8 lg:w-56"
|
|
src="{{ Vite::asset('resources/assets/images/front/soleil.svg') }}" alt="" role="presentation" aria-hidden="true" />
|
|
</div>
|
|
</section>
|
|
</div>
|