From 417d17bfee7f339cfa4b75e70cbf045e8d2b1c0d Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Fri, 28 Nov 2025 14:32:16 -0500
Subject: [PATCH 1/7] wip

---
 apps/website/components/InlineCodeBlock.vue |  32 ++++++
 apps/website/pages/index.vue                | 111 ++++++++++++++++++++
 2 files changed, 143 insertions(+)
 create mode 100644 apps/website/components/InlineCodeBlock.vue

diff --git a/apps/website/components/InlineCodeBlock.vue b/apps/website/components/InlineCodeBlock.vue
new file mode 100644
index 0000000..ea6a3de
--- /dev/null
+++ b/apps/website/components/InlineCodeBlock.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="code-block">
+    <code>{{ code }}</code>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  code: string
+}>()
+</script>
+
+<style scoped>
+.code-block {
+  background-color: var(--color-gray-900);
+  color: var(--color-gray-100);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-md);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: var(--font-size-sm);
+  overflow-x: auto;
+  margin: var(--spacing-md) 0;
+}
+
+:global(body.dark) .code-block {
+  background-color: var(--color-gray-950);
+}
+
+.code-block code {
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/website/pages/index.vue b/apps/website/pages/index.vue
index df4b33a..0163700 100644
--- a/apps/website/pages/index.vue
+++ b/apps/website/pages/index.vue
@@ -192,6 +192,44 @@
       </div>
     </section>
 
+    <!-- FAQ Section -->
+    <section id="faq" class="section faq-section">
+      <div class="container-custom">
+        <div class="section-header">
+          <h2 class="section-title">
+            Frequently Asked Questions
+          </h2>
+          <p class="section-description">
+            Common questions and answers about NoteX
+          </p>
+        </div>
+
+        <div class="faq-container">
+          <div class="faq-item">
+            <h3 class="faq-question">
+              <Icon name="heroicons:question-mark-circle" class="faq-icon" />
+              I'm unable to install the app on macOS
+            </h3>
+            <div class="faq-answer">
+              <p>
+                Apple charges $99/year for code signing certificates. Since NoteX is a free, 
+                open-source app, we don't have code signing enabled. macOS may show a warning 
+                that the app is "damaged" or from an "unidentified developer."
+              </p>
+              <p>
+                To install the DMG without issues, run this command in Terminal before opening the file:
+              </p>
+              <InlineCodeBlock code="xattr -d com.apple.quarantine ~/Downloads/NoteX_0.7.1_aarch64.dmg" />
+              <p class="faq-note">
+                <Icon name="heroicons:light-bulb" class="faq-note-icon" />
+                Replace the filename with the actual DMG file you downloaded.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- CTA Section -->
     <section class="section cta-section">
       <div class="container-custom">
@@ -583,4 +621,77 @@ body.dark .cta-section {
 .cta-btn-outlined:hover {
   background-color: var(--color-primary-800);
 }
+
+/* FAQ Section */
+.faq-section {
+  background-color: var(--color-gray-50);
+}
+
+body.dark .faq-section {
+  background-color: var(--color-gray-800);
+}
+
+.faq-container {
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.faq-item {
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-gray-200);
+}
+
+body.dark .faq-item {
+  background-color: var(--color-gray-900);
+  border-color: var(--color-gray-700);
+}
+
+.faq-question {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+body.dark .faq-question {
+  color: var(--color-white);
+}
+
+.faq-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--color-primary-600);
+  flex-shrink: 0;
+}
+
+.faq-answer {
+  color: var(--color-gray-600);
+  line-height: 1.7;
+}
+
+body.dark .faq-answer {
+  color: var(--color-gray-300);
+}
+
+.faq-answer p {
+  margin-bottom: var(--spacing-md);
+}
+
+.faq-answer p:last-child {
+  margin-bottom: 0;
+}
+
+.faq-note-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
 </style>

From a661297329c09936eef34c5092e71f13723165df Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Fri, 28 Nov 2025 14:42:32 -0500
Subject: [PATCH 2/7] wip

---
 apps/website/components/FaqSection.vue        | 180 +++++
 .../website/components/landing/CtaSection.vue |  97 +++
 .../components/landing/DownloadSection.vue    | 156 ++++
 .../components/landing/FeaturesSection.vue    | 135 ++++
 .../components/landing/HeroSection.vue        | 187 +++++
 .../components/landing/TechStackSection.vue   |  77 ++
 apps/website/pages/index.vue                  | 690 +-----------------
 7 files changed, 838 insertions(+), 684 deletions(-)
 create mode 100644 apps/website/components/FaqSection.vue
 create mode 100644 apps/website/components/landing/CtaSection.vue
 create mode 100644 apps/website/components/landing/DownloadSection.vue
 create mode 100644 apps/website/components/landing/FeaturesSection.vue
 create mode 100644 apps/website/components/landing/HeroSection.vue
 create mode 100644 apps/website/components/landing/TechStackSection.vue

diff --git a/apps/website/components/FaqSection.vue b/apps/website/components/FaqSection.vue
new file mode 100644
index 0000000..91ec5bd
--- /dev/null
+++ b/apps/website/components/FaqSection.vue
@@ -0,0 +1,180 @@
+<template>
+  <section id="faq" class="section faq-section">
+    <div class="container-custom">
+      <div class="section-header">
+        <h2 class="section-title">
+          Frequently Asked Questions
+        </h2>
+        <p class="section-description">
+          Common questions and answers about NoteX
+        </p>
+      </div>
+
+      <div class="faq-container">
+        <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
+          <h3 class="faq-question">
+            <Icon name="heroicons:question-mark-circle" class="faq-icon" />
+            {{ item.question }}
+          </h3>
+          <div class="faq-answer">
+            <template v-for="(content, contentIndex) in item.answer" :key="contentIndex">
+              <p v-if="content.type === 'text'">{{ content.value }}</p>
+              <InlineCodeBlock v-else-if="content.type === 'code'" :code="content.value" />
+              <p v-else-if="content.type === 'note'" class="faq-note">
+                <Icon name="heroicons:light-bulb" class="faq-note-icon" />
+                {{ content.value }}
+              </p>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+interface FaqContent {
+  type: 'text' | 'code' | 'note'
+  value: string
+}
+
+interface FaqItem {
+  question: string
+  answer: FaqContent[]
+}
+
+const faqItems: FaqItem[] = [
+  {
+    question: "I'm unable to install the app on macOS",
+    answer: [
+      {
+        type: 'text',
+        value: 'Apple charges $99/year for code signing certificates. Since NoteX is a free, open-source app, we don\'t have code signing enabled. macOS may show a warning that the app is "damaged" or from an "unidentified developer."'
+      },
+      {
+        type: 'text',
+        value: 'To install the DMG without issues, run this command in Terminal before opening the file:'
+      },
+      {
+        type: 'code',
+        value: 'xattr -d com.apple.quarantine ~/Downloads/NoteX_0.7.1_aarch64.dmg'
+      },
+      {
+        type: 'note',
+        value: 'Replace the filename with the actual DMG file you downloaded.'
+      }
+    ]
+  }
+]
+</script>
+
+<style scoped>
+.faq-section {
+  background-color: var(--color-gray-50);
+}
+
+body.dark .faq-section {
+  background-color: var(--color-gray-800);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: var(--spacing-3xl);
+}
+
+.section-title {
+  font-size: var(--font-size-4xl);
+  font-weight: 700;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-md);
+}
+
+body.dark .section-title {
+  color: var(--color-white);
+}
+
+.section-description {
+  font-size: var(--font-size-xl);
+  color: var(--color-gray-600);
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.dark .section-description {
+  color: var(--color-gray-300);
+}
+
+.faq-container {
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.faq-item {
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-gray-200);
+}
+
+body.dark .faq-item {
+  background-color: var(--color-gray-900);
+  border-color: var(--color-gray-700);
+}
+
+.faq-question {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+body.dark .faq-question {
+  color: var(--color-white);
+}
+
+.faq-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--color-primary-600);
+  flex-shrink: 0;
+}
+
+.faq-answer {
+  color: var(--color-gray-600);
+  line-height: 1.7;
+}
+
+body.dark .faq-answer {
+  color: var(--color-gray-300);
+}
+
+.faq-answer p {
+  margin-bottom: var(--spacing-md);
+}
+
+.faq-answer p:last-child {
+  margin-bottom: 0;
+}
+
+.faq-note {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+}
+
+.faq-note-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+</style>
diff --git a/apps/website/components/landing/CtaSection.vue b/apps/website/components/landing/CtaSection.vue
new file mode 100644
index 0000000..2df94e4
--- /dev/null
+++ b/apps/website/components/landing/CtaSection.vue
@@ -0,0 +1,97 @@
+<template>
+  <section class="section cta-section">
+    <div class="container-custom">
+      <div class="cta-content">
+        <h2 class="cta-title">
+          Ready to Take Better Notes?
+        </h2>
+        <p class="cta-description">
+          Join developers and writers who trust NoteX for their daily note-taking
+        </p>
+        <div class="cta-buttons">
+          <a href="#download" class="cta-btn cta-btn-white">
+            Download Now
+          </a>
+          <a href="https://github.com/cadamsdev/notes-app" target="_blank" rel="noopener noreferrer"
+             class="cta-btn cta-btn-outlined">
+            Star on GitHub ⭐
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.cta-section {
+  background-color: var(--color-primary-600);
+}
+
+body.dark .cta-section {
+  background-color: var(--color-primary-700);
+}
+
+.cta-content {
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  color: var(--color-white);
+}
+
+.cta-title {
+  font-size: var(--font-size-4xl);
+  font-weight: 700;
+  margin-bottom: var(--spacing-md);
+}
+
+.cta-description {
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--spacing-2xl);
+  color: var(--color-primary-100);
+}
+
+.cta-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .cta-buttons {
+    flex-direction: row;
+  }
+}
+
+.cta-btn {
+  padding: var(--spacing-md) var(--spacing-2xl);
+  border-radius: var(--radius-lg);
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color var(--transition-base);
+  display: inline-block;
+}
+
+.cta-btn-white {
+  background-color: var(--color-white);
+  color: var(--color-primary-600);
+}
+
+.cta-btn-white:hover {
+  background-color: var(--color-gray-100);
+}
+
+.cta-btn-outlined {
+  background-color: var(--color-primary-700);
+  color: var(--color-white);
+  border: 1px solid var(--color-primary-500);
+}
+
+.cta-btn-outlined:hover {
+  background-color: var(--color-primary-800);
+}
+</style>
diff --git a/apps/website/components/landing/DownloadSection.vue b/apps/website/components/landing/DownloadSection.vue
new file mode 100644
index 0000000..c342e9f
--- /dev/null
+++ b/apps/website/components/landing/DownloadSection.vue
@@ -0,0 +1,156 @@
+<template>
+  <section id="download" class="section download-section">
+    <div class="container-custom">
+      <div class="download-content">
+        <h2 class="section-title">
+          Download NoteX
+        </h2>
+        <p class="section-description">
+          Available for Windows, macOS, and Linux
+        </p>
+
+        <div class="download-grid">
+          <DownloadCard 
+            platform="Windows"
+            icon="mdi:microsoft-windows"
+            :downloads="[
+              { name: 'Windows Installer', ext: '.msi' },
+              { name: 'Windows Portable', ext: '.exe' }
+            ]"
+          />
+          
+          <DownloadCard 
+            platform="macOS"
+            icon="mdi:apple"
+            :downloads="[
+              { name: 'macOS Silicon', ext: '.dmg (arm64)' },
+              { name: 'macOS Intel', ext: '.dmg (x64)' }
+            ]"
+          />
+          
+          <DownloadCard 
+            platform="Linux"
+            icon="mdi:linux"
+            :downloads="[
+              { name: 'AppImage', ext: '.AppImage' },
+              { name: 'Debian Package', ext: '.deb' }
+            ]"
+          />
+        </div>
+
+        <div class="info-box">
+          <p class="info-text">
+            <Icon name="heroicons:information-circle" class="info-icon" />
+            Visit the 
+            <a href="https://github.com/usenotex/notex/releases" target="_blank" rel="noopener noreferrer" 
+               class="info-link">
+              Releases page
+            </a>
+            for the latest version and all download options.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.download-section {
+  background-color: var(--color-white);
+}
+
+body.dark .download-section {
+  background-color: var(--color-gray-900);
+}
+
+.download-content {
+  max-width: 56rem;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.section-title {
+  font-size: var(--font-size-4xl);
+  font-weight: 700;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-md);
+}
+
+body.dark .section-title {
+  color: var(--color-white);
+}
+
+.section-description {
+  font-size: var(--font-size-xl);
+  color: var(--color-gray-600);
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: var(--spacing-3xl);
+}
+
+body.dark .section-description {
+  color: var(--color-gray-300);
+}
+
+.download-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-2xl);
+}
+
+@media (min-width: 768px) {
+  .download-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.info-box {
+  margin-top: var(--spacing-3xl);
+  padding: var(--spacing-lg);
+  background-color: var(--color-primary-50);
+  border-radius: var(--radius-lg);
+}
+
+body.dark .info-box {
+  background-color: rgba(2, 132, 199, 0.2);
+}
+
+.info-text {
+  color: var(--color-gray-700);
+}
+
+body.dark .info-text {
+  color: var(--color-gray-300);
+}
+
+.info-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline;
+  margin-right: var(--spacing-sm);
+}
+
+.info-link {
+  font-weight: 600;
+  color: var(--color-primary-600);
+  text-decoration: none;
+  transition: color var(--transition-base);
+}
+
+.info-link:hover {
+  color: var(--color-primary-700);
+}
+
+body.dark .info-link {
+  color: var(--color-primary-400);
+}
+
+body.dark .info-link:hover {
+  color: var(--color-primary-300);
+}
+</style>
diff --git a/apps/website/components/landing/FeaturesSection.vue b/apps/website/components/landing/FeaturesSection.vue
new file mode 100644
index 0000000..bf6314f
--- /dev/null
+++ b/apps/website/components/landing/FeaturesSection.vue
@@ -0,0 +1,135 @@
+<template>
+  <section id="features" class="section features-section">
+    <div class="container-custom">
+      <div class="section-header">
+        <h2 class="section-title">
+          Everything You Need
+        </h2>
+        <p class="section-description">
+          Built with modern technologies for the best note-taking experience
+        </p>
+      </div>
+
+      <div class="features-grid">
+        <FeatureCard 
+          icon="heroicons:bolt"
+          title="Performant"
+          :features="[
+            'Built with Tauri (Rust + Vue 3)',
+            'Blazing fast startup times',
+            'Fast, reliable SQLite storage'
+          ]"
+        />
+        
+        <FeatureCard 
+          icon="heroicons:cube"
+          title="Lightweight"
+          :features="[
+            'Small installation size ~5MB',
+            'Minimal resource usage',
+            'Runs on any modern system'
+          ]"
+        />
+        
+        <FeatureCard 
+          icon="heroicons:arrow-path"
+          title="Cloud Sync"
+          :features="[
+            'Save notes anywhere on your filesystem',
+            'Works with OneDrive, Google Drive, Dropbox',
+            'Your data, your control'
+          ]"
+        />
+        
+        <FeatureCard 
+          icon="heroicons:document-text"
+          title="Markdown Support"
+          :features="[
+            'Write in plain text files',
+            'GitHub Flavored Markdown (GFM)',
+            'Take your data anywhere'
+          ]"
+        />
+        
+        <FeatureCard 
+          icon="heroicons:calendar-days"
+          title="Smart Organization"
+          :features="[
+            'Organize with hashtags (#work, #personal)',
+            'Fuzzy search with real-time filtering',
+            'Quick access to any note'
+          ]"
+        />
+        
+        <FeatureCard 
+          icon="heroicons:sparkles"
+          title="Beautiful Design"
+          :features="[
+            'Clean, minimal interface',
+            'Light/dark themes',
+            'Mobile-responsive layout'
+          ]"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.features-section {
+  background-color: var(--color-white);
+}
+
+body.dark .features-section {
+  background-color: var(--color-gray-900);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: var(--spacing-3xl);
+}
+
+.section-title {
+  font-size: var(--font-size-4xl);
+  font-weight: 700;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-md);
+}
+
+body.dark .section-title {
+  color: var(--color-white);
+}
+
+.section-description {
+  font-size: var(--font-size-xl);
+  color: var(--color-gray-600);
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.dark .section-description {
+  color: var(--color-gray-300);
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-2xl);
+}
+
+@media (min-width: 768px) {
+  .features-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .features-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+</style>
diff --git a/apps/website/components/landing/HeroSection.vue b/apps/website/components/landing/HeroSection.vue
new file mode 100644
index 0000000..3d10f5b
--- /dev/null
+++ b/apps/website/components/landing/HeroSection.vue
@@ -0,0 +1,187 @@
+<template>
+  <section class="section hero-section">
+    <div class="container-custom">
+      <div class="hero-content">
+        <div class="logo-container">
+          <img src="/logo.svg" alt="NoteX Logo" class="hero-logo" />
+        </div>
+        <h1 class="hero-title">
+          Your Notes, <span class="title-accent">Your Way</span>
+        </h1>
+        <p class="hero-description">
+          A minimal, local-first, markdown-based note taking app. 
+          Privacy-focused, blazingly fast, and works with your favorite cloud storage.
+        </p>
+        <div class="hero-buttons">
+          <a href="#download" class="btn-hero btn-hero-primary">
+            <Icon name="heroicons:arrow-down-tray" class="btn-icon" />
+            Download Now
+          </a>
+          <a href="https://github.com/cadamsdev/notes-app" target="_blank" rel="noopener noreferrer" 
+             class="btn-hero btn-hero-secondary">
+            <Icon name="mdi:github" class="btn-icon" />
+            View on GitHub
+          </a>
+        </div>
+        
+        <!-- Preview Images -->
+        <div class="preview-container">
+          <div class="preview-image-wrapper">
+            <img src="/preview-light.png" alt="NoteX Light Theme" class="preview-image" />
+          </div>
+          <div class="preview-image-wrapper">
+            <img src="/preview-dark.png" alt="NoteX Dark Theme" class="preview-image" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.hero-section {
+  background: linear-gradient(to bottom, var(--color-white), var(--color-gray-50));
+}
+
+body.dark .hero-section {
+  background: linear-gradient(to bottom, var(--color-gray-900), var(--color-gray-800));
+}
+
+.hero-content {
+  max-width: 56rem;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.logo-container {
+  margin-bottom: var(--spacing-2xl);
+}
+
+.hero-logo {
+  height: 6rem;
+  width: 6rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: var(--spacing-lg);
+}
+
+.hero-title {
+  font-size: var(--font-size-5xl);
+  font-weight: 700;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-lg);
+}
+
+@media (min-width: 768px) {
+  .hero-title {
+    font-size: var(--font-size-6xl);
+  }
+}
+
+body.dark .hero-title {
+  color: var(--color-white);
+}
+
+.title-accent {
+  color: var(--color-primary-600);
+}
+
+.hero-description {
+  font-size: var(--font-size-xl);
+  color: var(--color-gray-600);
+  margin-bottom: var(--spacing-2xl);
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.dark .hero-description {
+  color: var(--color-gray-300);
+}
+
+.hero-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .hero-buttons {
+    flex-direction: row;
+  }
+}
+
+.btn-hero {
+  font-size: var(--font-size-lg);
+  padding: var(--spacing-md) var(--spacing-2xl);
+  border-radius: var(--radius-lg);
+  font-weight: 500;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color var(--transition-base);
+}
+
+.btn-hero-primary {
+  background-color: var(--color-primary-600);
+  color: var(--color-white);
+}
+
+.btn-hero-primary:hover {
+  background-color: var(--color-primary-700);
+}
+
+.btn-hero-secondary {
+  background-color: var(--color-gray-200);
+  color: var(--color-gray-900);
+}
+
+.btn-hero-secondary:hover {
+  background-color: var(--color-gray-300);
+}
+
+body.dark .btn-hero-secondary {
+  background-color: var(--color-gray-700);
+  color: var(--color-white);
+}
+
+body.dark .btn-hero-secondary:hover {
+  background-color: var(--color-gray-600);
+}
+
+.btn-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline;
+  margin-right: var(--spacing-sm);
+}
+
+.preview-container {
+  margin-top: var(--spacing-3xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xl);
+}
+
+.preview-image-wrapper {
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-2xl);
+  border: 1px solid var(--color-gray-200);
+}
+
+body.dark .preview-image-wrapper {
+  border-color: var(--color-gray-700);
+}
+
+.preview-image {
+  width: 100%;
+  display: block;
+}
+</style>
diff --git a/apps/website/components/landing/TechStackSection.vue b/apps/website/components/landing/TechStackSection.vue
new file mode 100644
index 0000000..725326b
--- /dev/null
+++ b/apps/website/components/landing/TechStackSection.vue
@@ -0,0 +1,77 @@
+<template>
+  <section class="section tech-section">
+    <div class="container-custom">
+      <div class="section-header">
+        <h2 class="section-title">
+          Built with Modern Tech
+        </h2>
+        <p class="section-description">
+          Powered by cutting-edge technologies for maximum performance and reliability
+        </p>
+      </div>
+
+      <div class="tech-grid">
+        <TechCard name="Tauri" icon="simple-icons:tauri" color="#24C8DB" />
+        <TechCard name="Vue 3" icon="mdi:vuejs" color="#42b883" />
+        <TechCard name="Rust" icon="mdi:language-rust" color="#CE412B" />
+        <TechCard name="SQLite" icon="simple-icons:sqlite" color="#003B57" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.tech-section {
+  background-color: var(--color-gray-50);
+}
+
+body.dark .tech-section {
+  background-color: var(--color-gray-800);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: var(--spacing-3xl);
+}
+
+.section-title {
+  font-size: var(--font-size-4xl);
+  font-weight: 700;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-md);
+}
+
+body.dark .section-title {
+  color: var(--color-white);
+}
+
+.section-description {
+  font-size: var(--font-size-xl);
+  color: var(--color-gray-600);
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.dark .section-description {
+  color: var(--color-gray-300);
+}
+
+.tech-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-2xl);
+  max-width: 56rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 768px) {
+  .tech-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+</style>
diff --git a/apps/website/pages/index.vue b/apps/website/pages/index.vue
index 0163700..0f72408 100644
--- a/apps/website/pages/index.vue
+++ b/apps/website/pages/index.vue
@@ -1,257 +1,11 @@
 <template>
   <div>
-    <!-- Hero Section -->
-    <section class="section hero-section">
-      <div class="container-custom">
-        <div class="hero-content">
-          <div class="logo-container">
-            <img src="/logo.svg" alt="NoteX Logo" class="hero-logo" />
-          </div>
-          <h1 class="hero-title">
-            Your Notes, <span class="title-accent">Your Way</span>
-          </h1>
-          <p class="hero-description">
-            A minimal, local-first, markdown-based note taking app. 
-            Privacy-focused, blazingly fast, and works with your favorite cloud storage.
-          </p>
-          <div class="hero-buttons">
-            <a href="#download" class="btn-hero btn-hero-primary">
-              <Icon name="heroicons:arrow-down-tray" class="btn-icon" />
-              Download Now
-            </a>
-            <a href="https://github.com/cadamsdev/notes-app" target="_blank" rel="noopener noreferrer" 
-               class="btn-hero btn-hero-secondary">
-              <Icon name="mdi:github" class="btn-icon" />
-              View on GitHub
-            </a>
-          </div>
-          
-          <!-- Preview Images -->
-          <div class="preview-container">
-            <div class="preview-image-wrapper">
-              <img src="/preview-light.png" alt="NoteX Light Theme" class="preview-image" />
-            </div>
-            <div class="preview-image-wrapper">
-              <img src="/preview-dark.png" alt="NoteX Dark Theme" class="preview-image" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Features Section -->
-    <section id="features" class="section features-section">
-      <div class="container-custom">
-        <div class="section-header">
-          <h2 class="section-title">
-            Everything You Need
-          </h2>
-          <p class="section-description">
-            Built with modern technologies for the best note-taking experience
-          </p>
-        </div>
-
-        <div class="features-grid">
-          <!-- Feature Cards -->
-          <FeatureCard 
-            icon="heroicons:bolt"
-            title="Performant"
-            :features="[
-              'Built with Tauri (Rust + Vue 3)',
-              'Blazing fast startup times',
-              'Fast, reliable SQLite storage'
-            ]"
-          />
-          
-          <FeatureCard 
-            icon="heroicons:cube"
-            title="Lightweight"
-            :features="[
-              'Small installation size ~5MB',
-              'Minimal resource usage',
-              'Runs on any modern system'
-            ]"
-          />
-          
-          <FeatureCard 
-            icon="heroicons:arrow-path"
-            title="Cloud Sync"
-            :features="[
-              'Save notes anywhere on your filesystem',
-              'Works with OneDrive, Google Drive, Dropbox',
-              'Your data, your control'
-            ]"
-          />
-          
-          <FeatureCard 
-            icon="heroicons:document-text"
-            title="Markdown Support"
-            :features="[
-              'Write in plain text files',
-              'GitHub Flavored Markdown (GFM)',
-              'Take your data anywhere'
-            ]"
-          />
-          
-          <FeatureCard 
-            icon="heroicons:calendar-days"
-            title="Smart Organization"
-            :features="[
-              'Organize with hashtags (#work, #personal)',
-              'Fuzzy search with real-time filtering',
-              'Quick access to any note'
-            ]"
-          />
-          
-          <FeatureCard 
-            icon="heroicons:sparkles"
-            title="Beautiful Design"
-            :features="[
-              'Clean, minimal interface',
-              'Light/dark themes',
-              'Mobile-responsive layout'
-            ]"
-          />
-        </div>
-      </div>
-    </section>
-
-    <!-- Tech Stack Section -->
-    <section class="section tech-section">
-      <div class="container-custom">
-        <div class="section-header">
-          <h2 class="section-title">
-            Built with Modern Tech
-          </h2>
-          <p class="section-description">
-            Powered by cutting-edge technologies for maximum performance and reliability
-          </p>
-        </div>
-
-        <div class="tech-grid">
-          <TechCard name="Tauri" icon="simple-icons:tauri" color="#24C8DB" />
-          <TechCard name="Vue 3" icon="mdi:vuejs" color="#42b883" />
-          <TechCard name="Rust" icon="mdi:language-rust" color="#CE412B" />
-          <TechCard name="SQLite" icon="simple-icons:sqlite" color="#003B57" />
-        </div>
-      </div>
-    </section>
-
-    <!-- Download Section -->
-    <section id="download" class="section download-section">
-      <div class="container-custom">
-        <div class="hero-content">
-          <h2 class="section-title">
-            Download NoteX
-          </h2>
-          <p class="section-description" style="margin-bottom: var(--spacing-3xl);">
-            Available for Windows, macOS, and Linux
-          </p>
-
-          <div class="download-grid">
-            <DownloadCard 
-              platform="Windows"
-              icon="mdi:microsoft-windows"
-              :downloads="[
-                { name: 'Windows Installer', ext: '.msi' },
-                { name: 'Windows Portable', ext: '.exe' }
-              ]"
-            />
-            
-            <DownloadCard 
-              platform="macOS"
-              icon="mdi:apple"
-              :downloads="[
-                { name: 'macOS Silicon', ext: '.dmg (arm64)' },
-                { name: 'macOS Intel', ext: '.dmg (x64)' }
-              ]"
-            />
-            
-            <DownloadCard 
-              platform="Linux"
-              icon="mdi:linux"
-              :downloads="[
-                { name: 'AppImage', ext: '.AppImage' },
-                { name: 'Debian Package', ext: '.deb' }
-              ]"
-            />
-          </div>
-
-          <div class="info-box">
-            <p class="info-text">
-              <Icon name="heroicons:information-circle" class="info-icon" />
-              Visit the 
-              <a href="https://github.com/usenotex/notex/releases" target="_blank" rel="noopener noreferrer" 
-                 class="info-link">
-                Releases page
-              </a>
-              for the latest version and all download options.
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- FAQ Section -->
-    <section id="faq" class="section faq-section">
-      <div class="container-custom">
-        <div class="section-header">
-          <h2 class="section-title">
-            Frequently Asked Questions
-          </h2>
-          <p class="section-description">
-            Common questions and answers about NoteX
-          </p>
-        </div>
-
-        <div class="faq-container">
-          <div class="faq-item">
-            <h3 class="faq-question">
-              <Icon name="heroicons:question-mark-circle" class="faq-icon" />
-              I'm unable to install the app on macOS
-            </h3>
-            <div class="faq-answer">
-              <p>
-                Apple charges $99/year for code signing certificates. Since NoteX is a free, 
-                open-source app, we don't have code signing enabled. macOS may show a warning 
-                that the app is "damaged" or from an "unidentified developer."
-              </p>
-              <p>
-                To install the DMG without issues, run this command in Terminal before opening the file:
-              </p>
-              <InlineCodeBlock code="xattr -d com.apple.quarantine ~/Downloads/NoteX_0.7.1_aarch64.dmg" />
-              <p class="faq-note">
-                <Icon name="heroicons:light-bulb" class="faq-note-icon" />
-                Replace the filename with the actual DMG file you downloaded.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- CTA Section -->
-    <section class="section cta-section">
-      <div class="container-custom">
-        <div class="cta-content">
-          <h2 class="cta-title">
-            Ready to Take Better Notes?
-          </h2>
-          <p class="cta-description">
-            Join developers and writers who trust NoteX for their daily note-taking
-          </p>
-          <div class="cta-buttons">
-            <a href="#download" class="cta-btn cta-btn-white">
-              Download Now
-            </a>
-            <a href="https://github.com/cadamsdev/notes-app" target="_blank" rel="noopener noreferrer"
-               class="cta-btn cta-btn-outlined">
-              Star on GitHub ⭐
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
+    <LandingHeroSection />
+    <LandingFeaturesSection />
+    <LandingTechStackSection />
+    <LandingDownloadSection />
+    <FaqSection />
+    <LandingCtaSection />
   </div>
 </template>
 
