Arcade demos

content/demos/_index.md

@@ -0,0 +1,59 @@
+---
+title: Interactive demos
+description: Hands-on interactive walkthroughs of Validated Patterns.
+menu:
+  main:
+    name: Demos
+    weight: 22
+demos:
+  - id: 5nsew2VgJfkkdd5sQ0Mr
+    title: Deploy a Validated Pattern on RHDP
+    thumbnail: /images/demos/deploy-pattern-on-rhdp.png
+    description: Deploy a Validated Pattern on the Red Hat Demo Platform (RHDP) without provisioning your own cluster. Walk through the steps to launch a pattern in a pre-built environment.
+    pattern_link: https://demo.redhat.com
+    pattern_label: Red Hat Demo Platform
+  - id: U3ztnJKzMjsNM05f0ff5
+    title: Using the Validated Patterns UI
+    thumbnail: /images/demos/validated-patterns-ui.png
+    description: See how the Validated Patterns framework looks and feels once deployed. This walkthrough covers the GitOps-driven UI, ArgoCD application views, and how to navigate a running pattern.
+    pattern_link: /patterns/multicloud-gitops/
+    pattern_label: Multicloud GitOps pattern
+  - id: UusleQSZch8ZZyimr7aj
+    title: RAG VP UI — Red Hat Summit 2026
+    thumbnail: /images/demos/rag-vp-ui-summit-2026.png
+    description: A walkthrough of the RAG Validated Pattern UI as shown at Red Hat Summit 2026. See the end-to-end experience from cluster deployment to a running AI application.
+  - id: 6SxOiDc3P7uMg38jAOLw
+    title: RAG-LLM GitOps pattern on Microsoft Azure
+    thumbnail: /images/demos/rag-llm-gitops-azure.png
+    description: LLM-based document generation on Azure with Red Hat OpenShift AI, from vector database ingestion to a running chatbot interface.
+    pattern_link: /patterns/azure-rag-llm-gitops/
+    pattern_label: RAG-LLM pattern on Microsoft Azure
+  - id: drMY04qRCqQuq2BkZWpn
+    title: RAG AI and Quickstart VP UI
+    thumbnail: /images/demos/rag-ai-application.png
+    description: Tour the RAG-augmented chatbot UI. The RAG AI UI demo and RAG AI Quickstart VP UI use the same Arcade walkthrough (one share link). See how the application generates project proposals using Red Hat product documentation.
+    pattern_link: /patterns/rag-llm-gitops/
+    pattern_label: AI generation with LLM and RAG
+  - id: WBiokIqAOZRlk7aXkvuU
+    title: RAG LLM on Lenovo SNO
+    thumbnail: /images/demos/rag-llm-lenovo-sno.png
+    description: RAG LLM on a Lenovo Single Node OpenShift cluster — CPU-based RAG without GPU hardware on compact infrastructure.
+    pattern_link: /patterns/rag-llm-cpu/
+    pattern_label: RAG LLM Chatbot on CPU
+  - id: Qla3IzaQVM9yQP27TWDU
+    title: Performing disaster recovery with RamenDR backed by Dell PowerStore
+    thumbnail: /images/demos/ramendr-dell-powerstore-dr.png
+    description: Walk through regional disaster recovery for OpenShift Virtualization workloads using RamenDR with Dell PowerStore storage backing the recovery workflow.
+    pattern_link: /patterns/ramendr-starter-kit/
+    pattern_label: RamenDR Starter Kit
+next_steps:
+  - url: /patterns/
+    label: Explore all patterns
+    text: browse the full catalog by tier and use case
+  - url: /learn/quickstart/
+    label: Read the quickstart guide
+    text: step-by-step instructions for your first deployment
+  - url: /learn/about-validated-patterns/
+    label: Learn the concepts
+    text: understand how the framework works
+---

content/patterns/azure-rag-llm-gitops/_index.adoc

@@ -22,6 +22,7 @@ links:
   install: getting-started
   bugs: https://github.com/validatedpatterns/rag-llm-gitops/issues
   feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform
+  demo: 6SxOiDc3P7uMg38jAOLw
 ---
 
 :toc:

content/patterns/multicloud-gitops/_index.adoc

@@ -20,6 +20,7 @@ links:
   arch: https://www.redhat.com/architect/portfolio/detail/8-hybrid-multicloud-management-with-gitops
   bugs: https://github.com/validatedpatterns/multicloud-gitops/issues
   feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform
