diff --git a/app/styles/main.scss b/app/styles/main.scss index 0aefb32..caf99a8 100644 --- a/app/styles/main.scss +++ b/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; + } + } \ No newline at end of file diff --git a/app/view/landing_main.R b/app/view/landing_main.R index 3f7b3a1..b5ab906 100644 --- a/app/view/landing_main.R +++ b/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" + ) + ), + ) + ) + ) + ) + ) + ) + ), + ) + ) + ), + ) } \ No newline at end of file