@@ -263,435 +17,3 @@ useHead({
   ]
 })
 </script>
-
-<style scoped>
-/* Hero Section */
-.hero-section {
-  background: linear-gradient(to bottom, var(--color-white), var(--color-gray-50));
-}
-
-body.dark .hero-section {
-  background: linear-gradient(to bottom, var(--color-gray-900), var(--color-gray-800));
-}
-
-.hero-content {
-  max-width: 56rem;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
-
-.logo-container {
-  margin-bottom: var(--spacing-2xl);
-}
-
-.hero-logo {
-  height: 6rem;
-  width: 6rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: var(--spacing-lg);
-}
-
-.hero-title {
-  font-size: var(--font-size-5xl);
-  font-weight: 700;
-  color: var(--color-gray-900);
-  margin-bottom: var(--spacing-lg);
-}
-
-@media (min-width: 768px) {
-  .hero-title {
-    font-size: var(--font-size-6xl);
-  }
-}
-
-body.dark .hero-title {
-  color: var(--color-white);
-}
-
-.title-accent {
-  color: var(--color-primary-600);
-}
-
-.hero-description {
-  font-size: var(--font-size-xl);
-  color: var(--color-gray-600);
-  margin-bottom: var(--spacing-2xl);
-  max-width: 42rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-body.dark .hero-description {
-  color: var(--color-gray-300);
-}
-
-.hero-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  justify-content: center;
-}
-
-@media (min-width: 640px) {
-  .hero-buttons {
-    flex-direction: row;
-  }
-}
-
-.btn-hero {
-  font-size: var(--font-size-lg);
-  padding: var(--spacing-md) var(--spacing-2xl);
-  border-radius: var(--radius-lg);
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color var(--transition-base);
-}
-
-.btn-hero-primary {
-  background-color: var(--color-primary-600);
-  color: var(--color-white);
-}
-
-.btn-hero-primary:hover {
-  background-color: var(--color-primary-700);
-}
-
-.btn-hero-secondary {
-  background-color: var(--color-gray-200);
-  color: var(--color-gray-900);
-}
-
-.btn-hero-secondary:hover {
-  background-color: var(--color-gray-300);
-}
-
-body.dark .btn-hero-secondary {
-  background-color: var(--color-gray-700);
-  color: var(--color-white);
-}
-
-body.dark .btn-hero-secondary:hover {
-  background-color: var(--color-gray-600);
-}
-
-.btn-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  display: inline;
-  margin-right: var(--spacing-sm);
-}
-
-.preview-container {
-  margin-top: var(--spacing-3xl);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2xl);
-}
-
-.preview-image-wrapper {
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  box-shadow: var(--shadow-2xl);
-  border: 1px solid var(--color-gray-200);
-}
-
-body.dark .preview-image-wrapper {
-  border-color: var(--color-gray-700);
-}
-
-.preview-image {
-  width: 100%;
-  display: block;
-}
-
-/* Section Styles */
-.features-section {
-  background-color: var(--color-white);
-}
-
-body.dark .features-section {
-  background-color: var(--color-gray-900);
-}
-
-.tech-section {
-  background-color: var(--color-gray-50);
-}
-
-body.dark .tech-section {
-  background-color: var(--color-gray-800);
-}
-
-.download-section {
-  background-color: var(--color-white);
-}
-
-body.dark .download-section {
-  background-color: var(--color-gray-900);
-}
-
-.section-header {
-  text-align: center;
-  margin-bottom: var(--spacing-3xl);
-}
-
-.section-title {
-  font-size: var(--font-size-4xl);
-  font-weight: 700;
-  color: var(--color-gray-900);
-  margin-bottom: var(--spacing-md);
-}
-
-body.dark .section-title {
-  color: var(--color-white);
-}
-
-.section-description {
-  font-size: var(--font-size-xl);
-  color: var(--color-gray-600);
-  max-width: 42rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-body.dark .section-description {
-  color: var(--color-gray-300);
-}
-
-.features-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-2xl);
-}
-
-@media (min-width: 768px) {
-  .features-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1024px) {
-  .features-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.tech-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--spacing-2xl);
-  max-width: 56rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@media (min-width: 768px) {
-  .tech-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.download-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-2xl);
-}
-
-@media (min-width: 768px) {
-  .download-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.info-box {
-  margin-top: var(--spacing-3xl);
-  padding: var(--spacing-lg);
-  background-color: var(--color-primary-50);
-  border-radius: var(--radius-lg);
-}
-
-body.dark .info-box {
-  background-color: rgba(2, 132, 199, 0.2);
-}
-
-.info-text {
-  color: var(--color-gray-700);
-}
-
-body.dark .info-text {
-  color: var(--color-gray-300);
-}
-
-.info-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  display: inline;
-  margin-right: var(--spacing-sm);
-}
-
-.info-link {
-  font-weight: 600;
-  color: var(--color-primary-600);
-  text-decoration: none;
-  transition: color var(--transition-base);
-}
-
-.info-link:hover {
-  color: var(--color-primary-700);
-}
-
-body.dark .info-link {
-  color: var(--color-primary-400);
-}
-
-body.dark .info-link:hover {
-  color: var(--color-primary-300);
-}
-
-/* CTA Section */
-.cta-section {
-  background-color: var(--color-primary-600);
-}
-
-body.dark .cta-section {
-  background-color: var(--color-primary-700);
-}
-
-.cta-content {
-  max-width: 48rem;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  color: var(--color-white);
-}
-
-.cta-title {
-  font-size: var(--font-size-4xl);
-  font-weight: 700;
-  margin-bottom: var(--spacing-md);
-}
-
-.cta-description {
-  font-size: var(--font-size-xl);
-  margin-bottom: var(--spacing-2xl);
-  color: var(--color-primary-100);
-}
-
-.cta-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  justify-content: center;
-}
-
-@media (min-width: 640px) {
-  .cta-buttons {
-    flex-direction: row;
-  }
-}
-
-.cta-btn {
-  padding: var(--spacing-md) var(--spacing-2xl);
-  border-radius: var(--radius-lg);
-  font-weight: 600;
-  text-decoration: none;
-  transition: background-color var(--transition-base);
-  display: inline-block;
-}
-
-.cta-btn-white {
-  background-color: var(--color-white);
-  color: var(--color-primary-600);
-}
-
-.cta-btn-white:hover {
-  background-color: var(--color-gray-100);
-}
-
-.cta-btn-outlined {
-  background-color: var(--color-primary-700);
-  color: var(--color-white);
-  border: 1px solid var(--color-primary-500);
-}
-
-.cta-btn-outlined:hover {
-  background-color: var(--color-primary-800);
-}
-
-/* FAQ Section */
-.faq-section {
-  background-color: var(--color-gray-50);
-}
-
-body.dark .faq-section {
-  background-color: var(--color-gray-800);
-}
-
-.faq-container {
-  max-width: 48rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.faq-item {
-  background-color: var(--color-white);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-xl);
-  box-shadow: var(--shadow-sm);
-  border: 1px solid var(--color-gray-200);
-}
-
-body.dark .faq-item {
-  background-color: var(--color-gray-900);
-  border-color: var(--color-gray-700);
-}
-
-.faq-question {
-  font-size: var(--font-size-xl);
-  font-weight: 600;
-  color: var(--color-gray-900);
-  margin-bottom: var(--spacing-lg);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-body.dark .faq-question {
-  color: var(--color-white);
-}
-
-.faq-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  color: var(--color-primary-600);
-  flex-shrink: 0;
-}
-
-.faq-answer {
-  color: var(--color-gray-600);
-  line-height: 1.7;
-}
-
-body.dark .faq-answer {
-  color: var(--color-gray-300);
-}
-
-.faq-answer p {
-  margin-bottom: var(--spacing-md);
-}
-
-.faq-answer p:last-child {
-  margin-bottom: 0;
-}
-
-.faq-note-icon {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  margin-top: 0.125rem;
-}
-</style>

