Explore our content section

ckanext/ubdc/assets/css/style.css

@@ -11114,6 +11114,50 @@ input[type=search]::-webkit-search-cancel-button {
   background: #6534DF !important;
 }
 
+.explore-content {
+  border-bottom: 1px solid #dfe1e7;
+  padding-bottom: 8rem;
+}
+.explore-content .lead {
+  font-size: 1.3rem;
+  font-weight: 400;
+  color: #36394a;
+}
+.explore-content .wrap {
+  width: 90%;
+  margin: auto;
+}
+.explore-content .explore-card {
+  height: 460px;
+  border: 1px solid #dfe1e7;
+  border-radius: 12px;
+  padding: 1rem;
+}
+.explore-content .card-img-top-wrapper {
+  height: 190px;
+  overflow: hidden;
+}
+.explore-content .card-img-top-wrapper img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 8px;
+}
+.explore-content .card-text {
+  font-size: 1.5rem;
+  color: #666D80;
+}
+.explore-content .btn-readmore {
+  background-color: transparent;
+  border: 1px solid #dfe1e7;
+  color: #0d0812;
+  text-transform: capitalize;
+  padding: 1rem;
+  position: absolute;
+  font-size: 1.25rem;
+  bottom: 1.5rem;
+}
+
 .account-masthead {
   min-height: 30px;
   color: #fff;

ckanext/ubdc/helpers.py

@@ -144,3 +144,41 @@ def get_featured_groups(size=10):
         group_list = h.get_featured_organizations(limit)
 
     return group_list
+
+
+def explore_our_content():
+    data = {
+        "heading": "Explore Our Content",
+        "tagline": "Keep informed with the latest updates from UBDC",
+        "cards": [
+            {
+                "image": {
+                    "src": "/base/images/explore/explore-content-1.jpeg",
+                    "alt": "News",
+                },
+                "title": "News",
+                "text": "From our latest research publications to insightful, thought-provoking blogs, keep informed and engaged with the latest updates from UBDC.",
+                "link": "https://www.ubdc.ac.uk/news",
+            },
+            {
+                "image": {
+                    "src": "/base/images/explore/explore-content-2.jpeg",
+                    "alt": "Events",
+                },
+                "title": "Events",
+                "text": "We run a rich and varied calendar of public and stakeholder events providing information on our services, delivering training, and sharing outcomes from our research.",
+                "link": "https://www.ubdc.ac.uk/events",
+            },
+            {
+                "image": {
+                    "src": "/base/images/explore/explore-content-3.jpeg",
+                    "alt": "Impact Stories",
+                },
+                "title": "Impact Stories",
+                "text": "With international researchers, a worldwide alumni, and extensive use of our valued data collections, UBDC has global reach and influence. A selection of case studies illustrates our varied impact.",
+                "link": "https://www.ubdc.ac.uk/impact",
+            },
+        ],
+    }
+
+    return data

ckanext/ubdc/plugin.py

@@ -74,6 +74,7 @@ def get_helpers(self):
             "get_data_providers": helpers.get_data_providers,
             "get_newsletter_link": helpers.get_newsletter_link,
             "get_featured_groups": helpers.get_featured_groups,
+            "explore_our_content": helpers.explore_our_content,
         }
 
     # IValidators

ckanext/ubdc/public/base/scss/_homepage.scss

@@ -116,7 +116,8 @@
   }
 
   .theme {
-    background-image: url("#{$imagePath}/research-left.png"), url("#{$imagePath}/research-right.png");
+    background-image: url("#{$imagePath}/research-left.png"),
+      url("#{$imagePath}/research-right.png");
     background-position: left bottom, right bottom;
     background-repeat: no-repeat, no-repeat;
     background-size: 18%;
@@ -128,13 +129,13 @@
     border-bottom: 1px solid #dfe1e7;
 
     .wrap .row {
-        margin-bottom: 20px;
+      margin-bottom: 20px;
     }
 
     .block {
-        display: flex;
-        flex-wrap: wrap;
-        margin: 2rem 8rem;
+      display: flex;
+      flex-wrap: wrap;
+      margin: 2rem 8rem;
     }
 
     .panel {
@@ -185,9 +186,9 @@
       }
     }
     .explore-btn {
-        margin-top: 10px; /* Space above the button */
+      margin-top: 10px; /* Space above the button */
     }
