app/pages/resources.vue

<template>
  <div>
    <div
      class="template-container min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8">
      <div class="max-w-6xl mx-auto px-4 relative">
        <div class="mb-8">
          <h1 class="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
            More Resources & Templates
          </h1>
          <p class="text-neutral-700 dark:text-neutral-200">
            Additional tools, templates, and resources to support your
            cooperative journey.
          </p>
        </div>

        <div class="space-y-8">
          <!-- External Templates Section -->
          <section>
            <h2
              class="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">
              External Templates
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <!-- Miro Template -->
              <div class="template-card">
                <div
                  class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
                <div
                  class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6">
                  <h3
                    class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
                    Goals & Values Exercise
                  </h3>
                  <p class="text-neutral-700 dark:text-neutral-200 mb-4">
                    A Miro template to help your team align on shared goals and
                    values through collaborative exercises. Make sure to do this
                    WITH your full team!
                  </p>
                  <a
                    href="https://miro.com/miroverse/goals-values-exercise/"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="inline-flex items-center px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-medium hover:opacity-90 transition-opacity">
                    Open in Miro
                    <svg
                      class="w-4 h-4 ml-2"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
                  </a>
                </div>
              </div>

              <!-- CommunityRule Templates -->
              <div class="template-card">
                <div
                  class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
                <div
                  class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6">
                  <h3
                    class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
                    CommunityRule Governance Templates
                  </h3>
                  <p class="text-neutral-700 dark:text-neutral-200 mb-4">
                    A collection of governance templates and patterns for
                    democratic organizations and communities.
                  </p>
                  <a
                    href="https://communityrule.info/"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="inline-flex items-center px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-medium hover:opacity-90 transition-opacity">
                    Browse Templates
                    <svg
                      class="w-4 h-4 ml-2"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002 2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// PDF downloads list with placeholder data
const pdfDownloads = [
  {
    id: "bylaws",
    name: "Bylaws Wizard",
    description: "Create comprehensive bylaws for your cooperative",
    available: false,
    url: "#",
  },
  {
    id: "operating-agreement",
    name: "Operating Agreement Wizard",
    description: "Draft an operating agreement for your LLC cooperative",
    available: false,
    url: "#",
  },
  {
    id: "articles",
    name: "Articles of Incorporation",
    description: "Template for articles of incorporation",
    available: false,
    url: "#",
  },
  {
    id: "membership",
    name: "Membership Agreement",
    description: "Define membership terms and conditions",
    available: false,
    url: "#",
  },
  {
    id: "patronage",
    name: "Patronage Policy",
    description: "Structure your patronage distribution system",
    available: false,
    url: "#",
  },
  {
    id: "conflict",
    name: "Conflict Resolution Process",
    description: "Establish clear conflict resolution procedures",
    available: false,
    url: "#",
  },
];
</script>

<style scoped>
.template-card {
  position: relative;
}

.dither-tag {
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 1px,
    currentColor 1px,
    currentColor 2px
  );
  background-size: 4px 4px;
}
</style>