From 367cc70cb91caa181f70e686ee51042ffac2ebda Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Fri, 28 Nov 2025 14:45:41 -0500
Subject: [PATCH 3/7] wip

---
 apps/website/components/FaqSection.vue | 65 +++++++++++++++++++++++---
 1 file changed, 59 insertions(+), 6 deletions(-)

diff --git a/apps/website/components/FaqSection.vue b/apps/website/components/FaqSection.vue
index 91ec5bd..ee8fb82 100644
--- a/apps/website/components/FaqSection.vue
+++ b/apps/website/components/FaqSection.vue
@@ -12,11 +12,19 @@
 
       <div class="faq-container">
         <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
-          <h3 class="faq-question">
+          <button 
+            class="faq-question" 
+            @click="toggleItem(index)"
+            :aria-expanded="openItems.has(index)"
+          >
             <Icon name="heroicons:question-mark-circle" class="faq-icon" />
-            {{ item.question }}
-          </h3>
-          <div class="faq-answer">
+            <span class="faq-question-text">{{ item.question }}</span>
+            <Icon 
+              name="heroicons:chevron-down" 
+              :class="['faq-chevron', { 'faq-chevron-open': openItems.has(index) }]" 
+            />
+          </button>
+          <div v-show="openItems.has(index)" class="faq-answer">
             <template v-for="(content, contentIndex) in item.answer" :key="contentIndex">
               <p v-if="content.type === 'text'">{{ content.value }}</p>
               <InlineCodeBlock v-else-if="content.type === 'code'" :code="content.value" />
