descriptions-for-showcase-models

site/src/jsMain/kotlin/domains/zenmo/pages/models/ModelsPage.kt

@@ -1,64 +1,33 @@
 package energy.lux.frontend.domains.zenmo.pages.models
 
 import androidx.compose.runtime.Composable
-import com.varabyte.kobweb.compose.css.TextAlign
 import com.varabyte.kobweb.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.modifiers.gap
-import com.varabyte.kobweb.compose.ui.modifiers.textAlign
-import com.varabyte.kobweb.compose.ui.toAttrs
-import com.varabyte.kobweb.silk.components.layout.SimpleGrid
-import com.varabyte.kobweb.silk.components.layout.numColumns
+import com.varabyte.kobweb.compose.ui.modifiers.alignSelf
 import energy.lux.frontend.components.widgets.SectionContainer
-import energy.lux.frontend.domains.lux.core.model.subdomain.amersfoort
-import energy.lux.frontend.domains.lux.core.model.subdomain.demoEnergyHubModel
-import energy.lux.frontend.domains.lux.core.model.subdomain.demoNeighbourhoodModel
-import energy.lux.frontend.domains.lux.core.model.subdomain.empowered
-import energy.lux.frontend.domains.lux.pages.application_fields.LuxApplicationArea
-import energy.lux.frontend.domains.lux.pages.application_fields.components.LUX_DEMO_SECTION_ID
+import energy.lux.frontend.core.services.localization.LocalizedText
+import energy.lux.frontend.core.services.localization.localizedUrl
+import energy.lux.frontend.domains.lux.sections.nav_header.luxModelsMenuItem
 import energy.lux.frontend.domains.lux.widgets.headings.HeaderText
-import energy.lux.frontend.domains.zenmo.components.PlaceholderText
 import energy.lux.frontend.domains.zenmo.components.layouts.ZenmoPageLayout
 import energy.lux.frontend.domains.zenmo.sections.nav_header.zenmoModelsMenuItem
+import energy.lux.frontend.domains.zenmo.widgets.MoreInfoLink
 import energy.lux.frontend.pages.SiteGlobals
-import org.jetbrains.compose.web.css.cssRem
-import org.jetbrains.compose.web.dom.P
-import web.window.window
-
-val DEMO_MODEL_URL_PREFIX = "${window.location.protocol}//${SiteGlobals.LUX_DOMAIN}/"
-val zenmoShowcasedModels: List<ShowcasedModel> = listOf(
-    ShowcasedModel(
-        demoNeighbourhoodModel.copy(
-            url = "$DEMO_MODEL_URL_PREFIX${LuxApplicationArea.LUX_ENERGY_HUB.url}#${LUX_DEMO_SECTION_ID}",
-        )
-    ),
-    ShowcasedModel(
-        demoEnergyHubModel.copy(
-            url = "$DEMO_MODEL_URL_PREFIX${LuxApplicationArea.LUX_ENERGY_HUB.url}#${LUX_DEMO_SECTION_ID}",
-        )
-    ),
-    ShowcasedModel(empowered),
-    ShowcasedModel(amersfoort),
-)
+import org.jetbrains.compose.web.css.AlignSelf
 
 @Composable
 fun ModelsPage() {
     ZenmoPageLayout(zenmoModelsMenuItem.route.label) {
         SectionContainer {
-            HeaderText(enText = "Interactive Energy Models", nlText = "Interactieve Energiemodellen")
-            P(
-                Modifier
-                    .textAlign(TextAlign.Center)
-                    .constrainedWidth().toAttrs()
-            ) {
-                PlaceholderText(repeat = 2)
-            }
-            SimpleGrid(
-                numColumns(base = 1, md = 2),
-                modifier = Modifier.gap(2.5.cssRem)
-                    .constrainedWidth(),
-            ) {
-                zenmoShowcasedModels.forEach { ModelCard(it) }
-            }
+            HeaderText(enText = "Interactive energy models", nlText = "Interactieve energiemodellen")
+            ShowcaseModelsGrid()
+            MoreInfoLink(
+                url = localizedUrl(SiteGlobals.LUX_DOMAIN, luxModelsMenuItem.route.path),
+                text = LocalizedText(
+                    en = "See more models",
+                    nl = "Bekijk meer modellen"
+                ),
+                modifier = Modifier.alignSelf(AlignSelf.FlexEnd),
+            )
         }
     }
 }

site/src/jsMain/kotlin/domains/zenmo/pages/models/ModelCard.kt → site/src/jsMain/kotlin/domains/zenmo/pages/models/ShowcaseModelsGrid.kt

@@ -4,10 +4,9 @@ import androidx.compose.runtime.Composable
 import com.varabyte.kobweb.compose.css.functions.max
 import com.varabyte.kobweb.compose.foundation.layout.Column
 import com.varabyte.kobweb.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.modifiers.borderRadius
