mulmocast-vision 0.0.1

package/assets/html2/funnelPage.html

@@ -0,0 +1,53 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Funnel</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Funnel Visualization -->
+  <div class="max-w-4xl mx-auto">
+    <div class="space-y-4">
+      {% for st in stages %} {% set width_percent = 100 - (loop.index0 * 15) %}
+      <div class="flex justify-center">
+        <div
+          class="bg-gradient-to-r from-blue-{{ 600 - (loop.index0 * 100) }} to-indigo-{{ 700 - (loop.index0 * 100) }} rounded-2xl shadow-xl text-white transform hover:scale-105 transition-all duration-300"
+          style="width: {{ width_percent }}%; min-width: 300px;"
+        >
+          <div class="p-8 text-center">
+            <div class="flex items-center justify-center mb-4">
+              <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-4">
+                <span class="text-2xl font-bold">{{ loop.index }}</span>
+              </div>
+              <h3 class="text-2xl font-bold">{{st.label}}</h3>
+            </div>
+            <div class="text-4xl font-black mb-2">{{st.value}}</div>
+            {% if not loop.last %}
+            <div class="text-sm opacity-75">↓ Next Stage</div>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+
+  <!-- Funnel Summary -->
+  <div class="text-center mt-16">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+      <div class="bg-white rounded-2xl shadow-lg p-6">
+        <div class="text-3xl font-bold text-emerald-600 mb-2">{{stages|length}}</div>
+        <div class="text-gray-600 font-semibold">Total Stages</div>
+      </div>
+      <div class="bg-white rounded-2xl shadow-lg p-6">
+        <div class="text-3xl font-bold text-blue-600 mb-2">{{stages[0].value if stages}}</div>
+        <div class="text-gray-600 font-semibold">Top of Funnel</div>
+      </div>
+      <div class="bg-white rounded-2xl shadow-lg p-6">
+        <div class="text-3xl font-bold text-indigo-600 mb-2">{{stages[-1].value if stages}}</div>
+        <div class="text-gray-600 font-semibold">Bottom of Funnel</div>
+      </div>
+    </div>
+  </div>
+</div>

package/assets/html2/ganttSimplePage.html

