87 lines
4 KiB
TypeScript
87 lines
4 KiB
TypeScript
import photo from "&/images/global/famille.jpg";
|
||
import stickers from "&/images/global/motif.webp";
|
||
import bgTransition from "&/images/global/transitionSection.png";
|
||
import arrowT from "&/images/icons/arrowT.svg";
|
||
import pin from "&/images/icons/histoire-icon.svg";
|
||
|
||
export default function HistoireSection() {
|
||
return (
|
||
<section
|
||
id="notre-histoire"
|
||
className="relative w-full py-12 font-baloo bg-repeat bg-cover overflow-hidden"
|
||
style={{
|
||
backgroundImage: `url(${stickers}), url(${bgTransition})`,
|
||
backgroundPosition: "center, 50px",
|
||
}}
|
||
>
|
||
<div className="pointer-events-none absolute right-[26%] top-10 z-5 hidden h-full w-[5px] translate-x-1/2 bg-[#E01B1B] lg:block" />
|
||
<div className="absolute right-[26%] top-10 z-30 hidden translate-x-1/2 lg:block">
|
||
<div
|
||
className="flex h-32 w-32 shrink-0 items-center justify-center rounded-full bg-[#1D1E1C]"
|
||
style={{ boxShadow: "0px 4px 4px rgba(0,0,0,0.25)" }}
|
||
>
|
||
<img src={pin} alt="" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* card + image*/}
|
||
<div className="relative z-10 mx-auto flex max-w-6xl flex-col items-center px-6 lg:flex-row lg:items-start lg:justify-center">
|
||
<div className="relative z-10 w-full max-w-[645px]">
|
||
<div
|
||
aria-hidden="true"
|
||
className="card-clip-mobile absolute inset-0 -z-10 -translate-x-3 translate-y-4 bg-black md:hidden lg:card-clip lg:block"
|
||
/>
|
||
<div className="relative bg-white px-7 py-8 min-h-[450px] lg:min-h-[538px] lg:px-12 lg:py-12">
|
||
<div className="space-y-4 text-lg font-medium leading-snug text-black lg:text-[18px]">
|
||
<p className="lg:w-[280px]">
|
||
Ker Chant est née en <strong>Bretagne</strong>, au cœur
|
||
d'une <strong>terre d'élevage</strong> reconnue pour son{" "}
|
||
<strong>savoir-faire</strong>.
|
||
</p>
|
||
<p className="lg:w-[385px]">
|
||
Depuis 2010, nous nous engageons à offrir des{" "}
|
||
<strong>produits de qualité</strong>, préparés avec{" "}
|
||
<strong>soin</strong> et garantissant une{" "}
|
||
<strong>traçabilité française</strong>.
|
||
</p>
|
||
<p className="lg:w-[390px]">
|
||
De ses origines dans les Côtes-d'Armor, jusqu'à son
|
||
identité affirmée aujourd'hui, Ker Chant a grandi avec une
|
||
ambition simple :{" "}
|
||
<strong>
|
||
régaler les familles et soutenir la filière avicole.
|
||
</strong>
|
||
</p>
|
||
<p className="lg:w-[340px]">
|
||
Forte d'une notoriété en progression, la marque continue
|
||
d'écrire son histoire avec <strong>sincérité</strong> et{" "}
|
||
<strong>humilité</strong>.
|
||
</p>
|
||
<p className="text-sm text-gray-700 lg:w-[400px]">
|
||
* 52 % des consommateurs associent Ker Chant à son origine
|
||
bretonne. Source : Étude quantitative sur la consommation de
|
||
volailles en Bretagne auprès de 1279 consommateurs bretons en
|
||
GMS – Mars 2025
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* arrow*/}
|
||
<div className="pointer-events-none absolute -bottom-20 left-12 z-30 block md:hidden lg:block lg:-bottom-46 lg:left-56">
|
||
<img src={arrowT} className="h-16 w-16 lg:h-24 lg:w-24" alt="" />
|
||
</div>
|
||
</div>
|
||
|
||
<img
|
||
src={photo}
|
||
alt="Famille partageant un repas convivial autour d'une volaille Ker Chant"
|
||
title="Le plaisir de partager avec Ker Chant"
|
||
className="relative z-20 left-16 -mt-6 max-w-full h-51.25 w-51.5 object-cover md:-ml-33 lg:mt-41.25 md:h-137 md:w-129.5"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-b from-transparent to-[#e3f3fc]"></div>
|
||
</section>
|
||
);
|
||
}
|