feat(design): complete redesign of website

Redesign the website with a more modern look.
2026-02-19 05:46:40 +00:00 · 2026-01-10 19:19:06 +00:00
parent a0359ef376
commit 0a74d4eacd
28 changed files with 3780 additions and 1046 deletions
--- a/src/components/FAQSection.astro
+++ b/src/components/FAQSection.astro
@@ -0,0 +1,139 @@
+---
+import type { FAQItem } from "../utils/parseSpecContent";
+
+interface Props {
+  items: FAQItem[];
+}
+
+const { items } = Astro.props;
+---
+
+<section id="faq" class="faq-section py-20 sm:py-28">
+  <div class="section-container">
+    <div class="max-w-3xl mx-auto">
+      <!-- Section header -->
+      <div class="mb-12 text-center">
+        <h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2>
+        <p
+          class="text-lg text-[var(--color-text-secondary)]
+                 dark:text-[var(--color-dark-text-secondary)]"
+        >
+          Common questions about Git Common-Flow
+        </p>
+      </div>
+
+      <!-- FAQ Items -->
+      <div class="space-y-0">
+        {
+          items.map((item, index) => (
+            <div class="faq-item" data-faq-item>
+              <button
+                class="faq-question"
+                aria-expanded="false"
+                data-faq-trigger
+              >
+                <span class="pr-4">{item.question}</span>
+                <svg
+                  class="w-5 h-5 flex-shrink-0 transition-transform duration-200"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  data-faq-icon
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+              <div
+                class="faq-answer hidden prose-spec spec-content"
+                data-faq-content
+                set:html={item.answer}
+              />
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  function initFAQ() {
+    const items = document.querySelectorAll("[data-faq-item]");
+
+    items.forEach((item) => {
+      const trigger = item.querySelector("[data-faq-trigger]");
+      const content = item.querySelector("[data-faq-content]");
+      const icon = item.querySelector("[data-faq-icon]");
+
+      if (!trigger || !content || !icon) return;
+
+      trigger.addEventListener("click", () => {
+        const isExpanded = trigger.getAttribute("aria-expanded") === "true";
+
+        // Close all other items
+        items.forEach((otherItem) => {
+          if (otherItem !== item) {
+            const otherTrigger = otherItem.querySelector("[data-faq-trigger]");
+            const otherContent = otherItem.querySelector("[data-faq-content]");
+            const otherIcon = otherItem.querySelector("[data-faq-icon]");
+
+            otherTrigger?.setAttribute("aria-expanded", "false");
+            otherContent?.classList.add("hidden");
+            otherIcon?.classList.remove("rotate-180");
+          }
+        });
+
+        // Toggle current item
+        trigger.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+        content.classList.toggle("hidden", isExpanded);
+        icon.classList.toggle("rotate-180", !isExpanded);
+      });
+    });
+
+    // Open first item by default
+    const firstTrigger = items[0]?.querySelector(
+      "[data-faq-trigger]"
+    ) as HTMLButtonElement;
+    if (firstTrigger) {
+      firstTrigger.click();
+    }
+  }
+
+  // Initialize on load
+  initFAQ();
+
+  // Re-initialize on Astro page transitions
+  document.addEventListener("astro:after-swap", initFAQ);
+</script>
+
+<style>
+  .faq-section {
+    background-color: var(--color-bg-secondary);
+  }
+
+  :global(.dark) .faq-section {
+    background-color: var(--color-dark-bg-secondary);
+  }
+
+  .spec-content :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .spec-content :global(ul),
+  .spec-content :global(ol) {
+    margin-top: 1rem;
+  }
+
+  .spec-content :global(li) {
+    color: var(--color-text-secondary);
+  }
+
+  :global(.dark) .spec-content :global(li) {
+    color: var(--color-dark-text-secondary);
+  }
+</style>