-}
+  }
 
   .stats {
     background: url("#{$imagePath}/stats.png");
@@ -224,7 +225,7 @@
     .title {
       border-right: 1px solid #cccccc;
       padding-right: 20px;
-      
+
       h4 {
         font-weight: 700;
         font-size: 16px;
@@ -373,7 +374,6 @@
       height: 520px;
       display: flex;
       align-items: center;
-
     }
 
     .dataset-tagline {
@@ -388,14 +388,14 @@
       font-weight: 400;
       font-size: 14px;
       text-transform: capitalize;
-			border: none;
+      border: none;
       margin-top: 3rem;
       padding: 12px 20px;
-
     }
 
     .left {
-      background-image: url("#{$imagePath}/latest-right.png"), url("#{$imagePath}/latest-left.png");
+      background-image: url("#{$imagePath}/latest-right.png"),
+        url("#{$imagePath}/latest-left.png");
       background-position: left bottom, right bottom;
       background-repeat: no-repeat, no-repeat;
       background-size: auto, auto;
@@ -407,8 +407,9 @@
       padding-bottom: 0;
     }
 
-	.right-popular-dataset {
-	  background-image: url("#{$imagePath}/popular-right.png"), url("#{$imagePath}/popular-left.png");
+    .right-popular-dataset {
+      background-image: url("#{$imagePath}/popular-right.png"),
+        url("#{$imagePath}/popular-left.png");
       background-position: left bottom, right bottom;
       background-repeat: no-repeat, no-repeat;
       background-size: auto, auto;
@@ -418,7 +419,7 @@
       justify-content: center;
       padding-top: 0;
       padding-bottom: 0;
-		}
+    }
     .panel {
       height: 104px;
       margin: 20px;
@@ -463,7 +464,6 @@
     }
   }
 
-
   .themes {
     .title {
       display: flex;
@@ -784,5 +784,48 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .bg-blue-400 {
-	background: $blue-400 !important;
+  background: $blue-400 !important;
+}
+
+.explore-content {
+  .lead {
+    font-size: 1.3rem;
+    font-weight: 400;
+    color: $text-black-shade;
+  }
+  .wrap {
+    width: 90%;
+    margin: auto;
+  }
+  border-bottom: 1px solid #dfe1e7;
+  padding-bottom: 8rem;
+  .explore-card {
+    height: 460px;
+    border: 1px solid #dfe1e7;
+    border-radius: 12px;
+    padding: 1rem;
+  }
+  .card-img-top-wrapper {
+    height: 190px; overflow: hidden;
+    img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      border-radius: 8px;
+    }
+  }
+  .card-text {
+    font-size: 1.5rem;
+    color: #666D80;
+  }
+  .btn-readmore {
+    background-color: transparent;
+    border: 1px solid #dfe1e7;
+    color: #0d0812;
+    text-transform: capitalize;
+    padding: 1rem;
+    position: absolute;
+    font-size: 1.25rem;
+    bottom: 1.5rem;
+  }
 }

ckanext/ubdc/templates/home/index.html

@@ -18,6 +18,7 @@
  {% snippet "home/snippets/latest.html"%}
  {% snippet "home/snippets/popular.html"%}
  {% snippet "home/snippets/themes.html"%}
+ {% snippet "home/snippets/explore.html"%}
  {% snippet "home/snippets/providers.html"%}
  {% snippet "home/snippets/features.html"%}
  {% snippet "home/snippets/newsletter.html"%}

ckanext/ubdc/templates/home/snippets/explore.html

@@ -0,0 +1,42 @@
+<section class="explore-content">
+  <div class="container">
+    <div class="wrap">
+      {% set content = h.explore_our_content() %}
+      <div class="row">
+        <div class="col-12 text-center">
+          <h1>{{ content.heading }}</h1>
+          <p class="lead">{{ content.tagline }}</p>
+        </div>
+      </div>
+      <div class="row d-flex justify-content-center">
+        {% for card in content.cards %}
+        <div
+          class="col-lg-4 col-md-6 col-sm-12 mb-4 d-flex justify-content-center"
+        >
+          <div class="card explore-card">
+            <div class="card-img-top-wrapper">
+              <img
+                class="card-img-top img-fluid"
+                src="{{ card.image.src }}"
+                alt="{{ card.image.alt }}"
+                style="object-fit: cover; width: 100%; height: 100%"
+              />
+            </div>
+            <div class="card-body">
+              <h2 class="card-title">{{ card.title }}</h2>
+              <p class="card-text">{{ card.text }}</p>
+              <a
+                href="{{ card.link }}"
+                target="_blank"
+                class="btn btn-primary btn-readmore"
+                >Read More
+                <span class="arrow">→</span>
+              </a>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</section>