notebook/app/views/help/index.html.erb

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Header -->
  <div class="flex items-center mb-8">
    <%= link_to data_vault_path, class: 'text-gray-500 hover:text-gray-700 mr-3', title: "Back to your Data Vault" do %>
      <i class="material-icons">arrow_back</i>
    <% end %>
    <h1 class="text-3xl font-bold text-gray-800">Help Center</h1>
  </div>

  <!-- Main Content -->
  <div class="space-y-12">
    <!-- Worldbuilding Pages Section -->
    <section>
      <div class="flex items-center mb-4">
        <i class="material-icons text-blue-600 mr-2">menu_book</i>
        <h2 class="text-2xl font-semibold text-gray-800">About our worldbuilding pages</h2>
      </div>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
        <% Rails.application.config.content_types[:all].each do |content_type| %>
          <%= link_to send("#{content_type.name.downcase}_worldbuilding_info_path"), class: "block" do %>
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow overflow-hidden">
              <div class="p-4 <%= content_type.color %> text-white flex items-center justify-center">
                <i class="material-icons text-2xl"><%= content_type.icon %></i>
              </div>
              <div class="p-2 text-center text-sm font-medium text-gray-700">
                <%= content_type.name.pluralize %>
              </div>
            </div>
          <% end %>
        <% end %>
      </div>
    </section>

    <!-- Feedback and Surveys Section -->
    <section>
      <div class="flex items-center mb-4">
        <i class="material-icons text-green-600 mr-2">feedback</i>
        <h2 class="text-2xl font-semibold text-gray-800">Feedback and surveys</h2>
      </div>
      
      <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 mb-6">
        <div class="prose text-gray-600 max-w-none">
          <p>
            The following links will open a new tab to Google Forms. All responses are anonymous and separated from your Notebook.ai account, so please
            provide an email address if you would like a response or follow-up.
          </p>
          <p>
            You can also ask for help from other users on <%= link_to 'the forums', 'https://www.notebook.ai/forum/site-support', class: 'text-blue-600 hover:text-blue-800' %>.
          </p>
          <p>
            Thank you for helping make Notebook.ai better!
          </p>
        </div>
      </div>
      
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <!-- General Feedback Forms -->
        <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLSe0jnqJlcPJDqwogGere5j8-8F1nSGGYkzbsI-XkOeMnGwLrA/viewform', target: '_blank', class: 'block' do %>
          <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow p-4 flex items-center">
            <div class="bg-red-50 rounded-full p-2 mr-3">
              <i class="material-icons text-red-600">bug_report</i>
            </div>
            <div class="flex-grow">
              <h3 class="font-medium text-gray-800">Report a problem</h3>
              <p class="text-sm text-gray-500">Let us know about any issues you encounter</p>
            </div>
            <i class="material-icons text-gray-400">open_in_new</i>
          </div>
        <% end %>
        
        <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLScOhSMdDqWqJu9HGPQdmd0R9s90_AcSo0g6_Nc1qNjQIbSaXA/viewform', target: '_blank', class: 'block' do %>
          <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow p-4 flex items-center">
            <div class="bg-blue-50 rounded-full p-2 mr-3">
              <i class="material-icons text-blue-600">lightbulb</i>
            </div>
            <div class="flex-grow">
              <h3 class="font-medium text-gray-800">Request a feature</h3>
              <p class="text-sm text-gray-500">Suggest new features or improvements</p>
            </div>
            <i class="material-icons text-gray-400">open_in_new</i>
          </div>
        <% end %>
        
        <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLScZWEVMgm8hBWIIVj1LPzo0GqflmWUrLQlc4TAYqsaS087oAA/viewform', target: '_blank', class: 'block' do %>
          <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow p-4 flex items-center">
            <div class="bg-green-50 rounded-full p-2 mr-3">
              <i class="material-icons text-green-600">rate_review</i>
            </div>
            <div class="flex-grow">
              <h3 class="font-medium text-gray-800">Leave feedback</h3>
              <p class="text-sm text-gray-500">Share your thoughts about Notebook.ai</p>
            </div>
            <i class="material-icons text-gray-400">open_in_new</i>
          </div>
        <% end %>
        
        <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLSctM_QaTIYTaj4WS546L--9WBbEIxAA9LKhWINb5CzguLR-JQ/viewform?usp=sf_link', target: '_blank', class: 'block' do %>
          <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow p-4 flex items-center">
            <div class="bg-yellow-50 rounded-full p-2 mr-3">
              <i class="material-icons text-yellow-600">smartphone</i>
            </div>
            <div class="flex-grow">
              <h3 class="font-medium text-gray-800">Mobile usage survey</h3>
              <p class="text-sm text-gray-500">Help us improve the mobile experience</p>
            </div>
            <i class="material-icons text-gray-400">open_in_new</i>
          </div>
        <% end %>
        
        <%= link_to 'https://docs.google.com/forms/d/1PFOaa97Cu3vrceUvcuFT6nyITaMwR-4wQSarUdVoPSg/viewform', target: '_blank', class: 'block' do %>
          <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow p-4 flex items-center">
            <div class="bg-purple-50 rounded-full p-2 mr-3">
              <i class="material-icons text-purple-600">add_circle</i>
            </div>
            <div class="flex-grow">
              <h3 class="font-medium text-gray-800">Request another page type</h3>
              <p class="text-sm text-gray-500">Suggest new worldbuilding categories</p>
            </div>
            <i class="material-icons text-gray-400">open_in_new</i>
          </div>
        <% end %>
        
        <!-- Premium User Forms -->
        <% if user_signed_in? && current_user.on_premium_plan? %>
          <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLScjWJfW2p9LoGfKe9uEn4xWvve-AhX3QtY7hqm7BCyyK0HdRA/viewform?usp=sf_link', target: '_blank', class: 'block' do %>
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow p-4 flex items-center">
              <div class="bg-indigo-50 rounded-full p-2 mr-3">
                <i class="material-icons text-indigo-600">psychology</i>
              </div>
              <div class="flex-grow">
                <h3 class="font-medium text-gray-800">Document Analysis Feedback</h3>
                <p class="text-sm text-gray-500">Share your experience with AI analysis</p>
              </div>
              <i class="material-icons text-gray-400">open_in_new</i>
            </div>
          <% end %>
          
          <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLSfHHcOpU-CD9EFILPVMd4ZtgWIFkxmzLMW1mdvanJqqLKgMAA/viewform?usp=sf_link', target: '_blank', class: 'block' do %>
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow p-4 flex items-center">
              <div class="bg-teal-50 rounded-full p-2 mr-3">
                <i class="material-icons text-teal-600">timeline</i>
              </div>
              <div class="flex-grow">
                <h3 class="font-medium text-gray-800">Timeline Editor Beta Feedback</h3>
                <p class="text-sm text-gray-500">Help improve the timeline feature</p>
              </div>
              <i class="material-icons text-gray-400">open_in_new</i>
            </div>
          <% end %>
          
          <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLScCPsoJxLxOC_nY3nMrtENja33lnMXNDrZLtWOxS2BYCNlpCQ/viewform?usp=sf_link', target: '_blank', class: 'block' do %>
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow p-4 flex items-center">
              <div class="bg-pink-50 rounded-full p-2 mr-3">
                <i class="material-icons text-pink-600">collections_bookmark</i>
              </div>
              <div class="flex-grow">
                <h3 class="font-medium text-gray-800">Collections feedback</h3>
                <p class="text-sm text-gray-500">Share thoughts on the collections feature</p>
              </div>
              <i class="material-icons text-gray-400">open_in_new</i>
            </div>
          <% end %>
        <% end %>
      </div>
    </section>

    <!-- Additional Help Section -->
    <section>
      <div class="flex items-center mb-4">
        <i class="material-icons text-amber-600 mr-2">contact_support</i>
        <h2 class="text-2xl font-semibold text-gray-800">Additional help</h2>
      </div>
      
      <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
        <div class="prose text-gray-600 max-w-none">
          <p>
            Have a question not answered by anything above? Feel free to send me an email any time at <strong>andrew@indentlabs.com</strong> and I'll get back to you
            as quickly as possible. I'm always happy to help!
          </p>
          <p>
            Happy worldbuilding!
          </p>
        </div>
        
        <div class="mt-6 flex">
          <a href="mailto:andrew@indentlabs.com" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            <i class="material-icons mr-2">email</i>
            Contact Support
          </a>
        </div>
      </div>
    </section>
  </div>
</div>