@@ -0,0 +1,56 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header Section -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Gantt Chart</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Task Cards Layout -->
+  <div class="space-y-6">
+    {% for t in tasks %}
+    <div class="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl p-8 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+      <div class="flex items-center justify-between">
+        <!-- Task Info -->
+        <div class="flex items-center space-x-6">
+          <!-- Task Icon -->
+          <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center flex-shrink-0">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+              ></path>
+            </svg>
+          </div>
+
+          <!-- Task Details -->
+          <div>
+            <h3 class="text-2xl font-bold mb-2">{{t.name}}</h3>
+            <div class="flex items-center space-x-6 text-lg">
+              <div class="flex items-center space-x-2">
+                <svg class="w-5 h-5 text-white opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+                <span class="text-white opacity-90">Start: {{t.start}}</span>
+              </div>
+              <div class="flex items-center space-x-2">
+                <svg class="w-5 h-5 text-white opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+                  ></path>
+                </svg>
+                <span class="text-white opacity-90">End: {{t.end}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</div>

package/assets/html2/geMcKinseyMatrixPage.html

@@ -0,0 +1,43 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="text-center mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6 mx-auto"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">GE–McKinsey Matrix</h1>
+    <div class="w-32 h-0.5 bg-gray-300 mx-auto"></div>
+  </div>
+
+  <div class="max-w-7xl mx-auto space-y-12">
+    <!-- Matrix Grid -->
+    <div class="grid grid-cols-3 gap-6">
+      {% set matrixColors = [ "from-emerald-500 to-green-600", "from-amber-500 to-orange-600", "from-red-500 to-rose-600" ] %} {% for i in [0,1,2] %}
+      <div class="bg-gradient-to-br {{matrixColors[i]}} rounded-2xl p-8 text-white shadow-xl min-h-[150px] flex items-center justify-center">
+        <span class="text-2xl font-bold">{{["High", "Medium", "Low"][i]}} Priority</span>
+      </div>
+      {% endfor %}
+    </div>
+
+    <!-- Placements -->
+    <section class="bg-gradient-to-br from-indigo-500 to-blue-600 rounded-3xl p-10 text-white shadow-2xl">
+      <div class="flex items-center mb-8">
+        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-6">
+          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h2 class="text-4xl font-bold">Matrix Placements</h2>
+      </div>
+      <ul class="space-y-4 text-xl">
+        {% for p in placements %}
+        <li class="flex items-start">
+          <span class="w-3 h-3 bg-white rounded-full mt-2 mr-4 flex-shrink-0"></span
+          ><span class="font-light">{{p.name}} (Row {{p.row+1}}, Column {{p.col+1}})</span>
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/assets/html2/heatmapPlaceholderPage.html

@@ -0,0 +1,131 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-12">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Heatmap Analysis</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <div class="max-w-7xl mx-auto space-y-8">
+    <!-- Chart Integration Area -->
+    <div class="bg-white rounded-2xl p-10 shadow-2xl">
+      <div class="flex items-center gap-4 mb-8">
+        <div class="w-16 h-16 bg-gradient-to-br from-red-500 to-rose-600 rounded-2xl flex items-center justify-center">
+          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
+            />
+          </svg>
+        </div>
+        <div>
+          <h2 class="text-3xl font-bold text-gray-900">Interactive Heatmap</h2>
+          <p class="text-gray-600 mt-2">Data visualization with intensity mapping</p>
+        </div>
+      </div>
+
+      <!-- Placeholder Chart Area -->
+      <div class="bg-gradient-to-br from-gray-50 to-blue-50 rounded-2xl p-8 border-2 border-dashed border-gray-300 mb-8">
+        <div class="flex flex-col items-center justify-center py-16">
+          <div class="w-24 h-24 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6">
+            <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2-2V7a2 2 0 012-2h2a2 2 0 002-2V1m0 18v-6a2 2 0 012-2h2a2 2 0 012-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v2m0 14v-6a2 2 0 00-2-2H9a2 2 0 00-2-2V7a2 2 0 012-2h2a2 2 0 002 2v2"
+              />
+            </svg>
+          </div>
+          <h3 class="text-2xl font-bold text-gray-700 mb-2">Heatmap Visualization</h3>
+          <p class="text-gray-600 text-center">This area will contain an interactive heatmap chart</p>
+        </div>
+      </div>
+
+      <!-- Data Table -->
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="bg-gray-50">
+              <th class="p-4 text-left text-lg font-semibold text-gray-900 border-b border-gray-200"></th>
+              {% for c in cols %}
+              <th class="p-4 text-center text-lg font-semibold text-gray-900 border-b border-gray-200">
+                <div class="flex flex-col items-center gap-2">
+                  <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center text-white font-bold text-sm">
+                    {{loop.index}}
+                  </div>
+                  <span>{{c}}</span>
+                </div>
+              </th>
+              {% endfor %}
+            </tr>
+          </thead>
+          <tbody>
+            {% for r in rows %}
+            <tr class="hover:bg-gray-50 transition-colors duration-200">
+              <td class="p-4 font-semibold text-gray-900 border-b border-gray-100">
+                <div class="flex items-center gap-3">
+                  <div class="w-8 h-8 bg-gradient-to-br from-gray-400 to-gray-600 rounded-lg flex items-center justify-center text-white font-bold text-sm">
+                    {{loop.index}}
+                  </div>
+                  {{r}}
+                </div>
+              </td>
+              {% for v in values[loop.index0] %}
+              <td class="p-4 text-center border-b border-gray-100">
+                <div
+                  class="inline-flex items-center justify-center w-12 h-12 rounded-xl text-lg font-bold text-white {% if v|float >= 0.8 %}bg-gradient-to-br from-red-500 to-rose-600 {% elif v|float >= 0.6 %}bg-gradient-to-br from-amber-500 to-orange-600 {% elif v|float >= 0.4 %}bg-gradient-to-br from-blue-500 to-indigo-600 {% elif v|float >= 0.2 %}bg-gradient-to-br from-emerald-500 to-green-600 {% else %}bg-gradient-to-br from-gray-400 to-gray-600{% endif %}"
+                >
+                  {{v}}
+                </div>
+              </td>
+              {% endfor %}
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Heatmap Legend -->
+    <div class="bg-white rounded-2xl p-8 shadow-xl">
+      <div class="flex items-center gap-4 mb-6">
+        <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-violet-600 rounded-xl flex items-center justify-center">
+          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a4 4 0 004-4V5z"
+            />
+          </svg>
+        </div>
+        <h3 class="text-2xl font-bold text-gray-900">Intensity Scale</h3>
+      </div>
+      <div class="grid grid-cols-5 gap-4">
+        <div class="bg-gradient-to-br from-red-500 to-rose-600 rounded-xl p-4 text-white text-center">
+          <p class="text-sm text-red-100 mb-1">Highest</p>
+          <p class="text-lg font-bold">0.8-1.0</p>
+        </div>
+        <div class="bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl p-4 text-white text-center">
+          <p class="text-sm text-amber-100 mb-1">High</p>
+          <p class="text-lg font-bold">0.6-0.8</p>
+        </div>
+        <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl p-4 text-white text-center">
+          <p class="text-sm text-blue-100 mb-1">Medium</p>
+          <p class="text-lg font-bold">0.4-0.6</p>
+        </div>
+        <div class="bg-gradient-to-br from-emerald-500 to-green-600 rounded-xl p-4 text-white text-center">
+          <p class="text-sm text-green-100 mb-1">Low</p>
+          <p class="text-lg font-bold">0.2-0.4</p>
+        </div>
+        <div class="bg-gradient-to-br from-gray-400 to-gray-600 rounded-xl p-4 text-white text-center">
+          <p class="text-sm text-gray-100 mb-1">Lowest</p>
+          <p class="text-lg font-bold">0.0-0.2</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/assets/html2/hypothesisPage.html

@@ -0,0 +1,100 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-12">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Hypothesis</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <div class="max-w-6xl mx-auto space-y-8">
+    <!-- Hypothesis Statement -->
+    <div class="bg-gradient-to-br from-purple-500 to-violet-600 rounded-3xl p-10 text-white shadow-2xl">
+      <div class="flex items-center gap-4 mb-6">
+        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center">
+          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+            />
+          </svg>
+        </div>
+        <h2 class="text-3xl font-bold">Hypothesis Statement</h2>
+      </div>
+      <div class="bg-white bg-opacity-20 rounded-2xl p-8 backdrop-blur-sm">
+        <p class="text-2xl leading-relaxed whitespace-pre-wrap font-medium">{{hypothesis}}</p>
+      </div>
+    </div>
+
+    <!-- Structured Analysis -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <!-- Implications -->
+      <div class="bg-gradient-to-br from-emerald-500 to-green-600 rounded-3xl p-8 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+        <div class="flex items-center gap-4 mb-6">
+          <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+          </div>
+          <h3 class="text-2xl font-bold">Implications</h3>
+        </div>
+
+        <div class="space-y-3">
+          {% for i in implications %}
+          <div class="bg-white bg-opacity-20 rounded-xl p-4 backdrop-blur-sm hover:bg-opacity-30 transition-all duration-300">
+            <div class="flex items-start gap-3">
+              <div class="w-6 h-6 bg-white bg-opacity-30 rounded-lg flex items-center justify-center mt-0.5">
+                <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <p class="text-white font-medium leading-relaxed">{{i}}</p>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+
+      <!-- Next Steps -->
+      <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-3xl p-8 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+        <div class="flex items-center gap-4 mb-6">
+          <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+            </svg>
+          </div>
+          <h3 class="text-2xl font-bold">Next Steps</h3>
+        </div>
+
+        <div class="space-y-3">
+          {% for n in nextSteps %}
+          <div class="bg-white bg-opacity-20 rounded-xl p-4 backdrop-blur-sm hover:bg-opacity-30 transition-all duration-300">
+            <div class="flex items-start gap-3">
+              <div class="w-6 h-6 bg-white bg-opacity-30 rounded-lg flex items-center justify-center mt-0.5">
+                <span class="text-white font-bold text-xs">{{loop.index}}</span>
+              </div>
+              <p class="text-white font-medium leading-relaxed">{{n}}</p>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+
+    <!-- Validation Framework -->
+    <div class="bg-white rounded-2xl p-10 shadow-2xl">
+      <div class="flex items-center gap-4 mb-6">
+        <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-violet-600 rounded-2xl flex items-center justify-center">
+          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+        <h3 class="text-3xl font-bold text-gray-900">Validation Framework</h3>
+      </div>
+      <p class="text-gray-600 text-lg leading-relaxed">
+        Test this hypothesis through the outlined next steps to validate assumptions and measure the impact of proposed implications on business outcomes.
+      </p>
+    </div>
+  </div>
+</div>

package/assets/html2/innovationFunnelPage.html

@@ -0,0 +1,61 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-12">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Innovation Funnel</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Funnel Stages -->
+  <div class="max-w-7xl mx-auto">
+    <div class="grid grid-cols-{{stages|length}} gap-6">
+      {% for s in stages %}
+      <div class="relative group">
+        <!-- Stage Card -->
+        <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-3xl p-8 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+          <!-- Stage Icon -->
+          <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mb-6">
+            <div class="w-8 h-8 bg-white bg-opacity-30 rounded-lg flex items-center justify-center">
+              <span class="text-white font-bold text-sm">{{loop.index}}</span>
+            </div>
+          </div>
+
+          <!-- Stage Title -->
+          <h2 class="text-2xl font-bold mb-4 leading-tight">{{s}}</h2>
+
+          <!-- Stage Count -->
+          {% if counts %}
+          <div class="bg-white bg-opacity-20 rounded-xl p-4 backdrop-blur-sm">
+            <p class="text-sm text-blue-100 mb-1">Projects</p>
+            <p class="text-3xl font-bold">{{counts[loop.index0]}}</p>
+          </div>
+          {% endif %}
+        </div>
+
+        <!-- Funnel Arrow (except for last stage) -->
+        {% if not loop.last %}
+        <div class="absolute top-1/2 -right-3 transform -translate-y-1/2 z-10">
+          <div class="w-6 h-6 bg-blue-600 rotate-45 border-2 border-white shadow-lg"></div>
+        </div>
+        {% endif %}
+      </div>
+      {% endfor %}
+    </div>
+
+    <!-- Funnel Flow Description -->
+    <div class="mt-16 bg-white rounded-2xl p-8 shadow-lg">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center">
+          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+          </svg>
+        </div>
+        <h3 class="text-xl font-semibold text-gray-900">Innovation Pipeline Flow</h3>
+      </div>
+      <p class="text-gray-600 leading-relaxed">
+        Each stage represents a critical checkpoint in the innovation process, with decreasing numbers of projects as ideas are refined and validated through
+        rigorous evaluation criteria.
+      </p>
+    </div>
+  </div>
+</div>

package/assets/html2/integrationPlanPage.html

@@ -0,0 +1,61 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header Section -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Integration Plan</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Integration Phases Layout -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+    <!-- Workstreams Card -->
+    <div class="bg-gradient-to-br from-purple-600 to-violet-700 rounded-3xl p-10 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+      <!-- Workstreams Icon -->
+      <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mb-8">
+        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+          ></path>
+        </svg>
+      </div>
+
+      <h2 class="text-3xl font-bold mb-8">Workstreams</h2>
+      <div class="space-y-4">
+        {% for w in workstreams %}
+        <div class="flex items-start space-x-4">
+          <div class="w-3 h-3 bg-white bg-opacity-60 rounded-full mt-2 flex-shrink-0"></div>
+          <span class="text-xl leading-relaxed">{{w}}</span>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+
+    <!-- Milestones Card -->
+    <div class="bg-gradient-to-br from-emerald-600 to-green-700 rounded-3xl p-10 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+      <!-- Milestones Icon -->
+      <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mb-8">
+        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+          ></path>
+        </svg>
+      </div>
+
+      <h2 class="text-3xl font-bold mb-8">Milestones</h2>
+      <div class="space-y-4">
+        {% for m in milestones %}
+        <div class="flex items-start space-x-4">
+          <div class="w-3 h-3 bg-white bg-opacity-60 rounded-full mt-2 flex-shrink-0"></div>
+          <span class="text-xl leading-relaxed">{{m}}</span>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</div>

package/assets/html2/issueTreePage.html

@@ -0,0 +1,97 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-12">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Issue Tree Analysis</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <div class="max-w-7xl mx-auto">
+    <!-- Root Issue -->
+    <div class="flex justify-center mb-16">
+      <div class="bg-gradient-to-br from-red-500 to-rose-600 rounded-3xl p-10 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+        <div class="flex items-center gap-4 mb-4">
+          <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              />
+            </svg>
+          </div>
+          <div>
+            <p class="text-red-100 text-sm uppercase tracking-wide">Root Issue</p>
+            <h2 class="text-3xl font-bold">{{rootIssue}}</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Issue Branches -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      {% for branche in branches %}
+      <div class="relative">
+        <!-- Connection Line -->
+        {% if not loop.first %}
+        <div class="absolute -top-8 left-1/2 w-0.5 h-8 bg-gray-300 transform -translate-x-1/2"></div>
+        {% endif %}
+
+        <!-- Issue Branch Card -->
+        <div class="bg-gradient-to-br from-amber-500 to-orange-600 rounded-3xl p-8 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+          <!-- Branch Header -->
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center">
+              <div class="w-8 h-8 bg-white bg-opacity-30 rounded-lg flex items-center justify-center">
+                <span class="text-white font-bold text-lg">{{loop.index}}</span>
+              </div>
+            </div>
+            <div>
+              <p class="text-amber-100 text-sm uppercase tracking-wide">Issue Branch</p>
+              <h3 class="text-2xl font-bold">Branch {{loop.index}}</h3>
+            </div>
+          </div>
+
+          <!-- Issue Items -->
+          <div class="space-y-3">
+            {% for item in branche %}
+            <div class="bg-white bg-opacity-20 rounded-xl p-4 backdrop-blur-sm hover:bg-opacity-30 transition-all duration-300">
+              <div class="flex items-center gap-3">
+                <div class="w-6 h-6 bg-white bg-opacity-30 rounded-lg flex items-center justify-center">
+                  <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <p class="text-white font-medium leading-relaxed">{{item}}</p>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+
+    <!-- Analysis Summary -->
+    <div class="mt-16 bg-white rounded-2xl p-10 shadow-2xl">
+      <div class="flex items-center gap-4 mb-6">
+        <div class="w-16 h-16 bg-gradient-to-br from-red-500 to-rose-600 rounded-2xl flex items-center justify-center">
+          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+          </svg>
+        </div>
+        <h3 class="text-3xl font-bold text-gray-900">Issue Analysis</h3>
+      </div>
+      <p class="text-gray-600 text-lg leading-relaxed">
+        This issue tree systematically breaks down the root problem into its contributing factors, enabling structured problem-solving and targeted resolution
+        strategies.
+      </p>
+    </div>
+  </div>
+</div>