From f452fc81b10942544d4945c0ce7a7b21c663d9fe Mon Sep 17 00:00:00 2001
From: Daniel Phillips <phiro56@gmail.com>
Date: Sat, 5 Jul 2025 19:19:53 -0600
Subject: [PATCH] feat(ui): Add FAQ page with styled sections and category
 navigation - Create new FAQ template with left sidebar navigation - Add
 styled FAQ sections with collapsible content - Implement category-based
 navigation links - Add review notice banner for pages under review

Signed-off-by: Daniel Phillips <phiro56@gmail.com>
---
 sass/_valkey.scss                     | 172 ++++++++++++++++++++++++++
 templates/faq.html                    |  48 +++++++
 templates/shortcodes/faq_section.html |   3 +
 3 files changed, 223 insertions(+)
 create mode 100644 templates/faq.html
 create mode 100644 templates/shortcodes/faq_section.html

diff --git a/sass/_valkey.scss b/sass/_valkey.scss
index a5cb189b..6570cee7 100644
--- a/sass/_valkey.scss
+++ b/sass/_valkey.scss
@@ -1871,3 +1871,175 @@ pre table {
   height: 18px;
   margin-right: 0.3rem;
 }
+
+.help-links {
+  margin-bottom: 2rem;
+
+  li {
+    margin: 0.5rem 0;
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0;
+    font-weight: 500;
+  }
+}
+
+.edit-box {
+  text-align: left;
+  font-size: 1.6rem;
+
+  span {
+    color: #000;
+  }
+
+  .edit-link {
+    color: #6983ff;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.review-notice {
+  background: #fff3cd;
+  border: 1px solid #ffeaa7;
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  color: #856404;
+
+  p {
+    margin: 0;
+    font-size: 1.4rem;
+  }
+}
+
+.faq-aside { 
+  @include respond-min(1024px) {
+    flex-direction: row;
+  }
+}
+
+
+
+.faq-container {
+  max-width: 100%;
+  background-color: #fff;
+  padding: 2rem 2rem 0.1rem;
+}
+
+/* FAQ Section Containers */
+.faq-section {
+  background: rgba(104, 147, 255, 0.1);
+  margin-bottom: 2rem;
+  padding: 2rem;
+}
+
+.faq-section h2 {
+  font-size: 16px;
+  font-weight: 700;
+  color: #30176E;
+  margin: 0  0 -1rem;
+}
+
+.faq-section h3 {
+  font-size: 16px;
+  background:rgba(104, 147, 255, 0.1);
+  font-weight: 600;
+  cursor: pointer;
+  margin: 2rem 0 0;
+  padding: 1.25rem;
+  position: relative;
+  transition: all 0.2s ease;
+  color: #1A2026;
+}
+
+.faq-section p,
+.faq-section ul {
+  font-size: 16px;
+  background-color: #fff;
+  padding: 1rem 2rem;
+  margin: 0;
+}
+
+.faq-section ul, .faq-section ol {
+  margin: 0;
+  padding-left: 3.5rem;
+}
+
+.faq-section li {
+  margin-bottom: 0.8rem;
+  line-height: 1.6;
+}
+
+.faq-section code {
+  background-color: #f1f3f4;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  font-family: 'Fira Mono', monospace;
+  font-size: 1.4rem;
+  color: #d63384;
+}
+
+.faq-section pre {
+  background-color: #f8f9fa;
+  padding: 1.6rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 1.6rem 0;
+  border: 1px solid #e1e5e9;
+}
+
+.faq-section pre code {
+  background: none;
+  padding: 0;
+  color: #333;
+}
+
+.faq-section a {
+  color: #30176E;
+  text-decoration: underline;
+}
+
+.faq-section a:hover {
+  text-decoration: underline;
+}
+
+.faq-section p + ul,
+.faq-section p + ol,
+  .faq-section p + p {
+    padding-top: 0;
+}
+
+/* Category navigation */
+.category-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.category-nav li {
+  margin-bottom: 8px;
+}
+
+.category-link {
+  color: #666;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+  display: block;
+  padding: 8px 0;
+}
+
+.category-link:hover {
+  color: #30176E;
+}
+
+.category-link.active {
+  color: #30176E;
+  font-weight: 600;
+}
diff --git a/templates/faq.html b/templates/faq.html
new file mode 100644
index 00000000..bf69a606
--- /dev/null
+++ b/templates/faq.html
@@ -0,0 +1,48 @@
+{% extends "default.html" %}
+
+{%- block head -%}
+{%- endblock head -%}
+
+{% block content %}
+<div class="styled-title">
+    <h1 class="faq-title">Frequently Asked Questions</h1>
+</div>
+
+<div class="left-aside faq-aside">    
+    <aside>
+        <h2>CATEGORIES</h2>
+        <ul class="category-nav">
+            <li><a href="#general" class="category-link">General</a></li>
+            <li><a href="#memory-performance" class="category-link">Memory & Performance</a></li>
+            <li><a href="#technical" class="category-link">Technical</a></li>
+            <li><a href="#limitations" class="category-link">Limitations</a></li>
+        </ul>
+    
+        <div class="edit-box">
+            <span>Found an Issue?</span>
+            <a href="https://github.com/valkey-io/valkey-io.github.io/edit/main/content/topics/faq.md" class="edit-link" target="_blank">
+                Edit this page on GitHub
+            </a>
+        </div>
+    </aside>
+
+    <main class="container">
+        {% if config.extra.review_list is containing(page.path) %}
+            <div class="review-notice">
+                <p><strong>This page is under review.</strong> The page is likely incorrect, contains invalid links, and/or needs technical review. 
+                In the future it may change substantially or be removed entirely.</p>
+            </div>
+        {% endif %}
+
+        <div class="faq-content">
+            {% if config.extra.publish_hold is containing(page.path) %}
+                <p><code>{{ page.path }}</code> may be available after revisions.</p>
+            {% else %}
+                <div class="faq-container">
+                    {{ page.content | safe }}
+                </div>
+            {% endif %}
+        </div>
+    </main>
+</div>
+{% endblock content %}
diff --git a/templates/shortcodes/faq_section.html b/templates/shortcodes/faq_section.html
new file mode 100644
index 00000000..aaeb3bae
--- /dev/null
+++ b/templates/shortcodes/faq_section.html
@@ -0,0 +1,3 @@
+<section id="{{class}}" class="faq-section faq-{{class}}">
+    {{body | markdown | safe}}
+</section> 
\ No newline at end of file