Update the links in web-landing example

examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt

@@ -11,75 +11,74 @@ import com.sample.style.*
 data class LinkOnCard(val linkText: String, val linkUrl: String)
 
 @Composable
-fun Card(title: String, linkOnCard: LinkOnCard?, content: @Composable () -> Unit) {
+private fun CardTitle(title: String, darkTheme: Boolean = false) {
-    Div(attrs = {
-        classes(
-            WtCards.wtCard,
-            WtCards.wtCardThemeLight,
-            WtCols.wtCol6,
-            WtCols.wtColMd6,
-            WtCols.wtColSm12,
-            WtOffsets.wtTopOffset24,
-        )
-    }) {
-        Div(attrs = {
-            classes(WtCards.wtCardSection, WtCards.wtVerticalFlex)
-        }) {
-            Div(attrs = { classes(WtCards.wtVerticalFlexGrow) }) {
     H3(attrs = {
-                    classes(WtTexts.wtH3)
+        classes {
+            +WtTexts.wtH3
+            if (darkTheme) +WtTexts.wtH3ThemeDark
+        }
     }) {
         Text(title)
     }
-
-                content()
 }
 
-            if (linkOnCard != null) {
+@Composable
-                A(attrs = {
+private fun CardLink(link: LinkOnCard) {
+    A(
+        attrs = {
             classes(WtTexts.wtLink, WtOffsets.wtTopOffset24)
             target(ATarget.Blank)
-                }, href = linkOnCard.linkUrl) {
+        },
-                    Text(linkOnCard.linkText)
+        href = link.linkUrl
-                }
+    ) {
-            }
+        Text(link.linkText)
-        }
     }
 }
 
 @Composable
-fun CardDark(title: String, linkOnCard: LinkOnCard?, content: @Composable () -> Unit) {
+fun Card(
+    title: String,
+    links: List<LinkOnCard>,
+    darkTheme: Boolean = false,
+    wtExtraStyleClasses: List<String> = listOf(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12),
+    content: @Composable () -> Unit
+) {
     Div(attrs = {
-        classes(
+        classes {
-            WtCards.wtCard,
+            +WtCards.wtCard
-            WtCards.wtCardThemeDark,
+            +WtOffsets.wtTopOffset24
-            WtCols.wtCol4,
+            wtExtraStyleClasses.forEach { +it }
-            WtCols.wtColMd6,
+            +if (darkTheme) WtCards.wtCardThemeDark else WtCards.wtCardThemeLight
-            WtCols.wtColSm12,
+        }
-            WtOffsets.wtTopOffset24,
-        )
     }) {
         Div(attrs = {
             classes(WtCards.wtCardSection, WtCards.wtVerticalFlex)
         }) {
-            Div(attrs = { classes(WtCards.wtVerticalFlexGrow) }) {
-                H3(attrs = {
-                    classes(WtTexts.wtH3, WtTexts.wtH3ThemeDark)
-                }) {
-                    Text(title)
-                }
 
+            Div(attrs = { classes(WtCards.wtVerticalFlexGrow) }) {
+                CardTitle(title = title, darkTheme = darkTheme)
                 content()
             }
 
-            if (linkOnCard != null) {
+            links.forEach {
-                A(attrs = {
+                CardLink(it)
-                    classes(WtTexts.wtLink, WtOffsets.wtTopOffset24)
-                    target(ATarget.Blank)
-                }, href = linkOnCard.linkUrl) {
-                    Text(linkOnCard.linkText)
             }
         }
     }
 }
+
+@Composable
+fun CardDark(
+    title: String,
+    links: List<LinkOnCard>,
+    wtExtraStyleClasses: List<String> = listOf(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12),
+    content: @Composable () -> Unit
+) {
+    Card(
+        title = title,
+        links = links,
+        darkTheme = true,
+        wtExtraStyleClasses = wtExtraStyleClasses,
+        content = content
+    )
 }

examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt

@@ -12,7 +12,7 @@ import com.sample.style.*
 data class CardWithListPresentation(
     val title: String,
     val list: List<String>,
-    val linkOnCard: LinkOnCard? = null
+    val links: List<LinkOnCard> = emptyList()
 )
 
 private fun createAboutComposeWebCards(): List<CardWithListPresentation> {
@@ -24,16 +24,14 @@ private fun createAboutComposeWebCards(): List<CardWithListPresentation> {
                 "Use a type-safe HTML DSL to build your UI representation",
                 "Get full control over the look and feel of your application by creating stylesheets with a typesafe CSS DSL",
                 "Integrate with other JavaScript libraries via DOM subtrees"
-            ),
+            )
-            linkOnCard = null//LinkOnCard("Learn more", "#")
         ),
         CardWithListPresentation(
             title = "Multiplatform Widgets With Web Support",
             list = listOf(
                 "Use and build Compose widgets that work on Android, Desktop, and Web by utilizing Kotlin's expect-actual mechanisms to provide platform-specific implementations",
                 "Experiment with a set of layout primitives and APIs that mimic the features you already know from Compose for Desktop and Android"
-            ),
+            )
-            linkOnCard = null//LinkOnCard("Learn more", "#")
         )
     )
 }
@@ -81,7 +79,7 @@ fun ComposeWebLibraries() {
 private fun CardWithList(card: CardWithListPresentation) {
     Card(
         title = card.title,
-        linkOnCard = card.linkOnCard
+        links = card.links
     ) {
         Ul(attrs = {
             classes(WtTexts.wtText2)

examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt

@@ -11,8 +11,7 @@ import com.sample.style.*
 private data class GetStartedCardPresentation(
     val title: String,
     val content: String,
-    val link1: LinkOnCard? = null,
+    val links: List<LinkOnCard>
-    val link2: LinkOnCard? = null,
 )
 
 private fun getCards(): List<GetStartedCardPresentation> {
@@ -20,27 +19,36 @@ private fun getCards(): List<GetStartedCardPresentation> {
         GetStartedCardPresentation(
             title = "Start tutorial here",
             content = "In this tutorial we will see how to create our first web UI application using Compose for Web.",
-            link1 = LinkOnCard(
+            links = listOf(
+                LinkOnCard(
                     linkText = "View tutorial",
                     linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started"
                 )
+            )
         ),
         GetStartedCardPresentation(
             title = "Landing page example",
             content = "An example of a landing page built using the Composable DOM API and Stylesheet DSL.",
-            link1 = LinkOnCard(
+            links = listOf(
+                LinkOnCard(
                     linkText = "Explore the source code",
                     linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/examples/web_landing"
                 )
+            )
         ),
         GetStartedCardPresentation(
             title = "Falling Balls app example",
             content = "This example demonstrates the use of multiplatform widgets – sharing user interface code between Compose for Desktop and Web.",
-            link1 = LinkOnCard(
+            links = listOf(
+                LinkOnCard(
                     linkText = "Explore the source code",
                     linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/examples/falling_balls_with_web"
                 ),
-            link2 = null
+                LinkOnCard(
+                    linkText = "Play",
+                    linkUrl = "https://falling-balls.ui.pages.jetbrains.team/"
+                )
+            )
         )
     )
 }
@@ -87,7 +95,8 @@ fun GetStarted() {
             getCards().forEach {
                 CardDark(
                     title = it.title,
-                    linkOnCard = it.link1
+                    links = it.links,
+                    wtExtraStyleClasses = listOf(WtCols.wtCol4, WtCols.wtColMd6, WtCols.wtColSm12)
                 ) {
                     CardContent(it.content)
                 }