+  demo: U3ztnJKzMjsNM05f0ff5
 ci: mcgitops
 ---
 :toc:

content/patterns/rag-llm-cpu/_index.md

@@ -21,6 +21,7 @@ links:
   install: getting-started
   bugs: https://github.com/validatedpatterns-sandbox/rag-llm-cpu/issues
   feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform
+  demo: WBiokIqAOZRlk7aXkvuU
 ---
 
 # **CPU-based RAG LLM chatbot**

content/patterns/rag-llm-gitops/_index.md

@@ -24,6 +24,7 @@ links:
   install: getting-started
   bugs: https://github.com/validatedpatterns/rag-llm-gitops/issues
   feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform
+  demo: drMY04qRCqQuq2BkZWpn
 ci: ragllm
 ---
 

content/patterns/rag-quickstart/_index.adoc

@@ -15,6 +15,7 @@ links:
   install: getting-started
   bugs: https://github.com/validatedpatterns-sandbox/ai-quickstart-rag/issues
   feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform
+  demo: drMY04qRCqQuq2BkZWpn
 ---
 :toc:
 :imagesdir: /images

content/patterns/ramendr-starter-kit/_index.adoc

@@ -23,6 +23,7 @@ links:
   install: getting-started
   bugs: https://github.com/validatedpatterns/ramendr-starter-kit/issues
   feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform
+  demo: Qla3IzaQVM9yQP27TWDU
 ci: ramendr-starter-kit
 ---
 

layouts/blog/list.html

@@ -32,6 +32,6 @@ <h1 class="pf-c-title pf-m-4xl">
         {{ partial "paginator.html" . }}
       </div>
   </section>
-  {{ partial "footer.html" . }}
+  {{ partialCached "footer.html" . }}
 </main>
 {{ end }}

layouts/blog/single.html

@@ -49,6 +49,6 @@ <h1>
           </div>
       </div>
     </section>
-    {{ partial "footer.html" . }}
+    {{ partialCached "footer.html" . }}
   </main>
 {{ end }}

layouts/blog_tags/list.html

@@ -35,6 +35,6 @@ <h1 class="pf-c-title pf-m-4xl">
         {{ partial "paginator.html" . }}
       </div>
   </section>
-  {{ partial "footer.html" . }}
+  {{ partialCached "footer.html" . }}
 </main>
 {{ end }}

layouts/ci/single.html

@@ -26,6 +26,6 @@ <h1>{{- .Title -}}</h1>
       </div>
       </div>
     </section>
-    {{ partial "footer.html" . }}
+    {{ partialCached "footer.html" . }}
   </main>
 {{ end }}

layouts/contribute/list.html

@@ -34,6 +34,6 @@ <h1 class="pf-c-title pf-m-4xl">
       </div>
     </div>
   </section>
-  {{ partial "footer.html" . }}
+  {{ partialCached "footer.html" . }}
 </main>
 {{ end }}

layouts/contribute/single.html

@@ -16,6 +16,6 @@
         </div>
       </div>
     </section>
-    {{ partial "footer.html" . }}
+    {{ partialCached "footer.html" . }}
   </main>
 {{ end }}

layouts/demos/list.html

