67 lines
2 KiB
TypeScript
67 lines
2 KiB
TypeScript
import { type ReactNode } from "react";
|
|
|
|
import heroImg from "&/images/global/header.png";
|
|
import heroImgMobile from "&/images/global/header_mobile.png";
|
|
import logoImg from "&/images/global/logo.svg";
|
|
import titleImg from "&/images/global/title_header.svg";
|
|
|
|
export interface HeroNavItem {
|
|
label: string;
|
|
href: string;
|
|
icon?: ReactNode;
|
|
}
|
|
|
|
interface HeroHeaderProps {
|
|
backgroundImage?: string;
|
|
titleImage?: string;
|
|
}
|
|
|
|
export default function HeroHeader({}: Readonly<HeroHeaderProps>) {
|
|
return (
|
|
<header
|
|
className="relative w-full overflow-hidden font-baloo [clip-path:polygon(0_0,100%_0,100%_93%,0_100%)] max-sm:[clip-path:none]"
|
|
style={{ height: "min(94vh, 900px)", minHeight: "560px" }}
|
|
>
|
|
{/* mobile */}
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat sm:hidden"
|
|
style={{
|
|
backgroundImage: `url(${heroImgMobile})`,
|
|
backgroundPosition: "bottom",
|
|
backgroundSize: "contain",
|
|
}}
|
|
/>
|
|
{/* desktop */}
|
|
<div
|
|
className="absolute inset-0 hidden bg-cover bg-center bg-no-repeat sm:block"
|
|
style={{ backgroundImage: `url(${heroImg})` }}
|
|
/>
|
|
|
|
<div className="absolute left-6 top-6 z-20 sm:left-10 sm:top-8">
|
|
<img
|
|
src={logoImg}
|
|
alt="Logo Ker Chant, spécialiste des volailles de Bretagne"
|
|
title="Ker Chant"
|
|
className="h-58 w-auto max-w-none object-contain"
|
|
loading="eager"
|
|
fetchPriority="high"
|
|
/>
|
|
</div>
|
|
|
|
<div className="absolute inset-0 z-10 flex items-center justify-center px-6">
|
|
<h1
|
|
className="absolute inset-0 z-10 flex items-center justify-center bg-center bg-no-repeat px-6"
|
|
style={{
|
|
backgroundImage: `url(${titleImg})`,
|
|
backgroundSize: "min(320px, 100%) auto",
|
|
marginTop: "-50px",
|
|
}}
|
|
>
|
|
<span className="sr-only">
|
|
Chapeau <br /> la volaille <br /> de l'ouest !
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|