New GSG and GA banners and fixes (#265)

Co-authored-by: Neil Dewhurst <[email protected]>

preview-src/docs-ndl.adoc

@@ -6,10 +6,27 @@
 :!toc:
 :page-toclevels: -1
 
+
+[.widget.banner.start]
+== Getting started
+
+// [.icon]
+// image:icons/ndl/start.svg[]
+
+--
+[.caption]
+Get started with Neo4j
+
+[.description]
+Learn more about graph databases and start working with your data using Neo4j tools.
+
+[.button]
+xref:tutorials:index.adoc[Get started]
+--
+
 [.cards.icon-l]
 == CTA cards
 
-
 [.featured.label--featured]
 === Deployment options
 
@@ -19,10 +36,6 @@ image:icons/ndl/deployment-options.svg[]
 [.description]
 Choose from self-managed local and cloud deployments, or fully-managed options. See how to run Neo4j on Docker or Kubernetes.
 
-[.link]
-xref:deployment-options:index.adoc[Create your database]
-
-
 === Cypher
 
 [.icon]
@@ -163,18 +176,31 @@ Tutorials & How-to guides
 xref:tutorials:index.adoc[All tutorials]
 --
 
+[.widget.highlights]
+== GraphAcademy courses
 
-[.cards.icon-s.align-center]
-== Other resources
+[.icon]
+image:icons/ndl/ga-home.svg[]
+
+--
+[.caption]
+GraphAcademy courses
 
+[.list]
+* link:{docs-home}/genai/tutorials/embeddings-vector-indexes/[Embedding & Vector Indexes Tutorial]
+* xref:{docs-home}/getting-started/tutorials/import-relational/[Import data from a relational database into Neo4j]
+* xref:{docs-home}/getting-started/tutorials/recommendation-engine/[Build a Cypher recommendation engine]
+* link:{docs-home}/operations-manual/current/tutorial/tutorial-composite-database/[Set up and use a composite database]
+* link:{docs-home}/cdc/current/procedures/query-examples/[Capture and track changes in real-time]
+* link:{docs-home}/graph-data-science-client/current/tutorials/centrality-algorithms/[Apply centrality algorithms to your graph]
 
-=== Learn and become Neo4j certified
+[.footer-link]
+xref:tutorials:index.adoc[All tutorials]
+--
 
-[.icon]
-image:icons/ndl/icon-graphacademy.svg[]
 
-[.link]
-link:https://graphacademy.neo4j.com/?ref=docs-nav[Explore GraphAcademy]
+[.cards.icon-s.align-center]
+== Other resources
 
 === Join forums and discussions
 
@@ -185,7 +211,7 @@ image:icons/ndl/icon-community.svg[]
 link:https://community.neo4j.com/[Community forum] 
 link:https://discord.com/invite/neo4j[Discord]
 
-=== Developer blogs, articles and books
+=== Dev blogs, articles, and books
 
 [.icon]
 image:icons/ndl/icon-developercenter.svg[]

src/css/docs-ndl.css

@@ -208,9 +208,25 @@ body.docs-ndl .widget .sectionbody {
   border: none;
   padding: 1rem;
   row-gap: 0;
+  column-gap: 2rem;
+}
+
+body.docs-ndl .widget.banner .sectionbody {
+  background: rgba(var(--colors-baltic-60));
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: contain;
+  border-radius: 1rem;
+  border: none;
+  padding: 2rem;
+  row-gap: 0;
   column-gap: 0;
 }
 
+body.docs-ndl .widget.banner.start .sectionbody {
+  background-image: url(../img/start.svg);
+}
+
 body.docs-ndl.sub .widget .sectionbody {
   background: transparent;
   padding: 0;
@@ -219,6 +235,14 @@ body.docs-ndl.sub .widget .sectionbody {
   column-gap: 1rem;
 }
 
+body.docs-ndl.sub .widget.banner .sectionbody {
+  background: transparent;
+  padding: 0;
+  justify-content: flex-start;
+  row-gap: 1rem;
+  column-gap: 1rem;
+}
+
 body.docs-ndl.sub .widget .sectionbody .sect2 {
   border-radius: 1rem;
   flex: 0 0 32%;
@@ -356,26 +380,39 @@ body.docs-ndl.explainer .sect1 {
   flex-wrap: wrap;
 }
 
-body.docs-ndl .paragraph.caption,
-body.docs-ndl .paragraph.footer-link {
+body.docs-ndl .paragraph.caption {
   display: flex;
   width: 100%;
   padding: 1rem;
   margin: 0;
   color: var(--neutral-color);
-}
-
-body.docs-ndl .paragraph.caption {
   font-family: var(--header-font-family);
   font-size: var(--doc-font-size-h2);
   font-weight: var(--font-weight-normal);
 }
 
 body.docs-ndl .paragraph.footer-link {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  color: var(--neutral-color);
   justify-content: flex-end;
   padding-right: 0;
 }
 
+body.docs-ndl .banner .paragraph {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  margin: 1rem;
+  color: var(--color-white);
+}
+
+body.docs-ndl .banner .paragraph.description {
+  padding-right: 2rem;
+}
+
 /* selectable cards */
 
 body.docs-ndl .cards .sect2.selectable {
@@ -396,15 +433,81 @@ body.docs-ndl .cards .sect2.selectable:hover div.description {
   text-decoration: underline;
 }
 
+/* banner */
+
+body.docs-ndl.hub .banner .sectionbody,
+body.docs-ndl.explainer .banner .sectionbody {
+  justify-content: space-between;
+}
+
+body.docs-ndl .banner .sectionbody > div.openblock {
+  flex: 0 0 50%;
+}
+
+body.docs-ndl .banner .sectionbody > div.icon {
+  flex: 0 0 40%;
+  padding: 0;
+  object-fit: cover;
+  border-radius: 0.25rem;
+  margin-bottom: 0;
+}
+
+body.docs-ndl .banner .icon img {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+body.docs-ndl .banner .button {
+  border-radius: 0.25rem;
+  padding: 0.5em 1.5em;
+  font-weight: 400;
+  text-align: center;
+  /* margin-left: 24px; */
+}
+
+@media screen and (max-width: 1240px) {
+  body.docs-ndl .widget.banner .sectionbody {
+    background-image: none !important;
+  }
+
+  body.docs-ndl .widget.banner .sectionbody > div.openblock {
+    flex: 0 0 100%;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .banner .banner-item.button-cta {
+    padding-right: 0 1rem 0;
+  }
+}
+
+.banner .button:hover {
+  background: rgba(var(--banner-background-color));
+  color: var(--colors-baltic-25);
+}
+
+.description2 {
+  color: var(--color-white);
+  font-size: var(--doc-font-size--desktop);
+  line-height: var(--doc-line-height);
+  margin: var(--doc-margin);
+  max-width: var(--doc-max-width);
+  padding: 12px 24px 12px;
+}
+
 /* highlights */
 
 body.docs-ndl .highlights .sectionbody > div.openblock {
-  flex: 0 1 40%;
+  flex: 1 1 40%;
 }
 
 body.docs-ndl .highlights .sectionbody > div.icon {
-  flex: 0 1 60%;
-  padding: 0 6rem;
+  flex: 0 1 52%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 4rem;
+  padding-right: 5.438rem;
   align-self: center;
 }
 
@@ -421,6 +524,16 @@ body.docs-ndl .highlights .list ul li {
   padding-bottom: 0.5rem;
 }
 
+body.docs-ndl .highlights .list2 {
+  padding: 0;
+}
+
+body.docs-ndl .highlights .list2 ul li {
+  border-bottom: 1px solid rgba(var(--colors-neutral-20));
+  padding-bottom: 0.5rem;
+  list-style-type: none;
+}
+
 body.docs-ndl .widget.highlights .footer-link {
   text-align: end;
 }
@@ -440,7 +553,7 @@ body.docs-ndl .widget.highlights .icon img {
 /* lists */
 
 body.docs-ndl .lists .sectionbody > div.sect2 {
-  flex: 0 0 25%;
+  flex: 0 0 22%;
 }
 
 body.docs-ndl .widget .sectionbody > div.sect2 .ulist {
@@ -576,6 +689,13 @@ body.docs-ndl .sect2 a > h3 {
 
 body.docs-ndl .cards .sect2 .icon,
 body.docs-ndl .widget .icon {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+body.docs-ndl .cards .sect2 .icon,
+body.docs-ndl .widget.banner .icon {
   order: 1;
   padding: 0;
   margin: 0;
@@ -603,7 +723,22 @@ body.docs-ndl .widget.highlights .icon {
   padding: 2rem;
 }
 
-body.docs-ndl .cards .sect2 .icon img {
+/* For the 1st, 3rd etc highlights, move the image to the right */
+body.docs-ndl .widget.highlights:nth-of-type(odd) .icon {
+  order: 1;
+}
+
+/* We can use this rule to apply styles to the 2nd, 4th highlights etc widget */
+body.docs-ndl .widget.highlights:nth-of-type(even) .openblock {
+  /* margin-right:40px; */
+}
+
+/* For the bottom cards */
+body.docs-ndl .cards:nth-last-child(-n+2) .sectionbody {
+  flex: 0 0 152%;
+}
+
+body.docs-ndl body.docs-ndl .cards .sect2 .icon img {
   width: 4rem;
   height: 4rem;
   padding: 0;
@@ -758,6 +893,15 @@ body.docs-ndl .cards .sect2 .ulist ul li {
     justify-content: center;
   }
 
+  body.docs-ndl .widget.banner .sectionbody {
+    row-gap: 2rem;
+  }
+
+  /* body.docs-ndl .widget.banner .sectionbody > div {
+    flex: 0 1 100%;
+    justify-content: center;
+  } */
+
   body.docs-ndl .lists ul {
     /* text-align: center; */
   }