New GSG and GA banners and fixes

preview-src/docs-ndl.adoc

@@ -6,6 +6,24 @@
 :!toc:
 :page-toclevels: -1
 
+
+[.widget2.banner]
+== Getting started
+
+[.icon]
+image:icons/ndl/start.svg[]
+
+--
+[.caption2]
+Get started with Neo4j
+
+[.description2]
+Learn more about graph databases and start working with your data using Neo4j tools.
+
+[.banner.button]
+xref:tutorials:index.adoc[Get started]
+--
+
 [.cards.icon-l]
 == CTA cards
 
@@ -19,10 +37,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,6 +177,28 @@ Tutorials & How-to guides
 xref:tutorials:index.adoc[All tutorials]
 --
 
+[.widget3.highlights]
+== GraphAcademy courses
+
+[.icon2]
+image:icons/ndl/ga-home.png[]
+
+--
+[.caption3]
+GraphAcademy courses
+
+[.list2]
+* 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]
+
+[.footer-link]
+xref:tutorials:index.adoc[All tutorials]
+--
+
 
 [.cards.icon-s.align-center]
 == Other resources
@@ -185,7 +221,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

@@ -211,6 +211,24 @@ body.docs-ndl .widget .sectionbody {
   column-gap: 0;
 }
 
+body.docs-ndl .widget2 .sectionbody {
+  background: rgba(var(--colors-baltic-60));
+  border-radius: 1rem;
+  border: none;
+  padding: 0;
+  row-gap: 0;
+  column-gap: 0;
+}
+
+body.docs-ndl .widget3 .sectionbody {
+  background: rgba(var(--colors-neutral-10));
+  border-radius: 1rem;
+  border: none;
+  padding: 1rem 0 1rem;
+  row-gap: 0;
+  column-gap: 3rem;
+}
+
 body.docs-ndl.sub .widget .sectionbody {
   background: transparent;
   padding: 0;
@@ -219,6 +237,22 @@ body.docs-ndl.sub .widget .sectionbody {
   column-gap: 1rem;
 }
 
+body.docs-ndl.sub .widget2 .sectionbody {
+  background: transparent;
+  padding: 0;
+  justify-content: flex-start;
+  row-gap: 1rem;
+  column-gap: 1rem;
+}
+
+body.docs-ndl.sub .widget3 .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%;
@@ -351,21 +385,56 @@ 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.footer-link {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  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.caption2 {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  margin: 12px 24px 0;
+  color: var(--color-white);
+}
+
+body.docs-ndl .paragraph.caption2 {
+  font-family: var(--header-font-family);
+  font-size: var(--doc-font-size-h2);
+  font-weight: var(--font-weight-normal);
+}
+
+body.docs-ndl .paragraph.caption3 {
+  display: flex;
+  width: 100%;
+  padding: 12px 30px 12px;
+  margin: 0;
+  color: var(--neutral-color);
+}
+
+body.docs-ndl .paragraph.caption3 {
+  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 {
   justify-content: flex-end;
   padding-right: 0;
@@ -391,22 +460,90 @@ body.docs-ndl .cards .sect2.selectable:hover div.description {
   text-decoration: underline;
 }
 
+/* banner */
+
+body.docs-ndl .banner .sectionbody > div.openblock {
+  flex: 0 0 50%;
+  padding: 3px 3px 3px;
+  border-bottom: 0;
+  margin-bottom: 0;
+}
+
+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 {
+  width: 639px;
+  height: 246px;
+  padding: 0 6.7rem 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 (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%;
 }
 
 body.docs-ndl .highlights .sectionbody > div.icon {
-  flex: 0 1 60%;
-  padding: 0 6rem;
+  flex: 0 1 40%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 8rem;
+  padding-right: 5.438rem;
+  align-self: center;
+}
+
+body.docs-ndl .highlights .sectionbody > div.icon2 {
+  flex: 0 1 40%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 5rem;
+  padding-right: 4rem;
   align-self: center;
 }
 
 body.docs-ndl .highlights .sectionbody > div.icon span.image {
   display: flex;
 }
 
+body.docs-ndl .highlights .sectionbody > div.icon2 span.image {
+  display: flex;
+}
+
 body.docs-ndl .highlights .list {
   padding-left: 1rem;
 }
@@ -416,6 +553,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;
 }
@@ -435,7 +582,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 {
@@ -466,7 +613,7 @@ body.docs-ndl .sect2 {
 }
 
 body.docs-ndl .cards .sectionbody > div.sect2 {
-  flex: 0 1 32%;
+  flex: 0 1 29%;
   /* margin-right: 1rem; */
 }
 
@@ -577,6 +724,22 @@ body.docs-ndl .widget .icon {
   width: 100%;
 }
 
+body.docs-ndl .cards .sect2 .icon,
+body.docs-ndl .widget2 .icon {
+  order: 1;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+body.docs-ndl .cards .sect2 .icon,
+body.docs-ndl .widget3 .icon {
+  order: 0;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
 body.docs-ndl .cards .sect2 .icon p {
   display: flex;
   width: -webkit-fill-available;
@@ -598,6 +761,10 @@ body.docs-ndl .widget.highlights .icon {
   padding: 2rem;
 }
 
+body.docs-ndl .widget3.highlights .icon {
+  padding: 2rem;
+}
+
 body.docs-ndl .cards .sect2 .icon img {
   width: 4rem;
   height: 4rem;
@@ -753,6 +920,24 @@ body.docs-ndl .cards .sect2 .ulist ul li {
     justify-content: center;
   }
 
+  body.docs-ndl .widget2 .sectionbody {
+    row-gap: 2rem;
+  }
+
+  body.docs-ndl .widget2 .sectionbody > div {
+    flex: 0 1 100%;
+    justify-content: center;
+  }
+
+  body.docs-ndl .widget3 .sectionbody {
+    row-gap: 2rem;
+  }
+
+  body.docs-ndl .widget3 .sectionbody > div {
+    flex: 0 1 100%;
+    justify-content: center;
+  }
+
   body.docs-ndl .lists ul {
     /* text-align: center; */
   }
@@ -762,6 +947,16 @@ body.docs-ndl .cards .sect2 .ulist ul li {
     flex: 0 0 48%;
   }
 
+  body.docs-ndl .widget2 .sectionbody .sect2,
+  body.docs-ndl.sub .widget2 .sectionbody .sect2 {
+    flex: 0 0 48%;
+  }
+
+  body.docs-ndl .widget3 .sectionbody .sect2,
+  body.docs-ndl.sub .widget3 .sectionbody .sect2 {
+    flex: 0 0 48%;
+  }
+
   body.docs-ndl .lists .sectionbody > div.sect2 > * {
     /* margin: 0 auto; */
   }