add isFeatured flag to TwinModelCard for featured model selection for LUX application area pages

site/src/jsMain/kotlin/com/zenmo/web/zenmo/domains/lux/components/layout/LuxEnergyLayout.kt

@@ -2,31 +2,18 @@ package com.zenmo.web.zenmo.domains.lux.components.layout
 
 import androidx.compose.runtime.Composable
 import com.zenmo.web.zenmo.components.layouts.PageLayout
-import com.zenmo.web.zenmo.domains.lux.sections.application_fields.FieldModels
-import com.zenmo.web.zenmo.domains.lux.sections.application_fields.LuxApplicationArea
-import com.zenmo.web.zenmo.domains.lux.sections.application_fields.components.ApplicationAreaContactPerson
 import com.zenmo.web.zenmo.domains.lux.sections.nav_header.LuxHeader
-import kotlinx.browser.window
 
 
 @Composable
 fun LuxEnergyLayout(
     content: @Composable () -> Unit
 ) {
-    val currentApplicationArea = LuxApplicationArea.entries
-        .firstOrNull { it.path == window.location.pathname }
-
     PageLayout(
         header = { LuxHeader() },
         footer = {},
         title = ""
     ) {
         content()
-        if (currentApplicationArea != null) {
-            FieldModels(
-                applicationArea = currentApplicationArea
-            )
-            ApplicationAreaContactPerson(currentApplicationArea.contactPerson)
-        }
     }
 }

site/src/jsMain/kotlin/com/zenmo/web/zenmo/domains/lux/sections/application_fields/FieldModels.kt

@@ -2,41 +2,89 @@ package com.zenmo.web.zenmo.domains.lux.sections.application_fields
 
 import androidx.compose.runtime.Composable
 import com.varabyte.kobweb.compose.foundation.layout.Arrangement
+import com.varabyte.kobweb.compose.foundation.layout.Column
+import com.varabyte.kobweb.compose.foundation.layout.Row
 import com.varabyte.kobweb.compose.ui.Alignment
 import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.graphics.Colors
 import com.varabyte.kobweb.compose.ui.modifiers.background
+import com.varabyte.kobweb.compose.ui.modifiers.color
+import com.varabyte.kobweb.compose.ui.modifiers.gap
+import com.varabyte.kobweb.compose.ui.modifiers.padding
+import com.varabyte.kobweb.silk.components.icons.mdi.MdiArrowForward
+import com.varabyte.kobweb.silk.components.navigation.Link
+import com.varabyte.kobweb.silk.components.navigation.UncoloredLinkVariant
+import com.varabyte.kobweb.silk.components.navigation.UndecoratedLinkVariant
 import com.varabyte.kobweb.silk.style.toModifier
-import com.zenmo.web.zenmo.components.widgets.SectionContainer
-import com.zenmo.web.zenmo.domains.lux.core.model.subdomain.subdomainModels
-import com.zenmo.web.zenmo.domains.lux.core.toTwinModelCardItem
-import com.zenmo.web.zenmo.domains.lux.sections.LuxSectionContainerStyleVariant
+import com.zenmo.web.zenmo.components.widgets.LangText
+import com.zenmo.web.zenmo.domains.lux.components.LuxSectionContainer
+import com.zenmo.web.zenmo.domains.lux.core.TwinModelCardItem
+import com.zenmo.web.zenmo.domains.lux.sections.nav_header.luxModelsMenuItem
 import com.zenmo.web.zenmo.domains.lux.styles.TopDividerLineStyle
+import com.zenmo.web.zenmo.domains.lux.styles.verticalLinearBackground
 import com.zenmo.web.zenmo.domains.lux.widgets.TwinModelsGrid
 import com.zenmo.web.zenmo.domains.lux.widgets.headings.HeaderText
 import com.zenmo.web.zenmo.theme.SitePalette
+import com.zenmo.web.zenmo.theme.styles.luxBorderRadius
+import org.jetbrains.compose.web.css.px
+import org.jetbrains.compose.web.dom.P
 
 
 @Composable
 fun FieldModels(
-    applicationArea: ApplicationArea
+    featuredModels: List<TwinModelCardItem>,
+    showMoreModelsLink: Boolean,
 ) {
-    SectionContainer(
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center,
+    LuxSectionContainer(
         modifier =
             Modifier
                 .then(TopDividerLineStyle.toModifier())
                 .background(SitePalette.light.overlay),
-        variant = LuxSectionContainerStyleVariant
     ) {
-        HeaderText(
-            enText = "Models",
-            nlText = "Modellen",
-        )
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            HeaderText(
+                enText = "Example Models",
+                nlText = "Voorbeeldmodellen",
+            )
+            if (showMoreModelsLink) {
+                P {
+                    LangText(
+                        en = "Explore more real-world examples and detailed simulations.",
+                        nl = "Ontdek meer praktijkvoorbeelden en gedetailleerde simulaties."
+                    )
+                }
+                BrowseAllModelsLink()
+            }
+        }
         TwinModelsGrid(
-            models = subdomainModels
-                .map { it.toTwinModelCardItem() }
-                .filter { it.applicationArea == applicationArea },
+            models = featuredModels,
         )
     }
+}
+
+@Composable
+private fun BrowseAllModelsLink() {
+    Link(
+        path = luxModelsMenuItem.route.path,
+        variant = UncoloredLinkVariant.then(UndecoratedLinkVariant),
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .verticalLinearBackground()
+                .padding(8.px, 16.px)
+                .gap(8.px)
+                .color(Colors.White)
+                .luxBorderRadius()
+        ) {
+            LangText(
+                en = "Browse all models",
+                nl = "Bekijk alle modellen"
+            )
+            MdiArrowForward()
+        }
+    }
 }