-import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth
-import com.varabyte.kobweb.compose.ui.modifiers.height
-import com.varabyte.kobweb.compose.ui.modifiers.margin
+import com.varabyte.kobweb.compose.ui.modifiers.*
+import com.varabyte.kobweb.silk.components.layout.SimpleGrid
+import com.varabyte.kobweb.silk.components.layout.numColumns
 import com.varabyte.kobweb.silk.components.navigation.Link
 import com.varabyte.kobweb.silk.components.navigation.UncoloredLinkVariant
 import com.varabyte.kobweb.silk.components.navigation.UndecoratedLinkVariant
@@ -20,7 +19,7 @@ import org.jetbrains.compose.web.css.vh
 import org.jetbrains.compose.web.dom.P
 
 @Composable
-fun ModelCard(showcased: ShowcasedModel) {
+private fun ModelCard(showcased: ShowcasedModel) {
     Link(
         path = showcased.model.url,
         variant = UndecoratedLinkVariant.then(UncoloredLinkVariant),
@@ -40,4 +39,15 @@ fun ModelCard(showcased: ShowcasedModel) {
             P { LangText(showcased.description) }
         }
     }
+}
+
+@Composable
+fun ShowcaseModelsGrid() {
+    SimpleGrid(
+        numColumns(base = 1, md = 2),
+        modifier = Modifier.gap(2.5.cssRem)
+            .constrainedWidth(),
+    ) {
+        zenmoShowcasedModels.forEach { ModelCard(it) }
+    }
 }

site/src/jsMain/kotlin/domains/zenmo/pages/models/ShowcasedModel.kt

@@ -5,10 +5,5 @@ import energy.lux.frontend.domains.lux.core.TwinModelCard
 
 data class ShowcasedModel(
     val model: TwinModelCard,
-    val description: LocalizedText = LocalizedText(
-        nl = """
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
-            dolore magna aliqua.
-        """.trimIndent(),
-    ),
+    val description: LocalizedText,
 )

site/src/jsMain/kotlin/domains/zenmo/pages/models/zenmoShowcasedModels.kt

@@ -0,0 +1,72 @@
+package energy.lux.frontend.domains.zenmo.pages.models
+
+import energy.lux.frontend.core.services.localization.LocalizedText
+import energy.lux.frontend.domains.lux.core.model.subdomain.amersfoort
+import energy.lux.frontend.domains.lux.core.model.subdomain.demoEnergyHubModel
+import energy.lux.frontend.domains.lux.core.model.subdomain.demoNeighbourhoodModel
+import energy.lux.frontend.domains.lux.core.model.subdomain.empowered
+import energy.lux.frontend.domains.lux.pages.application_fields.LuxApplicationArea
+import energy.lux.frontend.domains.lux.pages.application_fields.components.LUX_DEMO_SECTION_ID
+import energy.lux.frontend.pages.SiteGlobals
+import web.window.window
+
+private val DEMO_MODEL_URL_PREFIX = "${window.location.protocol}//${SiteGlobals.LUX_DOMAIN}/"
+val zenmoShowcasedModels: List<ShowcasedModel> = listOf(
+    ShowcasedModel(
+        model = demoNeighbourhoodModel.copy(
+            url = "$DEMO_MODEL_URL_PREFIX${LuxApplicationArea.LUX_ENERGY_HUB.url}#${LUX_DEMO_SECTION_ID}",
+        ),
+        description = LocalizedText(
+            en = """
+                In residential areas, peak load on the electricity grid can be strongly reduced through targeted 
+                management. This means: connecting more houses with the same grid capacity. 
+            """.trimIndent(),
+            nl = """
+                In woonwijken kan de piekbelasting van het elekctriciteitsnet sterk afnemen als daar gericht op wordt 
+                gestuurd. Dat betekent: met dezelfde netcapaciteit meer huizen aansluiten. 
+            """.trimIndent()
+        ),
+    ),
+    ShowcasedModel(
+        model = demoEnergyHubModel.copy(
+            url = "$DEMO_MODEL_URL_PREFIX${LuxApplicationArea.LUX_ENERGY_HUB.url}#${LUX_DEMO_SECTION_ID}",
+        ),
+        description = LocalizedText(
+            en = """
+               In business parks, net congestion is the cause of great problems. Forming an energy hub can be the 
+               solution. LUX Energy Hub lets you explore different scenario’s. 
+           """.trimIndent(),
+            nl = """
+             Op bedrijventerreinen zorgt netcongestie voor grote problemen. Samen een energiehub vormen kan de 
+             oplossing zijn. LUX Energy Hub biedt je de mogelijkheid om verschillende scenario’s te verkennen.    
+            """.trimIndent()
+        )
+    ),
+    ShowcasedModel(
+        model = empowered,
+        description = LocalizedText(
+            en = """
+                The EmPowerED project is developing a systems design toolbox that helps decision-makers understand the 
+                complex interplay of social, legal, financial, and technical factors in local energy systems. 
+            """.trimIndent(),
+            nl = """
+                Het EmPowerED project is gericht op het ontwikkelen van een systems design toolbox die beleidsmakers 
+                helpt om de complexe samenhang tussen sociale, wettelijke, financiële en technische factoren in lokale 
+                energiesystemen te begrijpen. 
+            """.trimIndent()
+        )
+    ),
+    ShowcasedModel(
+        model = amersfoort,
+        description = LocalizedText(
+            en = """
+                The municipality of Amersfoort was interested in the differences in energy dynamics per neighborhood 
+                and used LUX Neighbourhood to explore some scenarios.  
+            """.trimIndent(),
+            nl = """
+                De gemeente Amersfoort was geïnteresseerd in de verschillen in energiedynamiek per wijk en heeft LUX 
+                Woonwijk gebruikt om enkele scenario's te verkennen. 
+            """.trimIndent()
+        )
+    ),
+)

site/src/jsMain/kotlin/domains/zenmo/pages/projects/ProjectRowCard.kt

@@ -5,23 +5,19 @@ import com.varabyte.kobweb.compose.css.functions.clamp
 import com.varabyte.kobweb.compose.foundation.layout.Arrangement
 import com.varabyte.kobweb.compose.foundation.layout.Box
 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.modifiers.*
 import com.varabyte.kobweb.compose.ui.toAttrs
 import com.varabyte.kobweb.silk.components.graphics.Image
-import com.varabyte.kobweb.silk.components.icons.mdi.MdiNorthEast
-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.theme.font.LabelTextStyle
 import com.zenmo.web.zenmo.theme.font.TextStyle
 import energy.lux.frontend.components.widgets.LangText
 import energy.lux.frontend.domains.lux.styles.ResponsiveFlexStyle
 import energy.lux.frontend.domains.lux.widgets.headings.SubHeaderText
 import energy.lux.frontend.domains.zenmo.pages.models.constrainedWidth
+import energy.lux.frontend.domains.zenmo.widgets.MoreInfoLink
 import energy.lux.frontend.theme.SitePalette
 import org.jetbrains.compose.web.css.cssRem
 import org.jetbrains.compose.web.css.px
@@ -76,24 +72,7 @@ private fun ProjectContent(item: ZenmoProject) {
             P {
                 LangText(item.descriptionText)
             }
-            ProjectLink(item)
-        }
-    }
-}
-
-@Composable
-private fun ProjectLink(item: ZenmoProject) {
-    Link(
-        path = item.url,
-        variant = UncoloredLinkVariant.then(UndecoratedLinkVariant),
-        modifier = Modifier.color(SitePalette.light.primary),
-    ) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(0.25.cssRem),
-        ) {
-            LangText(en = "Learn more", nl = "Meer informatie")
-            MdiNorthEast(modifier = Modifier.fontSize(16.px))
+            MoreInfoLink(item.url)
         }
     }
 }

