From e582401c65f1b7d464b07a794b0bf472211af8fe Mon Sep 17 00:00:00 2001
From: Neil Dewhurst <ndewhurst@gmail.com>
Date: Mon, 7 Oct 2024 16:30:47 +0100
Subject: [PATCH] allow a paragraph in hub pages by using flex

---
 ...{docs-sub-hub.adoc => docs-explainer.adoc} |  0
 preview-src/docs-hub.adoc                     | 85 +++++++++++++++++++
 preview-src/ui-model.yml                      |  9 +-
 src/css/docs-ndl.css                          |  5 ++
 4 files changed, 97 insertions(+), 2 deletions(-)
 rename preview-src/{docs-sub-hub.adoc => docs-explainer.adoc} (100%)
 create mode 100644 preview-src/docs-hub.adoc

diff --git a/preview-src/docs-sub-hub.adoc b/preview-src/docs-explainer.adoc
similarity index 100%
rename from preview-src/docs-sub-hub.adoc
rename to preview-src/docs-explainer.adoc
diff --git a/preview-src/docs-hub.adoc b/preview-src/docs-hub.adoc
new file mode 100644
index 00000000..38b3ad36
--- /dev/null
+++ b/preview-src/docs-hub.adoc
@@ -0,0 +1,85 @@
+= Neo4j Tools
+:page-theme: docs
+:page-role: hub
+:page-layout: docs-ndl
+:page-show-home-link: true
+:page-hide-nav-title: true
+// :page-disablefeedback: true
+:page-toclevels: -1
+
+[.display.cards.not-selectable]
+== Developer tools documentation
+
+Use Neo4j tools to query and manage your databases, import data, and create graphical visualizations. 
+
+=== Neo4j Bloom/Explore
+
+[.icon]
+image:icons/ndl/science-molecule.svg[]
+
+[.description]
+Visualize and explore graph data using natural language search and an intuitive and graphical interface.
+
+[.link]
+link:{docs-home}/bloom-user-guide/[Neo4j Bloom] +
+link:{docs-home}/aura/preview/explore/introduction/[Explore (Aura)]
+
+=== Neo4j Browser/Query
+
+[.icon]
+image:icons/ndl/data-science.svg[]
+
+[.description]
+Write and execute Cypher queries and visualize the results in nodes and relationships.
+
+[.link]
+link:{docs-home}/browser-manual/[Neo4j Browser] +
+link:{docs-home}/aura/preview/query/introduction/[Query (Aura)]
+
+[.display.card.selectable]
+
+=== Neo4j Data Importer
+
+[.category]
+Neo4j Data Importer
+
+[.icon]
+image:icons/ndl/query-browser.svg[]
+
+[.description]
+Learn how to model and import data to your Neo4j database.
+
+[.link]
+link:{docs-home}/data-importer[]
+
+[.display.card.selectable]
+
+=== Neo4j Desktop
+
+[.category]
+Neo4j Desktop
+
+[.icon]
+image:icons/ndl/neo4j-tools.svg[]
+
+[.description]
+Learn how to experience Neo4j on your local desktop.
+
+[.link]
+link:{docs-home}/desktop-manual[]
+
+[.display.card.selectable]
+
+=== Neo4j Ops Manager
+
+[.icon]
+image:icons/ndl/query-browser.svg[]
+
+[.category]
+Neo4j Ops Manager
+
+[.description]
+Learn how to monitor, administer, and operate all of the Neo4j DBMSs in an Enterprise with Neo4j Ops Manager.
+
+[.link]
+link:{docs-home}/ops-manager[]
\ No newline at end of file
diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
index 899c9e2a..7da697c0 100644
--- a/preview-src/ui-model.yml
+++ b/preview-src/ui-model.yml
@@ -114,8 +114,13 @@ page:
       url: docs-ndl.html
       urlType: internal
       module: ROOT
-    - content: Docs Sub Hub
-      url: docs-sub-hub.html
+    - content: Docs Hub
+      url: docs-hub.html
+      urlType: internal
+      module: ROOT
+      items:
+    - content: Explainer
+      url: docs-explainer.html
       urlType: internal
       module: ROOT
       items:
diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
index 21fd55fb..a90a110d 100644
--- a/src/css/docs-ndl.css
+++ b/src/css/docs-ndl.css
@@ -328,6 +328,11 @@ body.docs-ndl .next-steps .sectionbody ul li div.paragraph {
 
 /* explainer */
 
+body.docs-ndl .cards .sectionbody > div.paragraph {
+  display: flex;
+  flex: 0 1 100%;
+}
+
 body.docs-ndl.explainer .sectionbody .video {
   display: block;
   width: 100%;