wip

src/routes/whymdc/components.rs

@@ -1,21 +1,35 @@
 use leptos::*;
 
 #[component]
-pub fn Subtitle(cx: Scope, children: Children) -> impl IntoView {
+pub fn Subtitle(cx: Scope, class: &'static str, children: Children) -> impl IntoView {
+    let class = format!("text-3xl font-bold text-white {}", class);
     view! { cx, 
-        <h3 class="text-3xl font-bold text-white">{children(cx)}</h3>
+        <h3 class={class}>{children(cx)}</h3>
     }
 }
 
 #[component]
 pub fn SectionTitle(cx: Scope, dark: bool, children: Children) -> impl IntoView {
-    let mut textColorClass = "text-indigo-950";
+    let mut textColorClass = "text-blue-950";
     if dark {
         textColorClass = "text-white";
     }
-    let class = format!("text-5xl font-bold {}", textColorClass);
+    let class = format!("text-5xl font-bold text-center {}", textColorClass);
     view! { cx, 
         <h2 class={class}>{children(cx)}</h2>
     }
 }
 
+#[component]
+pub fn SubsectionTitle(cx: Scope, dark: bool, children: Children) -> impl IntoView {
+    let mut textColorClass = "text-blue-950";
+    if dark {
+        textColorClass = "text-white";
+    }
+    let class = format!("text-3xl font-bold {}", textColorClass);
+    view! { cx, 
+        <h5 class={class}>{children(cx)}</h5>
+    }
+}
+
+

src/routes/whymdc/page.rs

@@ -5,28 +5,97 @@ use leptos::*;
 pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
     view! { cx,
         <div class="max-w-[1600px] mx-auto">
-            <div class="relative min-h-[700px] p-28 bg-cover bg-[url('/img/bg-page1.png')]">
-            <div class="absolute flex justify-center items-center bottom-2">
-                <img src="/img/NationTech-logo.png" class="opacity-50 w-1/2"/>
-            </div>
-                <h1 class="text-orange-400 text-7xl font-extrabold mb-14">"Micro centres de données"</h1>
-                <Subtitle>
-                    <span class="max-w-lg inline-block pb-2">"Pourquoi les centres de données grande échelle sont-ils voués à disparaître?"</span>
+            <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">
-            <div class="flex-grow p-8 max-w-auto overflow-auto min-h-0">
-            <SectionTitle dark=false>"Énergie: le nerf de la guerre"</SectionTitle>
-                <p class="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="mb-10">
+        
+        <div class="flex-col p-8">
+            <div class="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="font-bold">
+                <p class="text-right font-bold">
                     "L’impact global sera calculé en fonction des 5 métriques présentées ci-dessous."                
                 </p>
             </div>
-            <img src="/img/light_bulb.png" class="max-h-[450px] h-auto hidden md:block"/>
         </div>
-     </div>
+
+        <div class="flex bg-zinc-200 flex-col min-h-[450px] max-w-row-page3:flex-row justify-center items-center"> 
+            <div class="shrink-0 p-4 xl:p-8 2xl:p-12 mt-8 mb-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 whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">"Consommation
+d'énergie"</h4>
+                </div>
+            </div>
+            <div class="shrink-0 p-4 xl:p-8 2xl:p-12 mt-8 mb-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 whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">"Consommation
+d'eau"</h4>
+                </div>
+            </div>
+            <div class="shrink-0 p-4 xl:p-8 2xl:p-12 mt-8 mb-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 whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">"Impact
+environnemental"</h4>
+                </div>
+            </div>
+            <div class="shrink-0 p-4 xl:p-8 2xl:p-12 mt-8 mb-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 whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">"Impact
+économique"</h4>
+                </div>
+            </div>
+            <div class="shrink-0 p-4 xl:p-8 2xl:p-12 mt-8 mb-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 whitespace-pre-wrap 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-[280px] bg-cover bg-center opacity-75 bg-[url('/img/server-wires-page3.png')]">    
+            <div class="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 class="flex flex-col bg-blue-950">
+            <div class="flex-col mr-72 ml-72">
+                <SubsectionTitle dark=true>
+                    "Micro centres de données (MCD)"
+                </SubsectionTitle>
+                <p class="text-right 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>
     }
 }

src/style/main.css

@@ -14,3 +14,20 @@
   font-family: "Nunito";
   src: url("/fonts/Nunito-VariableFont_wght.ttf");
 }
+
+@font-face {
+  font-family: "Lato";
+  src: url("/fonts/Lato-VariableFont_wght.ttf");
+}
+
+.p-18 {
+  padding:4.5rem;
+}
+
+.border-3 {
+  border:3px;
+}
+
+
+
+

tailwind.config.js

@@ -9,4 +9,16 @@ module.exports = {
     },
   },
   plugins: [],
+
+  theme: {
+    extend: {
+      screens: {
+        'max-w-row-page3': '1342px',
+      },
+    },
+  },
+
+  padding: {
+    '18': '4.5rem',
+  },
 }