65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
import { usePage } from "@inertiajs/react";
|
|
|
|
import heroJpg from "&/images/header/header.jpg";
|
|
import heroWebp from "&/images/header/header.webp";
|
|
import useTrans from "@/hooks/use-translations";
|
|
|
|
import Navbar from "./Layout/Navbar";
|
|
|
|
export default function Header() {
|
|
const { props } = usePage() as unknown as {
|
|
props: {
|
|
appEnv: { locale: string; fallbackLocale: string; locales: string[] };
|
|
};
|
|
};
|
|
return (
|
|
<section className="relative w-full overflow-hidden px-0 bg-band/10 md:px-0 lg:px-[60px]">
|
|
<div className="relative z-10 mx-auto max-w-[1320px] pb-8">
|
|
<div className="relative h-[770px] w-full overflow-hidden rounded-b-3xl">
|
|
<picture>
|
|
<source srcSet={heroWebp} type="image/webp" />
|
|
<img
|
|
src={heroJpg}
|
|
alt={useTrans("front.header.heroImg.alt")}
|
|
title={useTrans("front.header.heroImg.title")}
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</picture>
|
|
|
|
{/* Navbar */}
|
|
<div className="absolute inset-x-0 top-0 z-20">
|
|
<Navbar />
|
|
</div>
|
|
|
|
{/* Bandeau */}
|
|
<div className="absolute inset-x-0 bottom-0 flex min-h-[150px] flex-col justify-center bg-band/70 px-8 mb-10 py-5 md:px-[60px]">
|
|
<h1 className="whitespace-pre-line font-sans text-[36px] lg:text-[42px] font-extrabold leading-[1.35] text-neutral-600">
|
|
{useTrans("front.header.title")}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Texte + CTA */}
|
|
<div className="mx-auto max-w-[820px] pt-14 text-center">
|
|
<p className="lg:whitespace-pre-line font-sans text-[22px] lg:leading-relaxed leading-normal text-neutral-700 lg:mx-2 mx-6">
|
|
{useTrans("front.header.subtitle")}
|
|
</p>
|
|
|
|
<a
|
|
href={
|
|
(props.appEnv.locale === props.appEnv.fallbackLocale
|
|
? ""
|
|
: "/" + props.appEnv.locale) +
|
|
"#" +
|
|
useTrans("front.engagements.slug")
|
|
}
|
|
className="mt-7 inline-block rounded-full bg-primary lg:px-8 px-4 py-2 font-sans text-lg lg:text-[20px] font-semibold text-white transition-opacity hover:bg-[#FFD41F] hover:text-black hover:opacity-90"
|
|
>
|
|
{useTrans("front.header.cta_label")}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="mx-auto h-1 my-5 w-60 rounded-full bg-neutral-300 lg:w-6xl" />
|
|
</section>
|
|
);
|
|
}
|