put modules at the top

docs/.vuepress/components/IterativeCycle.vue

 <template>
-  <div>
-    <h2>Module {{ currentModuleIndex + 1 }}</h2>
-    <p>{{ currentPhaseText }}</p>
-    <button @click="previousPhase">Previous Phase</button>
-    <button @click="nextPhase">Next Phase</button>
-    <br /><br />
-    <label for="moduleSelector">Switch Module:</label>
-    <select id="moduleSelector" v-model="currentModuleIndex" @change="switchModule">
-      <option v-for="(module, index) in modules" :key="index" :value="index">
-        Module {{ index + 1 }}
-      </option>
-    </select>
+  <div class="iterative-cycle">
+    <!-- Module Selector Dropdown -->
+    <div class="module-selector">
+      <label for="module">Select Module:</label>
+      <select id="module" v-model="selectedModule">
+        <option v-for="(module, index) in modules" :key="index" :value="index">
+          {{ module.title }}
+        </option>
+      </select>
+    </div>
+
+    <!-- Phases Display -->
+    <div v-if="selectedModule !== null" class="cycle">
+      <h2>{{ modules[selectedModule].title }}</h2>
+      <div v-for="(phase, index) in modules[selectedModule].phases" :key="index" class="phase">
+        <h3>{{ phase.title }}</h3>
+        <p>{{ phase.description }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-class IterativeCycle {
-  constructor(phases) {
-    this.phases = phases;
-    this.currentPhaseIndex = 0; // Start at the first phase
-  }
-
-  nextPhase() {
-    if (this.currentPhaseIndex < this.phases.length - 1) {
-      this.currentPhaseIndex++;
-    } else {
-      this.currentPhaseIndex = 0; // Loop back to the first phase
-    }
-  }
-
-  previousPhase() {
-    if (this.currentPhaseIndex > 0) {
-      this.currentPhaseIndex--;
-    }
-  }
-
-  getCurrentPhase() {
-    return this.phases[this.currentPhaseIndex];
-  }
-}
-
 export default {
   data() {
     return {
-      currentModuleIndex: 0, // Start at module 1
+      selectedModule: 0, // Default module selected
       modules: [
-        new IterativeCycle([
-          { phase: "Design", tasks: ["Lorem ipsum dolor sit amet", "Consectetur adipiscing elit"], outcome: "Lorem Ipsum Outcome" },
-          { phase: "Build", tasks: ["Sed do eiusmod tempor", "Incididunt ut labore"], outcome: "Lorem Ipsum Prototype" },
-          { phase: "Test", tasks: ["Ut enim ad minim veniam", "Quis nostrud exercitation"], outcome: "Lorem Ipsum Test Results" },
-          { phase: "Learn", tasks: ["Duis aute irure dolor", "In reprehenderit in voluptate"], outcome: "Lorem Ipsum Knowledge" }
-        ]),
-        new IterativeCycle([
-          { phase: "Design", tasks: ["Lorem ipsum dolor sit amet", "Consectetur adipiscing elit"], outcome: "Lorem Ipsum Outcome" },
-          { phase: "Build", tasks: ["Sed do eiusmod tempor", "Incididunt ut labore"], outcome: "Lorem Ipsum Prototype" },
-          { phase: "Test", tasks: ["Ut enim ad minim veniam", "Quis nostrud exercitation"], outcome: "Lorem Ipsum Test Results" },
-          { phase: "Learn", tasks: ["Duis aute irure dolor", "In reprehenderit in voluptate"], outcome: "Lorem Ipsum Knowledge" }
-        ]),
-        new IterativeCycle([
-          { phase: "Design", tasks: ["Lorem ipsum dolor sit amet", "Consectetur adipiscing elit"], outcome: "Lorem Ipsum Outcome" },
-          { phase: "Build", tasks: ["Sed do eiusmod tempor", "Incididunt ut labore"], outcome: "Lorem Ipsum Prototype" }
-        ])
+        {
+          title: 'Module 1: Full Cycle',
+          phases: [
+            { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+            { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+            { title: 'Test', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+            { title: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' }
+          ]
+        },
+        {
+          title: 'Module 2: Full Cycle',
+          phases: [
+            { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+            { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+            { title: 'Test', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+            { title: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' }
+          ]
+        },
+        {
+          title: 'Module 3: Design & Build Only',
+          phases: [
+            { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+            { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' }
+          ]
+        }
       ]
     };
-  },
-  computed: {
-    currentPhaseText() {
-      const currentPhase = this.modules[this.currentModuleIndex].getCurrentPhase();
-      return `Phase: ${currentPhase.phase}, Tasks: ${currentPhase.tasks.join(", ")}, Outcome: ${currentPhase.outcome}`;
-    }
-  },
-  methods: {
-    nextPhase() {
-      this.modules[this.currentModuleIndex].nextPhase();
-    },
-    previousPhase() {
-      this.modules[this.currentModuleIndex].previousPhase();
-    },
-    switchModule() {
-      // Restart cycle on switch
-      this.modules[this.currentModuleIndex].currentPhaseIndex = 0;
-    }
   }
 };
 </script>
+
+<style scoped>
+.iterative-cycle {
+  text-align: center;
+  margin: 20px;
+}
+
+.module-selector {
+  margin-bottom: 20px;
+}
+
+.cycle {
+  margin-top: 20px;
+}
+
+.phase {
+  margin-bottom: 20px;
+}
+
+h2 {
+  color: #2c3e50;
+}
+
+h3 {
+  color: #3498db;
+}
+</style>