feat: Adds grid / nav links to home page.

Sources/ViewController/HomePage.swift

@@ -0,0 +1,73 @@
+import Elementary
+import ElementaryHTMX
+import Routes
+import Styleguide
+
+struct HomePage: HTML, Sendable {
+
+  var content: some HTML {
+    div(.class("grid grid-cols-2 gap-4 justify-items-start")) {
+      group(
+        label: "Mold Risk",
+        description: MoldRisk.description,
+        svg: .thermometer,
+        route: .moldRisk(.index)
+      )
+      group(
+        label: "Dehumdifier Sizing",
+        description: DehumidifierSize.description,
+        svg: .droplets,
+        route: .dehumidifierSize(.index)
+      )
+      group(
+        label: "Attic Ventilation",
+        description: AtticVentilation.description,
+        svg: .wind,
+        route: .atticVentilation(.index)
+      )
+      group(
+        label: "HVAC System Performance",
+        description: HVACSystemPerformance.description,
+        svg: .thermometerSun,
+        route: .hvacSystemPerformance(.index)
+      )
+      group(
+        label: "Room Pressure",
+        description: RoomPressure.description,
+        svg: .leftRightArrow,
+        route: .roomPressure(.index)
+      )
+      group(
+        label: "Capacitor Calculator",
+        description: Capacitor.description,
+        svg: .zap,
+        route: .capacitor(.index)
+      )
+    }
+  }
+
+  private func group(
+    label: String,
+    description: String,
+    svg: SVGType,
+    route: SiteRoute.View
+  ) -> some HTML {
+    button(
+      .hx.get(route: route),
+      .hx.target("#content"),
+      .class("""
+      w-full rounded-xl shadow-lg border border-blue-600 justify-items-start
+      hover:bg-blue-600 hover:border-yellow-300 hover:text-yellow-300 transition-colors
+      """)
+    ) {
+      div(.class("p-4 content-start")) {
+        div(.class("flex mb-6")) {
+          SVG(svg, color: .blue)
+            .attributes(.class("pe-2"))
+          h2(.class("font-bold text-2xl")) { label }
+        }
+        p { description }
+      }
+    }
+  }
+}

Sources/ViewController/Live.swift

@@ -53,26 +53,21 @@ extension ViewController: DependencyKey {
         return MainPage {
           div(.class("space-y-6")) {
             div(.class("pb-8")) {
-              p(.class("dark:text-gray-200")) {
-                "Professional calculators for HVAC system design and troubleshooting."
+              h1(.class("font-extrabold text-4xl dark:text-gray-200")) {
+                "Professional Calculators"
+              }
+              p(.class("text-blue-500 font-bold")) {
+                """
+                Professional calculators for HVAC system design and troublshooting.
+                """
               }
             }
 
             WarningBox(
-              "This site is still under construction, not all it's functionality is working.",
-              "This page needs updated to display a grid of calculators.",
-              "Below are the SVG's used on the site, for making sure they work."
+              "This site is still under construction, not all it's functionality is working."
             )
-            div {
-              p(.class("font-2xl dark:text-gray-200 pb-6")) {
-                "SVG's"
-              }
-              div(.class("grid lg:grid-cols-8 gap-4")) {
-                for svg in SVGType.allCases {
-                  SVG(svg, color: .blue)
-                }
-              }
-            }
+
+            HomePage()
           }
         }
 

Sources/ViewController/MainPage.swift

@@ -59,17 +59,17 @@ private struct Header: HTML {
             .attributes(.class("group-hover:text-blue-600"))
         }
       }
-      nav(.class("flex flex-row gap-2 p-2 mt-2")) {
-        // TODO: Add class active, to button that is the active route.
-        ul(.class("flex flex-wrap gap-x-2 lg:gap-x-5 \(text: .yellow) font-bold")) {
-          navLink(label: "Mold-Risk", route: .moldRisk(.index))
-          navLink(label: "Dehumidifier-Sizing", route: .dehumidifierSize(.index))
-          navLink(label: "HVAC-System-Performance", route: .hvacSystemPerformance(.index))
-          navLink(label: "Room-Pressure", route: .roomPressure(.index))
-          navLink(label: "Capcitor-Calculator", route: .capacitor(.index))
-          navLink(label: "Attic-Ventilation", route: .atticVentilation(.index))
-        }
-      }
+      // nav(.class("flex flex-row gap-2 p-2 mt-2")) {
+      //   // TODO: Add class active, to button that is the active route.
+      //   ul(.class("flex flex-wrap gap-x-2 lg:gap-x-5 \(text: .yellow) font-bold")) {
+      //     navLink(label: "Mold-Risk", route: .moldRisk(.index))
+      //     navLink(label: "Dehumidifier-Sizing", route: .dehumidifierSize(.index))
+      //     navLink(label: "HVAC-System-Performance", route: .hvacSystemPerformance(.index))
+      //     navLink(label: "Room-Pressure", route: .roomPressure(.index))
+      //     navLink(label: "Capcitor-Calculator", route: .capacitor(.index))
+      //     navLink(label: "Attic-Ventilation", route: .atticVentilation(.index))
+      //   }
+      // }
     }
   }