Notre histoire

<div class="cms-our-story container-group lg:flex">

    <div class="lg:w-[60%] flex flex-col lg:gap-7">

        <div class="flex-1 lg:pr-[70px] flex flex-col justify-between">

            <h2 class="text-3xl md:text-4.5xl font-bold tracking-tightened">Notre histoire</h2>

            <div class="text-[90px] sm:text-[130px] lg:text-[150px] font-bold text-primary tracking-tightened lg:text-right leading-none mt-5 lg:mt-0">1983</div>

        </div>

        <div class=" mt-5 lg:mt-0"><img <?= renderImageUrlTemp('story-1.jpg', 'cms', 'blur') ?> alt=""></div>

    </div>



    <div class="lg:border-l border-primary-accent lg:pl-16 lg:w-[40%] flex flex-col lg:gap-13 mt-5 lg:mt-0">

       <div class="lg:mt-[170px]">

           <div class="text-3xl md:text-4.5xl font-bold tracking-tightened text-text-light leading-13">L’aventure commence</div>

           <div class="text-sm md:text-lg text-text-light tracking-tightened mt-2.75">Le groupe Tressol Chabrier est un groupe privé et familial créé en 1983. Tout commence à Castelnaudary, où Christine et Didier Chabrier dirigent ensemble leur première concession, représentant la marque Citroën.</div>

       </div>



        <div class="hidden lg:block"><img <?= renderImageUrlTemp('story-2.jpg', 'cms', 'blur') ?> alt=""></div>

    </div>

</div>

<div class="cms-our-story container-group flex flex-col-reverse lg:flex-row mt-[60px] lg:mt-[100px]">

    <div class="lg:w-[50%] flex flex-col lg:gap-7 relative lg:pt-16 lg:pb-20">

        <div class="relative">

            <div class="absolute bottom-0 left-0 right-0 h-[71%] bg-primary lg:bg-background"></div>

            <div class=" mt-5 lg:mt-0 pl-5 pb-5 lg:pl-[60px] lg:pb-[60px] relative"><img class="w-full" <?= renderImageUrlTemp('story-3.jpg', 'cms', 'blur') ?> alt=""></div>

        </div>

    </div>



    <div class="lg:border-l border-primary-accent md:px-16 lg:px-24 lg:w-[50%] lg:pt-16 flex flex-col lg:gap-13 mt-5 lg:mt-0">

           <div class="text-[90px] sm:text-[130px] lg:text-[150px] font-bold text-primary tracking-tightened leading-none mt-5 lg:mt-0">1987</div>

           <div class="text-3xl md:text-4.5xl font-bold tracking-tightened text-text-light leading-13">Nous devenons multi sites</div>

           <div class="text-sm md:text-lg text-text-light tracking-tightened mt-2.75">

               <p>Le groupe Tressol Chabrier commence son extension par une première étape importante, l’achat d’une nouvelle concession Citroën</p>

               <p>Lorem ipsum dolor sic amet....</p>

           </div>

    </div>

</div>

<div class="cms-our-story">

    <div class="lg:flex container-group ">

        <div class="lg:w-1/2 text-right">

            <div class="text-[90px] sm:text-[130px] lg:text-[150px] font-bold text-primary tracking-tightened leading-none mt-5 lg:mt-0">1999</div>

        </div>

        <div class="lg:w-1/2 lg:px-16">

            <div class="text-3xl md:text-4.5xl font-bold tracking-tightened text-text-light leading-13">Nous devenons multi sites</div>

            <div class="text-sm md:text-lg text-text-light tracking-tightened mt-2.75">

                <p>1999 est une date charnière dans l’histoire du groupe, car elle marque le début du développement multimarque, avec Opel tout d’abord puis, au début des années 2000, les marques des groupes Volkswagen et Fiat.</p>

            </div>

        </div>

    </div>

    <div class="pt-[60px] lg:pt-20 relative">

        <div class="bg-primary absolute bottom-0 left-0 right-0 top-1/2"></div>

        <div class=" mt-5 lg:mt-0 container-cms relative"><img class="w-full" <?= renderImageUrlTemp('story-4.jpg', 'cms', 'blur') ?> alt=""></div>

    </div>

