use super::components::*;
use leptos::*;

#[component]
pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
    view! { cx,
        <div class="max-w-[1600px] mx-auto">

        <div class="flex flex-col min-h-[700px] p-28 bg-cover bg-[url('/img/bg-page1.png')]">
            <h1 class="text-orange-400 text-7xl font-extrabold mb-14">
                "Micro centres de données"
            </h1>
            <Subtitle class="grow">
                <span class="max-w-lg inline-block">
                    "Pourquoi les centres de données grande échelle sont-ils voués à disparaître?"
                </span>
            </Subtitle>
            <img src="/img/NationTech-logo.png" class="mx-auto opacity-50 w-1/4"/>
        </div>

        <div class="flex-col p-8">
            <div class="w-full mx-auto mb-4 border-t-4 border-b-4 border-orange-400 p-4">
                <SectionTitle dark=false>
                    "Énergie: le nerf de la guerre"
                </SectionTitle>
            </div>
            <div class="mr-72 ml-72">
                <p class="text-justify mb-10 mt-8">
                    "Tous les systèmes économiques sont basés sur deux variables fondamentales: le temps et l’énergie. Depuis des millénaires l’or est dispendieux. Parce qu’il requiert beaucoup de temps et d’énergie à trouver. Depuis toujours l’eau a une valeur différente à différents endroits de la planète et moments de l’année, en fonction du temps et de l’énergie requis pour la trouver. D’ailleurs, l’énergie est souvent représentée comme fonction du temps. L’unité d’énergie choisie par le Système International, le Joule, s’exprime en Kilogramme X Mètre2 X Seconde2. "
                </p>
                <p class="text-justify mb-10">
                    "Il convient donc de considérer l’énergie comme fondement principal des différents systèmes économiques. Ce livre blanc vise à étudier les caractéristiques économiques selon différentes métriques naturelles, dont l’énergie est la plus importante, des différentes technologies de déploiement de centres de données. Cette analyse vise plus particulièrement à comparer l’efficacité énergétique, et donc économique, des déploiements de centres de données à très petite et très grande échelle."
                </p>
                <p class="text-right font-bold">
                    "L’impact global sera calculé en fonction des 5 métriques présentées ci-dessous."
                </p>
            </div>
        </div>

        <div class="flex bg-zinc-200 h-[450px] max-[1150px]:h-fit max-[1150px]:flex-col flex-row justify-center items-center">
            <div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6 max-[1415px]:scale-75 max-[1340px]:p-0 max-[1150px]:scale-100 max-[1150px]:p-8">
                <img src="/img/electricity-icon.png" class="mx-auto"/>
                <div class="flex justify-center items-center">
                    <h3 class="p-4 text-blue-950 text-5xl font-semibold">
                        "1"
                    </h3>
                    <h4 class="font-Lato w-48 whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">
                        "Consommation d'énergie"
                    </h4>
                </div>
            </div>
            <div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6 max-[1415px]:scale-75 max-[1340px]:p-0 max-[1150px]:scale-100 max-[1150px]:p-8">
                <img src="/img/water-icon.png" class="mx-auto"/>
                <div class="flex justify-center items-center">
                    <h3 class="p-4 text-blue-950 text-5xl font-semibold">
                        "2"
                    </h3>
                    <h4 class="font-Lato p-4 w-48 text-blue-950 text-xl font-medium my-auto">
                        "Consommation d'eau"
                    </h4>
                </div>
            </div>
            <div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6 max-[1415px]:scale-75 max-[1340px]:p-0 max-[1150px]:scale-100 max-[1150px]:p-8">
                <img src="/img/tree-icon.png" class="mx-auto"/>
                <div class="flex justify-center items-center">
                    <h3 class="p-4 text-blue-950 text-5xl font-semibold">
                        "3"
                    </h3>
                    <h4 class="font-Lato w-48 p-4 text-blue-950 text-xl font-medium my-auto">
                        "Impact environnemental"
                    </h4>
                </div>
            </div>
            <div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6 max-[1415px]:scale-75 max-[1340px]:p-0 max-[1150px]:scale-100 max-[1150px]:p-8">
                <img src="/img/coin-icon.png" class="mx-auto"/>
                <div class="flex justify-center items-center">
                    <h3 class="p-4 text-blue-950 text-5xl font-semibold">
                        "4"
                    </h3>
                    <h4 class="font-Lato w-48 p-4 text-blue-950 text-xl font-medium my-auto">
                        "Impact économique"
                    </h4>
                </div>
            </div>
            <div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6 max-[1415px]:scale-75 max-[1340px]:p-0 max-[1150px]:scale-100 max-[1150px]:p-8">
                <img src="/img/group-icon.png" class="mx-auto"/>
                <div class="flex justify-center items-center">
                    <h3 class="p-4 text-blue-950 text-5xl font-semibold">
                        "5"
                    </h3>
                    <h4 class="font-Lato w-36 p-4 text-blue-950 text-xl font-medium my-auto">
                        "Impact social"
                    </h4>
                </div>
            </div>
        </div>

        <div class="justify-center items-center flex h-[250px] bg-cover bg-center bg-opacity-75 bg-[url('/img/server-wires-page3.png')]">
        <div class="p-16 w-full">
            <div class="w-full h-fit border-t-4 border-b-4 border-orange-400 p-4">
                    <SectionTitle dark=true>
                         "Qu'est-ce qu'un centre de données"
                    </SectionTitle>
                </div>
            </div>
        </div>
        <div class="flex flex-col">
            <div class="p-8 w-fit h-fit mr-72 ml-72">
                <div class="w-fit pt-4 pb-4 border-r-8 border-indigo-500 pr-2">
                    <div class="flex-col">
                        <div class="flex justify-end pb-4">
                            <SubsectionTitle dark=true>
                                "Micro centres de données (MCD)"
                            </SubsectionTitle>
                        </div>
                        <p class="text-right mr-2 text-white">
                            "Un MCD est une unité de serveurs de petite taille pouvant être installée dans n’importe quel immeuble, tant les maisons unifamiliales que les gratte-ciels ou les usines. Sa taille est adaptée aux besoins énergétiques de l’immeuble qui l’abrite. Les rejets énergétiques, le plus souvent sous forme de chaleur, sont réutilisés au maximum dans l’immeuble pour le chauffer. Ils peuvent également être utilisée pour chauffer l’eau, ou même regénérer de l’électricité dans certains cas. Ce type de déploiement réduit également les besoins de climatisation du centre de données puisque la chaleur est transférée à d’autres usages. L’énergie totale consommée par le centre de données est donc déjà réduite."
                       </p>
                       </div>
                </div>
            </div>
            <div class="p-8 w-fit h-fit pb-24 mr-72 ml-72">
                <div class="w-fit pt-4 pb-4 border-l-8 border-indigo-500 pl-2">
                    <div class="flex-col">
                        <div class="flex justify-start pb-4">
                            <SubsectionTitle dark=true>
                                "Centres de données grande échelle (CDGE)"
                            </SubsectionTitle>
                        </div>
                        <div class="flex justify-start pb-4 text-white">
                            "Un CDGE est une unité constituée de milliers, voire de millions de serveurs centralisés sous un même toît. De tels serveurs sont généralement contenus dans d’énormes bâtiments exclusivement dédiés à l’hébergement de serveurs, ce qui requiert des systèmes de refroidissement énergivores."
                        </div>
                     </div>
                </div>
            </div>
        </div>


        <div class="flex flex-col bg-zinc-200 justify-center p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-4">                                              <SectionTitle dark=false>
                      "Pourquoi des centres de données durables?"
                </SectionTitle>
            </div>
            <p class="text-justify p-4 mb=32 ml-72 mr-72">
                "Une publication de l’Agence internationale de l’énergie (AIE) indiquait en septembre 2022 que la demande énergétique des centres de données et des réseaux de transmission des données représentait de 2% à 3% de la consommation mondiale d’électricité, soit près de 1% des émissions de gaz à effet de serre du secteur énergétique (Kamiya, 2022)."
            </p>
            <p class="text-justify p-4 ml-72 mr-72">
                "C’est pourquoi NationTech défend l’idée de remplacer les CDGE par les MCD, ces derniers étant plus durables. Ci-contre sont énumérés les Objectifs de développement durables (ODD) fixés par l’ONU dont les MCD favorisent l’atteinte."
            </p>
            <h5 class="pb-16 mx-auto text-center font-Lato w-[545px] p-4 text-blue-950 text-4xl font-bold">
                "Objectifs du développement durable (ODD)"
            </h5>
            <div class="justify-center flex flex-row">
                <img src="/img/ONU-1.png" class="p-2"/>
                <img src="/img/ONU-2.png" class="p-2"/>
                <img src="/img/ONU-3.png" class="p-2"/>
            </div>
            <div class="justify-center flex flex-row">
                <img src="/img/ONU-4.png" class="p-2"/>
                <img src="/img/ONU-5.png" class="p-2"/>
                <img src="/img/ONU-6.png" class="p-2"/>
            </div>
            <div class="justify-center flex flex-row">
                <img src="/img/ONU-7.png" class="p-2"/>
                <img src="/img/ONU-8.png" class="p-2"/>
                <img src="/img/ONU-9.png" class="p-2"/>
            </div>
            <p class="text-justify pb-12 p-4 ml-72 mr-72">
                "Le ministère de l’Environnement, de la Lutte contre les changements climatiques, de la Faune et des Parcs (MELCCFP) offre une perspective intéressante du DD. Il définit le concept comme suit."
            </p>
            <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mr-72 ml-72 border-l-8 border-blue-400">
                <p class="w-fit text-left italic">
                    "Repenser les rapports qu’entretiennent les êtres humains entre eux et avec la nature est une aspiration que partage un nombre grandissant de femmes et d’hommes. Ils posent un regard critique sur un mode de développement qui, trop souvent, porte atteinte à l’environnement et relègue la majorité de l’humanité dans la pauvreté. Le développement durable est issu de cette idée que tout ne peut pas continuer comme avant, qu’il faut remédier aux insuffisances d’un modèle de développement axé sur la seule croissance économique en reconsidérant nos façons de faire compte tenu de nouvelles priorités. Il faut donc :"
                </p>
                <p class="pt-4 w-fit text-left italic">
                    "Maintenir l'intégrité de l'environnement pour assurer la santé et la sécurité des communautés humaines et préserver les écosystèmes qui entretiennent la vie;"
                </p>
                <p class="pt-4 w-fit text-left italic">
                    "Assurer l'équité sociale pour permettre le plein épanouissement de toutes les femmes et de tous les hommes, l’essor des communautés et le respect de la diversité;"
                </p>
                <p class="pt-4 w-fit text-left italic">
                    "Viser l'efficience économique pour créer une économie innovante et prospère, écologiquement et socialement responsable."
                </p>
                <p class="pt-4 w-fit text-left italic">
                    "(Développement Durable : Définition et Objectifs, 2023)"
                </p>
            </div>
        </div>

        <div class="flex flex-col justify-center">
        </div>

        <div class="flex-col p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-4">
                <SectionTitle dark=false>
                     "CDGE: 5 problèmes actuels de l'indsutrie?"
                </SectionTitle>
             </div>
            <div class="flex flex-row max-[1060px]:flex-col max-[1060px]:space-y-20 justify-center mt-16">
                <div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
                    <img src="/img/electricity-icon.png" class="transform mx-auto"/>
                    <h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
                        "Consommation d'énergie démesurée"
                    </h4>
                </div>
                <div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
                    <img src="/img/water-icon.png" class="transform mx-auto"/>
                    <h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
                    "Consommation d'eau démesurrée"
                    </h4>
                </div>
                <div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
                    <img src="/img/tree-icon.png" class="transform mx-auto"/>
                    <h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
                    "Impact environnemental majeur"
                    </h4>
                </div>
            </div>
            <div class="flex flex-row max-[1060px]:flex-col min-[1060px]:pt-16 max-[1060px]:space-y-20 max-[1060px]:mt-20 justify-center">
                <div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
                    <img src="/img/coin-icon.png" class="transform mx-auto"/>
                    <h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
                        "Coûts exorbitants"
                    </h4>
                </div>
                <div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
                    <img src="/img/group-icon.png" class="transform mx-auto"/>
                    <h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
                        "Impact social négatif"
                    </h4>
                </div>
           </div>
        </div>

        <div class="flex flex-col bg-zinc-200 justify-center p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-8">
                <SectionTitle dark=false>
                    "Consommation d'énergie démesurée"
                </SectionTitle>
            </div>
            <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mt-16 mr-72 ml-72 border-l-8 border-blue-400">
            <p class="text-justify p-4 mb=32">
               "On estime qu’en 2030, les technologies de l’information et de la communication, qui sont principalement basées sur l’utilisation de serveurs informatiques, pourraient dans le pire des cas consommer 51% l’électricité mondiale et, dans le meilleur des cas, 8% de l’électricité mondiale (Andrae & Edler, 2015; Jones, 2018). On estime que 50% de l’électricité consommée par les CDGE sert au refroidissement des serveurs (The Impact of Data Centers on The Environment, 2022). Cette consommation d’énergie est non seulement excessive, mais aussi hautement inefficiente. À titre illustratif, les résultats d’une simulation réalisée dans le cadre d’une étude chinoise réalisée en 2018 indiquaient que la charge cumulative annuelle de refroidissement d’un CD était beaucoup plus élevée que la charge cumulative annuelle de chaleur (Yu et al., 2019, p. 154). Le potentiel de réutilisation de la chaleur est donc énorme, de même que le gaspillage énergétique actuel."
            </p>
            </div>
            <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-16 mr-72 ml-72 border-r-8 border-blue-400">
            <p class="text-right p-4 mb=32">
               "L’énergie consommée par l’industrie des CD provient non seulement de l’exploitation des centres de données, mais aussi de leur construction. En effet, le déploiement de telles infrastructures nécessite des travaux d’envergure utilisant de grandes quantités d’énergies fossiles."
            </p>
            </div>
        </div>

        <div class="justify-center items-center flex h-[250px] bg-cover bg-center bg-opacity-90 bg-[url('/img/bg-water.jpg')]">
            <div class="p-16 w-full">
                <div class="h-fit w-full border-t-4 border-b-4 border-orange-400 p-8">
                    <SectionTitle dark=true>
                        "Consommation d'eau démesurée"
                    </SectionTitle>
                </div>
            </div>
        </div>
        <div class="h-fit p-4">
            <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-16 mr-72 ml-72 border-r-8 border-blue-400">
                <p class="text-right p-4 text-white">
                    "La consommation annuelle d’eau des centres de données est passée de 738.2 millions de litres en 2015 à près de 840 milliards de litres en 2021 (Holger, 2022), soit une augmentation de plus de 113 690% en 6 ans. Google révélait avoir utilisé à elle seule 16.28 milliards de litres d’eau en 2021 afin de refroidir et humidifier ses centres de données (Our Commitment to Climate-Conscious Data Center Cooling, 2022), ce qui équivaut à environ 6 400 piscines olympiques. Ces données sont préoccupantes, d’autant plus que la majorité de l’eau utilisée provient de sources potables."
                </p>
            </div>
        </div>

        <div class="flex flex-col bg-zinc-200 justify-center p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-8">

                <SectionTitle dark=false>
                    "Impact environnemental majeur"
                </SectionTitle>
            </div>
            <p class="text-justify mb-12 mt-8 ml-72 mr-72">
                "Quant aux émissions de gaz à effet de serre (GES) des géants du web, le tableau suivant résume la situation en 2021 pour Amazon, Microsoft, Alphabet et Meta. À titre indicatif, l’empreinte carbone per capita aux États-Unis est d’environ 16 tonnes métriques d’équivalent CO2 (tCO2e) et l’empreinte per capita à l’échelle planétaire est d’environ 4 tCO2e (What Is Your Carbon Footprint? | Carbon Footprint Calculator, n.d.)"
            </p>
            <p class="text-justify ml-72 mr-72">
                "Les géants du web, nommément AWS, Azure, GCP, et Meta, déploient leurs centres de données sur d’énormes pans de territoires. À titre illustratif, AWS possède plus de 125 CDGE couvrant plus de 26 000 pi2 (Zhang, 2022b), soit l’équivalent d’environ 454 terrains de football américain. Une telle utilisation du territoire porte nécessairement atteinte à la biodiversité."
            </p>
        </div>
        <div class="bg-zinc-200 pb-8">
        <h4 class="flex justify-center font-Lato text-blue-950 text-3xl font-extrabold">
            "Émissions totales de GES"
        </h4>
        <h4 class="flex pb-4 justify-center font-Lato text-blue-950 text-2xl font-bold">
            "d'Amazon, Microsoft, Alphabet et Meta"
        </h4>
        <div class="bg-zinc-200 grid grid-cols-4 grid-rows-3 gap-y-4 ml-[450px] mr-[450px]">
            <h4 class="flex fit-content items-center justify-center w-fit max-h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-xl font-bold">
                "Catégories d'émissions"
            </h4>
            <div class="flex fit-content border-b-4 border-r-2 border-black pb-4">
                <h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-2xl font-bold">
                    "Scope 1"
                </h4>
            </div>
            <div class="flex fit-content border-b-4 border-r-2 border-black pb-4">
                <h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-2xl font-bold">
                    "Scope 2"
                </h4>
            </div>
            <div class="flexfit-content border-b-4 border-black pb-4">
                <h4 class="flex items-center justify-center w-[142px] h-[68px]  rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-2xl font-bold">
                    "Scope 3"
                </h4>
            </div>
            <h4 class="flex fit-content items-center justify-center max-h-[68px] rounded-lg font-Lato bg-white mx-auto text-center w-fit p-4 text-blue-950 text-xl font-bold -translate-y-1">
                "Quantité (tCO2e)"
            </h4>
            <div class="flex fit-content border-r-2 pt-4 border-black -translate-y-5">
                <h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-xl font-bold">
                    "9 837 398"
                </h4>
            </div>
            <div class="flex fit-content border-r-2 pt-4 border-black -translate-y-5">
                <h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-xl font-bold">
                    "6 347 350"
                </h4>
            </div>
            <h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-xl font-bold">
                "74 566 000"
            </h4>
            <h4 class="flex items-center justify-center max-h-[68px] rounded-lg font-Lat bg-white mx-auto text-center p-4 text-blue-950 text-xl font-bold max-w-[175px] translate-y-1">
                "Quantité totale (tCO2e)"
            </h4>
            <div class="flex border-t-4 pt-4 border-black -translate-y-3">
                ""
            </div>
            <div class="flex fit-content border-t-4 pt-4 border-black -translate-y-3">
                <h4 class="flex items-center justify-center w-[300px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-2xl font-bold">
                    "90 750 748"
                </h4>
            </div>
            <div class="flex border-t-4 pt-4 border-black -translate-y-3">
                ""
            </div>
            </div>
        </div>

        <div class="flex flex-col justify-center p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-8">
                <SectionTitle dark=false>
                    "Coûts exorbitants"
                </SectionTitle>
            </div>
            <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mt-16 mr-72 ml-72 border-l-8 border-blue-400">
            <p class="text-justify p-4 mb=32">
               "Le coût de construction, d’exploitation et d’entretien d’un CDGE est extrêmement élevé. En effet, le coût de construction oscille entre $7 millions et $12 millions par mégawatt (MW) (Zhang, 2022a). Sachant que les centres de données de Google Cloud Platform (GCP) consomment en moyenne 20 MW, on parle d’un coût de construction entre $140 M et $240 M."
            </p>
        </div>

        <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-16 mr-72 ml-72 border-r-8 border-blue-400">
            <p class="text-right p-4 mb=32">
               "Or, la consommation électrique d’un CD en MW ne représente pas nécessairement sa capacité de stockage ou de traitement des données. En effet, leur consommation électrique est non seulement liée au fonctionnement des équipements informatiques, mais aussi en grande partie aux besoins de refroidissement et de distribution d'énergie. Cette consommation d’électricité augmente donc rapidement avec la taille des centres de données. "
            </p>
            </div>
        </div>

        <div class="flex flex-col justify-center p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-8">
                <SectionTitle dark=true>
                    "Impact social négatif"
                </SectionTitle>
            </div>
            <p class="text-justify mt-8 text-white ml-72 mr-72">
                "Les quatre problèmes ci-haut identifiés préoccupent de nombreuses personnes. Par exemple, dans les régions désertiques de l’Ouest américain où les big tech s’installent pour l’abondance d’énergie renouvelable, notamment l’énergie solaire, plusieurs communautés sont préoccupées par les quantités astronomiques d’eau consommées par les CDGE (Solon, 2021). En Arizona, où Apple a élu domicile pour un de ses CD, on indique que le niveau du principal réservoir d’eau de la région a atteint de bas niveaux historiques (James, 2021). La mairesse de Mesa, ville où se trouve le CD en question, se confiait à BBC News en 2021: "
            </p>
            <p class="text-right italic mt-8 text-white ml-[450px] mr-[450px]">
                "When it comes to economic development, I don’t think we are fully transparent about the water concerns [...] We want to keep the image that we are a great place to invest and start a business. But we don’t like to talk about the water."
            </p>
            <p class="text-right italic text-white ml-[450px] mr-[450px]">
                "(Solon, 2021)"
            </p>
            <p class="text-justify mt-8 text-white ml-72 mr-72">
                "Similairement, Microsoft s’est fait reprocher de manquer de transparence quant à son utilisation dans un de ces CD au Pays-Bas. L’entreprise avait indiqué qu’elle utiliserait de 12 M à 20 M de litres d’eau par an. Or, on découvrait qu’elle avait plutôt utilisé 84 M de litres d’eau en 2021, alors que des vagues de chaleur causaient d’importantes pénuries d’eau cette même année. Ce manque de transparence chronique est révélateur d’un profond problème de responsabilité sociale de ces grandes industries."
            </p>
            <p class="text-justify mt-8 text-white ml-72 mr-72">
                "Le manque de transparence touche non seulement la gestion environnementale des projets, mais aussi le fonctionnement desdits CD comme l’illustre le graphique ci-bas."
            </p>
            <h4 class="flex justify-center text-center mt-16 font-Lato text-white text-3xl font-extrabold ml-[450px] mr-[450px]">
                "Compréhension du public quant à l'utilisation des CD et la gestion de leurs données"
            </h4>
                <div class="flex justify-center items-center p-8">
                <img src="/img/graph-1.png"/>
                </div>
                <p class="text-justify mt-2 text-neutral-400 text-xs ml-72 mr-72">
                "Sources:"
            </p>
            <p class="text-justify mt-2 text-neutral-400 text-xs ml-72 mr-72">
                "https://www.statista.com/statistics/617136/digital-population-worldwide/?fbclid=IwAR0bHpZ0u4JbW1hW2QI5WqJKmFhsmwJBwmviNVnesn-6rNhnQQCkbYrT1OU"
            </p>
            <p class="text-justify mt-2 text-neutral-400 text-xs ml-72 mr-72">
                "https://www.pewresearch.org/internet/2019/11/15/americans-and-privacy-concerned-confused-and-feeling-lack-of-control-over-their-personal-information/?fbcli
    d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY"
            </p>
        </div>

        <div class="flex-col bg-zinc-200 p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-8">
                <SectionTitle dark=false>
                     "MCD: Une solution durable"
                </SectionTitle>
            </div>
            <div class="flex flex-row max-[1060px]:flex-col max-[1060px]:space-y-20 justify-center mt-16">
                <div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
                    <img src="/img/electricity-icon.png" class="transform mx-auto"/>
                    <h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
                        "Consommation d’énergie responsable et durable"
                    </h4>
                </div>
                <div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
                    <img src="/img/water-icon.png" class="transform mx-auto"/>
                    <h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">                                        "Consommation d’eau responsable et durable"
                    </h4>
                </div>
                <div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
                    <img src="/img/tree-icon.png" class="transform mx-auto"/>
                    <h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">                                        "Impact environnemental nul"
                    </h4>
                </div>
            </div>
            <div class="flex flex-row max-[1060px]:flex-col min-[1060px]:pt-16 max-[1060px]:space-y-20 max-[1060px]:mt-20 justify-center">
                <div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
                    <img src="/img/coin-icon.png" class="transform mx-auto"/>
                    <h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
                        "Faibles coûts"
                    </h4>
                </div>
                <div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
                    <img src="/img/group-icon.png" class="transform mx-auto"/>
                    <h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
                        "Impact social positif"
                    </h4>
                </div>
           </div>
        </div>

        <div class="justify-center items-center flex h-[250px] bg-cover bg-bottom bg-opacity-75 bg-[url('/img/solar-panel.jpg')]">
            <div class="p-16 w-full">
                <div class="h-fit w-full border-t-4 border-b-4 border-orange-400 p-4">
                    <div class="ml-72 mr-72">
                        <SectionTitle dark=false>
                            "Consommation d’énergie responsable et durable"
                        </SectionTitle>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mt-16 mr-72 ml-72 border-l-8 border-blue-400">
            <p class="text-left p-4 mb=32">
               "Les MCD, tels que ceux développés par NationTech, consomment une fraction de l’énergie d’un CDGE. La clé de cette augmentation de l’efficacité énergétique est la réutilisation de la chaleur. En effet, les CDGE refroidissent l’équipement informatique grâce à des systèmes de climatisation énergivores tandis que les MCD extraient la chaleur via un système d’aération ou de refroidissement liquide qui la distribue afin de combler les besoins en chauffage d’eau et d’air d’un immeuble donné. Ainsi, l’électricité normalement utilisée afin de faire chauffer une résistance dans un radiateur servira plutôt à faire chauffer des serveurs. Suivant un principe physique de base, les rejets thermiques étant pratiquement identiques."
            </p>
        </div>
        <div class="mt-8 mx-auto max-w-[425px]">
            <SectionTitle dark=false>
                "Rien ne se perd, Rien ne se crée, Tout se transforme"
            </SectionTitle>
             <p class="mt-2 text-right text-blue-950 font-sm">
                  "Antoine Lavoisier"
             </p>
         </div>
        <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-16 mt-16 mr-72 ml-72 border-r-8 border-blue-400">
            <p class="text-right p-4 mb=32">
               "Deux métriques sont ci-après utilisées afin de comparer l’efficacité énergétique des MCD par rapport à celle des CDGE: le power usage effectiveness (PUE) ainsi que le energy reuse factor (ERF). NationTech a créé une troisième métrique permettant de fusionner les deux première: le global power usage effectiveness (GPUE)."
            </p>
        </div>

        <div class="flex-col bg-zinc-200 p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-4">
                <SectionTitle dark=false>
                     "Power usage effectiveness (PUE)"
                </SectionTitle>
            </div>
            <div class="flex justify-center flex-col ml-72 mr-72">
                <p class="justify-center text-justify mt-8">
                    "Le PUE est le ratio entre l’énergie totale utilisée par un CD (ECD) et l’énergie utilisée par l’équipement informatique (EIT). Plus ce ratio s’approche de 1, plus l’utilisation de l’énergie est optimale. "
                </p>
                <p class="justify-center text-center italic p-16 font-extrabold text-5xl">
                    "PUE = ECD / EIT"
                </p>
                <p class="justify-center text-justify">
                    "L’ECD comprend l’énergie consommée par le système de distribution d’énergie, les blocs d’alimentation sans interruption (Uninterruptible Power Supply, UPS), les commutateurs réseaux (switch), les unités de distribution d'énergie électrique (PDUs), les générateurs, les systèmes de refroidissement, l'éclairage et tout autres systèmes de soutien."
                </p>
                <p class="justify-center text-justify mt-8">
                    "L’EIT comprend l’énergie consommée par les serveurs, les systèmes de stockage, l’équipement réseau, l’équipement de sécurité ainsi que les équipements d’alimentation électrique dédiés aux serveurs."
                </p>
                <h4 class="flex justify-center text-center mt-16 font-Lato text-blue-950 text-5xl font-extrabold">
                    "Power Usage Effectiveness (PUE)"
                </h4>
                <div class="flex justify-center items-center p-8">
                    <img src="/img/graph-2.png"/>
                </div>
                <p class="justify-center text-right ml-48 mr-48">
                    "*Voir section sur le GPUE"
                </p>
            </div>
        </div>

        <div class="flex-col p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-4">
                <SectionTitle dark=true>
                     "Energy reuse factor (ERF)"
                </SectionTitle>
            </div>
            <div class="flex justify-center flex-col ml-72 mr-72">
                <p class="text-white justify-center text-justify mt-8">
                    "L’ERF est le ratio entre l’énergie réutilisée (Ereuse), soit l’énergie réutilisée en-dehors d’un CD, et l’énergie totale utilisée par le CD. Plus ce ratio s’approche de 1, plus la réutilisation de l’énergie est optimale."
                </p>
                <p class="text-white justify-center text-center italic p-16 font-extrabold text-5xl">
                    "ERF = Ereuse / ECD"
                </p>
                <p class="text-white justify-center text-justify">
                    "L’ECD comprend l’énergie consommée par le système de distribution d’énergie, les blocs d’alimentation sans interruption (Uninterruptible Power Supply, UPS), les commutateurs réseaux (switch), les unités de distribution d'énergie électrique (PDUs), les générateurs, les systèmes de refroidissement, l'éclairage et tout autres systèmes de soutien."
                </p>
                <p class="text-white justify-center text-justify mt-8">
                    "L’Ereuse correspond donc à l’énergie thermique produite par l’équipement informatique et réutilisée afin de chauffer l’immeuble hébergeant l’infrastructure informatique ou les immeubles avoisinants. Un autre cas de figure possible serait la réutilisation de l’énergie thermique afin d’activer des turbines servant à générer de l’électricité."
                </p>
                <h4 class="flex justify-center text-center mt-16 font-Lato text-white text-5xl font-extrabold">
                    "Energy reuse factor (ERF)"
                </h4>
                <div class="flex justify-center items-center p-8">
                    <img src="/img/graph-3.png"/>
                </div>
            </div>
        </div>
        <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mt-16 mr-72 ml-72 border-l-8 border-blue-400">
            <p class="text-left p-4 mb=32">
               "Les MCD visent à réutiliser la majorité de l’énergie utilisée afin de faire fonctionner le CD. Les rejets thermiques de l’équipement informatiques, soit l’ensemble de l’énergie entrant dans le CD moins l’électricité utilisée pour les ventilateurs et le courant électrique passant dans la fibre optique, est réutilisée afin de chauffer un immeuble. Dans le cas des CDGE, aucune énergie n’est réutilisée. En effet, on refroidit plutôt les installations avec des systèmes de climatisation énergivores ou bien avec de l’eau qui, une fois chaude, donc chargée énergétiquement, est rejetée dans la nature sans être réutilisée."
            </p>
        </div>
        <div class="mb-8">
            <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mt-16 mr-72 ml-72 border-r-8 border-blue-400">
                <p class="text-right p-4">
                "Les géants de l’industrie ont quelques projets sur la table afin de réutiliser la chaleur de leurs serveurs. Cependant, pour le moment, c’est une part infime de leurs CD qui recyclent la chaleur produite. Azure indique pourtant que le potentiel est énorme:  selon les estimations de l’entreprise, il serait possible d’atteindre un ERF de 0.69 en hiver et 0.84 en été."
                </p>
            </div>
        </div>

        <div class="flex-col p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-4">
                <SectionTitle dark=true>
                     "Global power usage effectiveness (GPUE)"
                </SectionTitle>
            </div>
            <div class="flex justify-center flex-col ml-72 mr-72">
                <p class="text-white justify-center text-justify mt-8">
                    "Le GPUE est le ratio entre, d’une part, la différence entre ECD  et Ereuse et, d’autre part, le EIT. Plus cette valeur se rapproche de 0, plus l’efficacité énergétique de l’équipement informatique et/ou la récupération et la réutilisation de l’énergie sont optimales."
                </p>
                <p class="text-white justify-center text-center italic p-16 font-extrabold text-5xl">
                    "GPUE = (ECD - Ereuse) / EIT"
                </p>
                <p class="text-white justify-center text-justify mt-8">
                    "Le GPUE est donc similaire au PUE, mais il prend en compte le fait qu’une source d’énergie donnée (ECD ) peut avoir de multiples usages (EIT et Ereuse). Une part de l’énergie du CD étant réaffectée à l’immeuble hôte ou à un ou des immeubles voisins, on peut considérer que l’intrant énergétique du CD (ECD) est réduit par l’immeuble qui remplace sa source de chauffage par les pertes énergétiques découlant du CD."
                </p>
                <h4 class="flex justify-center text-center mt-16 font-Lato text-white text-5xl font-extrabold">
                    "Global Power Usage Effectiveness (GPUE)"
                </h4>
                <div class="flex justify-center items-center p-8">
                    <img src="/img/graph-4.png"/>
                </div>
            </div>
        </div>
        <div class="mb-8">
            <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mt-16 mr-72 ml-72 border-l-8 border-blue-400">
                <p class="text-left p-4">
                "Meta, Azure, Vantage, Equinix et AWS projettent toutes réutiliser l’énergie de leurs centres de données afin d’atteindre la carboneutralité d’ici 2030. À l’exception de Vantage, elles ont toutes implémenter des projets de réutilisation de la chaleur produite par l’équipement informatique de leurs centres de données. Aucune information n’a été trouvée quant à l’intention de Google d’implémenter de tels projets. Voici un bref résumé de ces initiatives."
                </p>
            </div>
        </div>

        <div class="flex flex-col">
            <div class="flex flex-row">
                <div class="flex w-1/2 justify-center items-center p-8">
                    <img src="/img/Facebook-logo.jpg" class="mx-auto mt-8 mb-8 rounded-lg w-1/2"/>
                </div>
                <div class="flex justify-center center w-1/2 bg-zinc-200">
                    <div class="my-auto">
                        <p class="mx-auto mr-32 ml-32 text-justify">
                            "Meta réutilise la chaleur du CD de sa filière Facebook dans la ville d’Odense au Danemark depuis 2019. Selon l’entreprise, l’objectif est de réutiliser 100 000 MWh d’énergie annuellement, ce qui représente une quantité d’énergie suffisante afin de chauffer 6 900 foyers. La chaleur est actuellement distribuée gratuitement à l’hôpital local ainsi qu’à des milliers d’autres immeubles des environs."
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex flex-row">
                <div class="flex w-1/2 justify-center items-center p-8">
                    <img src="/img/Microsoft-logo.jpg" class="h-[231.23px] mx-auto mt-8 mb-8 rounded-lg w-1/2"/>
                </div>
                <div class="flex justify-center center w-1/2 bg-zinc-200">
                    <div class="my-auto">
                        <p class="mx-auto mr-32 ml-32 text-justify">
                            "Azure, en partenariat avec l’entreprise d’État finlandaise Fortum, annonçait en mars 2022 qu’elle réutilisera la chaleur de ses deux nouveaux CD d’Helsinki afin de chauffer environ 100 000 immeubles résidentiels et commerciaux dans la capitale."
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex flex-row">
                <div class="flex w-1/2 justify-center items-center p-8">
                    <div class="flex h-[231.23px] w-[368px] bg-white rounded-lg">
                        <img src="/img/Vantage-logo.png" class="mx-auto mt-8 mb-8 h-3/4 w-3/4"/>
                    </div>
                </div>
                <div class="flex justify-center center w-1/2 bg-zinc-200">
                    <div class="my-auto">
                        <p class="mx-auto mr-32 ml-32 text-justify">
                            "Vantage quant à elle n’a encore implémenter aucun projet de réutilisation de la chaleur produite par ses CD. Cependant, on apprenait en septembre 2022 qu’elle comptait mettre en oeuvre un tel projet à Zurich en Suisse."
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex flex-row">
                <div class="flex w-1/2 justify-center items-center p-8">
                    <img src="/img/Equinix-logo.jpg" class="h-[231.23px] mx-auto mt-8 mb-8 rounded-lg w-1/2"/>
                </div>
                <div class="flex justify-center center w-1/2 bg-zinc-200">
                    <div class="my-auto">
                        <p class="mx-auto mr-32 ml-32 text-justify">
                            "Equinix, en partenariat avec Helen, une grande entreprise d’énergie finlandaise, réutilise elle aussi la chaleur de son CD de Helsinki. Elle alimente de nombreux foyers de la ville en énergie thermique depuis 2010. Elle lançait un projet similaire à Dublin en mai 2022."
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex flex-row">
                <div class="flex w-1/2 justify-center items-center p-8">
                    <img src="/img/Amazon-logo.jpg" class="h-[231.23px] mx-auto mt-8 mb-8 rounded-lg w-1/2"/>
                </div>
                <div class="flex justify-center center w-1/2 bg-zinc-200">
                    <div class="my-auto">
                        <p class="mx-auto mr-32 ml-32 text-justify">
                            "AWS utilise l’énergie d’un CD appartenant à Westin Building Exchange de Seattle afin de chauffer son siège social, la Doppler tower. L’entreprise compte ainsi réutiliser approximativement 80 000 MWh d’énergie en 25 ans. À Dublin, l’entreprise réutilise la chaleur de son CD de Tallaght, dans Dublin Sud, afin de chauffer des immeubles du secteur public ainsi que des immeubles résidentiels et commerciaux."
                        </p>
                    </div>
                </div>
            </div>
          </div>

          <div class="flex flex-col justify-center p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-8">
                <SectionTitle dark=false>
                    "Consommation d'eau responsable et durable"
                </SectionTitle>
            </div>
            <div class="flex flex-col justify-center pt-4 pb-4 mb-8 pl-2 mt-16 mr-72 ml-72 border-l-8 border-blue-400">
                <p class="text-justify p-4 mb=32">
                    "Les MCD tels que développés par NationTech ne consomment pas d’eau. En effet, l’entreprise offre deux options afin de distribuer la chaleur dans les immeubles qu’elle chauffe: soit un système de ventilation conventionnel distribuant la chaleur des serveurs grâce à des ventilateurs, soit un système de refroidissement liquide qui absorbe la chaleur produite pour la redistribuer dans l’immeuble."
                </p>
            </div>
        </div>

        <div class="flex-col bg-zinc-200 p-8">
            <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-4">
                <SectionTitle dark=false>
                     "Water usage effectiveness (WUE)"
                </SectionTitle>
            </div>
            <div class="flex justify-center flex-col ml-72 mr-72">
                <p class="justify-center text-justify mt-8">
                    "La métrique utilisée afin d’évaluer l’efficacité de la consommation d’eau d’un DC est le water usage effectiveness (WUE). Cette métrique correspond au ratio entre la quantité annuelle d’eau utilisée (Qeau) par un DC donné et l’énergie consommée par l’équipement informatique qu’il contient (EIT) (Patterson, 2011, p. 4). La métrique s’exprime donc en L/kWh, c’est-à-dire la quantité d’eau qui est utilisée pour chaque unité d’énergie utilisée par le DC. Plus le ratio est faible, plus la consommation d’eau est faible, ce qui est généralement positif."
                </p>
                <p class="justify-center text-center italic p-16 font-extrabold text-5xl">
                    "WUE = Qeau / EIT"
                </p>
            </div>
        </div>

        <div class="flex-col p-8">
            <div class="flex justify-center flex-col ml-72 mr-72">
                <p class="justify-center text-justify mt-8">                                     "La figure suivante présente le WUE moyen des entreprise Meta, Google, Microsoft, Vantage, Equinix et Amazon pour leur CDGE ainsi que le WUE de NationTech dans ses MCD."
                </p>
                <p class="justify-center text-justify mt-8">
                    "Il appert donc clairement que les MCD permettent une consommation beaucoup plus responsable de l’eau que les CDGE. NationTech envisage éventuellement utiliser des systèmes de refroidissement par immersion utilisant des liquides non-conducteurs dans lesquels l’infrastructure informatique est immergée. Ce liquide est réutilisé, ce qui est très avantageux par rapport aux grandes compagnies qui peinent à réutiliser l’eau de leurs CD ou qui dépensent des sommes astronomiques en R&D afin de régler ce problème. En effet, ces compagnies tentent de réduire leur WUE. Microsoft, Google et Facebook annonçaient en 2020 vouloir devenir « water positive » en 2030 (Schupak, 2021), c’est-à-dire qu’elles veulent conserver plus d’eau qu’elles n’en consomment."
                </p>
                <p class="justify-center text-justify mt-8">                                     "Pour NationTech, il est clair qu’en réduisant la taille des installations des CD et en les rendant utiles auprès des ménages et entreprises nécessitant l’énergie thermique qu’ils produisent, non seulement l’utilisation d’eau n’est pas nécessaire, mais les économies sont énormes en frais d’infrastructures de récupération de l’eau et de R&D."
                </p>
                <p class="justify-center text-justify mt-8">
                    "La figure suivante présente le WUE moyen des entreprise Meta, Google, Microsoft, Vantage, Equinix et Amazon pour leur CDGE ainsi que le WUE de NationTech dans ses MCD."
                </p>
                <h4 class="flex justify-center text-center mt-16 font-Lato text-5xl font-extrabold">
                    "Water Usage Effectiveness (WUE)"
                </h4>
                <div class="flex justify-center items-center p-8">
                    <img src="/img/graph-5.png" class="mt-8 mb-8 scale-125"/>
                </div>
            </div>
        </div>

        <div class="flex flex-col p-8 ">
            <div class="pt-16 w-full">
                <div class="h-fit w-full border-t-4 border-b-4 border-orange-400 p-8">
                    <SectionTitle dark=true>
                        "Impact environnemental nul"
                    </SectionTitle>
                </div>
            </div>
        </div>
        <div class="h-fit p-4">
            <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-4 mr-72 ml-72 border-r-8 border-blue-400">
                <p class="text-right p-4 text-white">
                    "Comme l’illustre le schéma ci-contre décrivant le fonctionnement des MCD de NationTech, l’installation de l'infrastructure informatique ne requiert aucune déforestation ou utilisation supplémentaire de territoire. En effet, les MCD de NationTech sont intégrés aux immeubles déjà existants, contrairement aux grandes entreprises technologiques qui acquièrent d’énormes terrains afin de construire les gigantesques usines qui serviront à héberger leurs serveurs. De plus, NationTech peut aussi bien intégrer ses MCD à l’intérieur qu’à l’extérieur des immeubles bénéficiant de la récupération de l’énergie thermique, ce qui rend cette technologie facile à intégrer n’importe où, peu importe le type d’immeuble visé."
                </p>
            </div>
            <div class="flex flex-row">
                <div class="flex flex-row p-12">
                    <img src="/img/house-1.png"/>
                    <div class="ml-8 flex flex-col">
                        <p class="mb-4 text-white font-extrabold text-4xl text-left">
                            "Température froide"
                        </p>
                        <div class="mb-4 flex flex-row">
                            <div class="flex items-center">
                                <p class="mr-12 text-left font-extrabold text-4xl text-white">
                                    "1"
                                </p>
                            </div>
                            <p class="text-justify text-white">
                                "L’air froid est majoritairement extrait dans la maison afin de refroidir les serveurs."
                            </p>
                        </div>
                        <div class="mb-4 flex flex-row">
                            <div class="flex items-center">
                                <p class="mr-12 text-left font-extrabold text-4xl text-white">
                                    "2"
                                </p>
                            </div>
                            <p class="text-justify text-white">
                                "Les trappes d’air connectant le micro centre de données à l’extérieur de la maison sont fermées pour éliminer la perte d’énergie."
                            </p>
                        </div>
                        <div class="mb-4 flex flex-row">
                            <div class="flex items-center">
                                <p class="mr-12 text-left font-extrabold text-4xl text-white">
                                    "3"
                                </p>
                            </div>
                            <p class="text-justify text-white">
                                "L’air chaud généré par les serveurs est réaffecté en chaleur dans la maison en utilisant la ventilation existante."
                            </p>
                        </div>
                        <div class="flex flex-row">
                            <div class="flex items-center">
                                <p class="mr-12 text-left font-extrabold text-4xl text-white">
                                    "4"
                                </p>
                            </div>
                            <p class="text-justify text-white">
                                "Cet air est utilisé pour chauffer la maison afin d’atteindre la température cible."
                            </p>
                        </div>
                    </div>

                </div>
                <div class="flex flex-row p-16">
                    <img src="/img/house-2.png" class="mr-4"/>
                    <div class="flex flex-col">
                        <p class="mb-4 text-white font-extrabold text-4xl text-left">
                            "Température chaude"
                        </p>
                        <div class="mb-4 flex flex-row">
                            <div class="flex items-center">
                                <p class="mr-12 text-left font-extrabold text-4xl text-white">
                                    "1"
                                </p>
                            </div>
                            <p class="text-justify text-white">
                                "L’air froid est majoritairement extrait à l’extérieur de la maison afin de refroidir les serveurs."
                            </p>
                        </div>
                        <div class="mb-4 flex flex-row">
                            <div class="flex items-center">
                                <p class="mr-12 text-left font-extrabold text-4xl text-white">
                                    "2"
                                </p>
                            </div>
                            <p class="text-justify text-white">
                                "Les trappes d’air connectant la pièce des serveurs à l’intérieur de la maison sont fermées afin d’atteindre la température cible."
                            </p>
                        </div>
                        <div class="mb-4 flex flex-row">
                            <div class="flex items-center">
                                <p class="mr-12 text-left font-extrabold text-4xl text-white">
                                    "3"
                                </p>
                            </div>
                            <p class="text-justify text-white">
                                "L’air chaud généré par les serveurs est réaffecté en chaleur à l’extérieur de la maison en utilisant la ventilation existante."
                            </p>
                        </div>
                        <div class="flex flex-row">
                            <div class="flex items-center">
                                <p class="mr-12 text-left font-extrabold text-4xl text-white">
                                    "4"
                                </p>
                            </div>
                            <p class="text-justify text-white">
                                "Cet air est redirigé vers une autre infrastructure comme une piscine afin de la chauffer."
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>











    </div>
    }
}
