Whitepaper is flying, tailwind added, routing setup done, components for whitepaper. go to /why-micro-datacenters

Cargo.toml

@@ -42,7 +42,7 @@ site-root = "target/site"
 # Defaults to pkg	
 site-pkg-dir = "pkg"
 # [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
-style-file = "style/main.scss"
+style-file = "target/style/main.css"
 # Assets source dir. All files found here will be copied and synchronized to site-root.
 # The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
 #

src/app.rs

@@ -1,3 +1,5 @@
+use crate::routes::whymdc::page::WhyMicroDatacentersProps;
+use crate::routes::whymdc::page::WhyMicroDatacenters;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
@@ -22,6 +24,7 @@ pub fn App(cx: Scope) -> impl IntoView {
             <main>
                 <Routes>
                     <Route path="" view=|cx| view! { cx, <HomePage/> }/>
+                    <Route path="/why-micro-datacenters" view=|cx| view! { cx, <WhyMicroDatacenters/> }/>
                 </Routes>
             </main>
         </Router>
@@ -36,7 +39,7 @@ fn HomePage(cx: Scope) -> impl IntoView {
     let on_click = move |_| set_count.update(|count| *count += 1);
 
     view! { cx,
-        <h1>"Welcome to Leptos!"</h1>
+        <h1 class="text-9xl">"Welcome to Nationtech.io!"</h1>
         <button on:click=on_click>"Click Me: " {count}</button>
     }
 }

src/lib.rs

@@ -1,4 +1,5 @@
 pub mod app;
+mod routes;
 use cfg_if::cfg_if;
 
 cfg_if! {

src/routes/mod.rs

@@ -0,0 +1 @@
+pub mod whymdc;

src/routes/whymdc/components.rs

@@ -0,0 +1,8 @@
+use leptos::*;
+
+#[component]
+pub fn Subtitle(cx: Scope, children: Children) -> impl IntoView {
+    view! { cx, 
+        <h3 class="text-3xl font-bold text-white">{children(cx)}</h3>
+    }
+}

src/routes/whymdc/mod.rs

@@ -0,0 +1,2 @@
+pub mod page;
+pub mod components;

src/routes/whymdc/page.rs

@@ -0,0 +1,14 @@
+use super::components::*;
+use leptos::*;
+
+#[component]
+pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <div class="min-h-[500px] p-8 bg-cover bg-[url('/img/edge-cloud-1024x576.png')]">
+            <h1 class="text-orange-400 text-7xl font-extrabold mb-6">"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>
+            </Subtitle>
+        </div>
+    }
+}

src/style/main.css

@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+/* TODO look into font file type, woff2 seems better */
+@font-face {
+  font-family: "Nunito";
+  src: url("/fonts/Nunito-Italic-VariableFont_wght.ttf");
+  font-style: "italic";
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("/fonts/Nunito-VariableFont_wght.ttf");
+}

style/main.scss

@@ -1,4 +0,0 @@
-body {
-	font-family: sans-serif;
-	text-align: center;
-}

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.rs"],
+  theme: {
+    extend: {
+      fontFamily: {
+        'sans': ['Nunito', 'ui-sans-serif', 'system-ui'],
+      },
+    },
+  },
+  plugins: [],
+}