@@ -33,6 +41,8 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 interface FaqContent {
   type: 'text' | 'code' | 'note'
   value: string
@@ -43,6 +53,18 @@ interface FaqItem {
   answer: FaqContent[]
 }
 
+const openItems = ref<Set<number>>(new Set())
+
+function toggleItem(index: number) {
+  if (openItems.value.has(index)) {
+    openItems.value.delete(index)
+  } else {
+    openItems.value.add(index)
+  }
+  // Trigger reactivity
+  openItems.value = new Set(openItems.value)
+}
+
 const faqItems: FaqItem[] = [
   {
     question: "I'm unable to install the app on macOS",
@@ -117,9 +139,9 @@ body.dark .section-description {
 .faq-item {
   background-color: var(--color-white);
   border-radius: var(--radius-lg);
-  padding: var(--spacing-xl);
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--color-gray-200);
+  overflow: hidden;
 }
 
 body.dark .faq-item {
@@ -128,19 +150,37 @@ body.dark .faq-item {
 }
 
 .faq-question {
+  width: 100%;
+  padding: var(--spacing-xl);
   font-size: var(--font-size-xl);
   font-weight: 600;
   color: var(--color-gray-900);
-  margin-bottom: var(--spacing-lg);
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--transition-base);
+}
+
+.faq-question:hover {
+  background-color: var(--color-gray-50);
 }
 
 body.dark .faq-question {
   color: var(--color-white);
 }
 
+body.dark .faq-question:hover {
+  background-color: var(--color-gray-800);
+}
+
+.faq-question-text {
+  flex: 1;
+}
+
 .faq-icon {
   width: 1.5rem;
   height: 1.5rem;
@@ -148,7 +188,20 @@ body.dark .faq-question {
   flex-shrink: 0;
 }
 
+.faq-chevron {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-gray-400);
+  flex-shrink: 0;
+  transition: transform var(--transition-base);
+}
+
+.faq-chevron-open {
+  transform: rotate(180deg);
+}
+
 .faq-answer {
+  padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
   color: var(--color-gray-600);
   line-height: 1.7;
 }

From d2cb252ae58c5db9da0a1d0ac9c2b43ec1dfd9d0 Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Fri, 28 Nov 2025 14:47:06 -0500
Subject: [PATCH 4/7] wip

---
 apps/website/components/Accordion.vue  | 108 ++++++++++++++++++++
 apps/website/components/FaqSection.vue | 133 ++++---------------------
 2 files changed, 129 insertions(+), 112 deletions(-)
 create mode 100644 apps/website/components/Accordion.vue

diff --git a/apps/website/components/Accordion.vue b/apps/website/components/Accordion.vue
new file mode 100644
index 0000000..8d10532
--- /dev/null
+++ b/apps/website/components/Accordion.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="accordion">
+    <button 
+      class="accordion-trigger" 
+      @click="toggle"
+      :aria-expanded="isOpen"
+    >
+      <slot name="icon" />
+      <span class="accordion-title">
+        <slot name="title" />
+      </span>
+      <Icon 
+        name="heroicons:chevron-down" 
+        :class="['accordion-chevron', { 'accordion-chevron-open': isOpen }]" 
+      />
+    </button>
+    <div v-show="isOpen" class="accordion-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  defaultOpen?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultOpen: false
+})
+
+const isOpen = ref(props.defaultOpen)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<style scoped>
+.accordion {
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-gray-200);
+  overflow: hidden;
+}
+
+body.dark .accordion {
+  background-color: var(--color-gray-900);
+  border-color: var(--color-gray-700);
+}
+
+.accordion-trigger {
+  width: 100%;
+  padding: var(--spacing-xl);
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--color-gray-900);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--transition-base);
+}
+
+.accordion-trigger:hover {
+  background-color: var(--color-gray-50);
+}
+
+body.dark .accordion-trigger {
+  color: var(--color-white);
+}
+
+body.dark .accordion-trigger:hover {
+  background-color: var(--color-gray-800);
+}
+
+.accordion-title {
+  flex: 1;
+}
+
+.accordion-chevron {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-gray-400);
+  flex-shrink: 0;
+  transition: transform var(--transition-base);
+}
+
+.accordion-chevron-open {
+  transform: rotate(180deg);
+}
+
+.accordion-content {
+  padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
+  color: var(--color-gray-600);
+  line-height: 1.7;
+}
+
+body.dark .accordion-content {
+  color: var(--color-gray-300);
+}
+</style>
diff --git a/apps/website/components/FaqSection.vue b/apps/website/components/FaqSection.vue
index ee8fb82..044e36a 100644
--- a/apps/website/components/FaqSection.vue
+++ b/apps/website/components/FaqSection.vue
@@ -11,38 +11,26 @@
       </div>
 
       <div class="faq-container">
