hazelcast · fantkolja · Jul 3, 2024 · Jul 9, 2024 · Jul 9, 2024 · Jul 10, 2024
diff --git a/.github/CONTRIBUTING.adoc b/.github/CONTRIBUTING.adoc
@@ -193,6 +193,18 @@ None of the other data in the `page` variable is applicable for this page.
 
 When you run the preview, you can see the 404 page by visiting the URL \http://localhost:5252/404.html.
 
+There are special layouts for category landing pages.
+E.g. for the Hazelcast Platform landing page use the following.
+
+[source,asciidoc]
+----
+= Hazelcast Platform
+:page-layout: platform-category-landing
+----
+
+
+In the local build it will be available under `http://localhost:5252/hz-platform.html`.
+
 === Tabs
 
 The {url-docs-playbook}[documentation playbook] includes a tabs block extension.

diff --git a/preview-src/hz-platform.adoc b/preview-src/hz-platform.adoc
@@ -0,0 +1,2 @@
+= Hazelcast Platform
+:page-layout: platform-category-landing
diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
@@ -32,6 +32,18 @@ site:
       version: '4.0'
       displayVersion: '4.0'
     latestVersion: *latest_version_hz
+  - name: HZ Platform
+    title: HZ Platform
+    url: '/hz-platform.html'
+    versions:
+    - &latest_version_hz_platform
+      url: '/hz-platform.html'
+      version: '4.1'
+      displayVersion: '4.1'
+    - url: '/hz-platform.html'
+      version: '4.0'
+      displayVersion: '4.0'
+    latestVersion: *latest_version_hz_platform
   - name: tutorials
     title: Tutorials
     url: '/tutorials.html'
@@ -116,6 +128,9 @@ page:
       - content: How to HZ
         url: '/how-to-hz.html#4'
         urlType: internal
+      - content: HZ Platform
+        url: '/hz-platform.html'
+        urlType: internal
   - content: Hazelcast Clients
     url: '#2'
     urlType: internal

