update modules

docs/.vuepress/components/IterativeCycle.vue

@@ -13,9 +13,18 @@
     <!-- 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 v-if="modules[selectedModule].phases" class="phase-selector">
+        <label for="phase">Select Phase:</label>
+        <select id="phase" v-model="selectedPhase" class="phase-dropdown">
+          <option v-for="(phase, index) in modules[selectedModule].phases" :key="index" :value="index">
+            {{ phase.title }}
+          </option>
+        </select>
+      </div>
+
+      <div v-if="selectedPhase !== null" class="phase">
+        <h3>{{ modules[selectedModule].phases[selectedPhase].title }}</h3>
+        <p>{{ modules[selectedModule].phases[selectedPhase].description }}</p>
       </div>
     </div>
   </div>
@@ -26,34 +35,51 @@ export default {
   data() {
     return {
       selectedModule: 0, // Default module selected
+      selectedPhase: 0, // Default phase selected
       modules: [
         {
-          title: 'Module 1: Full Cycle',
+          title: 'Module 1: DBTL Cycles',
           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: 'Design Cycle 1', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+            { title: 'Build Cycle 1', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+            { title: 'Test Cycle 1', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+            { title: 'Learn Cycle 1', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+            { title: 'Design Cycle 2', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+            { title: 'Build Cycle 2', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+            { title: 'Test Cycle 2', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+            { title: 'Learn Cycle 2', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+            { title: 'Design Cycle 3', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+            { title: 'Build Cycle 3', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+            { title: 'Test Cycle 3', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+            { title: 'Learn Cycle 3', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
           ]
         },
         {
-          title: 'Module 2: Full Cycle',
+          title: 'Module 2: Design & Build',
           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: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' }
           ]
         },
         {
-          title: 'Module 3: Design & Build Only',
+          title: 'Module 3: Design 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.' }
+            { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+          ]
+        },
+        {
+          title: 'Module 4: Design Only',
+          phases: [
+            { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
           ]
         }
       ]
     };
+  },
+  watch: {
+    selectedModule() {
+      this.selectedPhase = 0; // Reset phase selection when module changes
+    }
   }
 };
 </script>
@@ -75,7 +101,8 @@ export default {
   text-align: center;
 }
 
-.module-dropdown {
+.module-dropdown,
+.phase-dropdown {
   padding: 10px;
   font-size: 16px;
   border: 1px solid #3498db;
@@ -84,7 +111,8 @@ export default {
   transition: border-color 0.3s ease;
 }
 
-.module-dropdown:focus {
+.module-dropdown:focus,
+.phase-dropdown:focus {
   border-color: #2980b9;
 }
 
@@ -92,8 +120,12 @@ export default {
   margin-top: 20px;
 }
 
-.phase {
+.phase-selector {
   margin-bottom: 20px;
+}
+
+.phase {
+  margin-top: 20px;
   padding: 15px;
   border: 1px solid #ddd;
   border-radius: 5px;