feat: add header and footer to static pages for consistent navigation

src/pages/About.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen bg-white">
+  <div class="min-h-screen bg-background flex flex-col">
+    <Header />
+    <main class="flex-grow pt-24 pb-20">
     <div class="container mx-auto px-4 py-12">
       <div class="max-w-4xl mx-auto">
         <!-- Header -->
@@ -85,7 +87,8 @@
           </section>
         </div>
       </div>
-    </div>
+    </main>
+    <Footer />
   </div>
 </template>
 
@@ -93,6 +96,8 @@
 import { useI18n } from "vue-i18n";
 import { useHead } from "@unhead/vue";
 import { computed } from "vue";
+import Header from "@/components/Header.vue";
+import Footer from "@/components/Footer.vue";
 
 const { t } = useI18n();
 

src/pages/Blog.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="min-h-screen bg-white">
+  <div class="min-h-screen bg-background flex flex-col">
     <Header />
-    <div class="container mx-auto px-4 py-32">
+    <main class="flex-grow pt-32 pb-24">
       <div class="max-w-6xl mx-auto">
         <!-- Header -->
         <div class="mb-12">
@@ -115,7 +115,7 @@
           </div>
         </section>
       </div>
-    </div>
+    </main>
     <Footer />
   </div>
 </template>

src/pages/BlogPost.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="min-h-screen bg-white">
+  <div class="min-h-screen bg-background flex flex-col">
     <Header />
-    <div class="container mx-auto px-4 py-32">
+    <main class="flex-grow pt-32 pb-24">
       <div class="max-w-4xl mx-auto">
         <router-link to="/blog" class="inline-flex items-center text-primary font-bold mb-8 hover:translate-x-[-4px] transition-transform group">
           <ArrowLeft class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform" />
@@ -42,7 +42,7 @@
           <router-link to="/blog" class="text-primary font-bold hover:underline italic">{{ t("blog.exploreOther") }}</router-link>
         </div>
       </div>
-    </div>
+    </main>
     <Footer />
   </div>
 </template>

src/pages/Careers.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen bg-white">
+  <div class="min-h-screen bg-background flex flex-col">
+    <Header />
+    <main class="flex-grow pt-24 pb-20">
     <div class="container mx-auto px-4 py-12">
       <div class="max-w-4xl mx-auto">
         <!-- Header -->
@@ -187,12 +189,15 @@
           </section>
         </div>
       </div>
-    </div>
+    </main>
+    <Footer />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
+import Header from "@/components/Header.vue";
+import Footer from "@/components/Footer.vue";
 
 const { t } = useI18n();
 </script>

src/pages/Contact.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen bg-white">
+  <div class="min-h-screen bg-background flex flex-col">
+    <Header />
+    <main class="flex-grow pt-24 pb-20">
     <div class="container mx-auto px-4 py-12">
       <div class="max-w-6xl mx-auto">
         <!-- Header -->
@@ -223,16 +225,18 @@
           </div>
         </div>
       </div>
-    </div>
+    </main>
+    <Footer />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
+import Header from "@/components/Header.vue";
+import Footer from "@/components/Footer.vue";
 import { submitContactForm } from "../lib/api";
 import { useHead } from "@unhead/vue";
-import { computed } from "vue";
 
 const { t } = useI18n();
 const fileInputRef = ref<HTMLInputElement | null>(null);

src/pages/Guidelines.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen bg-white">
+  <div class="min-h-screen bg-background flex flex-col">
+    <Header />
+    <div class="flex-grow">
     <!-- Hero Section -->
     <header class="pt-32 pb-16 bg-gradient-to-b from-gray-50 to-white">
       <div class="container mx-auto px-4 text-center">
@@ -195,11 +197,15 @@
         <div class="absolute -bottom-12 -left-12 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
       </section>
     </main>
+    </div>
+    <Footer />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
+import Header from "@/components/Header.vue";
+import Footer from "@/components/Footer.vue";
 import { 
   InfoIcon, 
   CheckCircleIcon, 

src/pages/HelpCenter.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen bg-white">
+  <div class="min-h-screen bg-background flex flex-col">
+    <Header />
+    <main class="flex-grow pt-24 pb-20">
     <div class="container mx-auto px-4 py-12">
       <div class="max-w-6xl mx-auto">
         <!-- Header -->
@@ -167,13 +169,16 @@
           </div>
         </div>
       </div>
-    </div>
+    </main>
+    <Footer />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
+import Header from "@/components/Header.vue";
+import Footer from "@/components/Footer.vue";
 
 const { t } = useI18n();
 

src/pages/Privacy.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen bg-[#fafafa] pt-16 sm:pt-32 pb-12 sm:pb-24 selection:bg-primary/10">
+  <div class="min-h-screen bg-background flex flex-col">
+    <Header />
+    <main class="flex-grow pt-24 pb-20 selection:bg-primary/10">
     <div class="container mx-auto px-6 max-w-4xl">
       <!-- Header Section -->
       <div class="relative mb-10 sm:mb-20 animate-in fade-in slide-in-from-bottom-4 duration-1000">
@@ -55,29 +57,17 @@
         </section>
       </div>
       
-      <!-- Footer Navigation -->
-      <div class="mt-16 sm:mt-32 pt-12 border-t border-black/[0.04] flex flex-col sm:flex-row justify-between items-center gap-8">
-        <router-link 
-          to="/" 
-          class="group inline-flex items-center gap-3 text-sm font-bold text-foreground/40 hover:text-primary transition-all px-8 py-4 bg-white rounded-full border border-black/[0.02] shadow-sm hover:shadow-md"
-        >
-          <ArrowLeft class="w-4 h-4 transition-transform group-hover:-translate-x-1" />
-          {{ t("auth.back") }}
-        </router-link>
-        
-        <div class="flex items-center gap-6">
-          <span class="text-[10px] font-bold text-foreground/20 uppercase tracking-widest bg-black/[0.02] px-4 py-2 rounded-full">
-            {{ t("privacy.subtitle").split('\n')[0] }}
-          </span>
-        </div>
       </div>
-    </div>
+    </main>
+    <Footer />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import { ArrowLeft, Mail, ArrowUpRight } from "lucide-vue-next";
+import { Mail, ArrowUpRight } from "lucide-vue-next";
+import Header from "@/components/Header.vue";
+import Footer from "@/components/Footer.vue";
 
 const { t } = useI18n();
 

src/pages/Terms.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen bg-white">
+  <div class="min-h-screen bg-background flex flex-col">
+    <Header />
+    <main class="flex-grow pt-24 pb-20">
     <div class="container mx-auto px-4 py-12">
       <div class="max-w-4xl mx-auto">
         <!-- Header -->
@@ -258,12 +260,15 @@
           </section>
         </div>
       </div>
-    </div>
+    </main>
+    <Footer />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
+import Header from "@/components/Header.vue";
+import Footer from "@/components/Footer.vue";
 
 const { t } = useI18n();
 </script>