diff --git a/src/css/category-landing.css b/src/css/category-landing.css
@@ -0,0 +1,112 @@
+.category-landing-content {
+  padding-top: 1rem;
+}
+
+.category-landing-section {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.category-landing-section.category-landing-features {
+  justify-content: space-around;
+  align-items: center;
+}
+
+.category-landing-description-section {
+  border-bottom: 1px solid var(--section-divider-color);
+}
+
+.category-landing-features {
+  background-color: var(--info-light);
+  border: 1px solid var(--accent);
+  border-radius: 10px;
+  padding: 1rem 2rem;
+}
+
+.doc h2.category-landing-title {
+  border: none;
+  color: var(--accent);
+  margin-bottom: 6px;
+  font-weight: 600;
+}
+
+.category-landing-image {
+  height: auto;
+  align-self: center;
+  display: none;
+}
+
+@media screen and (min-width: 600px) {
+  .category-landing-image {
+    display: block;
+  }
+}
+
+.category-landing-description-image {
+  width: 40%;
+  max-width: 400px;
+}
+
+.category-landing-list-image {
+  width: 30%;
+  max-width: 300px;
+}
+
+.category-landing-features-image {
+  width: 50%;
+  max-width: 500px;
+}
+
+.category-landing-tabs-image {
+  width: 40%;
+  max-width: 500px;
+}
+
+.doc p.category-landing-text {
+  margin-bottom: 0.5rem;
+}
+
+.category-landing-tab-buttons {
+  display: flex;
+  margin: 2rem 0;
+}
+
+.category-landing-tab-button {
+  flex-grow: 1;
+  border-bottom: 1px solid var(--section-divider-color);
+  text-align: center;
+  text-decoration: none !important;
+  color: var(--neutral-light) !important;
+  font-family: var(--heading-font-family);
+  font-weight: 600;
+}
+
+.category-landing-tab-button.active {
+  border-bottom: 3px solid var(--accent);
+  color: var(--accent) !important;
+}
+
+.category-landing-tab-content {
+  align-items: stretch;
+  gap: 1rem;
+  display: none;
+}
+
+.category-landing-tab-content.active {
+  display: flex;
+}
+
+.category-landing-tab-description {
+  background-color: var(--info-light);
+  border-radius: 10px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.doc .category-landing-tab-description-item {
+  margin-bottom: 0.5rem;
+}
diff --git a/src/css/site.css b/src/css/site.css
@@ -28,3 +28,4 @@
 @import "footer.css";
 @import "highlight.css";
 @import "print.css";
+@import "category-landing.css";
diff --git a/src/img/category-landing/cloud-providers.png b/src/img/category-landing/cloud-providers.png
diff --git a/src/img/category-landing/develop-solutions.png b/src/img/category-landing/develop-solutions.png
diff --git a/src/img/category-landing/features-overview.png b/src/img/category-landing/features-overview.png
diff --git a/src/img/category-landing/real-time-sync.png b/src/img/category-landing/real-time-sync.png
diff --git a/src/layouts/platform-category-landing.hbs b/src/layouts/platform-category-landing.hbs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  {{> head defaultPageTitle='Hazelcast'}}
+</head>
+<body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+{{> header}}
+{{> body-platform-category-landing}}
+{{> feedback-footer }}
+{{> footer}}
+</body>
+</html>
diff --git a/src/partials/article-platform-category-landing.hbs b/src/partials/article-platform-category-landing.hbs
@@ -0,0 +1,158 @@
+<article class="doc">
+  {{>nav-toggle}}
+  <div class="category-landing-content">
+    <div class="category-landing-section category-landing-description-section">
+      <div class="category-landing-article">
+        <h2 class="category-landing-title">Hazelcast Platform</h2>
+        <p class="category-landing-text">
+          Combining a distributed compute engine and a fast data store,
+          Hazelcast Platform offers unmatched performance, resilience,
+          and scale for real-time and AI applications. See the <a href="https://hazelcast.com/use-cases/" target="_blank">Use Cases</a>.
+        </p>
+        <p class="category-landing-text">
+          Combine Platform with our <a href="https://docs.hazelcast.com/clc/latest/overview">CLC</a> command line interface,
+          <a href="https://docs.hazelcast.com/management-center/latest/getting-started/overview">Management Centre</a> UI
+          management and monitoring, Kubernetes <a href="https://docs.hazelcast.com/operator/latest/">Operator</a> tools.
+        </p>
+        <p class="category-landing-text">
+          Integrate with other systems using <a href="https://docs.hazelcast.com/hazelcast/latest/integrate/connectors">Connectors</a>.
+        </p>
+        <p class="category-landing-text">
+          Connect your <a href="https://docs.hazelcast.com/hazelcast/5.4/clients/hazelcast-clients">clients</a> to Hazelcast clusters.
+        </p>
+      </div>
+      <img class="category-landing-image category-landing-description-image" src="{{{uiRootPath}}}/img/category-landing/real-time-sync.png" alt="real-time" />
+    </div>
+
+    <div class="category-landing-section">
+      <img class="category-landing-image category-landing-list-image" src="{{{uiRootPath}}}/img/category-landing/cloud-providers.png" alt="cloud providers" />
+      <div class="category-landing-article">
+        <h2 class="category-landing-title">Enterprise</h2>
+        <p class="category-landing-text">
+          You can enjoy Hazelcast Platform at no cost with our Community edition,
+          but you get so much more with our Enterprise edition.
+        </p>
+        <ul class="category-landing-list">
+          <li class="category-landing-list-item">
+            Access to <a href="http://hazelcast/support.com/s/">Hazelcast Support</a> with defined SLAs
+          </li>
+          <li class="category-landing-list-item">
+            Patch releases
+          </li>
+          <li class="category-landing-list-item">
+            <a href="https://docs.hazelcast.com/hazelcast/latest/secure-cluster/hardening-recommendations">Security and persistence</a>
+          </li>
+          <li class="category-landing-list-item">
+            <a href="https://docs.hazelcast.com/hazelcast/latest/cp-subsystem/cp-subsystem">CP Subsystem</a>
+          </li>
+          <li class="category-landing-list-item">
+            <a href="https://docs.hazelcast.com/hazelcast/latest/storage/high-density-memory">HD Memory</a>
+          </li>
+          <li class="category-landing-list-item">
+            <a href="https://docs.hazelcast.com/hazelcast/latest/wan/wan">WAN Replication</a>
+          </li>
+          <li class="category-landing-list-item">
+            <a href="https://docs.hazelcast.com/hazelcast/latest/maintain-cluster/rolling-upgrades">Rolling upgrades</a>
+          </li>
+          <li class="category-landing-list-item">
+            Stable long-term and innovative short-term releases
+          </li>
+          <li class="category-landing-list-item">
+            <a href="https://docs.hazelcast.com/management-center/latest/getting-started/overview">Management Center</a> for
+            larger clusters and <a href="https://docs.hazelcast.com/operator/latest/">Operator</a> for Kubernetes
+          </li>
+          <li class="category-landing-list-item">
+            New and improved <a href="https://docs.hazelcast.com/hazelcast/latest/integrate/connectors">connectors</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="category-landing-tabs">
+      <div class="category-landing-tab-buttons">
+        <a href="#developer" class="category-landing-tab-button" data-category-landing-tab-button>
+          Developer
+        </a>
+        <a href="#operator" class="category-landing-tab-button" data-category-landing-tab-button>
+          Operator
+        </a>
+        <a href="#architect" class="category-landing-tab-button" data-category-landing-tab-button>
+          Architect
+        </a>
+        <a href="#devops" class="category-landing-tab-button" data-category-landing-tab-button>
+          DevOps
+        </a>
+        <a href="#data-scientist" class="category-landing-tab-button" data-category-landing-tab-button>
+          Data Scientist
+        </a>
+      </div>
+
+      <div class="category-landing-tab-content" data-tab="developer" data-is-default-tab="true">
+        <div class="category-landing-tab-description">
+          <p class="category-landing-tab-description-item">
+            Follow our tutorials to <a href="https://docs.hazelcast.com/hazelcast/latest/getting-started/enterprise-overview">get started with Hazelcast Enterprise</a>.
+          </p>
+          <p class="category-landing-tab-description-item">
+            Check the version <a href="https://docs.hazelcast.com/hazelcast/latest/deploy/versioning-compatibility">compatibilities</a> or
+            <a href="https://docs.hazelcast.com/hazelcast/latest/release-notes/5-4-0">Release Notes</a>.
+          </p>
+          <p class="category-landing-tab-description-item">
+            Find out about best practices and <a href="https://docs.hazelcast.com/hazelcast/latest/configuration/understanding-configuration">configuration methods</a>.
+          </p>
+          <p class="category-landing-tab-description-item">
+            Deploy with <a href="https://docs.hazelcast.com/hazelcast/latest/kubernetes/deploying-in-kubernetes">Kubernetes</a>,
+            <a href="https://docs.hazelcast.com/hazelcast/latest/deploy/deploying-with-docker">Docker</a>, or in a <a
+            href="https://docs.hazelcast.com/hazelcast/latest/deploy/deploying-in-cloud">public cloud</a>.
+          </p>
+          <p class="category-landing-tab-description-item">
+            Integrate and extend with <a href="https://docs.hazelcast.com/hazelcast/latest/integrate/connectors">connectors</a> and
+            <a href="https://docs.hazelcast.com/hazelcast/latest/plugins/cloud-discovery">plugins</a>.
+          </p>
+        </div>
+        <img class="category-landing-image category-landing-tabs-image" src="{{{uiRootPath}}}/img/category-landing/develop-solutions.png" alt="develop" />
+      </div>
+
+      <div class="category-landing-tab-content" data-tab="operator">
+        LET'S PUT SOME CONTENT FOR OPERATOR
+      </div>
+      <div class="category-landing-tab-content" data-tab="architect">
+        LET'S PUT SOME CONTENT FOR ARCHITECT
+      </div>
+      <div class="category-landing-tab-content" data-tab="devops">
+        LET'S PUT SOME CONTENT FOR DEVOPS
+      </div>
+      <div class="category-landing-tab-content" data-tab="data-scientist">
+        LET'S PUT SOME CONTENT FOR DATA SCIENTIST
+      </div>
+
+    </div>
+
+    <div>
+      <h2 class="category-landing-title">Quick Peek</h2>
+      <div class="category-landing-section category-landing-features">
+        <img class="category-landing-image category-landing-features-image" src="{{{uiRootPath}}}/img/category-landing/features-overview.png" alt="features" />
+        <div class="category-landing-article">
+          <p class="category-landing-text">
+            Watch the videos to see how to get started with Hazelcast.
+          </p>
+          <p class="category-landing-text">
+            Watch as we take you through:
+          </p>
+          <ul class="category-landing-list">
+            <li class="category-landing-list-item">Starting your cluster</li>
+            <li class="category-landing-list-item">Connecting your client (we're using a Java client)</li>
+            <li class="category-landing-list-item">Updating the configuration</li>
+            <li class="category-landing-list-item">Populating  data structures</li>
+            <li class="category-landing-list-item">Building pipelines</li>
+            <li class="category-landing-list-item">Adding user code namespaces</li>
+            <li class="category-landing-list-item">Connecting to an external database</li>
+            <li class="category-landing-list-item">Running Queries</li>
+            <li class="category-landing-list-item">Monitoring and managing the cluster</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</article>
+
+{{> category-landing-tabs-script}}
diff --git a/src/partials/body-platform-category-landing.hbs b/src/partials/body-platform-category-landing.hbs
@@ -0,0 +1,4 @@
+<div class="body">
+  {{> nav}}
+  {{> main-platform-category-landing}}
+</div>
diff --git a/src/partials/category-landing-tabs-script.hbs b/src/partials/category-landing-tabs-script.hbs
@@ -0,0 +1,32 @@
+<script>
+  (() => {
+    const DEFAULT_TAB = document.querySelector('[data-is-default-tab="true"]')?.getAttribute('data-tab')
+      || document.querySelector('[data-tab]')?.getAttribute('data-tab');
+
+    const activateTab = (id) => {
+      const oldActiveButton = document.querySelector('[data-category-landing-tab-button].active');
+      const oldActiveSection = document.querySelector('[data-tab].active');
+
+      const newActiveButton = document.querySelector(`[data-category-landing-tab-button][href="#${id}"]`);
+      const newActiveSection = document.querySelector(`[data-tab="${id}"]`);
+      if (newActiveButton && newActiveSection) {
+        oldActiveButton?.classList.remove('active');
+        oldActiveSection?.classList.remove('active');
+        newActiveButton.classList.add('active');
+        newActiveSection.classList.add('active');
+      }
+    };
+
+    const activateInitialTab = () => {
+      const newHash = location.hash.slice(1) || DEFAULT_TAB;
+      activateTab(newHash);
+    };
+
+    window.addEventListener('hashchange', (event) => {
+      const newHash = new URL(event.newURL).hash.slice(1) || DEFAULT_TAB;
+      activateTab(newHash);
+    })
+
+    activateInitialTab();
+  })()
+</script>
diff --git a/src/partials/main-platform-category-landing.hbs b/src/partials/main-platform-category-landing.hbs
@@ -0,0 +1,6 @@
+<main class="article">
+  <div class="content">
+    {{> article-platform-category-landing}}
+  </div>
+</main>
+