</div>

<div class="cms-our-story bg-primary">

    <div class="px-5 md:pr-0 flex flex-col-reverse lg:flex-row text-white">

        <div class="md:px-16 lg:px-24 lg:w-[656px] lg:pt-16 ml-auto flex flex-col lg:gap-13 mt-5 lg:mt-0 lg:pb-[341px]">

            <div class="text-[90px] sm:text-[130px] lg:text-[150px] font-bold tracking-tightened leading-none mt-5 lg:mt-0">2006</div>

            <div class="text-3xl md:text-4.5xl font-bold tracking-tightened leading-13">Nous devenons multi véhicules</div>

            <div class="text-sm md:text-lg tracking-tightened mt-2.75">

                <p>En 2006 nouvelle étape clé pour le groupe qui intègre l’univers moto avec Honda.</p>

                <p>De 2006 à 2016, tout s’accélère au rythme de plusieurs intégrations de concessions moto par an.</p>

            </div>

        </div>



        <div class="lg:border-l border-primary-light lg:w-[50%] flex flex-col lg:gap-7 relative lg:pt-20">

            <div class="mt-5 lg:mt-0 w-full h-full relative overflow-hidden"><img class="lg:absolute lg:top-0 lg:left-1/2 lg:-translate-x-1/2 lg:h-full w-full lg:object-cover" <?= renderImageUrlTemp('story-5.jpg', 'cms', 'blur') ?> alt=""></div>

        </div>

    </div>

</div>

<div class="cms-our-story bg-primary mb-[129px] pb-px">

    <div class="container-group text-white">

        <div class="flex flex-col-reverse lg:flex-row relative lg:-mb-10">

            <div class="lg:w-1/2">



                <div class="-mr-5 lg:mr-0 ml-auto w-1/2 lg:w-fit lg:mb-[-40px] relative"><img <?= renderImageUrlTemp('story-6.jpg', 'cms', 'blur') ?> alt=""></div>

                <div class=""><img class="w-full" <?= renderImageUrlTemp('story-7.jpg', 'cms', 'blur') ?> alt=""></div>



            </div>

            <div class="lg:w-1/2 mt-20 ml:mt-28 lg:px-24">

                <div class="text-[90px] sm:text-[130px] lg:text-[150px] font-bold tracking-tightened leading-none mt-5 lg:mt-0">2008</div>

                <div class="text-3xl md:text-4.5xl font-bold tracking-tightened leading-13 mt-5 lg:mt-10">Début de l’extension multi régions</div>

                <div class="text-sm md:text-lg tracking-tightened mt-5 lg:mt-10">

                    <p>Notre offre multimarque s’étoffe : marques étrangères avec Honda, Kia, Mitsubishi, Hyundai, Suzuki, Volvo, SsangYong et de nouvelles marques françaises avec en 2010 Renault, Dacia, et en 2013 Peugeot.</p>

                    <p>Le groupe développe aussi fortement en 2012 la marque Citroën avec 5 concessions supplémentaires, ainsi que son périmètre moto avec 3 points de vente et 9 marques distribuées.</p>

                </div>

            </div>

        </div>

        <div class="flex flex-col-reverse lg:flex-row mb-[-129px]">

            <div class="lg:ml-auto -mt-7.5 lg:mt-0 lg:pt-10 w-3/5 lg:w-1/4 relative"><img class="w-full" <?= renderImageUrlTemp('story-8.jpg', 'cms', 'blur') ?> alt=""></div>

            <div class="-ml-5 lg:ml-auto w-fit lg:w-3/4"><img class="w-full" <?= renderImageUrlTemp('story-9.jpg', 'cms', 'blur') ?> alt=""></div>

        </div>



    </div>

