feat: add /coming-soon/ route for non-existent pages

Author: themightychris

.clinerules

@@ -184,6 +184,11 @@ For example, seed.sql contains:
 - Video and image assets are stored in /assets directory and referenced using ~/assets path
 - NEVER overwrite existing .env files with .env.example - they may contain important local configuration
 - ALWAYS examine seed.sql before implementing features to understand available test data
+- ALWAYS use the /coming-soon/[page] route for links to pages that don't exist yet:
+    - The route automatically displays a "Coming Soon" message with the page name
+    - Example: Use `/coming-soon/about` instead of `/about` for unimplemented pages
+    - Exception: Keep direct links for implemented pages (e.g., `/projects`)
+    - This helps users understand which features are available vs. in development
 - When examining any codeforphilly.org URL, ALWAYS use the puppeteer screenshot command first:
 
     ```bash

components/SiteFooter.vue

@@ -7,36 +7,36 @@
           <NuxtLink to="/projects" class="block text-red-500 hover:text-red-400">
             Active Projects
           </NuxtLink>
-          <NuxtLink to="/start" class="block mt-2 text-red-500 hover:text-red-400">
+          <NuxtLink to="/coming-soon/start" class="block mt-2 text-red-500 hover:text-red-400">
             Start a Project
           </NuxtLink>
-          <NuxtLink to="/hackathons" class="block mt-2 text-red-500 hover:text-red-400">
+          <NuxtLink to="/coming-soon/hackathons" class="block mt-2 text-red-500 hover:text-red-400">
             Hackathons
           </NuxtLink>
         </div>
 
         <!-- About -->
         <div class="text-center">
-          <NuxtLink to="/mission" class="block text-red-500 hover:text-red-400">
+          <NuxtLink to="/coming-soon/mission" class="block text-red-500 hover:text-red-400">
             Mission
           </NuxtLink>
-          <NuxtLink to="/code-of-conduct" class="block mt-2 text-red-500 hover:text-red-400">
+          <NuxtLink to="/coming-soon/code-of-conduct" class="block mt-2 text-red-500 hover:text-red-400">
             Code of Conduct
           </NuxtLink>
-          <NuxtLink to="/leadership" class="block mt-2 text-red-500 hover:text-red-400">
+          <NuxtLink to="/coming-soon/leadership" class="block mt-2 text-red-500 hover:text-red-400">
             Leadership
           </NuxtLink>
         </div>
 
         <!-- Connect -->
         <div class="text-center">
-          <NuxtLink to="/slack" class="block text-red-500 hover:text-red-400">
+          <NuxtLink to="/coming-soon/slack" class="block text-red-500 hover:text-red-400">
             Slack
           </NuxtLink>
-          <NuxtLink to="/contact" class="block mt-2 text-red-500 hover:text-red-400">
+          <NuxtLink to="/coming-soon/contact" class="block mt-2 text-red-500 hover:text-red-400">
             Contact
           </NuxtLink>
-          <NuxtLink to="/meetups" class="block mt-2 text-red-500 hover:text-red-400">
+          <NuxtLink to="/coming-soon/meetups" class="block mt-2 text-red-500 hover:text-red-400">
             Weekly Meetups
           </NuxtLink>
         </div>

components/SiteHeader.vue

@@ -11,10 +11,10 @@
         <div class="flex items-center space-x-8">
           <div class="flex items-center space-x-6">
             <button class="text-white hover:text-gray-300">GET INVOLVED</button>
-            <NuxtLink to="/chat" class="text-white hover:text-gray-300">
+            <NuxtLink to="/coming-soon/chat" class="text-white hover:text-gray-300">
               CHAT (SLACK)
             </NuxtLink>
-            <button class="text-white hover:text-gray-300">ABOUT</button>
+            <NuxtLink to="/coming-soon/about" class="text-white hover:text-gray-300">ABOUT</NuxtLink>
           </div>
 
           <!-- Search -->
@@ -28,10 +28,10 @@
 
           <!-- Auth -->
           <div class="flex items-center space-x-4">
-            <NuxtLink to="/login" class="text-white hover:text-gray-300">
+            <NuxtLink to="/coming-soon/login" class="text-white hover:text-gray-300">
               LOGIN
             </NuxtLink>
-            <NuxtLink to="/signup" class="text-white hover:text-gray-300">
+            <NuxtLink to="/coming-soon/signup" class="text-white hover:text-gray-300">
               SIGNUP
             </NuxtLink>
           </div>

pages/coming-soon/[page].vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="min-h-screen bg-gray-50 py-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="text-center">
+        <h1 class="text-4xl font-bold text-gray-900 mb-4">Coming Soon</h1>
+        <p class="text-xl text-gray-600 mb-8">
+          The {{ route.params.page.replace(/-/g, ' ') }} page is under development.
+        </p>
+        <NuxtLink
+          to="/"
+          class="inline-flex items-center px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
+        >
+          <i class="bi bi-arrow-left mr-2"></i>
+          Return Home
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+</script>