app/pages/help.vue

<template>
  <div class="min-h-screen bg-neutral-50 py-8">
    <div class="container mx-auto max-w-4xl px-4">
      <!-- Header -->
      <div class="mb-8 text-center">
        <h1 class="text-4xl font-bold mb-4">Budget Planning Help</h1>
        <p class="text-xl text-neutral-600">Learn how to build a sustainable financial plan for your co-op or studio</p>
      </div>

      <!-- Navigation -->
      <div class="mb-8">
        <div class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
          <div class="p-4">
            <h2 class="text-xl font-bold mb-4">Quick Navigation</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <a href="#revenue-diversification" class="block p-3 bg-blue-50 border-2 border-blue-200 rounded hover:bg-blue-100 transition-colors">
                <span class="font-semibold">Revenue Diversification</span>
                <p class="text-sm text-neutral-600">How to develop multiple income streams</p>
              </a>
              <a href="#budget-categories" class="block p-3 bg-green-50 border-2 border-green-200 rounded hover:bg-green-100 transition-colors">
                <span class="font-semibold">Budget Categories</span>
                <p class="text-sm text-neutral-600">Understanding revenue and expense types</p>
              </a>
              <a href="#planning-tips" class="block p-3 bg-yellow-50 border-2 border-yellow-200 rounded hover:bg-yellow-100 transition-colors">
                <span class="font-semibold">Planning Tips</span>
                <p class="text-sm text-neutral-600">Best practices for financial planning</p>
              </a>
              <a href="#getting-started" class="block p-3 bg-purple-50 border-2 border-purple-200 rounded hover:bg-purple-100 transition-colors">
                <span class="font-semibold">Getting Started</span>
                <p class="text-sm text-neutral-600">Step-by-step setup guide</p>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Content Sections -->
      <div class="space-y-8">
        
        <!-- Revenue Diversification -->
        <section id="revenue-diversification" class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
          <div class="bg-blue-500 text-white px-6 py-4">
            <h2 class="text-2xl font-bold">Revenue Diversification</h2>
          </div>
          <div class="p-6">
            <div class="prose max-w-none">
              <p class="text-lg mb-4">
                Building multiple revenue streams reduces risk and creates more stable income for your co-op.
              </p>
              
              <h3 class="text-xl font-semibold mb-3">How to Develop Games & Products</h3>
              <p class="mb-4">
                [Placeholder text - Add your content here about developing games and product revenue streams]
              </p>
              
              <h3 class="text-xl font-semibold mb-3">How to Develop Services & Contracts</h3>
              <p class="mb-4">
                [Placeholder text - Add your content here about developing service-based revenue streams]
              </p>
              
              <h3 class="text-xl font-semibold mb-3">How to Secure Grants & Funding</h3>
              <p class="mb-4">
                [Placeholder text - Add your content here about finding and securing grants]
              </p>
              
              <h3 class="text-xl font-semibold mb-3">Building Community Support</h3>
              <p class="mb-4">
                [Placeholder text - Add your content here about building community-supported revenue]
              </p>
            </div>
          </div>
        </section>

        <!-- Budget Categories -->
        <section id="budget-categories" class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
          <div class="bg-green-500 text-white px-6 py-4">
            <h2 class="text-2xl font-bold">Budget Categories</h2>
          </div>
          <div class="p-6">
            <div class="prose max-w-none">
              <h3 class="text-xl font-semibold mb-3">Revenue Categories</h3>
              <ul class="mb-6 space-y-2">
                <li><strong>Games & Products:</strong> [Add description]</li>
                <li><strong>Services & Contracts:</strong> [Add description]</li>
                <li><strong>Grants & Funding:</strong> [Add description]</li>
                <li><strong>Community Support:</strong> [Add description]</li>
                <li><strong>Partnerships:</strong> [Add description]</li>
                <li><strong>Investment Income:</strong> [Add description]</li>
                <li><strong>In-Kind Contributions:</strong> [Add description]</li>
              </ul>
              
              <h3 class="text-xl font-semibold mb-3">Expense Categories</h3>
              <ul class="space-y-2">
                <li><strong>Salaries & Benefits:</strong> [Add description]</li>
                <li><strong>Development Costs:</strong> [Add description]</li>
                <li><strong>Equipment & Technology:</strong> [Add description]</li>
                <li><strong>Marketing & Outreach:</strong> [Add description]</li>
                <li><strong>Office & Operations:</strong> [Add description]</li>
                <li><strong>Legal & Professional:</strong> [Add description]</li>
                <li><strong>Other Expenses:</strong> [Add description]</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- Planning Tips -->
        <section id="planning-tips" class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
          <div class="bg-yellow-500 text-white px-6 py-4">
            <h2 class="text-2xl font-bold">Planning Tips</h2>
          </div>
          <div class="p-6">
            <div class="prose max-w-none">
              <h3 class="text-xl font-semibold mb-3">Concentration Risk</h3>
              <p class="mb-4">
                [Add content about managing concentration risk and why diversification matters]
              </p>
              
              <h3 class="text-xl font-semibold mb-3">Monthly vs Annual Planning</h3>
              <p class="mb-4">
                [Add content about balancing monthly budgets with annual strategic planning]
              </p>
              
              <h3 class="text-xl font-semibold mb-3">Setting Realistic Goals</h3>
              <p class="mb-4">
                [Add content about setting achievable revenue and expense targets]
              </p>
            </div>
          </div>
        </section>

        <!-- Getting Started -->
        <section id="getting-started" class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
          <div class="bg-purple-500 text-white px-6 py-4">
            <h2 class="text-2xl font-bold">Getting Started</h2>
          </div>
          <div class="p-6">
            <div class="prose max-w-none">
              <h3 class="text-xl font-semibold mb-3">Step 1: Set Up Your Basic Budget</h3>
              <p class="mb-4">
                [Add step-by-step instructions for initial budget setup]
              </p>
              
              <h3 class="text-xl font-semibold mb-3">Step 2: Plan Your Revenue Streams</h3>
              <p class="mb-4">
                [Add guidance on planning initial revenue streams]
              </p>
              
              <h3 class="text-xl font-semibold mb-3">Step 3: Track and Adjust</h3>
              <p class="mb-4">
                [Add content about ongoing budget management]
              </p>
            </div>
          </div>
        </section>

      </div>

      <!-- Back to Budget -->
      <div class="mt-8 text-center">
        <NuxtLink 
          to="/budget" 
          class="inline-block px-6 py-3 bg-black text-white font-bold border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all"
        >
          Back to Budget
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// Page meta
useHead({
  title: 'Budget Planning Help - Urgent Tools',
  meta: [
    { name: 'description', content: 'Learn how to build sustainable financial plans and develop diverse revenue streams for your co-op or studio.' }
  ]
});
</script>

<style scoped>
/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Ensure anchor links account for any fixed headers */
section[id] {
  scroll-margin-top: 2rem;
}
</style>