@@ -0,0 +1,70 @@
+{{ define "main" }}
+{{ $demos := .Params.demos }}
+{{ $heroMain := index $demos 0 }}
+<main class="pf-c-page__main" tabindex="0">
+  <section class="pf-c-page__main-section pf-m-light pf-u-background-color-dark-300">
+    <div class="pf-l-grid">
+      <div class="pf-l-grid__item pf-m-12-col-on-sm pf-m-10-col-on-md pf-m-offset-1-col-on-md pf-m-10-col-on-lg pf-m-offset-1-col-on-lg pf-u-py-xl">
+        <div class="pf-c-content">
+          <h1 class="pf-c-title pf-m-3xl pf-u-color-light-100">{{ .Title }}</h1>
+          {{ with .Description }}
+          <p class="pf-u-font-size-lg pf-u-color-light-200">{{ . }}</p>
+          {{ end }}
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="pf-c-page__main-section demos-page">
+    <div class="pf-l-grid">
+      <div class="pf-l-grid__item pf-m-12-col-on-sm pf-m-12-col-on-md pf-m-offset-0-col-on-md pf-m-12-col-on-lg pf-m-offset-0-col-on-lg pf-u-px-lg-on-lg pf-u-py-2xl">
+        {{ if $demos }}
+        <div class="demos-hero" data-demos-hero>
+          <div class="demos-player" data-demos-player>
+            {{ partial "arcade-embed.html" (dict "id" $heroMain.id "title" $heroMain.title "eager" true) }}
+          </div>
+
+          <aside class="demos-hero__sidebar" aria-label="Demo playlist">
+            <div class="demos-sidebar__scroll" data-demos-sidebar-scroll tabindex="0">
+              {{ range $i, $demo := $demos }}
+              <div class="demos-sidebar-item">
+                {{ partial "demo-select-card.html" (dict "demo" $demo "variant" "sidebar" "active" (eq $i 0)) }}
+                <p class="demos-sidebar-item__title">{{ $demo.title }}</p>
+              </div>
+              {{ end }}
+            </div>
+          </aside>
+
+          <div class="demos-hero__meta-main">
+            <h2 class="demos-hero__title" data-demos-main-title>{{ $heroMain.title }}</h2>
+            <p class="demos-hero__desc" data-demos-main-desc>{{ $heroMain.description }}</p>
+            {{ if $heroMain.pattern_link }}
+            <p class="demos-hero__pattern" data-demos-main-pattern>
+              For more information, see: <a href="{{ $heroMain.pattern_link }}">{{ $heroMain.pattern_label | default "View pattern" }}</a>
+            </p>
+            {{ else }}
+            <p class="demos-hero__pattern" data-demos-main-pattern hidden></p>
+            {{ end }}
+          </div>
+        </div>
+        {{ end }}
+
+        {{ with .Params.next_steps }}
+        <div class="demos-next-steps pf-c-content">
+          <h2>Next steps</h2>
+          <ul>
+            {{ range . }}
+            <li><a href="{{ .url }}">{{ .label }}</a> — {{ .text }}</li>
+            {{ end }}
+          </ul>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </section>
+
+  {{ partialCached "footer.html" . }}
+</main>
+<link rel="stylesheet" href="{{ "css/demos.css" | relURL }}">
+<script src="{{ "js/demos.js" | relURL }}" defer></script>
+{{ end }}

layouts/index.html

@@ -16,6 +16,40 @@
       </div>
     </div>
   </section>
+  <!-- Featured Interactive Demo Section -->
+  <section id="featured-demo" class="pf-c-page__main-section pf-u-background-color-dark-300">
+    <div class="pf-l-grid">
+      <div class="pf-l-grid__item pf-m-12-col-on-sm pf-m-12-col-on-md pf-m-12-col-on-lg pf-u-py-2xl">
+        <div class="pf-c-content pf-u-text-align-center homepage-featured-demo" style="max-width: 1280px; margin: 0 auto;">
+          <div class="homepage-featured-demo__wrap">
+            <div class="homepage-featured-demo__shell">
+              <div class="homepage-featured-demo__ambient" aria-hidden="true"></div>
+              <iframe
+                src="https://demo.arcade.software/Qla3IzaQVM9yQP27TWDU?embed&embed_mobile=tab&embed_desktop=inline&squared=true&show_copy_link=true"
+                title="Performing disaster recovery with RamenDR backed by Dell PowerStore"
+                frameborder="0"
+                loading="lazy"
+                webkitallowfullscreen
+                mozallowfullscreen
+                allowfullscreen
+                allow="clipboard-write"
+                onload="this.closest('.homepage-featured-demo__shell').classList.add('is-loaded')"
+                class="homepage-featured-demo__iframe">
+              </iframe>
+            </div>
+          </div>
+          <h2 class="pf-c-title pf-m-2xl pf-u-color-light-100 pf-u-mb-md">Interactive demo: disaster recovery with RamenDR and Dell PowerStore</h2>
+          <p class="pf-u-color-light-200 pf-u-font-size-lg pf-u-mb-lg">
+            See how regional failover works for OpenShift Virtualization workloads using RamenDR and Dell PowerStore.
+          </p>
+          <div class="pf-u-display-flex pf-u-flex-direction-column pf-u-flex-direction-row-on-md pf-u-justify-content-center">
+            <a href="/demos/" class="pf-c-button pf-m-primary pf-u-mr-md-on-md pf-u-mb-md pf-u-mb-0-on-md">Explore all demos</a>
+            <a href="/patterns/ramendr-starter-kit/" class="pf-c-button pf-m-secondary">View RamenDR pattern</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
   <!-- Social Proof Section -->
   <section id="social-proof" class="pf-c-page__main-section">
     <div class="pf-l-grid">
