fix cycles

docs/.vuepress/components/IterativeCycle.vue

+iteration cycle page working
 <template>
   <div class="iterative-cycle">
     <!-- Module Selector Tabs -->
@@ -19,16 +20,14 @@
         <button @click="toggleCycle(index)" class="cycle-button">
           {{ cycle.title }}
         </button>
-        <transition name="fade">
-          <div v-if="isCycleOpen(index)" class="cycle-details">
-            <h3>Phases:</h3>
-            <ul>
-              <li v-for="(phase, phaseIndex) in cycle.phases" :key="phaseIndex">
-                <strong>{{ phase.title }}:</strong> {{ phase.description }}
-              </li>
-            </ul>
-          </div>
-        </transition>
+        <div v-if="isCycleOpen(index)" class="cycle-details">
+          <h3>Phases:</h3>
+          <ul>
+            <li v-for="(phase, phaseIndex) in cycle.phases" :key="phaseIndex">
+              <strong>{{ phase.title }}:</strong> {{ phase.description }}
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
@@ -38,8 +37,8 @@
 export default {
   data() {
     return {
-      selectedModule: 0,
-      openCycles: [],
+      selectedModule: 0, // Default module selected
+      openCycles: [], // Track which cycles are open
       modules: [
         {
           title: 'Module 1: DBTL Cycles',
@@ -50,7 +49,7 @@ export default {
                 { 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: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
               ]
             },
             {
@@ -59,7 +58,16 @@ export default {
                 { 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: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+              ]
+            },
+            {
+              title: 'Cycle 3',
+              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.' },
               ]
             }
           ]
@@ -75,6 +83,28 @@ export default {
               ]
             }
           ]
+        },
+        {
+          title: 'Module 3: Design Only',
+          cycles: [
+            {
+              title: 'Cycle 1',
+              phases: [
+                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+              ]
+            }
+          ]
+        },
+        {
+          title: 'Module 4: Design Only',
+          cycles: [
+            {
+              title: 'Cycle 1',
+              phases: [
+                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+              ]
+            }
+          ]
         }
       ]
     };
@@ -92,7 +122,7 @@ export default {
     },
     selectModule(index) {
       this.selectedModule = index;
-      this.openCycles = [];
+      this.openCycles = []; // Close all cycles when switching modules
     }
   }
 };
@@ -152,7 +182,7 @@ export default {
   width: 100%;
   padding: 10px;
   font-size: 16px;
-  background-color: #a3c88a; /* Button color */
+  background-color: #a3c88a; /* Updated button color */
   color: white;
   border: none;
   border-radius: 5px;
@@ -173,13 +203,7 @@ export default {
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter, .fade-leave-to {
-  opacity: 0;
-}
-
+/* Typography */
 h2 {
   color: #2c3e50;
   text-align: center;
@@ -197,4 +221,4 @@ ul {
 li {
   color: #555;
 }
-</style>
+</style>
\ No newline at end of file