site/src/jsMain/kotlin/domains/zenmo/widgets/MoreInfoLink.kt

@@ -0,0 +1,29 @@
+package energy.lux.frontend.domains.zenmo.widgets
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.*
+import com.varabyte.kobweb.silk.components.icons.mdi.MdiNorthEast
+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 energy.lux.frontend.components.widgets.LangText
+import energy.lux.frontend.core.services.localization.LocalizedText
+import org.jetbrains.compose.web.css.*
+
+@Composable
+fun MoreInfoLink(
+    url: String,
+    text: LocalizedText = LocalizedText(en = "Learn more", nl = "Meer informatie"),
+    modifier: Modifier = Modifier,
+) {
+    Link(
+        path = url,
+        variant = UncoloredLinkVariant.then(UndecoratedLinkVariant),
+        modifier = MoreInfoLinkStyle.toModifier().then(modifier),
+    ) {
+        LangText(text)
+        MdiNorthEast(modifier = Modifier.fontSize(16.px))
+    }
+}

site/src/jsMain/kotlin/domains/zenmo/widgets/MoreInfoLinkStyle.kt

@@ -0,0 +1,40 @@
+package energy.lux.frontend.domains.zenmo.widgets
+
+import com.varabyte.kobweb.compose.css.Transition
+import com.varabyte.kobweb.compose.css.TransitionProperty
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.alignItems
+import com.varabyte.kobweb.compose.ui.modifiers.color
+import com.varabyte.kobweb.compose.ui.modifiers.display
+import com.varabyte.kobweb.compose.ui.modifiers.gap
+import com.varabyte.kobweb.compose.ui.modifiers.transform
+import com.varabyte.kobweb.compose.ui.modifiers.transition
+import com.varabyte.kobweb.silk.style.CssStyle
+import energy.lux.frontend.theme.SitePalette
+import org.jetbrains.compose.web.css.AlignItems
+import org.jetbrains.compose.web.css.DisplayStyle
+import org.jetbrains.compose.web.css.cssRem
+import org.jetbrains.compose.web.css.ms
+import org.jetbrains.compose.web.css.px
+
+val MoreInfoLinkStyle = CssStyle {
+    base {
+        Modifier
+            .display(DisplayStyle.Flex)
+            .alignItems(AlignItems.Center)
+            .color(SitePalette.light.primary)
+            .gap(0.25.cssRem)
+    }
+
+    cssRule(" .material-icons") {
+        Modifier
+            .transition(
+                Transition.of(TransitionProperty.All, 200.ms),
+            )
+    }
+
+    cssRule(":hover .material-icons") {
+        Modifier
+            .transform { translateX(3.px) }
+    }
+}