-        <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
-          <button 
-            class="faq-question" 
-            @click="toggleItem(index)"
-            :aria-expanded="openItems.has(index)"
-          >
+        <Accordion v-for="(item, index) in faqItems" :key="index">
+          <template #icon>
             <Icon name="heroicons:question-mark-circle" class="faq-icon" />
-            <span class="faq-question-text">{{ item.question }}</span>
-            <Icon 
-              name="heroicons:chevron-down" 
-              :class="['faq-chevron', { 'faq-chevron-open': openItems.has(index) }]" 
-            />
-          </button>
-          <div v-show="openItems.has(index)" class="faq-answer">
-            <template v-for="(content, contentIndex) in item.answer" :key="contentIndex">
-              <p v-if="content.type === 'text'">{{ content.value }}</p>
-              <InlineCodeBlock v-else-if="content.type === 'code'" :code="content.value" />
-              <p v-else-if="content.type === 'note'" class="faq-note">
-                <Icon name="heroicons:light-bulb" class="faq-note-icon" />
-                {{ content.value }}
-              </p>
-            </template>
-          </div>
-        </div>
+          </template>
+          <template #title>{{ item.question }}</template>
+          <template v-for="(content, contentIndex) in item.answer" :key="contentIndex">
+            <p v-if="content.type === 'text'">{{ content.value }}</p>
+            <InlineCodeBlock v-else-if="content.type === 'code'" :code="content.value" />
+            <p v-else-if="content.type === 'note'" class="faq-note">
+              <Icon name="heroicons:light-bulb" class="faq-note-icon" />
+              {{ content.value }}
+            </p>
+          </template>
+        </Accordion>
       </div>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-
 interface FaqContent {
   type: 'text' | 'code' | 'note'
   value: string
@@ -53,18 +41,6 @@ interface FaqItem {
   answer: FaqContent[]
 }
 
-const openItems = ref<Set<number>>(new Set())
-
-function toggleItem(index: number) {
-  if (openItems.value.has(index)) {
-    openItems.value.delete(index)
-  } else {
-    openItems.value.add(index)
-  }
-  // Trigger reactivity
-  openItems.value = new Set(openItems.value)
-}
-
 const faqItems: FaqItem[] = [
   {
     question: "I'm unable to install the app on macOS",
@@ -136,51 +112,6 @@ body.dark .section-description {
   gap: var(--spacing-lg);
 }
 
-.faq-item {
-  background-color: var(--color-white);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-  border: 1px solid var(--color-gray-200);
-  overflow: hidden;
-}
-
-body.dark .faq-item {
-  background-color: var(--color-gray-900);
-  border-color: var(--color-gray-700);
-}
-
-.faq-question {
-  width: 100%;
-  padding: var(--spacing-xl);
-  font-size: var(--font-size-xl);
-  font-weight: 600;
-  color: var(--color-gray-900);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  background: none;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  transition: background-color var(--transition-base);
-}
-
-.faq-question:hover {
-  background-color: var(--color-gray-50);
-}
-
-body.dark .faq-question {
-  color: var(--color-white);
-}
-
-body.dark .faq-question:hover {
-  background-color: var(--color-gray-800);
-}
-
-.faq-question-text {
-  flex: 1;
-}
-
 .faq-icon {
   width: 1.5rem;
   height: 1.5rem;
@@ -188,36 +119,6 @@ body.dark .faq-question:hover {
   flex-shrink: 0;
 }
 
-.faq-chevron {
-  width: 1.25rem;
-  height: 1.25rem;
-  color: var(--color-gray-400);
-  flex-shrink: 0;
-  transition: transform var(--transition-base);
-}
-
-.faq-chevron-open {
-  transform: rotate(180deg);
-}
-
-.faq-answer {
-  padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
-  color: var(--color-gray-600);
-  line-height: 1.7;
-}
-
-body.dark .faq-answer {
-  color: var(--color-gray-300);
-}
-
-.faq-answer p {
-  margin-bottom: var(--spacing-md);
-}
-
-.faq-answer p:last-child {
-  margin-bottom: 0;
-}
-
 .faq-note {
   display: flex;
   align-items: flex-start;
@@ -230,4 +131,12 @@ body.dark .faq-answer {
   flex-shrink: 0;
   margin-top: 0.125rem;
 }
+
+:deep(.accordion-content p) {
+  margin-bottom: var(--spacing-md);
+}
+
+:deep(.accordion-content p:last-child) {
+  margin-bottom: 0;
+}
 </style>

From f272a9aea7be0364e38d32d5d8e0eba49d10a694 Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Fri, 28 Nov 2025 14:49:19 -0500
Subject: [PATCH 5/7] wip

---
 apps/website/components/FaqSection.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/website/components/FaqSection.vue b/apps/website/components/FaqSection.vue
index 044e36a..41037fc 100644
--- a/apps/website/components/FaqSection.vue
+++ b/apps/website/components/FaqSection.vue
@@ -43,15 +43,15 @@ interface FaqItem {
 
 const faqItems: FaqItem[] = [
   {
-    question: "I'm unable to install the app on macOS",
+    question: "Why does macOS say the app is damaged or from an unidentified developer?",
     answer: [
       {
         type: 'text',
-        value: 'Apple charges $99/year for code signing certificates. Since NoteX is a free, open-source app, we don\'t have code signing enabled. macOS may show a warning that the app is "damaged" or from an "unidentified developer."'
+        value: 'NoteX is a free, open-source app and we don\'t pay the $99/year Apple developer fee for code signing. This causes macOS to block the app by default.'
       },
       {
         type: 'text',
-        value: 'To install the DMG without issues, run this command in Terminal before opening the file:'
+        value: 'To fix this, run the following command in Terminal before opening the DMG:'
       },
       {
         type: 'code',

From e84f0fef0a724e042ede957437d89fca6443b0bf Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Fri, 28 Nov 2025 14:52:59 -0500
Subject: [PATCH 6/7] add button to copy code

---
 apps/website/components/InlineCodeBlock.vue | 53 ++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/apps/website/components/InlineCodeBlock.vue b/apps/website/components/InlineCodeBlock.vue
index ea6a3de..ee4aa38 100644
--- a/apps/website/components/InlineCodeBlock.vue
+++ b/apps/website/components/InlineCodeBlock.vue
@@ -1,13 +1,36 @@
 <template>
   <div class="code-block">
     <code>{{ code }}</code>
+    <button 
+      class="copy-button" 
+      @click="copyToClipboard"
+      :title="copied ? 'Copied!' : 'Copy to clipboard'"
+    >
+      <Icon :name="copied ? 'heroicons:check' : 'heroicons:clipboard-document'" class="copy-icon" />
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { ref } from 'vue'
+
+const props = defineProps<{
   code: string
 }>()
+
+const copied = ref(false)
+
+async function copyToClipboard() {
+  try {
+    await navigator.clipboard.writeText(props.code)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
 </script>
 
 <style scoped>
@@ -20,6 +43,9 @@ defineProps<{
   font-size: var(--font-size-sm);
   overflow-x: auto;
   margin: var(--spacing-md) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
 }
 
 :global(body.dark) .code-block {
@@ -28,5 +54,30 @@ defineProps<{
 
 .code-block code {
   white-space: nowrap;
+  flex: 1;
+}
+
+.copy-button {
+  background: none;
+  border: none;
+  padding: var(--spacing-xs);
+  cursor: pointer;
+  color: var(--color-gray-400);
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-base), background-color var(--transition-base);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copy-button:hover {
+  color: var(--color-gray-100);
+  background-color: var(--color-gray-700);
+}
+
+.copy-icon {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 </style>

From 9eabe73be2bcdffbb3ab0f89b11f8aeb85b2f998 Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Fri, 28 Nov 2025 14:56:23 -0500
Subject: [PATCH 7/7] fix typing

---
 apps/website/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/tsconfig.json b/apps/website/tsconfig.json
index bfa0fea..eee7ab0 100644
--- a/apps/website/tsconfig.json
+++ b/apps/website/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     // Environment setup & latest features
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "target": "ESNext",
     "module": "Preserve",
     "moduleDetection": "force",