95 lines
4.1 KiB
TypeScript
95 lines
4.1 KiB
TypeScript
import certipaqPng from "&/images/certifications/certipaq_controle.svg";
|
|
import certipaqWebp from "&/images/certifications/certipaq_controle.webp";
|
|
import euFlagPng from "&/images/certifications/logo-eu.svg";
|
|
import euFlagWebp from "&/images/certifications/logo-eu.webp";
|
|
import useTrans from "@/hooks/use-translations";
|
|
|
|
export default function ControlsSection() {
|
|
const text1_1 = useTrans("front.controls.independentControls.text1_1");
|
|
const hasText1_1 = text1_1 !== "front.controls.independentControls.text1_1";
|
|
return (
|
|
<section className="relative w-full overflow-hidden px-8 pt-2 pb-4 lg:py-14 md:px-12 lg:px-[60px]">
|
|
<div className="mx-auto flex max-w-[1320px] flex-col gap-12">
|
|
<div className="flex flex-col items-center gap-3 lg:gap-8 md:flex-row items-start">
|
|
<picture className="flex-none">
|
|
<source srcSet={certipaqWebp} type="image/webp" />
|
|
<img
|
|
src={certipaqPng}
|
|
alt={useTrans("front.controls.certipaq.alt")}
|
|
title={useTrans("front.controls.certipaq.title")}
|
|
className="h-[165px] w-[270px] rounded-2xl object-contain"
|
|
/>
|
|
</picture>
|
|
|
|
<div className="flex flex-col gap-3 text-start md:text-left">
|
|
<h3 className="font-sans text-2xl lg:text-[26px] font-extrabold text-neutral-800">
|
|
{useTrans("front.controls.independentControls.title")}
|
|
</h3>
|
|
<p className="font-sans text-[18px] leading-normal text-neutral-700">
|
|
{useTrans("front.controls.independentControls.text1")}{" "}
|
|
<a
|
|
href={useTrans("front.controls.independentControls.chargesUrl")}
|
|
className="font-bold underline"
|
|
>
|
|
{useTrans("front.controls.independentControls.chargesLabel")}
|
|
</a>
|
|
{hasText1_1 ? ` ${text1_1}` : "."}
|
|
</p>
|
|
<p className="font-sans text-[18px] leading-normal text-neutral-700">
|
|
{useTrans("front.controls.independentControls.text2")}
|
|
</p>
|
|
<p className="font-sans text-[18px] leading-normal text-neutral-700">
|
|
{useTrans("front.controls.independentControls.text3")}{" "}
|
|
<a
|
|
href="https://certipaq.com"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
className="font-bold underline"
|
|
>
|
|
www.certipaq.com
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bloc 2 */}
|
|
<div className="flex flex-col items-center gap-3 lg:gap-8 md:flex-row items-start">
|
|
<div className="order-2 flex flex-col gap-3 text-start md:order-1 md:text-left">
|
|
<h3 className="font-sans text-2xl lg:text-[26px] font-extrabold text-neutral-800">
|
|
{useTrans("front.controls.loyalty.title")}
|
|
</h3>
|
|
<p className="font-sans text-[18px] leading-normal text-neutral-700">
|
|
{useTrans("front.controls.loyalty.text1")}
|
|
</p>
|
|
<p className="font-sans text-[18px] leading-normal text-neutral-700">
|
|
{useTrans("front.controls.loyalty.text2")}
|
|
</p>
|
|
<p className="font-sans text-[18px] leading-normal text-neutral-700">
|
|
{useTrans("front.controls.loyalty.text3")}{" "}
|
|
<a
|
|
href={useTrans("front.controls.loyalty.directiveUrl")}
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
className="font-bold underline"
|
|
>
|
|
{useTrans("front.controls.loyalty.directiveLabel")}
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
|
|
<picture className="order-1 flex-none md:order-2">
|
|
<source srcSet={euFlagWebp} type="image/webp" />
|
|
<img
|
|
src={euFlagPng}
|
|
alt={useTrans("front.controls.euFlag.alt")}
|
|
title={useTrans("front.controls.euFlag.title")}
|
|
className="h-[165px] w-[270px] rounded-2xl object-cover"
|
|
/>
|
|
</picture>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|