@@ -549,7 +583,7 @@ <h1 class="pf-c-title pf-m-3xl pf-u-mb-md pf-u-color-light-100">Deploy with conf
       </div>
     </div>
   </section>
-  {{ partial "footer.html" . }}
+  {{ partialCached "footer.html" . }}
 </main>
 
 <script src="/js/parallax.js"></script>

layouts/learn/list.html

@@ -30,6 +30,6 @@ <h1 class="pf-c-title pf-m-4xl">
       {{ partial "paginator.html" . }}
     </div>
   </section>
-  {{ partial "footer.html" . }}
+  {{ partialCached "footer.html" . }}
 </main>
 {{ end }}

layouts/learn/single.html

@@ -43,6 +43,6 @@
         </div>
       </div>
     </section>
-    {{ partial "footer.html" . }}
+    {{ partialCached "footer.html" . }}
   </main>
 {{ end }}

layouts/partials/arcade-embed.html

@@ -0,0 +1,21 @@
+{{- /*
+  Arcade iframe with skeleton placeholder.
+  Params: id (required), title, eager (bool), compact (bool)
+*/ -}}
+{{- $id := .id -}}
+{{- $title := .title | default "Interactive demo" -}}
+{{- $eager := .eager | default false -}}
+{{- $compact := .compact | default false -}}
+{{- $src := printf "https://demo.arcade.software/%s?embed&embed_mobile=tab&embed_desktop=inline&squared=true&show_copy_link=true" $id -}}
+<div class="arcade-embed{{ if $compact }} arcade-embed--compact{{ end }}" data-arcade-embed>
+  <div class="arcade-embed__skeleton" aria-hidden="true"></div>
+  <iframe
+    class="arcade-embed__iframe"
+    {{- if $eager }}src="{{ $src }}"{{ else }}data-src="{{ $src }}"{{ end }}
+    title="{{ $title }}"
+    frameborder="0"
+    loading="{{ if $eager }}eager{{ else }}lazy{{ end }}"
+    allow="clipboard-write"
+    allowfullscreen
+  ></iframe>
+</div>

layouts/partials/demo-select-card.html

@@ -0,0 +1,28 @@
+{{- /*
+  Clickable demo thumbnail (loads in main player via demos.js).
+  dict: demo, variant (sidebar|grid), active (bool)
+*/ -}}
+{{- $d := .demo -}}
+{{- $variant := .variant | default "sidebar" -}}
+{{- $active := .active | default false -}}
+<div
+  class="demos-select{{ if eq $variant "grid" }} demos-select--grid{{ end }}{{ if $active }} demos-select--active{{ end }}"
+  role="button"
+  tabindex="0"
+  data-demo-select
+  data-demo-id="{{ $d.id }}"
+  data-demo-title="{{ $d.title }}"
+  data-demo-desc="{{ $d.description }}"
+  {{- with $d.pattern_link }} data-demo-pattern-link="{{ . }}"{{ end }}
+  {{- with $d.pattern_label }} data-demo-pattern-label="{{ . }}"{{ end }}
+  aria-label="Play {{ $d.title }} in the main player"
+>
+  <span class="demos-select__media">
+    {{ partial "demo-thumbnail.html" (dict "id" $d.id "title" $d.title "thumbnail" $d.thumbnail) }}
+    <span class="demos-select__now-playing" data-demo-now-playing{{ if not $active }} hidden{{ end }}>Now playing</span>
+    <span class="demos-select__play" aria-hidden="true"><i class="fa-solid fa-circle-play"></i></span>
+  </span>
+  {{ if eq $variant "grid" }}
+  <h3 class="demos-select__title">{{ $d.title }}</h3>
+  {{ end }}
+</div>

layouts/partials/demo-thumbnail.html

@@ -0,0 +1,13 @@
+{{- /*
+  Thumbnail for a demo card. Pass dict: title, thumbnail (required image path).
+*/ -}}
+{{- $title := .title | default "Demo" -}}
+{{- $src := .thumbnail -}}
+<img
+  class="demos-thumb__img"
+  src="{{ $src }}"
+  alt="{{ $title }}"
+  loading="lazy"
+  decoding="async"
+  onerror="this.onerror=null;this.src='/images/demos/placeholder.svg';"
+/>

layouts/partials/footer.html

@@ -71,5 +71,4 @@
         </div>
         <script src="{{ "js/bootstrap.bundle.js" | relURL }}"></script>
         <script src="{{ "js/toc.js" | relURL }}"></script>
-        {{ partial "search-index.html" . }}
 </footer>