83 lines
3.1 KiB
TypeScript
83 lines
3.1 KiB
TypeScript
import whoWeAreImg from "&/images/global/qui-sommes-nous.jpg";
|
|
import whoWeAreImgWebp from "&/images/global/qui-sommes-nous.webp";
|
|
import sheepSilhouette from "&/images/vectors/poulet-eat.svg";
|
|
import vectorImg from "&/images/vectors/poulet.svg";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import { GetTranslation } from "@/lib/utils";
|
|
|
|
const FEATURES = [
|
|
{
|
|
title: "front.whoAreWeSection.features.one.title",
|
|
text: "front.whoAreWeSection.features.one.text",
|
|
},
|
|
{
|
|
title: "front.whoAreWeSection.features.two.title",
|
|
text: "front.whoAreWeSection.features.two.text",
|
|
},
|
|
{
|
|
title: "front.whoAreWeSection.features.three.title",
|
|
text: "front.whoAreWeSection.features.three.text",
|
|
},
|
|
];
|
|
|
|
export default function WhoAreWeSection() {
|
|
return (
|
|
<section
|
|
id={useTrans("front.whoAreWeSection.slug")}
|
|
className="relative w-full px-8 md:px-12 lg:px-[60px]"
|
|
>
|
|
<img
|
|
src={sheepSilhouette}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute -left-14 -translate-y-3/3 z-50 hidden w-[300px] opacity-10 lg:block"
|
|
/>
|
|
<img
|
|
src={vectorImg}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute -right-6 translate-y-2/4 z-0 rotate-y-180 opacity-10 hidden lg:block lg:w-[190px]"
|
|
/>
|
|
<div className="mx-auto max-w-[1320px]">
|
|
<h2 className="text-center font-sans text-3xl lg:text-[32px] font-extrabold text-neutral-800 uppercase text-primary">
|
|
{useTrans("front.whoAreWeSection.title")}
|
|
</h2>
|
|
|
|
{/* Texte + image */}
|
|
<div className="mt-10 flex flex-col items-center gap-2 lg:flex-row lg:items-start lg:justify-between">
|
|
<div className="flex flex-col gap-6 lg:max-w-[780px] mb-6">
|
|
<p className="lg:whitespace-pre-line font-sans text-[18px] leading-relaxed text-neutral-700">
|
|
{useTrans("front.whoAreWeSection.text_section_1")}
|
|
</p>
|
|
<p className="lg:whitespace-pre-line font-sans text-[18px] leading-relaxed text-neutral-700">
|
|
{useTrans("front.whoAreWeSection.text_section_2")}
|
|
</p>
|
|
</div>
|
|
|
|
<picture className="mx-1 h-[330px] w-[105%] flex-none overflow-hidden rounded-xl md:mx-0 md:h-[334px] md:w-[466px]">
|
|
<source srcSet={whoWeAreImgWebp} type="image/webp" />
|
|
<img
|
|
src={whoWeAreImg}
|
|
alt={useTrans("front.whoAreWeImg.alt")}
|
|
title={useTrans("front.whoAreWeImg.title")}
|
|
className="h-full w-full rounded-xl object-cover"
|
|
/>
|
|
</picture>
|
|
</div>
|
|
|
|
<div className="mt-16 grid grid-cols-1 gap-3 md:grid-cols-3">
|
|
{FEATURES.map((feature) => (
|
|
<div key={feature.title} className="lg:text-center text-start">
|
|
<h3 className="font-sans text-[26px] font-bold text-neutral-800 ">
|
|
{GetTranslation(feature.title)}
|
|
</h3>
|
|
<p className="mt-3 font-sans text-[18px] leading-relaxed text-neutral-700">
|
|
{GetTranslation(feature.text)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|