some first html tags and css, mimicking biodt.eu

app/styles/main.scss

@@ -141,4 +141,27 @@
 .shiny-input-checkbox {
   background-color: #DDA15E !important;
   border-color: #DDA15E !important;
+}
+
+.landing-pdt-wrap {
+  background: #fff;
+  border-radius: 50px;
+  position: relative;
+  overflow: hidden;
+  padding: 30px 50px;
+  min-height: 325px;
+  margin-bottom: 30px;
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+    color: #bc6c25;
+    align-items: center;
+  }
+
+  h3 {
+    font-weight: 700;
+    font-size: 1.5rem;
+  }
+
 }

app/view/landing_main.R

@@ -1,38 +1,141 @@
 box::use(
-  shiny[NS, tags],
+  shiny[NS, tags, tagList],
 )
 
 #' @export
 landing_main_ui <- function(id) {
   ns <- NS(id)
-  tags$div(
-    class = "row",
+  tagList(
     tags$div(
-      class = "col mx-auto col-lg-8",
-      tags$h1(
-        tags$span(
-          class = "text-primary",
-          "Prototype"
+      class = "row",
+      tags$div(
+        class = "col mx-auto col-lg-8",
+        tags$h1(
+          tags$span(
+            class = "text-primary",
+            "Prototype"
+          ),
+          "Digital Twins"
         ),
-        "Digital Twins"
-      ),      
-      tags$p(
-        class = "info-text",
-        "The Biodiversity Digital Twin prototype will provide advanced models for simulation and 
-        prediction capabilities, through practical use cases addressing critical issues related to 
-        global biodiversity dynamics."
-      ),
-      tags$p(
-        class = "info-text",
-        "BioDT exploits the LUMI Supercomputer and employs FAIR data combined with digital 
-        infrastructure, predictive modelling and AI solutions, facilitating evidence-based solutions 
-        for biodiversity protection and restoration."
-      ),
-      tags$p(
-        class = "info-text",
-        "The project responds to key EU and international policy initiatives, including the EU 
-        Biodiversity Strategy 2030, EU Green Deal, UN Sustainable Development Goals, Destination 
-        Earth."
-      ))
+        tags$p(
+          class = "info-text",
+          "The Biodiversity Digital Twin prototype will provide advanced models for simulation and 
+          prediction capabilities, through practical use cases addressing critical issues related
+          to global biodiversity dynamics."
+        ),
+        tags$p(
+          class = "info-text",
+          "BioDT exploits the LUMI Supercomputer and employs FAIR data combined with digital 
+          infrastructure, predictive modelling and AI solutions, facilitating evidence-based 
+          solutions for biodiversity protection and restoration."
+        ),
+        tags$p(
+          class = "info-text",
+          "The project responds to key EU and international policy initiatives, including the EU 
+          Biodiversity Strategy 2030, EU Green Deal, UN Sustainable Development Goals, Destination 
+          Earth."
+        ),
+        tags$div(
+          class = "row",
+          tags$div(
+            class = "col-md-6",
+            tags$div(
+              class = "landing-pdt-wrap",
+              tags$div(
+                class = "title",
+                tags$h3("Species response to environmental change")
+              ),
+              tags$div(
+                class = "description",
+                tags$div(
+                  class = "row",
+                  tags$div(
+                    class = "col-lg-6",
+                    tags$div(
+                      class = "img-box",
+                      tags$img(
+                        src = "https://www.biodt.eu/sites/default/files/2022-06/use%20case%201.png",
+                        width = 210,
+                        height = 210,
+                        loading = "lazy"
+                      )
+                    )
+                  ),
+                  tags$div(
+                    class = "col-lg-6",
+                    tags$div(
+                      class = "views-element-container",
+                      tags$ul(
+                        tags$li(
+                          tags$a(
+                            href = "#",
+                            "Biodiversity Dynamics"
+                          )
+                        ),
+                        tags$li(
+                          tags$a(
+                            href = "#",
+                            "Ecosystem Services"
+                          )
+                        ),
+                      )
+                    )
+                  )
+                )
+              )
+            )
+          ),
+          tags$div(
+            class = "col-md-6",
+            tags$div(
+              class = "use-case-wrap",
+              tags$div(
+                class = "title",
+                tags$h3("Genetically detected biodiversity")
+              ),
+              tags$div(
+                class = "description",
+                tags$div(
+                  class = "row",
+                  tags$div(
+                    class = "col-lg-6",
+                    tags$div(
+                      class = "img-box",
+                      tags$img(
+                        src = "https://www.biodt.eu/sites/default/files/2022-06/use%20case%202.png",
+                        width = 210,
+                        height = 210,
+                        loading = "lazy"
+                      )
+                    )
+                  ),
+                  tags$div(
+                    class = "col-lg-6",
+                    tags$div(
+                      class = "views-element-container",
+                      tags$ul(
+                        tags$li(
+                          tags$a(
+                            href = "#",
+                            "Crop wild relatives and genetic resources for food security"
+                          )
+                        ),
+                        tags$li(
+                          tags$a(
+                            href = "#",
+                            "DNA detected biodiversity in cryptic habitats"
+                          )
+                        ),
+                      )
+                    )
+                  )
+                )
+              )
+            )
+          ),
+        )
+      )
+    ),
+
   )
 }