</div>

<div class="cms-our-story container-group flex flex-col-reverse lg:flex-row pt-20 pg:pt-[100px] pb-[70px] lg:pb-[170px]">

    <div class="lg:w-[50%] flex flex-col lg:gap-7 relative">

        <div class="relative">

            <div class="absolute bottom-0 left-0 right-0 h-[71%] bg-primary lg:bg-background"></div>

            <div class=" mt-5 lg:mt-0 pl-5 pb-5 lg:pl-[60px] lg:pb-[60px] relative"><img class="w-full" <?= renderImageUrlTemp('story-10.jpg', 'cms', 'blur') ?> alt=""></div>

        </div>

    </div>



    <div class="md:px-16 lg:px-24 lg:w-[50%] lg:pt-16 pb-7.5 lg:pb-0 flex flex-col lg:gap-13 mt-5 lg:mt-0">

        <div class="text-[90px] sm:text-[130px] lg:text-[150px] font-bold text-primary tracking-tightened leading-none mt-5 lg:mt-0">2022</div>

        <div class="text-3xl md:text-4.5xl font-bold tracking-tightened text-text-light leading-13">Un groupe familial</div>

        <div class="text-sm md:text-lg text-text-light tracking-tightened mt-2.75">

           <p>Le groupe Tressol Chabrier devient alors un des rares distributeurs français à proposer une offre aussi large. Aujourd’hui le groupe reste un groupe familial dirigé par Christine et Didier Chabrier.</p>

        </div>

        <div class="flex flex-wrap pt-20 lg:pt-5">

            <div class="w-1/2 lg:w-full flex gap-6.25 items-center">

                <?= icon('mobility-colored', 'w-[68px]'); ?>

                <div class="tracking-tightened text-text-light leading-tight">

                    <div class="text-2xl font-semibold">30 marques</div>

                    <div class="text-sm md:text-base font-medium">Auto & moto</div>

                </div>

            </div>

            <div class="w-1/2 lg:w-full flex gap-6.25 items-center mt-5">

                <?= icon('building-colored', 'w-[68px]'); ?>

                <div class="tracking-tightened text-text-light leading-tight">

                    <div class="text-2xl font-semibold">65 concessions</div>

                    <div class="text-sm md:text-base font-medium">multimarques</div>

                </div>

            </div>

            <div class="w-1/2 lg:w-full flex gap-6.25 items-center mt-5">

                <?= icon('key-ring-colored', 'w-[68px]'); ?>

                <div class="tracking-tightened text-text-light leading-tight">

                    <div class="text-2xl font-semibold">26 000 clients</div>

                    <div class="text-sm md:text-base font-medium">véhicules neufs</div>

                </div>

            </div>

            <div class="w-1/2 lg:w-full flex gap-6.25 items-center mt-5">

                <?= icon('group-spark-colored', 'w-[68px]'); ?>

                <div class="tracking-tightened text-text-light leading-tight">

                    <div class="text-2xl font-semibold">1 640 collaborateurs</div>

                    <div class="text-sm md:text-base font-medium">dans le groupe</div>

                </div>

            </div>

            <div class="w-1/2 lg:w-full flex gap-6.25 items-center mt-5">

                <?= icon('location-pined-colored', 'w-[68px]'); ?>

                <div class="tracking-tightened text-text-light leading-tight">

                    <div class="text-2xl font-semibold">8 départements</div>

                    <div class="text-sm md:text-base font-medium">du sud couverts</div>

                </div>

            </div>

            <div class="w-1/2 lg:w-full flex gap-6.25 items-center mt-5">

                <?= icon('used-car-colored', 'w-[68px]'); ?>

                <div class="tracking-tightened text-text-light leading-tight">

                    <div class="text-2xl font-semibold">21 000 clients</div>

                    <div class="text-sm md:text-base font-medium">21 000 clients</div>

                </div>

            </div>

        </div>

    </div>

</div>