site/src/jsMain/kotlin/com/zenmo/web/zenmo/domains/lux/sections/application_fields/LuxApplicationArea.kt

@@ -9,11 +9,9 @@ import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_company.L
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_enegy_hub.LuxEnergyHub
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_region.LuxRegion
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_res_area.LuxNeighbourhood
-import com.zenmo.web.zenmo.domains.zenmo.sections.team.ZenmoTeam
 
 enum class LuxApplicationArea(
     val shortDescription: LocalizedText,
-    val contactPerson: ZenmoTeam,
     override val label: LocalizedText,
     override val areaTitle: LocalizedText = label,
     override val path: String = label.en.asNavLinkPath("application-areas"),
@@ -22,7 +20,6 @@ enum class LuxApplicationArea(
 ) : Route, SimpleMenuItem, ApplicationArea {
     LUX_BUSINESS(
         label = LocalizedText("LUX Bedrijf", "LUX Business"),
-        contactPerson = ZenmoTeam.PETER_HOGEVEEN,
         shortDescription = LocalizedText(
             "Inzicht in batterijwaarde en energieflexibiliteit",
             "Insight into battery value and energy flexibility",
@@ -31,7 +28,6 @@ enum class LuxApplicationArea(
     ),
     LUX_ENERGY_HUB(
         label = LocalizedText("LUX Energie Hub", "LUX Energy Hub"),
-        contactPerson = ZenmoTeam.AUKE,
         shortDescription = LocalizedText(
             "Lokale energie- en netcongestie-analyse",
             "Local energy and grid congestion analysis",
@@ -40,7 +36,6 @@ enum class LuxApplicationArea(
     ),
     LUX_NEIGHBOURHOOD(
         label = LocalizedText("LUX Woonwijk", "LUX Neighbourhood"),
-        contactPerson = ZenmoTeam.PETER_HOGEVEEN,
         shortDescription = LocalizedText(
             "Energie- en netanalyse voor woonwijken",
             "Energy and grid analysis for residential neighbourhoods",
@@ -49,7 +44,6 @@ enum class LuxApplicationArea(
     ),
     LUX_REGION(
         label = LocalizedText("LUX Regio", "LUX Region"),
-        contactPerson = ZenmoTeam.NAUD_LOOMANS,
         shortDescription = LocalizedText(
             "Regionale energie- en congestiescenario’s",
             "Regional energy and congestion scenarios",

site/src/jsMain/kotlin/com/zenmo/web/zenmo/domains/lux/sections/application_fields/lux_company/LuxCompany.kt

@@ -4,7 +4,13 @@ import androidx.compose.runtime.Composable
 import com.varabyte.kobweb.compose.foundation.layout.Column
 import com.varabyte.kobweb.compose.ui.Modifier
 import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth
+import com.zenmo.web.zenmo.domains.lux.core.model.subdomain.PrivateSubdomainModel
+import com.zenmo.web.zenmo.domains.lux.core.model.subdomain.cognizant
+import com.zenmo.web.zenmo.domains.lux.core.toTwinModelCardItem
+import com.zenmo.web.zenmo.domains.lux.sections.application_fields.FieldModels
+import com.zenmo.web.zenmo.domains.lux.sections.application_fields.components.ApplicationAreaContactPerson
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_company.components.*
+import com.zenmo.web.zenmo.domains.zenmo.sections.team.ZenmoTeam
 
 
 @Composable
@@ -19,5 +25,13 @@ fun LuxCompany(
         InteractiveDashboardSection()
         PersonalAdvice()
         UniqueFeature()
+        FieldModels(
+            featuredModels = listOf(
+                cognizant.toTwinModelCardItem(),
+                PrivateSubdomainModel.PREZERO.toTwinModelCardItem(),
+            ),
+            showMoreModelsLink = false,
+        )
+        ApplicationAreaContactPerson(ZenmoTeam.PETER_HOGEVEEN)
     }
 }

site/src/jsMain/kotlin/com/zenmo/web/zenmo/domains/lux/sections/application_fields/lux_enegy_hub/LuxEnergyHub.kt

@@ -3,9 +3,14 @@ package com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_enegy_hu
 import androidx.compose.runtime.Composable
 import com.varabyte.kobweb.compose.foundation.layout.Column
 import com.varabyte.kobweb.framework.annotations.DelicateApi
+import com.zenmo.web.zenmo.domains.lux.core.model.subdomain.PrivateSubdomainModel
+import com.zenmo.web.zenmo.domains.lux.core.toTwinModelCardItem
+import com.zenmo.web.zenmo.domains.lux.sections.application_fields.FieldModels
+import com.zenmo.web.zenmo.domains.lux.sections.application_fields.components.ApplicationAreaContactPerson
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_enegy_hub.components.DidYouKNowSection
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_enegy_hub.components.LuxEnergyHubHero
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_enegy_hub.components.energy_hub_process.EnergyHubProcessSection
+import com.zenmo.web.zenmo.domains.zenmo.sections.team.ZenmoTeam
 
 
 @OptIn(DelicateApi::class)
@@ -15,5 +20,14 @@ fun LuxEnergyHub() {
         LuxEnergyHubHero()
         DidYouKNowSection()
         EnergyHubProcessSection()
+        FieldModels(
+            featuredModels = listOf(
+                PrivateSubdomainModel.HESSENPOORT.toTwinModelCardItem(),
+                PrivateSubdomainModel.GENUIS.toTwinModelCardItem(),
+                PrivateSubdomainModel.KAS_ALS_ENERGIEBRON.toTwinModelCardItem(),
+            ),
+            showMoreModelsLink = true,
+        )
+        ApplicationAreaContactPerson(ZenmoTeam.AUKE)
     }
 }

site/src/jsMain/kotlin/com/zenmo/web/zenmo/domains/lux/sections/application_fields/lux_region/LuxRegion.kt

@@ -2,7 +2,14 @@ package com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_region
 
 import androidx.compose.runtime.Composable
 import com.varabyte.kobweb.compose.foundation.layout.Column
+import com.zenmo.web.zenmo.domains.lux.core.model.subdomain.PrivateSubdomainModel
+import com.zenmo.web.zenmo.domains.lux.core.model.subdomain.empowered
+import com.zenmo.web.zenmo.domains.lux.core.model.subdomain.hilversum
+import com.zenmo.web.zenmo.domains.lux.core.toTwinModelCardItem
+import com.zenmo.web.zenmo.domains.lux.sections.application_fields.FieldModels
+import com.zenmo.web.zenmo.domains.lux.sections.application_fields.components.ApplicationAreaContactPerson
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_region.components.*
+import com.zenmo.web.zenmo.domains.zenmo.sections.team.ZenmoTeam
 
 
 @Composable
@@ -14,5 +21,14 @@ fun LuxRegion() {
         WhatIfScenarios()
         MultiScaleAnalysis()
         ConsistentInterface()
+        FieldModels(
+            featuredModels = listOf(
+                PrivateSubdomainModel.DRECHTSTEDEN.toTwinModelCardItem(),
+                empowered.toTwinModelCardItem(),
+                hilversum.toTwinModelCardItem(),
+            ),
+            showMoreModelsLink = true,
+        )
+        ApplicationAreaContactPerson(ZenmoTeam.NAUD_LOOMANS)
     }
 }

site/src/jsMain/kotlin/com/zenmo/web/zenmo/domains/lux/sections/application_fields/lux_res_area/LuxNeighbourhood.kt

@@ -3,11 +3,18 @@ package com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_res_area
 import androidx.compose.runtime.Composable
 import com.varabyte.kobweb.compose.foundation.layout.Column
 import com.varabyte.kobweb.framework.annotations.DelicateApi
+import com.zenmo.web.zenmo.domains.lux.core.model.subdomain.bunderbuurten
+import com.zenmo.web.zenmo.domains.lux.core.model.subdomain.kronenberg
+import com.zenmo.web.zenmo.domains.lux.core.model.subdomain.loenen
+import com.zenmo.web.zenmo.domains.lux.core.toTwinModelCardItem
+import com.zenmo.web.zenmo.domains.lux.sections.application_fields.FieldModels
+import com.zenmo.web.zenmo.domains.lux.sections.application_fields.components.ApplicationAreaContactPerson
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_res_area.components.LuxNeighbourhoodFactAndDemo
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_res_area.components.QuestionsGrid
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_res_area.components.ResAreaPersonalAdvice
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_res_area.components.ResHero
 import com.zenmo.web.zenmo.domains.lux.sections.application_fields.lux_res_area.components.get_lux_neighbourhood.GetLuxNeighbourhoodSection
+import com.zenmo.web.zenmo.domains.zenmo.sections.team.ZenmoTeam
 
 
 @OptIn(DelicateApi::class)
@@ -19,5 +26,14 @@ fun LuxNeighbourhood() {
         LuxNeighbourhoodFactAndDemo()
         GetLuxNeighbourhoodSection()
         ResAreaPersonalAdvice()
+        FieldModels(
+            featuredModels = listOf(
+                bunderbuurten.toTwinModelCardItem(),
+                loenen.toTwinModelCardItem(),
+                kronenberg.toTwinModelCardItem(),
+            ),
+            showMoreModelsLink = true,
+        )
+        ApplicationAreaContactPerson(ZenmoTeam.PETER_HOGEVEEN)
     }
 }